/* DEFAULT */
:root {
    --default-logo-icon: url(../images/favicon_32.png);
    --default-logo-icon-hover: url(../images/favicon_32_white.png);
    --default-versaBoard-icon: url(../../images/favicon_32.png);
    --default-background-color: #fff;
    --default-inactive-background-color: #fff;
    --default-border-radius: 1rem;
    --default-box-shadow: 8px 8px 24px rgba(0,0,0,0.3);
    --default-lockout-background-color: #616161;
    --default-font-family: Geist, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --default-font-size: 1.3rem;
    --default-line-height: 1.5;
    --default-font-color: #565656;
    --default-font-invert-color: #f0f0f0;
    --default-font-error-color: #ff0000;
    --default-font-style: normal;
    --default-font-weight: normal;
    --default-link-color: #565656;
    --default-link-hover-color: #878787;
    --default-link-background-color: transparent;
    --default-link-background-hover-color: transparent;
    --default-link-current-color: rgb(0,192,0);
    --default-link-unassigned-color: rgb(2,15,120);
    --default-link-unread-color: rgb(192,0,192);
    --default-suggestion-font-color: #999;
    --default-suggestion-background-color: #fff;
    --default-suggestion-border-color: #ddd;
    --default-select-arrow-color: #b0b0b0;
    --default-header-font-color: #565656;
    --default-header-background-color: #fff;
    --default-header-border-color: #ddd;
    --default-heading1-color: #565656;
    --default-heading1a-color: #15428b;
    --default-heading1-background-color: #f0f0f0;
    --default-heading2-color: #565656;
    --default-heading2a-color: #94c7ed;
    --default-heading2-background-color: #3e4a74;
    --default-heading3-color: #11416b;
    --default-heading3a-color: #565656;
    --default-heading3-background-color: #f0f0f0;
    --default-footer-menu-color: var(--default-link-color);
    --default-footer-menu-hover-color: var(--default-link-hover-color);
    --default-image-filter: none;
    --default-image-hover-filter: none;
    --default-icon-size: 2.2rem;
    --default-icon-color: #767676;
    --default-icon-click-color: #565656;
    --default-icon-gradient: -webkit-linear-gradient(#767676, #404040);
    --default-icon-hover-gradient: -webkit-linear-gradient(#fff, #c4c4c4);
    --default-icon-invert-color: #fff;
    --default-icon-hover-color: #fff;
    --default-icon-background-color: #f0f0f0;
    --default-icon-background-hover-color: #2AABE2;
    --default-input-color: #565656;
    --default-input-placeholder-color: #bbb;
    --default-input-border: solid 1px #ddd;
    --default-input-border-radius: 0.5rem;
    --default-input-background-color: #fff;
    --default-input-readonly-color: #a0a0a0;
    --default-input-readonly-background-color: #f8f8f8;
    --default-input-disabled-color: #a0a0a0;
    --default-input-disabled-background-color: #f8f8f8;
    --default-input-outline: #efefef;
    --default-quick-search-color: #565656;
    --default-quick-search-placeholder-color: #bbb;
    --default-quick-search-border: solid 1px #ddd;
    --default-quick-search-background-color: #ededed;
    --default-nav-font-color: #565656;
    --default-nav-background-color: #fff;
    --default-nav-border-color: #ddd;
    --default-system-menu-content-background-color: #f0f0f0;
    --default-system-menu-footer-background-color: #828282;
    --default-system-menu-text-color: #d7d7d7;
    --default-system-menu-background-color: #565656;
    --default-system-menu-border-color: #949494;
    --default-system-menu-text-hover-color: #f0f0f0;
    --default-system-menu-background-hover-color: #696969;
    --default-system-menu-border-hover-color: #3b3b3b;
    --default-system-menu-text-selected-color: #f0f0f0;
    --default-system-menu-background-selected-color: #565656;
    --default-system-menu-border-selected-color: #ddd;
    /* versaCRM */
    --crm-active-font-color: #d08309;
    --crm-active-font-weight: bold;
    --crm-inactive-font-color: #676767;
    --crm-inactive-font-weight: normal;
    --crm-endcontract-font-color: #FF0000;
    --crm-endcontract-font-weight: normal;
    --crm-contracted-font-color: #1d8e07;
    --crm-contracted-font-weight: normal;
    --crm-nocontract-font-color: #333;
    --crm-nocontract-font-weight: normal;
    /* versaPanel */
    --vp-border-color: #f3f3f3;
    --vp-border-width: 1px;
    --vp-background-color: var(--default-background-color);
    --vp-resizer-size: 4px;
    --vp-resizer-border-color: #f3f3f3;
    --vp-resizer-background-color: var(--default-background-color);
    --vp-resizer-background-hover-color: #c3c3c3;
    --vp-statusbar-text-color: #f0f0f0;
    --vp-statusbar-text-hover-color: #565656;
    --vp-statusbar-background-color: #fff;
    --vp-statusbar-background-hover-color: #878787;
    --vp-statusbar-border-color: #ededed;
    /* versaWins */
    --vw-title-color: #fff;
    --vw-title-hover-color: #fff;
    --vw-border-width: 1px;
    --vw-border-radius: 1rem;
    --vw-border-color: #646464;
    --vw-border-hover-color: #878787;
    --vw-border-active-color: #7e7e7e;
    /* versaGrid */
    --vg-header-color: #737373;
    --vg-header-background-color: #f0f0f0;
    --vg-header-border-color: #ddd;
    --vg-header-border-width: 1px;
    --vg-row-color: #565656;
    --vg-row-background-color: #fff;
    --vg-row-alt-color: #565656;
    --vg-row-alt-background-color: #fff;
    --vg-row-select-color: #f0f0f0;
    --vg-row-select-background-color: #bfbfbf;
    --vg-row-hover-color: #242424;
    --vg-row-hover-background-color: #f5f5f5;
    --vg-row-border-color: #ededed;
    --vg-row-border-width: 1px;
    --vg-cell-border-color: transparent;
    --vg-cell-border-width: 0;
    --vg-container-border: solid 1px #d5d5d5;
    /* versaBoard */
    --vb-title-color: #737373;
    --vb-title-background-color: #f0f0f0;
    --vb-heading-color: #15428b;
    --vb-heading-background-color: #f0f0f0;
    --vb-footer-color: #737373;
    --vb-footer-background-color: #f0f0f0;
    --vb-border-color: #ededed;
    /* versaChat */
    --speechbubble1-background-color: #fffee7;
    --speechbubble1-border-color: oklch(from var(--speechbubble1-background-color) calc(l - 0.15) c h);
    --speechbubble1-font-color: oklch(from var(--speechbubble1-background-color) calc((l - 0.5) * -1000) 0 0);
    --speechbubble2-background-color: #def4fa;
    --speechbubble2-border-color: oklch(from var(--speechbubble2-background-color) calc(l - 0.15) c h);
    --speechbubble2-font-color: oklch(from var(--speechbubble2-background-color) calc((l - 0.5) * -1000) 0 0);
    --replybubble-foreground-color: #f1f1f1;
    --replybubble-background-color: #232323;
    --replybubble-border-color: #3c3c3c;
    --replybubble-highlight-border-color: #07e527;
    --replybubble-close-color: #bebebe;
    --versachat-link-color: #565656;
    /* versaCalendar */
    --vc-header-color: #424242;
    --vc-header-background-color: #fff;
    --vc-weekday-color: #fff;
    --vc-weekday-background-color: #424242;
    --vc-today-color: #3985e3;
    --vc-today-background-color: #cfe4fa;
    --vc-selected-color: #242424;
    --vc-selected-background-color: #f2da8a;
    --vc-noday-background-color: #efefef;
    --vc-day-border-color: #e0e0e0;
    /* Context Menu */
    --cm-font-color: var(--default-font-color);
    --cm-font-hover-color: var(--default-font-color);
    --cm-icon-background-color: #d7d7d7;
    --cm-background-color: var(--default-background-color);
    --cm-background-hover-color: rgba(232,232,232,0.4);
    --cm-border: solid 1px #c8c8c8;
    --cm-divider-color: #c8c8c8;
    /* Buttons */
    --button-text-color: #3d3d3d;
    --button-hover-text-color: #f0f0f0;
    --button-color: #e5e5e5;
    --button-hover-color: #9d9d9d;
    --button-border-color: #bababa;
    --button-hover-border-color: #676767;
    --button-disabled-color: #b1b1b1;
    --button-min-height: 2.5rem;
    --button-min-width: 1rem;
    /* Toolbar Buttons */
    --toolbar-button-text-color: var(--default-font-color);
    --toolbar-button-hover-text-color: #f0f0f0;
    --toolbar-button-icon-gradient: -webkit-linear-gradient(var(--default-font-color), #2b2b2b);
    --toolbar-button-icon-hover-gradient: -webkit-linear-gradient(#f0f0f0, #c4c4c4);
    --toolbar-button-color: transparent;
    --toolbar-button-hover-color: #2AABE2;
    --toolbar-button-border-color: transparent;
    --toolbar-button-hover-border-color: #0d87bb;
    --toolbar-button-spacer-color: #cfcfcf;
    --toolbar-ruler-color: #bbd7fc;
    --toolbar-image-filter: none;
    --toolbar-image-hover-filter: brightness(5) contrast(5) hue-rotate(45deg);
    /* Tabs */
    --tab-border-color: #d5d5d5;
    --tab-border-radius: calc(var(--default-border-radius) / 2);
    --tab-highlight-border-color: #2AABE2;
    --tabon-text-color: #3b3b3b;
    --taboff-text-color: #565656;
    --tabalert-text-color: #f0f0f0;
    --tabon-background-color: #fff;
    --taboff-background-color: #f9f9f9;
    --tabalert-background-color: #2AABE2;
    /* CodeMirror */
    --codeMirror-gutter-background-color: #efefef;
    --codeMirror-gutter-border: solid 1px #d7d7d7;
    --codeMirror-gutter-marker-color: #ffee80;
    --codeMirror-gutter-linenum-color: #aeaeae;
    --codeMirror-selection-background-color: #e9cf36;
    --codeMirror-selection-line-background-color: #5F4126;
    --codeMirror-comment-color: #0c8020;
    --codeMirror-number-color: #6e7781;
    --codeMirror-property-color: #a75ae4;
    --codeMirror-keyword-color: #0072c6;
    --codeMirror-operator-color: #333;
    --codeMirror-qualifier-color: #d45a20;
    --codeMirror-string-color: #400f6d;
    --codeMirror-atom-color: #b90d71;
    --codeMirror-meta-color: #1d1bbe;
    --codeMirror-variable1-color: #565656;
    --codeMirror-variable2-color: #737373;
    --codeMirror-variable3-color: #333333;
    --codeMirror-special-color: #c37c12;
    --codeMirror-attribute-color: #2071cc;
    --codeMirror-link-color: #845dc4;
    --codeMirror-error-color: #ec3225;
    --codeMirror-bracket-color: #737373;
    --codeMirror-cursor-color: #333;
    --codeMirror-active-line-color: #002D57;
    /* Notepad */
    --np-header-text-color: #f0f0f0;
    --np-header-background-color: #0072c6;
    --np-border-color: #7ec2f5;
    --np-background-color: #0072c6;
    /* Reporting */
    --vr-panel-background-color: var(--default-background-color);
    --vr-title-font-color: var(--default-header-font-color);
    --vr-title-background-color: var(--default-header-background-color);
    --vr-header-font-color: var(--default-heading3-color);
    --vr-header-background-color: var(--default-heading3-background-color);
    --vr-footer-font-color: var(--vp-statusbar-text-color);
    --vr-footer-background-color: var(--vp-statusbar-background-color);
    /* Miscellaneous */
    --panel-property-width: 36rem;
    --panel-border-color: var(--tab-border-color);
    --panel-background-color: #f9f9f9;
    --dialog-background-color: #ededed;
    --hourglass-color: #69c4ea;
    --system-panel-text-color: #3b3b3b;
    --system-panel-background-color: #fff;
    --system-panel-border-color: transparent;
    --system-divider-color: #ddd;
    --cal-num-weeks: 5;
    /* Scrollbars */
    --scrollbar-size: 0.65rem;
    --scrollbar-track-color: rgba(229, 229, 229, 0.8);
    --scrollbar-thumb-color: rgba(173, 173, 173, 0.9);
    --scrollbar-thumb-hover-color: rgba(125, 125, 125, 0.6);
    --scrollbar-arrow-color: rgb(16, 16, 16, 0);
    --scrollbar-arrow-hover-color: rgb(74, 74, 74, 0.7);
    --scrollbar-arrow-background-color: rgba(194, 195, 201, 0.9);
}

/* 
    Add extra customisation here 
    For further extended badge colors
    Customise select arrow color
*/
select:not([size]), select[size="1"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23565656' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.ms-parent > button.ms-choice > div {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23565656' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Start Record Status */
/* New */
div[data-statusid="1"] span.badge2 {
    color: #03611e !important;
    background-color: #70ff9a !important;
    border: solid 1px #70ff9a !important;
}
/* Open */
div[data-statusid="2"] span.badge2 {
    color: #03611e !important;
    background-color: #70ff9a !important;
    border: solid 1px #70ff9a !important;
}
/* Closed */
div[data-statusid="3"] span.badge2 {
    color: #a7050c !important;
    background-color: #ffccce !important;
    border: solid 1px #ffccce !important;
}
/* Pending */
div[data-statusid="4"] span.badge2 {
    color: #003645 !important;
    background-color: #70cce5 !important;
    border: solid 1px #70cce5 !important;
}
/* Stalled */
div[data-statusid="5"] span.badge2 {
    color: #125abd !important;
    background-color: #b8d0f1 !important;
    border: solid 1px #b8d0f1 !important;
}
/* Dead */
div[data-statusid="6"] span.badge2 {
    color: #3b3b3b !important;
    background-color: #b5b5b5 !important;
    border: solid 1px #b5b5b5 !important;
}
/* Re-Opened */
div[data-statusid="7"] span.badge2 {
    color: #3a4b06 !important;
    background-color: #1ef153 !important;
    border: solid 1px #1ef153 !important;
}
/* Dormant */
div[data-statusid="8"] span.badge2 {
    color: #8f0691 !important;
    background-color: #e182e2 !important;
    border: solid 1px #e182e2 !important;
}
/* Archived */
div[data-statusid="9"] span.badge2 {
    color: #3b3b3b !important;
    background-color: #b5b5b5 !important;
    border: solid 1px #b5b5b5 !important;
}
/* End Record Status */


.overlaytext {
    color: #fbfbfbd1 !important;
}

/* CSS loader - Gradient Bar */
.gradient-bar {
    width: 200px;
    height: 8px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%) !important;
    background-size: 200% 100%;
    border-radius: 10px;
    animation: gradient-move 2s ease-in-out infinite;
}

@keyframes gradient-move {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* CSS Loader - Bouncing Balls */
.bouncing-balls {
    display: flex;
    gap: 1.5rem;
}

    .bouncing-balls span {
        width: 1.6rem;
        height: 1.6rem;
        background: radial-gradient(circle at 30% 30%, #e576d8, #cb49cf, #b923cb) !important;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(167, 139, 250, 0.6);
        animation: bounce 0.6s ease-in-out infinite alternate;
    }

        .bouncing-balls span:nth-child(1) {
            animation-delay: 0s;
        }

        .bouncing-balls span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .bouncing-balls span:nth-child(3) {
            animation-delay: 0.4s;
        }

/* CSS Loader - Expanding Dots */
.expanding-dots {
    display: flex;
    gap: 1rem;
}

    .expanding-dots span {
        width: 1.25rem;
        height: 1.25rem;
        background: radial-gradient(circle at 30% 30%, #e576d8, #cb49cf, #b923cb) !important;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(52, 211, 153, 0.6);
        animation: expand 1.2s ease-in-out infinite;
    }

        .expanding-dots span:nth-child(1) {
            animation-delay: 0s;
        }

        .expanding-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .expanding-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes expand {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.8);
        opacity: 0.5;
    }
}

.windowClose, .windowCloseHover {
    background-image: url(../images/window_icons_hover.png);
    background-color: #c95656;
}