/* DEFAULT */
@import url('https://fonts.googleapis.com/css?family=Poppins:300&display=swap');

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url(../Content/Geist/v1.3.0/statics-ttf/Geist-Regular.ttf);
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    /*    src: url(../Content/material-symbols/material-symbols-outlined.woff2);*/
    src: url(../Content/material-symbols/material-symbols-rounded.woff2);
    /*src: url(../Content/material-symbols/material-symbols-sharp.woff2);*/
}

: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: #0072c6;
    --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-image-toolbarbutton-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-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-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: #696969;
    --default-system-menu-footer-background-color: #828282;
    --default-system-menu-text-color: #d7d7d7;
    --default-system-menu-background-color: #565656;
    --default-system-menu-border-color: #646464;
    --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: #fff;
    --vp-resizer-size: 4px;
    --vp-resizer-border-color: #f3f3f3;
    --vp-resizer-background-color: var(--default-background-color);
    --vp-resizer-background-hover-color: #565656;
    --vp-statusbar-background-color: #fff;
    --vp-statusbar-background-hover-color: #878787;
    --vp-statusbar-text-color: #f0f0f0;
    --vp-statusbar-text-hover-color: #565656;
    --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: #f0f0f0;
    --vg-row-hover-background-color: #2AABE2;
    --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-border-color: #cdcdcd;
    --speechbubble1-background-color: #fffee7;
    --speechbubble2-border-color: #6ecbe5;
    --speechbubble2-background-color: #def4fa;
    --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: #f0f0f0;
    --cm-icon-background-color: #e9eeee;
    --cm-background-color: #fff;
    --cm-background-hover-color: #b0b0b0;
    --cm-border: solid 1px #c8c8c8;
    --cm-divider-color: #c8c8c8;
    /* Buttons */
    --button-text-color: #3d3d3d;
    --button-hover-text-color: #f0f0f0;
    --button-color: #c8c8c8;
    --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: #565656;
    --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;
    /* 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: #264F78;
    --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: #c5c5c5;
    --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);
}

* {
    /* This is part of boot strap style, should include in default CSS to prevent bootstrap overriding */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 0.65rem;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size) !important;
    height: var(--scrollbar-size) !important;
    background-color: var(--scrollbar-track-color) !important;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color) !important;
    outline: none !important;
}

    *::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover-color) !important;
    }

/* Arrow Background Colour */
*::-webkit-scrollbar-button:vertical:start:decrement {
    width: var(--scrollbar-size) !important;
    height: var(--scrollbar-size) !important;
    background: linear-gradient(120deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(240deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(0deg, var(--scrollbar-arrow-background-color) 30%, var(--scrollbar-arrow-color) 31%) !important;
}

*::-webkit-scrollbar-button:vertical:end:increment {
    width: var(--scrollbar-size) !important;
    height: var(--scrollbar-size) !important;
    background: linear-gradient(300deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(60deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(180deg, var(--scrollbar-arrow-background-color) 30%, var(--scrollbar-arrow-color) 31%) !important;
}

*::-webkit-scrollbar-button:horizontal:end:increment {
    width: var(--scrollbar-size) !important;
    height: var(--scrollbar-size) !important;
    background: linear-gradient(210deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(330deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(90deg, var(--scrollbar-arrow-background-color) 30%, var(--scrollbar-arrow-color) 31%) !important;
}

*::-webkit-scrollbar-button:horizontal:start:decrement {
    width: var(--scrollbar-size) !important;
    height: var(--scrollbar-size) !important;
    background: linear-gradient(30deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(150deg, var(--scrollbar-arrow-background-color) 40%, var(--scrollbar-arrow-color) 41%), linear-gradient(270deg, var(--scrollbar-arrow-background-color) 30%, var(--scrollbar-arrow-color) 31%) !important;
}

*::-webkit-scrollbar-button:vertical:start:hover, *::-webkit-scrollbar-button:vertical:end:hover, *::-webkit-scrollbar-button:horizontal:start:hover, *::-webkit-scrollbar-button:horizontal:end:hover {
    background-color: var(--scrollbar-arrow-hover-color) !important;
}

body {
    visibility: hidden;
    opacity: 0;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    background-color: var(--default-background-color);
    -webkit-font-smoothing: antialiased;
}

    /* main.aspx */
    body.show-body {
        visibility: visible;
        opacity: 1;
        transition: all 3000ms ease-in-out;
    }

    body.hide-body {
        visibility: hidden;
        opacity: 0;
    }

    /* all others */
    body.unhide {
        visibility: visible;
        opacity: 1;
        transition: all 100ms ease-in-out 50ms;
    }


/* Start versaPanel Styling */
#vsrsContainer {
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
}
    #vsrsContainer.show-container {
        visibility: visible;
        opacity: 1.0;
        transition: all linear 3s;
    }

#mainHeader {
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr 42rem 1fr;
    min-height: 0;
    color: var(--default-header-font-color);
    border: 1px none transparent;
    border-bottom: 1px solid var(--vp-border-color);
    background-color: var(--default-nav-background-color);
    visibility: hidden;
}

#vsrsContainer.show-container #mainHeader {
    visibility: visible;
    animation: fadeSlideDown 2s ease-out 3s;
}

 @keyframes fadeSlideDown {
    from {
        min-height: 0;
        opacity: 0;
    }
    to {
        min-height: 50px;
        opacity: 1.0;
    }
 }

#panelContainer {
    display: flex;
    flex-wrap: nowrap;
    width: 100vw;
    height: calc(100vh - 12rem);
    padding: 0;
    margin: 0;
}

#panel4 { /* navpanel */
    position: relative;
    height: 100% !important;
    border-right: solid var(--vp-border-width) var(--vp-border-color) !important;
    visibility: hidden;
}
#vsrsContainer.show-container #panel4 {
    visibility: visible;
    animation: fadeSlideNav 2s ease-out 3.1s backwards;
}
    @keyframes fadeSlideNav {
        from {
            left: -50px;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1.0;
        }
    }

#panel4Vspacer {
    display: none;
    background-color: var(--vp-border-color);
}

#panelContainer1 {
    padding: 0 !important;
    background-color: var(--default-background-color);
}

#panelContainer2 {
    padding: 0 !important;
    visibility: hidden;
}
#vsrsContainer.show-container #panelContainer2 {
    visibility: visible;
    animation: fadeIn 3s ease-out 3.2s backwards;
}
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1.0;
        }
    }

#panelContainer2Panel2 {
    border-top: solid var(--vp-border-width) var(--vp-border-color);
}

.versabodyNoBorders {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    overflow: hidden; /* No Scrollbars */
}

.versapanel {
    position: relative;
    border: none;
    /*border-left: solid var(--vp-border-width) var(--vp-border-color) !important;*/
}

.versapanelContainer {
    border: none 0px #000000;
}

.versapanelVspacer {
    display: inline;
    float: left;
    width: var(--vp-resizer-size);
    height: 100%;
    border: none;
    border-left: solid 1px var(--vp-resizer-border-color);
    background-color: var(--vp-resizer-background-color);
    /*
	border-top: solid 1px transparent;
	border-right: solid 1px #dddddd;
	border-bottom: solid 1px transparent;
	border-left: solid 1px #dddddd;
    */
}

    .versapanelVspacer:hover {
        background-color: var(--vp-resizer-background-hover-color);
    }

.versapanelHspacer {
    display: inline;
    float: left;
    width: 100%;
    height: var(--vp-resizer-size);
    border: none;
    border-top: solid 1px var(--vp-resizer-border-color);
    background-color: var(--vp-resizer-background-color);
    /*
	border-top: solid 1px #dddddd;
	border-right: solid 1px transparent;
	border-bottom: solid 1px #dddddd;
	border-left: solid 1px transparent;
    */
}

    .versapanelHspacer:hover {
        background-color: var(--vp-resizer-background-hover-color);
    }

.versapanelResize {
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--default-background-color);
    width: 100%;
    height: 100%;
    padding: 15px;
    text-align: center;
    font-size: calc(var(--default-font-size) * 1.5);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    text-transform: none;
    overflow: hidden;
}

.versapanelMask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6000;
    width: 0;
    height: 0;
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: rgb(0,0,0);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    overflow: hidden;
    background-color: #EEE;
    opacity: 0.1;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10);
}

.versaResizerGrip {
    z-index: 6001;
    width: 3px;
    background-color: #484848;
}
/* End versaPanel Styling */

/* Status Bar */
.statusBar {
    z-index: 500;
    position: relative;
    display: grid;
    grid-template-columns: auto 3rem 21rem 1fr 1rem 3rem 12rem repeat(5, 2rem) 9.5rem;
    grid-column-gap: 0.5rem;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 3.1rem;
    color: var(--vp-statusbar-text-color);
    background-color: var(--vp-statusbar-background-color);
    border-top: solid 1px var(--vp-statusbar-border-color);
    border-collapse: collapse;
    -webkit-box-sizing: unset;
    -moz-box-sizing: unset;
    box-sizing: unset;
    visibility: hidden;
}
#vsrsContainer.show-container div.statusBar {
    visibility: visible;
    animation: fadeIn 1.5s ease-out 3.3s backwards;
}
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1.0;
        }
    }

    .statusBar > div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        gap: 0.5rem;
    }

.statusBarImg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    border-style: none;
    border-width: 0px;
    /*filter: var(--default-image-filter);*/
}

    .statusBarImg span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.75);
        color: var(--default-icon-click-color);
    }

.statusBarText, .statusBarItem {
    display: inline;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--default-link-color);
    text-decoration: none;
    white-space: nowrap;
}

.statusBarItem {
    position: relative;
    float: left;
    padding: 4px 0 0 0;
}

    .statusBarItem:hover .statusBarImg span.material-icons {
        color: var(--default-icon-background-hover-color) !important;
        cursor: pointer;
    }

.statusBarItemSpacer {
    position: relative;
    float: left;
    height: 20px;
}

.statusBarSpacer {
    position: relative;
    background-color: transparent;
    width: 1px;
    height: 0;
}

.statusBarLogin, .statusBarLoginActive {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-link-color);
    text-decoration: none;
    z-index: 2;
    padding: 0.5rem 1rem;
    border-right: solid 1px var(--vp-statusbar-border-color);
    background-color: transparent;
    cursor: default;
}

    .statusBarLogin:hover, .statusBarLoginActive {
        z-index: 3;
        color: var(--default-system-menu-text-hover-color);
        background-color: var(--default-system-menu-background-hover-color);
    }

#vdclock {
    padding: 0 1rem;
}
/* End of Status Bar Styling */

#liqCursor {
    z-index: 2000;
    display: none;
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: transparent;
    backdrop-filter: blur(0.5rem);
    box-shadow: 1px 5px 16px rgba(0,0,0,0.32);
}

.material-icons {
    display: inline-block;
    font-family: 'Material Icons' !important;
    font-size: var(--default-icon-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    cursor: default;
}

    #mainHeader > div:has(#srsControls) {
        z-index: 2030;
    }

a {
    color: var(--default-link-color);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    background-color: var(--default-link-background-color);
}

    a:link, a:active, a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        color: var(--default-link-hover-color);
        background-color: var(--default-link-background-hover-color);
    }

    a:has(img) {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
    }

img {
    margin: 0 0.5rem;
    /*filter: var(--default-image-filter);*/
}

td:has(img) + td:has(img) img, span:has(img) + span:has(img) img {
    /* This is to ensure if two images are next to each other, then only the right margin should be set */
    margin: 0 0.5rem 0 0;
}

img[hspace="0"] {
    margin: 0 !important;
}
/*    a:has(img):hover {
        filter: var(--default-image-hover-filter);
    }*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loadingsystem {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../images/large_loading.png);
    background-position: center;
    background-size: 180px;
    width: 530px;
    height: 200px;
    animation: spin linear 2806ms infinite;
    -webkit-animation: spin linear 2806ms infinite;
    -moz-animation: spin linear 2806ms infinite;
    -o-animation: spin linear 2806ms infinite;
}

.loadingtext {
    font-family: var(--default-font-family);
    font-size: 3rem;
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    text-align: center;
    color: #2AABE2;
}

@keyframes fade-in {
    0% {
        opacity: 0.0;
        visibility: hidden;
    }

    100% {
        opacity: 1.0;
        visibility: visible;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1.0;
        visibility: visible;
    }

    100% {
        opacity: 0.0;
        visibility: hidden;
    }
}

.fadein-effect {
    animation: fade-in linear 1500ms;
    -webkit-animation: fade-in linear 1500ms;
    -moz-animation: fade-in linear 1500ms;
    -o-animation: fade-in linear 1500ms;
}

.fadeout-effect {
    animation: fade-out linear 1500ms;
    -webkit-animation: fade-out linear 1500ms;
    -moz-animation: fade-out linear 1500ms;
    -o-animation: fade-out linear 1500ms;
}

#divHeaderMenuLinks {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

    #divHeaderMenuLinks img {
        width: 24px;
        height: 24px;
        filter: var(--default-image-filter);
    }

#divNotifications img, #divSettings img {
    filter: none !important;
}

#divUserProfile {
    position: relative;
    z-index: 900;
    width: 50px;
    height: 50px;
    /*border-left: solid 2px #ffffff;*/
    cursor: pointer;
}

.headerbutton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    margin: 0;
    background-color: transparent;
    border: solid 1px transparent;
    /*border-left-color: #eef7ff;*/
    cursor: pointer;
}

div.headerbutton:has(.material-icons) > .material-icons {
    color: var(--default-nav-font-color);
}

.headerbutton:hover {
    background-color: var(--default-icon-background-hover-color);
    border: solid 1px var(--toolbar-button-hover-border-color);
    border-radius: var(--default-input-border-radius);
    cursor: pointer;
}

    .headerbutton:hover img {
        filter: var(--default-image-hover-filter);
    }

    .headerbutton:hover .material-icons {
        color: var(--default-icon-hover-color) !important;
        user-select: none;
    }

.HeaderMenuBody {
    z-index: 800;
    position: absolute;
    visibility: hidden;
    width: 192px;
    max-height: 0;
    overflow-y: hidden;
    top: 49px;
    left: 0;
    background-color: var(--cm-background-color);
    border: var(--cm-border);
    border-radius: calc(var(--default-border-radius) / 1.5);
    box-shadow: var(--default-box-shadow);
    -webkit-transition-property: max-height;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: max-height;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: max-height;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: max-height;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.HeaderMenuBodyShow {
    z-index: 800;
    position: absolute;
    top: 49px;
    left: 0;
    width: 192px;
    max-height: 40rem;
    overflow-y: hidden;
    background-color: var(--cm-background-color);
    border: var(--cm-border);
    border-radius: calc(var(--default-border-radius) / 1.5);
    box-shadow: var(--default-box-shadow);
    -webkit-transition-property: max-height;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: max-height;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: max-height;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: max-height;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.HeaderMenuBodyShadow {
    position: absolute;
    top: 2px;
    left: 2px;
    /*background-color:#e0e0e0;	
	border: solid 1px #e0e0e0;*/

    box-shadow: var(--default-box-shadow);
}

.HeaderMenuItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    padding: 0.5rem 0 0.5rem 0.5rem;
    margin: 0;
    height: 3rem;
    color: var(--cm-font-color);
    background-color: var(--cm-background-color);
}

    .HeaderMenuItem:has(span) {
        height: max-content;
        padding: 0.8rem;
        white-space: normal;
    }

    .HeaderMenuItem:hover {
        color: var(--cm-font-hover-color);
        background-color: var(--cm-background-hover-color);
    }

        .HeaderMenuItem:hover > .HeaderMenuItemImage {
            color: var(--cm-font-hover-color);
        }

    .HeaderMenuItem > span, .HeaderMenuItemOver > span, .HeaderMenuItemError > span {
        font-size: calc(var(--default-font-size) * 0.75);
        line-height: var(--default-line-height);
    }

.HeaderMenuItemText {
    width: calc(100% - 3rem);
    padding: 0 0.5rem;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    cursor: default;
    border: none;
}

.HeaderMenuItemImage {
    background-color: var(--cm-icon-background-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    width: 3rem;
    height: 3rem;
}

.HeaderMenuItemDivider {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: default;
    height: 1px;
    background-color: var(--cm-divider-color);
    padding: 0;
}

.HeaderMenuItemDividerIcon {
    background-color: var(--cm-icon-background-color);
    min-width: 3rem;
    min-height: 1px;
}

.HeaderMenuItemError {
    position: relative;
    clear: both;
    cursor: pointer;
    min-height: 2.4rem;
    border-top: none 1px transparent;
    border-right: none 1px transparent;
    border-bottom: none 1px transparent;
    border-left: none 1px transparent;
    padding: 8px;
    margin: 0;
    background-image: url(../images/warning.png);
    background-repeat: no-repeat;
    background-position: 254px 6px;
    background-size: 16px;
    background-color: #F44336;
    color: #ffffff;
}

    .HeaderMenuItemError .style1 {
        color: #ffffff;
    }

.font-awesome.iconimg {
    font-size: var(--default-icon-size);
    color: var(--default-icon-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
}

.line-awesome.iconimg {
    font-size: var(--default-icon-size);
    color: var(--default-icon-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100%;
}

div:has(.material-icons) > .material-icons, label:has(.material-icons) > .material-icons {
    font-size: var(--default-icon-size);
    color: var(--default-icon-color);
}

.material-icons.settings {
    position: absolute;
    top: 2px;
    right: 1px;
    font-size: calc(var(--default-icon-size) * 0.4) !important;
    color: var(--default-icon-color) !important;
    background-color: var(--default-background-color) !important;
    border-radius: 50%;
}

.material-icons.iconimg {
    font-size: 2.2rem;
    color: var(--default-icon-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 100%;
}

/*    .material-icons.calendar-picker {
        position: absolute;
        right: 0.5rem;
        font-size: 1.3rem !important;
        color: var(--default-icon-color);
        cursor: pointer;
    }*/

/* Audit Log Icons */
i.material-icons[data-icon="unread-email"] {
    color: #fb981d;
}
i.material-icons[data-icon="recall"] {
    color: #ee6f2f;
}
i.material-icons[data-icon="email-send"] {
    color: #ff4949;
}
i.material-icons[data-icon="email-sent"] {
    color: #35c506;
}
/* Flags of different colours */
i.material-icons[data-icon="flag-red"] {
    color: #cc0600;
}
i.material-icons[data-icon="flag-blue"] {
    color: #0049cc;
}
i.material-icons[data-icon="flag-yellow"] {
    color: #dce505;
}
i.material-icons[data-icon="flag-orange"] {
    color: #fb981d;
}
i.material-icons[data-icon="flag-purple"] {
    color: #8305e5;
}
i.material-icons[data-icon="flag-green"] {
    color: #338c16;
}
i.material-icons[data-icon="flag-complete"] {
    color: #6b6b6b;
}


.material-icons.icon-document, .material-icons.icon-folder, .material-icons.system-folder, .material-icons.share-folder, .material-icons.my-document, .material-icons.special-folder {
    font-size: 2rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 100%;
}

.material-icons.system-folder {
    display: inline-block;
    padding: 0 2px;
}

.material-icons.icon-folder {
    color: transparent;
    background: -webkit-linear-gradient(#FFEDB8, #FABA1A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.material-icons.share-folder {
    color: transparent;
    background: -webkit-linear-gradient(#61D3AC, #047F5C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.material-icons.my-document {
    color: transparent;
    background: -webkit-linear-gradient(#31C6DD, #0272CB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.material-icons.special-folder {
    color: transparent;
    background: -webkit-linear-gradient(#e7af41, #f53900);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headerbutton:hover .material-icons.iconimg {
    color: #f0f0f0 !important;
}

#divSettings .HeaderMenuItem {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 65px;
    border-top: solid 1px var(--default-system-menu-border-color);
}

.settingcontainerhide {
    z-index: 0;
    visibility: hidden;
    position: absolute;
    left: 256px;
    top: 49px;
    width: 300px;
    max-height: 600px;
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
    background-color: var(--default-background-color);
    padding: 0;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: left visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: left visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-out;
    transition-property: left visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
    cursor: default;
}

.settingcontainershow {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    left: -256px;
    top: 49px;
    width: 300px;
    max-height: 600px;
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
    background-color: var(--default-background-color);
    padding: 0;
    opacity: 1.0;
    filter: alpha(opacity=100);
    box-shadow: var(--default-box-shadow);
    -webkit-transition-property: left visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: left visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: left visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-in;
    transition-property: left visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
    cursor: default;
}

    .settingcontainershow:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 28px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent var(--vw-border-color) transparent;
    }

    .settingcontainershow:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 28px;
        top: -14px;
        border: 7px solid;
        border-color: transparent transparent var(--vw-border-color) transparent;
    }

.settingheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.8rem;
    color: var(--vw-title-color);
    padding: 0.5rem;
    border-radius: var(--vw-border-radius) var(--vw-border-radius) 0 0;
    background-color: var(--vw-border-color);
}

.settingfooter {
    height: 1rem;
    border-radius: 0 0 var(--vw-border-radius) var(--vw-border-radius);
    /*background-color: var(--vw-border-color);*/
}

.officetoolsbutton {
    width: 50px;
    height: 50px;
    background-color: var(--default-nav-background-color);
    background-image: var(--default-logo-icon);
    background-repeat: no-repeat;
    background-position: center;
    border: solid 1px transparent;
    cursor: pointer;
}

    .officetoolsbutton:hover, .officetoolscontainershow ~ #vsrsContainer > #mainHeader > div.officetoolsbutton {
        background-color: var(--default-icon-background-hover-color);
        background-image: var(--default-logo-icon-hover);
        background-repeat: no-repeat;
        background-position: center;
        border: solid 1px var(--default-background-color);
        border-radius: var(--default-input-border-radius);
        cursor: pointer;
    }

.officetoolscontainerhide {
    visibility: hidden;
    z-index: 2028;
    position: absolute;
    transform: translate(-75rem, -39rem);
    display: grid;
    grid-template-rows: 1fr 5rem;
    grid-row-gap: 0.5rem;
    width: 70rem;
    height: 34rem;
    background-color: transparent;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left top opacity;
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity;
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity;
    -o-transition-duration: 500ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.officetoolscontainershow {
    z-index: 2028;
    position: absolute;
    transform: translate(1rem, 5rem);
    display: grid;
    grid-template-rows: 1fr 5rem;
    grid-row-gap: 0.5rem;
    width: 70rem;
    height: 34rem;
    background-color: transparent;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: left top opacity;
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity;
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity;
    -o-transition-duration: 500ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity;
    transition-duration: 500ms;
    transition-timing-function: linear;
}

.officetoolscontentwrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
    background-color: var(--default-system-menu-content-background-color);
    box-shadow: var(--default-box-shadow);
}

    .officetoolscontentwrapper:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 15px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent var(--default-system-menu-border-color) transparent; /* This is the speech arrow border */
    }

    .officetoolscontentwrapper:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 15px;
        top: -13px;
        border: 7px solid;
        border-color: transparent transparent var(--default-system-menu-content-background-color) transparent; /* This is the speech arrow body */
    }

.officetoolscontenthide {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-height: 23.3rem;
    opacity: 0.0;
    filter: alpha(opacity=0);
    visibility: hidden;
    overflow: hidden;
    -webkit-transition-property: opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.officetoolscontentshow {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-height: 23.3rem;
    opacity: 1.0;
    filter: alpha(opacity=100);
    visibility: visible;
    overflow: hidden;
    -webkit-transition-property: opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

    .officetoolscontentshow:hover {
        overflow: auto;
    }

div.officetoolscontentshow::-webkit-scrollbar {
    width: 0.2rem;
    height: 0.2rem;
}

div.officetoolscontentshow:hover::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
}

div.officetoolscontentshow::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--scrollbar-track-color);
    outline: none;
    border: none;
}

div.officetoolscontentshow::-webkit-scrollbar-thumb {
    border: solid 1px transparent;
    border-radius: 0.1em;
    background-color: var(--scrollbar-thumb-color);
    outline: none;
}

.officetoolslink {
    position: relative;
    top: -5.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
    border: solid 1px var(--default-system-menu-border-color);
    border-top: none;
    background-color: var(--default-system-menu-footer-background-color);
}

div[class^="officetiletab"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    user-select: none;
    cursor: pointer;
}

    div[class^="officetiletab"]:hover {
        color: var(--default-system-menu-text-hover-color) !important;
        border: solid 1px var(--default-system-menu-border-hover-color) !important;
        background-color: var(--default-system-menu-background-hover-color) !important;
    }

.officetiletabon {
    color: var(--default-system-menu-text-selected-color);
    border: solid 1px var(--default-system-menu-border-selected-color);
    background-color: var(--default-system-menu-background-selected-color);
}

.officetiletaboff {
    color: var(--default-system-menu-text-color);
    border: solid 1px transparent;
    background-color: transparent;
}

.officetoolstile {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem;
    margin: 0.25rem;
    width: 11rem;
    height: 11rem;
    border: 2px solid transparent;
    border-radius: var(--default-input-border-radius);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 10px;
    background-size: 3rem;
    user-select: none;
    cursor: pointer;
    -webkit-transition-property: border;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: border;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-property: border;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: ease-in-out;
    transition-property: border;
    transition-duration: 50ms;
    transition-timing-function: ease-in-out;
}

    .officetoolstile:hover {
        border: 2px solid var(--default-link-hover-color);
        cursor: pointer;
    }

.officetoolstiletext {
    position: absolute;
    left: 8px;
    bottom: 8px;
    text-align: left;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: calc(var(--default-font-size) * 0.85);
    line-height: var(--default-line-height);
    color: #ffffff;
}

.navPanel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 900;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: bold;
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-nav-font-color);
    text-align: left;
    border: solid 1px transparent;
    background-color: var(--default-nav-background-color);
}

.navbarMenu {
    z-index: 200;
    display: none;
    position: absolute;
    top: -1px;
    left: 47px;
    background-color: var(--cm-background-color);
    border: var(--cm-border);
    border-radius: calc(var(--default-border-radius) / 1.5);
    padding: 0;
    width: 0px;
    overflow-y: hidden;
    overflow-x: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition-property: width background-color opacity;
    -webkit-transition-duration: 50ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: width background-color opacity;
    -moz-transition-duration: 50ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: width background-color opacity;
    -o-transition-duration: 50ms;
    -o-transition-timing-function: linear;
    transition-property: width background-color opacity;
    transition-duration: 50ms;
    transition-timing-function: linear;
}

    .navbarMenu:hover {
        overflow-y: auto !important;
    }

.navbarItem:has(.navbarMenu):hover > .navbarMenu {
    z-index: 200;
    display: block;
    position: absolute;
    top: -1px;
    left: 45px;
    background-color: var(--cm-background-color);
    border: var(--cm-border);
    padding: 0;
    min-width: calc(var(--default-font-size) * 18);
    max-height: 64vh;
    overflow-y: hidden;
    overflow-x: hidden;
    box-shadow: var(--default-box-shadow);
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-property: width background-color opacity;
    -webkit-transition-duration: 150ms;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 50ms;
    -moz-transition-property: width background-color opacity;
    -moz-transition-duration: 150ms;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 50ms;
    -o-transition-property: width background-color opacity;
    -o-transition-duration: 150ms;
    -o-transition-timing-function: linear;
    -o-transition-delay: 50ms;
    transition-property: width background-color opacity;
    transition-duration: 150ms;
    transition-timing-function: linear;
    transition-delay: 50ms;
}

    .navbarItem:has(.navbarMenu):hover > .navbarMenu:hover {
        overflow-y: auto !important;
    }

.navbarItem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.5rem;
    border: solid 1px transparent;
    border-radius: var(--default-input-border-radius);
    background-color: transparent;
    cursor: pointer;
}

    .navbarItem:hover {
        border: solid 1px var(--toolbar-button-hover-border-color);
        background-color: var(--default-icon-background-hover-color);
    }

    .navbarItem > i[class^=fa] {
        font-size: var(--default-icon-size);
        line-height: calc(var(--default-line-height) * 1.5);
        color: var(--default-nav-font-color);
    }

    .navbarItem > i[class^=la] {
        font-size: var(--default-icon-size);
        line-height: calc(var(--default-line-height) * 1.5);
        color: var(--default-nav-font-color);
    }

    .navbarItem > span.material-icons {
        font-size: var(--default-icon-size);
        line-height: var(--default-line-height);
        color: var(--default-nav-font-color) !important;
        user-select: none;
    }

    .navbarItem > span.navbar-letter-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        top: 10px;
        left: 24px;
        font-size: calc(var(--default-icon-size) * 0.5);
        color: var(--default-nav-font-color);
        border: solid 1px transparent;
        border-radius: 50%;
        background-color: var(--default-nav-background-color);
    }

    .navbarItem:hover > span.navbar-letter-icon {
        color: var(--default-icon-hover-color);
        background-color: var(--default-icon-background-hover-color);
    }

    .navbarItem:hover > span.material-icons, .navbarItem:hover > span.navbar-letter-icon {
        color: var(--default-icon-hover-color) !important;
        background-color: var(--default-icon-background-hover-color) !important;
    }

.navbarSubMenuItem {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 3.2rem;
    margin: 0;
    padding: 0;
    color: var(--cm-font-color);
    background-color: var(--cm-background-color);
    cursor: pointer;
}

    .navbarSubMenuItem:hover {
        color: var(--cm-font-hover-color);
        background-color: var(--cm-background-hover-color);
    }

.navbarSubMenuItemImage {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cm-icon-background-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    min-width: 3.2rem;
    min-height: 3.2rem;
}

    .navbarSubMenuItemImage > span.material-icons {
        color: var(--cm-font-color);
        font-size: calc(var(--default-icon-size) * 0.75);
    }

.navbarSubMenuItemText {
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    width: 19rem;
    padding: 0 0.5rem;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.navbarItemDivider {
    position: relative;
    height: 1px;
    background-color: var(--cm-icon-background-color);
    cursor: pointer;
}

.queueNavPanel {
    background-color: var(--default-nav-background-color);
}

    .queueNavPanel select {
        color: var(--default-input-color);
        background-color: var(--default-input-background-color);
    }

    .queueNavPanel a, .queueNavPanel span, .queueNavPanel p {
        color: var(--default-nav-font-color);
        line-height: 2;
    }

.navSidePanel {
    background-color: var(--default-nav-background-color);
}

    .navSidePanel select {
        color: var(--default-input-color);
        background-color: var(--default-input-background-color);
    }

    .navSidePanel #sectionHeading, .navSidePanel a, .navSidePanel span, .navSidePanel p, .navSidePanel li, .navSidePanel .style1 {
        color: var(--default-nav-font-color);
    }

#navTree {
    display: block;
    border: solid 1px transparent;
    height: calc(100vh - 6.4rem);
    margin: 0;
    padding: 0.25rem;
    overflow: hidden;
}

    #navTree:hover {
        overflow: auto;
    }

.loading {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: block;
    width: 10000px;
    height: 10000px;
    background-color: #EEE;
    padding-top: 25%;
    padding-left: 25%;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

.unloading {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    display: none;
    width: 160px;
    height: 160px;
    background-color: #EEE;
    overflow: hidden;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../images/logo96.png);
    background-position: center;
    background-size: 32px;
    animation: spin linear 1500ms infinite;
    -webkit-animation: spin linear 1500ms infinite;
    -moz-animation: spin linear 1500ms infinite;
    -o-animation: spin linear 1500ms infinite;
    /*background-image: url(../images/loading.gif);
 	background-position: center;
 	background-repeat: no-repeat;*/
}

.searching {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: none;
    width: 0;
    height: 0;
    background-color: #FFF;
    overflow: hidden;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=90);
}

.dlgBody, .dlgBodyNoBorders, .noteBody, .sysBody {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    background-color: var(--dialog-background-color);
    overflow: hidden;
}

.dlgBodyNoBorders {
    margin: 0px;
}

.dlgButtonFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0 0.5rem;
    height: 4rem;
}

.sysBody {
    color: var(--system-panel-text-color);
    background-color: var(--system-panel-background-color);
    border: solid 1px var(--system-panel-border-color);
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow)
}

hr, .dlgHR {
    width: 100%;
    height: 1px;
    color: var(--default-header-border-color);
    background-color: var(--default-header-border-color);
    border: none;
}

.dlgTitle {
    display: flex;
    align-items: center;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-heading1-color);
    text-decoration: none;
    text-align: left;
    width: 100%;
    height: 3rem;
    background-color: var(--default-heading1-background-color);
    border-bottom: 1px solid var(--default-header-border-color);
    padding: 0.5rem;
}

.mdiBody, .mdiBodyNoMargins {
    background-color: var(--default-background-color);
    overflow: hidden;
}

.mdiBodyNoMargins {
    margin: 0px;
    overflow: hidden;
}

.noMargins {
    margin: 0 !important;
}

.mainframe {
    position: relative;
    display: block;
    margin: 14px 4px 4px 4px;
    border: solid 1px transparent;
}

.mainBodyNoScrolls {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--default-background-color);
    overflow: hidden;
}

.mainBodyNoMargins {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--default-background-color);
    overflow: auto;
}

.mainBody {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--default-background-color);
    overflow: auto;
}

#divNavHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    width: 100vw !important;
    min-height: 36px;
    padding: 0;
    color: var(--default-nav-font-color);
    background-color: var(--default-nav-background-color);
}

#divHeader, #divManageAssets {
    display: flex;
    /* These are set here, so we don't have to set them inline in for the element in pages */
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 36px;
    padding: 0;
    color: var(--default-header-font-color);
    background-color: var(--default-header-background-color);
    border-bottom: solid 1px var(--default-header-border-color);
}

.mainBodyHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-bottom: solid 1px transparent;
    background-color: var(--default-header-background-color);
}

#divNavHeader > .mainBodyHeader {
    border-bottom: none;
    background-color: var(--default-nav-background-color);
}

.mainBodyHeader2 {
    background-color: var(--default-heading2-background-color);
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 0px solid #ffffff;
    height: 2.5rem;
}

.mainBodyHeader > span {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: calc(var(--default-font-size) * 1.3);
    line-height: var(--default-line-height);
    color: var(--default-heading1-color);
    /* Add ellipsis on 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainBodyHeader > #divFilters {
    display: inline;
    float: right;
    margin: 3px 3px 0 3px;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-heading1-color);
}

    .mainBodyHeader > #divFilters > span {
        display: inline;
        margin: 0px 3px 0 3px;
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-weight: var(--default-font-weight);
        font-size: var(--default-font-size);
        line-height: var(--default-line-height);
        color: var(--default-heading1-color);
    }

    .mainBodyHeader > #divFilters > select {
        display: inline;
        margin: 0px 3px 0 3px;
    }

.mainBodyHeading, .mainBodySubHeader, .mainBodySubHeader1, .mainBodyPaging {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-decoration: none;
}

.mainBodySubHeader {
    width: 100%;
    padding: 0 0.5rem;
}

.mainBodyHeading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .mainBodyHeading > span.material-icons {
        font-size: var(--default-icon-size) !important;
        color: var(--default-heading3a-color) !important;
    }

.mainBodySubHeader1 {
    height: 3rem;
}

#sectionSubHeading {
    color: var(--default-heading2-color) !important;
}

.mainBodyPaging {
    justify-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: fit-content;
    height: 3rem;
    padding: 0.5rem;
    white-space: nowrap;
}

#pagingNav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.25rem;
}

/* Multiple-Select Style */
.ms-parent {
    min-width: unset !important;
    max-width: 100% !important;
    height: 2.6rem !important;
}

    .ms-parent > button.ms-choice {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        height: 100%;
        margin: 0 !important;
        padding: 0.2rem !important;
        color: var(--default-font-color);
        border: var(--default-input-border);
        border-radius: var(--default-input-border-radius);
        background-color: var(--default-input-background-color);
        outline: var(--default-input-outline);
    }

        .ms-parent > button.ms-choice > span {
            position: relative !important;
            top: unset;
            left: unset;
            right: unset;
            height: 100%;
            padding: 0.25rem !important;
            margin: 0 !important;
            color: var(--default-font-color);
        }

        .ms-parent > button.ms-choice > div {
            min-width: 20px !important;
            max-width: 30px !important;
            height: 100% !important;
            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='%23b0b0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: calc(var(--default-font-size) * 1.35);
        }

/*            .ms-parent > button.ms-choice > div:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: var(--default-font-color);
                content: '\25bc';
                font-family: Arial;
                text-align: center;
            }

            .ms-parent > button.ms-choice > div.open:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: var(--default-font-color);
                content: '\25b2';
                font-family: Arial;
                text-align: center;
            }*/

.ms-drop {
    border: var(--default-input-border);
}

    .ms-drop.bottom {
        color: var(--default-input-color) !important;
        background-color: var(--default-input-background-color) !important;
        border: var(--default-input-border) !important;
        border-radius: 0 0 var(--default-input-border-radius) var(--default-input-border-radius) !important;
        height: unset !important;
    }
    /* Style Scrollbars */
    .ms-drop ul::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }

    .ms-drop ul:hover::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }

    .ms-drop ul::-webkit-scrollbar-track {
        box-shadow: rgba(245, 254, 245, 0.30) 0 0 8px inset;
        -webkit-box-shadow: rgba(245, 254, 245, 0.30) 0 0 8px inset;
        outline: solid 1px rgba(245, 254, 245, 0.1);
    }

    .ms-drop ul::-webkit-scrollbar-thumb {
        background-color: rgba(194, 195, 201, 0.70);
        outline: none;
    }
    /* Style Scrollbars */
    .ms-drop li {
        padding: 4px;
        color: var(--default-font-color);
        background-color: var(--default-background-color);
    }
/* Multiple-Select Style */

/* Start Note Styles */
.popupNoteBorder {
    display: none;
    width: 380px;
    height: 360px;
    border: solid 1px var(--np-border-color); /*#D9B341;*/
    box-shadow: var(--default-box-shadow);
}

.popupNoteHeader {
    height: 3rem;
    background-image: url(../images/notes.png);
    background-position: 0.75rem center;
    background-repeat: no-repeat;
    background-color: var(--np-header-background-color); /*#FFF993;*/
    border-bottom: 1px solid var(--np-border-color);
    padding: 0.5rem;
    cursor: default;
}

.popupNoteTitle {
    float: left;
    width: calc(100% - 5rem);
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 0.9);
    font-style: var(--default-font-style);
    font-weight: bold;
    line-height: var(--default-line-height);
    color: var(--np-header-text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 0 0 2rem;
}

.popupNoteBody {
    width: 100%;
    height: calc(100% - 3rem);
    padding: 0.25rem;
    background-color: var(--default-background-color);
}

.popupNoteNav {
    float: left;
    width: 100%;
    height: 2.5rem;
    padding: 0;
}

/* Edit Div */
.popupNoteBody > div:nth-child(2) {
    width: 100%;
    height: calc(100% - 2.6rem) !important;
    color: var(--default-input-color);
    background-color: var(--default-input-background-color);
    padding: 0.5rem;
    white-space: pre-wrap;
    overflow: auto;
    outline: none;
}

.popupNoteButton, .popupNoteButtonActive {
    float: left;
    display: inline;
    width: 44px;
    height: 28px;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    background: linear-gradient(#f6f6f6, #dddddd);
    margin: 0 1px 0 1px;
    color: var(--default-font-color);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight);
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.popupNoteButtonActive {
    background: linear-gradient(#FFF993, #D9B341);
    color: var(--default-font-color);
}

    .popupNoteButton:hover, .popupNoteButtonActive:hover {
        border: solid 1px #787878;
    }

.popupNoteBody textarea {
    padding: 0.25rem;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    background-color: var(--default-input-background-color);
    width: 100%;
    height: 100%;
    overflow: auto;
}

.popupNoteClose {
    float: right;
    position: relative;
    display: inline-table;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius);
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px 0;
    background-color: transparent;
    top: -1px;
}

    .popupNoteClose:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: #C75050;
    }

.popupDayNote, .popupDayHasNote {
    position: relative;
    display: inline-table;
    float: left;
    background-color: var(--np-background-color); /* rgb(237, 200, 126) */
    border: solid 1px var(--np-border-color);
    width: 16px;
    height: 16px;
    margin: 6px 0 0 0;
    cursor: pointer;
}

    .popupDayNote:before, .popupDayHasNote:before {
        position: absolute;
        display: inline-block;
        border-top: solid 3px var(--np-background-color);
        border-right: solid 3px var(--np-background-color);
        border-left: solid 3px var(--default-background-color);
        border-bottom: solid 3px var(--default-background-color);
        width: 0px;
        height: 0px;
        left: 0;
        bottom: 0;
        content: '';
    }

    .popupDayNote:after, .popupDayHasNote:after {
        position: absolute;
        display: inline-block;
        border: solid 1px var(--default-background-color);
        width: 6px;
        height: 6px;
        left: -1px;
        bottom: -1px;
        content: '';
    }

    .popupDayHasNote:before {
        border-top: solid 3px #e24216;
        border-right: solid 3px #e24216;
    }

.datagridSelectRow .popupDayNote:before, .datagridSelectRow .popupDayNote:before,
.datagridSelectRow .popupDayHasNote:before, .datagridSelectRow .popupDayHasNote:before {
    border-left: solid 3px var(--vg-row-select-background-color);
    border-bottom: solid 3px var(--vg-row-select-background-color);
}

.datagridSelectRow .popupDayNote:after, .datagridSelectRow .popupDayNote:after,
.datagridSelectRow .popupDayHasNote:after, .datagridSelectRow .popupDayHasNote:after {
    border: solid 1px var(--vg-row-select-background-color);
}

.datagridRow:hover .popupDayNote:before, .datagridAltRow:hover .popupDayNote:before,
.datagridRow:hover .popupDayHasNote:before, .datagridAltRow:hover .popupDayHasNote:before {
    border-left: solid 3px var(--vg-row-hover-background-color);
    border-bottom: solid 3px var(--vg-row-hover-background-color);
}

.datagridRow:hover .popupDayNote:after, .datagridAltRow:hover .popupDayNote:after,
.datagridRow:hover .popupDayHasNote:after, .datagridAltRow:hover .popupDayHasNote:after {
    border: solid 1px var(--vg-row-hover-background-color);
}

/* End Note Styles */

.readonly {
    color: var(--default-input-readonly-color);
    background-color: var(--default-input-readonly-background-color);
}

.mainMenuBar {
    background-color: #c3daf9; /* #2557ad */
}

.horizontalGrip, .verticalGrip {
    background-color: #ffffff;
    border-top: 0px solid #ffffff;
    border-bottom: 1px solid #A5ACB5;
    border-left: 0px solid #ffffff;
    border-right: 0px solid #ffffff;
    text-align: center;
    height: 8px;
}

.verticalGrip {
    background-color: #CAE1FB;
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.sectionDivider {
    width: 100%;
    border-top: solid 1px #6593cf;
    margin: 4px 0 4px 0;
}

.rowSelect {
    background-color: #a6a8ea;
}

.versaEditorToolbar {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 0;
    top: 200%;
    width: 100%;
    height: 0;
    padding-top: 1px;
    background-color: var(--default-background-color);
    border: none;
    cursor: default;
    transition: all ease-in-out 250ms;
}

    .versaEditorToolbar.show {
        visibility: visible;
        opacity: 1.0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.16rem;
        left: 0;
        top: 0.5rem;
        width: 100%;
        height: 3rem;
        transition: all ease-in-out 1000ms;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .versaEditorToolbar.fixed {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.16rem;
        position: relative;
        visibility: visible;
        opacity: 1.0;
        left: unset;
        top: unset;
        width: 100%;
        height: 3.2rem;
        padding-top: 1px;
        border: none;
        cursor: default;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#divCharPopup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    background-color: var(--default-background-color);
    box-shadow: var(--default-box-shadow);
}

    #divCharPopup > span {
        font-family: Arial; /* Must be arial to render the special character */
        font-size: 2rem;
        font-weight: bold;
        color: var(--default-font-color);
        user-select: none;
    }

.cbToolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.16rem;
    padding: 0.5rem 0.25rem;
    border-left: 0px solid var(--default-header-border-color);
    border-right: 0px solid var(--default-header-border-color);
    border-top: 0px solid var(--default-header-border-color);
    border-bottom: 1px solid var(--default-header-border-color);
    background-color: var(--default-background-color);
    cursor: default;
}

    .cbToolbar input[type="text"], .cbToolbar select {
        color: var(--default-input-color);
        border: var(--default-input-border);
        background-color: var(--default-input-background-color) !important;
    }

.cbToolbarHeading {
    position: relative;
    top: -2px;
    right: 4px;
    margin: 0 0 0 4px;
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 1.2);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    cursor: default;
}

.trButtons {
    /* No longer used */
}

.rowselected {
    background-color: #316ac5;
    color: white;
}

.rowunselected {
    background-color: transparent;
    color: var(--default-font-color);
}

H1, .heading1, .heading1a, H2, .heading2, H3, .heading3, .heading3a, H4, .heading4 {
    font-family: var(--default-font-family) !important;
    font-style: var(--default-font-style) !important;
    font-weight: var(--default-font-weight) !important;
    line-height: var(--default-line-height) !important;
}

H1, .heading1, .heading1a {
    font-size: calc(var(--default-font-size) * 1.8) !important;
    color: var(--default-heading1-color);
}

.heading1a {
    color: var(--default-heading1a-color) !important;
}

H2, .heading2 {
    font-size: calc(var(--default-font-size) * 1.6);
    color: var(--default-heading2-color) !important;
}

H3, .heading3, .heading3a {
    font-size: calc(var(--default-font-size) * 1.3);
    color: var(--default-heading3-color);
}

.heading3a {
    color: var(--default-heading3a-color) !important;
}

H4, .heading4 {
    font-size: calc(var(--default-font-size) * 1.1);
    color: var(--default-heading4-color) !important;
}
/*
p > span {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
*/
IFRAME, FRAME {
    width: calc(100% - 0.05rem);
    border: var(--vg-container-border);
}
    iframe[contenteditable="true"] {
        margin: 0.25rem 0 0 0 !important;
    }

    iframe#SysQueueFrame {
        min-width: 254px;
        width: calc(100vw - 220px);
        height: calc(100vh - 13.5rem);
    }

    iframe#SysGroupFrame, iframe#SysKeyFrame {
        min-width: 316px;
        width: calc(100vw - 15.5rem);
        height: calc(100vh - 14rem);
    }

    iframe#SecProfPropFrame {
        width: calc(100vw - 52px) !important;
        min-height: 158px;
        height: calc(100vh - 32rem) !important;
    }

    iframe#ifmList {
        min-width: 242px;
        width: calc(100vw - 174px) !important;
        height: calc(100vh - 17rem) !important;
    }

    iframe#SysLabelsFrame {
        height: calc(100vh - 10rem);
    }

    iframe#ResultsFrame {
        width: calc(100vw - 48px) !important;
        height: calc(100vh - 26.8rem) !important;
    }

    iframe#TableRecordsFrame, iframe#LookupListsListFrame {
        width: calc(100vw - 7.5rem);
        height: calc(100vh - 28rem);
    }
/*    iframe#SysReportFrame, iframe#SysArticleFrame, iframe#SysNewsFrame, iframe#SysEventsFrame, iframe#SysFormFrame, iframe#SysTutorialsFrame, iframe#SysScheduleFrame, iframe#SysChangeRequestPoliciesFrame, iframe#SysRoutingRuleFrame {
        height: calc(100vh - 175px);
    }*/
/*
    iframe#SysUserFrame {
        height: calc(100vh - 185px);
        width: calc(100vw - 206px);
        min-width: 524px;
    }

    iframe#WatcherFrame {
        height: calc(100vh - 188px) !important;
        width: calc(100vw - 82px) !important;
    }

    iframe#ifmList {
        height: calc(100vh - 142px) !important;
        width: calc(100vw - 174px) !important;
        min-width: 242px;
    }

    iframe#SysReportFrame, iframe#SysArticleFrame, iframe#SysNewsFrame, iframe#SysEventsFrame, iframe#SysFormFrame, iframe#SysTutorialsFrame, iframe#SysScheduleFrame, iframe#SysChangeRequestPoliciesFrame, iframe#SysRoutingRuleFrame {
        height: calc(100vh - 175px);
    }

    iframe#SysTemplateFrame, iframe#SysActionTemplateFrame, iframe#SysUpdateTemplateFrame {
        height: calc(100vh - 180px);
    }

    iframe#SysLabelsFrame {
        height: calc(100vh - 125px);
    }

    iframe#TableRecordsFrame, iframe#LookupListsListFrame {
        width: calc(100vw - 60px);
        height: calc(100vh - 272px);
    }

    iframe#SecProfFrame {
        height: calc(100vh - 320px) !important;
        width: calc(100vw - 160px) !important;
        min-height: 164px;
    }

    iframe#SecProfPropFrame {
        height: calc(100vh - 330px) !important;
        width: calc(100vw - 52px) !important;
        min-height: 158px;
    }

    */

.div1 {
    border: 1px solid var(--panel-border-color);
    padding: 1rem;
}

.IFRAMENoBorder {
    border: none !important;
}

.iframeSlideOut {
    z-index: 10;
    position: absolute;
    display: block;
    right: -100%;
    top: 0;
    opacity: 1.0;
    width: 0;
    height: 100%;
    padding: 1px;
    border: none;
    border-top: solid 1px var(--panel-border-color);
    border-left: solid 4px var(--default-background-color);
    background-color: var(--default-background-color);
    transition: all linear 1000ms;
}

.iframeSlideIn {
    right: 0;
    top: -1px;
    opacity: 1.0;
    width: 76%;
    height: calc(100% + 1px);
    border: none;
    border-top: solid 1px var(--panel-border-color);
    border-left: solid 4px var(--panel-border-color);
    background-color: var(--default-background-color);
    transition: all linear 1000ms;
}

.iframeSlideIn100 {
    right: 0;
    top: -1px;
    opacity: 1.0;
    width: 100%;
    height: calc(100% + 1px);
    border: none;
    border-top: solid 1px var(--panel-border-color);
    border-left: solid 4px var(--panel-border-color);
    background-color: var(--default-background-color);
    transition: all linear 1000ms;
}

/*  2021-08-02] - Latest Chrome seems to have ignored the cell nowrap attribute */
td[nowrap] {
    white-space: nowrap;
}

td > span.nowrap-ellipsis {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.default, .divRow, .divCol1, .divCol2, .style1, .style1l, .style1a, .style1b, .style1c, .style1d, .style1e, .style2, .style3, .sysmessage, .sysmessagetitle, .smtext1, .smtext2, .bold1, .bold1a, .bold2, .bold3, .kblink, select, input, textarea, button, table {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-decoration: none;
    outline: none;
}

.attachmentlist {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-input-color);
    text-decoration: none;
}

#divAttachments {
    border: var(--default-input-border);
    border-radius: calc(var(--default-border-radius) / 3);
    padding: 0.5rem;
    height: 3.2rem;
    transition: height linear 250ms;
}
    #divAttachments:has(a:nth-child(n+3)) {
        height: 6.4rem;
        transition: height linear 250ms;
    }

#divContent tr:has(#divAttachments a:nth-child(n+3)) + tr:has(#ifmMessage) #ifmMessage {
    height: calc(100vh - 53.5rem) !important;
}

#divContent .div1 {
    border-radius: calc(var(--default-border-radius) / 3);
}

select, input[type="text"], input[type="number"], input[type="password"], input[type="file"], textarea, fieldset, .textinput {
    padding: 0.25rem;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-input-color);
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    background-color: var(--default-input-background-color);
    outline: var(--default-input-outline);
}

fieldset {
    padding: 0.5rem;
}

select:not([size]), select[size="1"] {
    /*
    background-color: var(--default-select-arrow-color);
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    width: calc(var(--default-font-size) * 1.35);
    height: calc(var(--default-font-size) * 1.35);*/

    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='%23b0b0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: calc(var(--default-font-size) * 1.35);
    padding: 0.25rem 2.5rem 0.25rem 0.5rem !important;
    min-height: var(--button-min-height);
    -webkit-print-color-adjust: exact;
    -webkit-appearance: none;
    appearance: none;
}

select > option {
    padding: 0.5rem;
}

    select > option[selected] {
        color: var(--default-input-color);
        background-color: var(--default-input-background-color);
    }

input[type="text"], input[type="password"] {
    min-width: 2.5rem;
}

/* Hide the default checkbox */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: var(--default-font-size);
    height: var(--default-font-size);
    margin: 0;
    color: var(--default-input-color);
    border: var(--default-input-border);
    border-radius: 0.3rem;
    background-color: var(--default-input-background-color);
    outline: var(--default-input-outline);
    cursor: pointer;
}

    /* Style for checked state */
    input[type="checkbox"]:checked {
        background-color: var(--default-icon-background-hover-color); /* Background when checked */
        border-color: var(--default-icon-background-hover-color); /*#4CAF50;*/
    }

        /* Create a custom checkmark */
        input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 0.3rem;
            top: -0.15rem;
            width: 0.5rem;
            height: 1rem;
            border: solid var(--default-icon-hover-color);
            border-width: 0 0.25rem 0.25rem 0;
            transform: rotate(45deg);
        }

    input[type="checkbox"] + label {
        color: var(--default-font-color);
        margin: 0 0.5rem;
    }


/* Hide the default radio button */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: var(--default-font-size);
    height: var(--default-font-size);
    margin: 0;
    color: var(--default-input-color);
    border-radius: 100%;
    border: var(--default-input-border);
    background-color: var(--default-input-background-color);
    outline: var(--default-input-outline);
    cursor: pointer;
}

    /* Style for checked state */
    /*input[type="radio"]:checked {
        background-color: #4CAF50;*/ /* Background when checked */
    /*border-color: #4CAF50;
    }*/

    /* Create a custom checkmark */
    input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(var(--default-font-size) * 0.65);
        height: calc(var(--default-font-size) * 0.65);
        border-radius: 100%;
        border: solid 1px var(--default-input-background-color);
        background-color: var(--default-icon-background-hover-color);
    }

    input[type="radio"] + label {
        color: var(--default-font-color);
        margin: 0 0.5rem;
    }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #bbbbbb;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bbbbbb;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #bbbbbb;
}

/* Start versaModalDialog Styles */
.modaldialogtitle1, .modaldialogtitle2, .modaldialogtitle3 {
    display: grid;
    grid-template-columns: 1fr 8rem;
    align-items: center;
    padding: 0.25rem;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--vw-title-color);
    text-decoration: none;
    text-align: left;
    background-color: var(--vw-border-color);
    border-bottom: 1px solid var(--vw-border-color);
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

.modaldialogtitle1 {
    background-image: url(../images/favicon.png);
    background-repeat: no-repeat;
    background-position: 0.25rem center;
}

.modaldialogtitle2 {
    background-image: url(../images/info.png);
    background-repeat: no-repeat;
    background-position: 0.25rem center;
}

.modaldialogtitle3 {
    background-image: url(../images/help1.png);
    background-repeat: no-repeat;
    background-position: 0.25rem center;
}

div[class^="modaldialogtitle"] > div:first-child {
    position: relative;
    left: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modaldialog {
    background-color: var(--default-background-color);
    padding: 8px;
    border-style: solid;
    border-width: var(--vw-border-width);
    border-color: var(--vw-border-color);
    border-radius: var(--vw-border-radius);
}

.modaldialognoborder {
    z-index: 3001;
    display: grid;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--default-background-color);
    border-radius: var(--vw-border-radius);
    box-shadow: var(--default-box-shadow);
}

.modaldialogborder {
    z-index: 3001;
    position: fixed;
    visibility: visible;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: 3.6rem 1fr;
    border-style: solid;
    border-width: var(--vw-border-width);
    border-color: var(--vw-border-color);
    border-radius: var(--vw-border-radius);
    background-color: var(--vw-border-color);
    box-shadow: var(--default-box-shadow);
    box-sizing: border-box;
}

    .modaldialognoborder iframe.IFRAMENoBorder, .modaldialogborder iframe.IFRAMENoBorder {
        width: 100% !important;
        height: 100% !important;
        background-color: var(--default-background-color);
        border-radius: 0 0 var(--vw-border-radius) var(--vw-border-radius);
    }

.mdbox {
    z-index: 3001;
    visibility: visible;
    display: grid;
    grid-template-rows: 3.6rem 1fr 3.5rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--vw-border-color) !important;
    border-radius: var(--vw-border-radius) !important;
    background-color: var(--vw-border-color) !important;
    box-shadow: var(--default-box-shadow) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .mdbox iframe.IFRAMENoBorder, .mdbox iframe.IFRAMENoBorder {
        width: 100% !important;
        height: 100% !important;
        background-color: var(--default-background-color) !important;
        border-radius: 0 0 var(--vw-border-radius) var(--vw-border-radius) !important;
    }

iframe#mdboxbody {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    margin: 1rem;
}

.mdboxheader {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr max-content !important;
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    font-style: var(--default-font-style) !important;
    font-weight: var(--default-font-weight) !important;
    line-height: var(--default-line-height) !important;
    color: var(--vw-title-color) !important;
    border-radius: var(--vw-border-radius) var(--vw-border-radius) 0 0 !important;
    background-color: var(--vw-border-color) !important;
    padding: 0.25rem 0.5rem;
    cursor: default;
}

.mdboxtitlebuttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0.2rem;
}

.mdboxhelp {
    position: relative;
    float: right;
    display: none !important;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/info2.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center center;
    background-color: transparent;
}

    .mdboxhelp:hover, .mdboxhelphover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/info2.png);
        background-repeat: no-repeat;
        background-size: 16px;
        background-position: center center;
        background-color: #213E7A;
    }

.mdboxclose {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px center;
    background-color: transparent;
}

    .mdboxclose:hover, .mdboxclosehover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/window_icons_hover.png);
        background-repeat: no-repeat;
        background-position: -96px center;
        background-color: #c95656;
    }

.mdboxmax {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -72px center;
    background-color: transparent;
}

    .mdboxmax:hover, .mdboxmaxhover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/window_icons_hover.png);
        background-repeat: no-repeat;
        background-position: -72px center;
        background-color: #213E7A;
    }

.mdboxrestore {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -48px center;
    background-color: transparent;
}

    .mdboxrestore:hover, mdboxrestorehover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/window_icons_hover.png);
        background-repeat: no-repeat;
        background-position: -48px center;
        background-color: #213E7A;
    }

.mdboxmin {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -24px center;
    background-color: transparent;
}

    .mdboxmin:hover, .mdboxminhover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/window_icons_hover.png);
        background-repeat: no-repeat;
        background-position: -24px center;
        background-color: #213E7A;
    }

.mdboxpopout {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius) !important;
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    background-color: transparent;
}

    .mdboxpopout:hover, .mdboxpopouthover {
        position: relative;
        float: right;
        display: inline;
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius) !important;
        background-image: url(../images/window_icons_hover.png);
        background-repeat: no-repeat;
        background-position: 0 center;
        background-color: #213E7A;
    }

.mdbox > div:nth-child(2) {
    position: relative;
    background-color: var(--default-background-color) !important;
    border: solid 1px var(--panel-border-color) !important;
    border-bottom: 1px solid transparent;
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    font-style: var(--default-font-style) !important;
    font-weight: var(--default-font-weight) !important;
    color: var(--default-font-color) !important;
    line-height: var(--default-line-height) !important;
    overflow: hidden;
    padding: 0 0 0 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mdboxmessage {
    padding: 0 !important;
    border: none !important;
}

.mdboxmessage1 {
    position: relative;
    background-image: url(../images/cross.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage2 {
    position: relative;
    background-image: url(../images/excl1.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage3 {
    position: relative;
    background-image: url(../images/info1.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdboxmessage4 {
    position: relative;
    background-image: url(../images/vdicon.png);
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

.mdbox > div:nth-child(2) > div {
    overflow: auto;
    padding: 5px;
    width: 100%;
    height: 100%;
    border: solid 1px transparent;
    border-left: solid 1px var(--panel-border-color) !important;
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    font-style: var(--default-font-style) !important;
    font-weight: var(--default-font-weight) !important;
    line-height: var(--default-line-height) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mdbox > div:nth-child(2) > div {
    border: none !important;
}

.mdboxinput {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    text-align: center;
    border-top: 1px solid var(--default-system-menu-border-color) !important;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius) !important;
    background-color: var(--dialog-background-color) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .mdboxinput input[type="button"], .mdboxinput input[type="button"]:hover {
        min-width: 80px;
        min-height: var(--button-min-height) !important;
        padding: 4px;
        font-family: var(--default-font-family) !important;
        font-size: var(--default-font-size) !important;
        line-height: 1;
        font-style: var(--default-font-style) !important;
        font-weight: var(--default-font-weight) !important;
        color: var(--button-text-color) !important;
        padding: 0.25rem 0.5rem;
        border: solid 1px var(--button-border-color) !important;
        background-color: var(--button-color) !important;
        border-radius: var(--default-input-border-radius) !important;
    }

        .mdboxinput input[type="button"]:hover {
            color: var(--button-hover-text-color) !important;
            border: solid 1px var(--button-hover-border-color) !important;
            background-color: var(--button-hover-color) !important;
        }
/* End versaModalDialog Styles */

input[type="button"], input[type="button"]:hover, input[type="submit"], input[type="submit"]:hover, button, button:hover {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: 1;
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    border: solid 1px var(--button-border-color);
    border-radius: var(--default-input-border-radius);
    background-color: var(--button-color);
    color: var(--button-text-color);
    min-width: var(--button-min-width);
    min-height: var(--button-min-height);
    padding: 0.25rem 0.5rem;
    outline: none;
}

    input[type="button"]:hover, input[type="submit"]:hover, button:hover {
        color: var(--button-hover-text-color);
        border: solid 1px var(--button-hover-border-color);
        background-color: var(--button-hover-color);
    }

    input[type="button"]:active, input[type="submit"]:active, button:active {
        color: var(--button-hover-text-color);
        border: solid 1px var(--button-hover-border-color);
        background-color: var(--button-hover-color);
    }

    input[type="button"].buttonDisabled, input[type="submit"].buttonDisabled, button.buttonDisabled, button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
        background-color: var(--button-disabled-color);
        cursor: not-allowed;
        outline: none;
    }

    input[type="button"].versaButton {
        min-width: 8rem;
        padding: 0.5rem;
        text-align: center;
        margin: 0.5rem;
        color: var(--button-text-color);
        border: solid 1px var(--button-border-color);
        border-radius: var(--default-input-border-radius);
        background-color: var(--button-color);
    }

        input[type="button"].versaButton:active, input[type="button"].versaButton:hover {
            color: var(--button-hover-text-color);
            border: solid 1px var(--button-hover-border-color);
            background-color: var(--button-hover-color);
        }

textarea {
    resize: none;
}

input[type="text"].readonly {
    cursor: default;
    color: var(--default-input-readonly-color);
    background-color: var(--default-input-readonly-background-color);
}

/* For Chrome, Safari, newer Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* Use this to completely remove the background */
    -webkit-background-clip: text;
    /* Or use this approach to set a custom background color */
    -webkit-box-shadow: 0 0 0 30px var(--default-input-background-color) inset !important;
    /* Optional: Change text color if needed */
    -webkit-text-fill-color: var(--default-input-color) !important;
    /* This makes the background last longer before reverting */
    transition: background-color 5000s ease-in-out 0s;
}

/* For Firefox */
input:autofill {
    color: var(--default-input-color) !important;
    background-color: var(--default-input-background-color) !important;
}

.date-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 210px;
}

    .date-container > input[type="text"] {
        width: 100%;
        padding: 0.25rem 2.5rem 0.25rem 0.5rem !important;
    }

    .date-container > span.material-icons {
        position: relative;
        right: 2rem;
        font-size: 1.3rem !important;
        color: var(--default-icon-color);
        cursor: pointer;
    }

.style1 {
    color: var(--default-font-color);
}

.style1a {
    color: #525152 !important;
}

.style1b {
    color: var(--default-link-unassigned-color) !important;
}

    .style1b a:link, .style1b a:visited, .style1b a:active {
        color: var(--default-link-unassigned-color) !important;
    }

    .style1b a:hover {
        color: var(--default-link-hover-color);
    }

.style1c {
    color: var(--default-link-current-color) !important;
}

    .style1c a:link, .style1c a:visited, .style1c a:active {
        color: var(--default-link-current-color) !important;
    }

    .style1c a:hover {
        color: var(--default-link-hover-color);
    }

.style1d {
    color: rgb(238,71,0) !important;
}

.style1e {
    color: var(--default-link-unread-color) !important;
}

    .style1e a:link, .style1e a:visited, .style1e a:active {
        color: var(--default-link-unread-color) !important;
    }

    .style1e a:hover {
        color: var(--default-link-hover-color);
    }

.style1l {
    color: #dcdada !important;
}

.style2, .style3 {
    color: var(--default-font-color);
    white-space: nowrap;
}

.sysmessagetitle {
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
}

.sysmessage {
    font-size: 1.3rem;
    line-height: 1.5;
}

.kblink {
    color: rgb(0,0,255);
    text-decoration: underline;
}

.bold1, .bold3 {
    color: var(--default-font-color);
    font-weight: 600;
}

.bold1a a:link, .bold1a a:active, .bold1a a:visited {
    color: var(--default-font-color);
    font-weight: 600;
    background-color: transparent;
}

.bold1a a:hover {
    font-weight: 600;
    color: var(--default-font-color);
    background-color: var(--default-background-color);
}

.bold2 {
    font-weight: 600;
    color: var(--default-font-color);
}

.bold3 a:link, .bold3 a:active, .bold3 a:visited {
    color: var(--default-font-color);
    font-weight: 600;
    background-color: transparent;
}

.bold3 a:hover {
    font-weight: 600;
    color: var(--default-font-color);
    background-color: var(--default-background-color);
}

.smtext1 {
    font-size: 6pt;
    line-height: 1;
    color: var(--default-font-color);
}

.smtext2 {
    font-size: 7pt;
    line-height: 1;
}

.comp1, .error1 {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: rgb(238,71,0);
}

.error1 {
    color: #d12929;
}

.textOverflow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 2.5rem);
}

.tableheader1 {
    background-color: #CEE3FB;
    border-style: solid;
    border-collapse: separate;
    border-top-color: #A3A7AC;
    border-bottom-color: #A0A0A0;
    border-left-color: #9ac6ff;
    border-right-color: #9ac6ff;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

.tablerowselected {
    background-color: #a6a8ea;
}

.tablerecords1, .tablerecords2 {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-input-color);
    cursor: pointer;
}

.tablerecords1 {
    background-color: rgb(255,255,255);
}

.tablerecords2 {
    background-color: rgb(221,221,221);
}

.toolbarruler {
    position: relative;
    display: inline-block;
    background-color: var(--toolbar-ruler-color);
    height: 27px;
    background-image: url(../images/ruler1.png);
}

.toolbarleft {
    width: 8px;
    height: 16px;
    background-color: transparent;
    cursor: default;
}

.toolbarbuttonimg {
    display: inline;
    float: left;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border-style: none;
    border-width: 0px;
    filter: var(--default-image-toolbarbutton-filter);
}

    .toolbarbuttonimg[data-recording="true"], [data-pulsing="true"] {
        border-radius: 50%;
        animation: recording-animation 2s infinite;
    }

    .toolbarbuttonimg[data-dictating="true"] {
        border-radius: 50%;
        animation: dictation-animation 2s infinite;
    }

.toolbarbuttonimgspacer {
    display: inline;
    position: relative;
    float: left;
    width: 5px;
    height: 16px;
    padding: 0px 0px 0px 0px;
    border-style: none;
    border-width: 0px;
}

.toolbarbuttontext {
    display: inline;
    float: left;
    position: relative;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--toolbar-button-text-color);
    line-height: 1;
    text-decoration: none;
}

.toolbarbutton {
    position: relative;
    display: inline-flex;
    align-items: center;
    float: left;
    width: max-content;
    max-height: 2.8rem;
    padding: 0.5rem;
    cursor: default;
    border: solid 1px var(--toolbar-button-border-color);
    border-radius: var(--default-input-border-radius);
    background-color: var(--toolbar-button-color);
    transition: all 300ms ease-out;
}

    .toolbarbutton::after, .toolbarbutton.active::after {
        content: attr(data-collapsed);
        position: absolute;
        right: -2px;
        top: -3px;
        width: 1rem;
        height: 1rem;
        font-size: 0.7rem;
    }

    .toolbarbutton.active::after {
        content: attr(data-expanded);
    }

    .toolbarbutton:hover, .toolbarbuttonover {
        display: inline-flex;
        align-items: center;
        float: left;
        width: max-content;
        padding: 0.5rem;
        cursor: pointer;
        border: solid 1px var(--toolbar-button-hover-border-color);
        background-color: var(--toolbar-button-hover-color);
    }

    .toolbarbutton > span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.75);
        color: var(--toolbar-button-text-color) !important;
        background: var(--toolbar-button-icon-gradient) !important;
        -webkit-background-clip: text !important;
    }

    .toolbarbutton:hover > span.material-icons {
        color: var(--toolbar-button-hover-text-color) !important;
        background: var(--toolbar-button-icon-hover-gradient) !important;
        -webkit-background-clip: text !important;
    }

    .toolbarbutton:hover .toolbarbuttontext {
        color: var(--toolbar-button-hover-text-color);
    }

.toolbarbuttondisabled {
    display: inline;
    float: left;
    background-color: #e7e7e7;
    border-width: 1px;
    border-color: #c9c4c4;
    border-style: solid;
    padding-top: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    cursor: not-allowed;
    outline: none;
}

.toolbarbuttonspacer {
    display: inline;
    float: left;
    width: 1px;
    height: 16px;
    margin: 0 0.5rem;
    background-color: var(--toolbar-button-spacer-color);
    cursor: default;
}

.toolbarsspacer {
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border-top: solid 1px var(--default-header-border-color);
}

.toolbarbuttonbutton {
    position: absolute;
    top: -3px;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    line-height: 1;
    text-decoration: none;
}

.versaToolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 4.5rem;
    padding: 0.5rem;
    border-bottom: solid 1px var(--default-header-border-color);
}

    .versaToolbar.noborders {
        border: none;
    }

div.versaButton {
    min-width: 3rem;
    height: 3rem;
    font-size: var(--default-font-size);
    text-align: center;
    border: solid 1px var(--button-border-color);
    border-radius: var(--default-input-border-radius) !important;
    color: var(--button-text-color);
    background-color: var(--button-color);
    padding: 0.6rem !important;
    cursor: pointer;
    user-select: none;
    transition: all 300ms ease-out;
}

    div.versaButton:hover {
        color: var(--button-hover-text-color) !important;
        background-color: var(--button-hover-color) !important;
        border: solid 1px var(--button-hover-border-color) !important;
    }

    div.versaButton:has(.material-icons) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        border: solid 1px transparent;
    }

    div.versaButton > .material-icons {
        font-size: calc(var(--default-icon-size) * 0.8);
        color: var(--button-text-color);
        background: var(--default-icon-gradient) !important;
        /*text-shadow: 1px 3px 3px rgba(96, 96, 96, 0.3);*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text !important;
    }

    div.versaButton:hover > .material-icons {
        color: var(--button-hover-text-color);
        background: var(--default-icon-hover-gradient) !important;
        -webkit-background-clip: text !important;
    }

    div.versaButton:after {
        line-height: 1;
    }

    div.versaButton[title^="Create New"]:has(.material-icons), div.versaButton[title^="Update"]:has(.material-icons), div.versaButton[title^="Save"]:has(.material-icons), div.versaButton[title="Send"]:has(.material-icons), div.versaButton[title^="Resource Library"]:has(.material-icons), div.versaButton[title^="Form Library"]:has(.material-icons) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background-color: var(--button-color);
        border: solid 1px var(--button-border-color);
    }

    div.versaButton[title="Create New"]::after {
        content: 'Create New';
    }

    div.versaButton[title="Resource Library"]::after {
        content: 'Resource Library';
    }

    div.versaButton[title="Form Library"]::after {
        content: 'Form Library';
    }

    div.versaButton[title="Save"]::after {
        content: 'Save';
    }

    div.versaButton[title="Save & Exit"]::after {
        content: 'Save & Exit';
    }

    div.versaButton[title="Save & Close"]::after {
        content: 'Save & Close';
    }

    div.versaButton[title="Send"]::after {
        content: 'Send';
    }

    div.versaButton[title^="Update"]::after {
        content: 'Update';
    }

    div.versaButton[title^="Save"] > .material-icons {
        color: #094ea5;
        background: -webkit-linear-gradient(#76aaf9,#094ea5);
        -webkit-background-clip: text;
    }

    div.versaButton[title="Save & Exit"] > .material-icons {
        color: #db11b9;
        background: -webkit-linear-gradient(#fbdff6,#db11b9);
        -webkit-background-clip: text;
    }

    div.versaButton[title~="New"] > .material-icons {
        color: #094ea5;
        background: -webkit-linear-gradient(#76aaf9,#094ea5);
        -webkit-background-clip: text;
    }

    div.versaButton[title^="Open"] > .material-icons {
        color: #e3a20f;
        background: -webkit-linear-gradient(#edc362,#e3a20f);
        -webkit-background-clip: text;
    }

    div.versaButton[title^="Preview"] > .material-icons {
        color: #044c7f;
        background: -webkit-linear-gradient(#7cb8e3, #044c7f);
        -webkit-background-clip: text;
    }

    div.versaButton[title~="History"] > .material-icons {
        color: #0fd543;
        background: -webkit-linear-gradient(#52df77,#0fd543);
        -webkit-background-clip: text;
    }

    div.versaButton[title="Send"] > .material-icons {
        color: #ed6312;
        background: -webkit-linear-gradient(#edae23,#ed6312);
        -webkit-background-clip: text;
    }

    div.versaButton[title^="Update"] > .material-icons {
        color: #09a539;
        background: -webkit-linear-gradient(#76f9b0,#09a539);
        -webkit-background-clip: text;
    }

    div.versaButton[title="Cancel"] {
        display: none;
    }

    div.versaButton[title="Cancel"], div.versaButton[title="Close"] {
        background-color: transparent;
    }

        div.versaButton[title="Cancel"]:hover, div.versaButton[title="Close"]:hover {
            border: solid 1px #c95656 !important;
            background-color: #c95656 !important;
        }

        div.versaButton[title="Cancel"] > .material-icons, div.versaButton[title="Close"] > .material-icons {
            color: #ff0000;
            background: -webkit-linear-gradient(#ff8585, #ff0000);
            -webkit-background-clip: text;
        }

        div.versaButton[title="Cancel"]:hover > .material-icons, div.versaButton[title="Close"]:hover > .material-icons {
            color: #ffffff;
            background: -webkit-linear-gradient(#ffffff, #ffffff);
            -webkit-background-clip: text;
        }

    div.versaButton > .material-icons.unread-email {
        color: #fb9701 !important;
        background: -webkit-linear-gradient(#f3ea7e, #fb9701) !important;
        -webkit-background-clip: text !important;
    }

    div.versaButton > .material-icons.share-record {
        color: #2aa5df;
        background: -webkit-linear-gradient(#7590f3, #2aa5df);
        -webkit-background-clip: text;
    }

    div.versaButton > .material-icons.convert-pdf {
        color: #db0e0e;
        background: -webkit-linear-gradient(#fd5858, #db0e0e);
        -webkit-background-clip: text;
    }

    div.versaButton > .material-icons.zip-record {
        color: #9b6fe1;
        background: -webkit-linear-gradient(#c0a2f1, #9b6fe1);
        -webkit-background-clip: text;
    }

    div.versaButton > .material-icons.view-archive {
        color: #686868;
        background: -webkit-linear-gradient(#cfcfcf, #686868);
        -webkit-background-clip: text;
    }

    div.versaButton > .material-icons.kb-article {
        color: #1297d7;
        background: -webkit-linear-gradient(#89cff1, #1297b5);
        -webkit-background-clip: text;
    }

    div.versaButton > .material-icons.microphone {
        position: relative;
        color: #5f5e5f;
        background: -webkit-linear-gradient(#a1a1a1, #5f5e5f);
        -webkit-background-clip: text;
    }

    div.versaButton:has(.material-icons.microphone[data-recording="true"]) {
        color: #d9141a;
        background: -webkit-linear-gradient(#eb9da0, #d9141a);
        -webkit-background-clip: text;
        border-radius: 50% !important;
        animation: recording-animation 2s infinite;
    }

    div.versaButton > .material-icons.microphone[data-recording="true"]:after {
        content: '';
        position: absolute;
        left: 42%;
        bottom: 5%;
        width: 8px;
        height: 8px;
        border: solid 2px #fff;
        border-radius: 50%;
        background-color: #ff0000;
    }

@keyframes recording-animation {
    0% {
        box-shadow: 0 0 0 0px rgb(212, 16, 16, 0.5);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
    }
}

div.versaButton > .material-icons.transcribe {
    position: relative;
    color: #d275e9;
    background: -webkit-linear-gradient(#8a5e95, #d275e9);
    -webkit-background-clip: text;
}

div.versaButton:has(.material-icons.transcribe[data-dictating="true"]) {
    color: #0a75bd;
    background: -webkit-linear-gradient(#8ccaf3, #0a75bd);
    -webkit-background-clip: text;
    border-radius: 50% !important;
    animation: dictation-animation 2s infinite;
}

div.versaButton > .material-icons.transcribe[data-dictating="true"]:after {
    content: '';
    position: absolute;
    left: 42%;
    bottom: 5%;
    width: 8px;
    height: 8px;
    border: solid 2px #fff;
    border-radius: 50%;
    background-color: #c9160d;
}

@keyframes dictation-animation {
    0% {
        box-shadow: 0 0 0 0px rgb(17 202 38 / 0.50);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
    }
}

div.versaButton > .material-icons.reminder {
    color: #0bcc39;
    background: -webkit-linear-gradient(#06b22f, #0bcc39);
    -webkit-background-clip: text;
}

div.versaButton > .material-icons.timesheet {
    color: #e75353;
    background: -webkit-linear-gradient(#f59578, #e75353);
    -webkit-background-clip: text;
}

div.versaButton > .material-icons.refresh {
    color: #0bc923;
    background: -webkit-linear-gradient(#86ef7a, #0bc923);
    -webkit-background-clip: text;
}

div.versaButton > .material-icons.attachment {
    color: #a7a7a7;
    background: -webkit-linear-gradient(#c7c7c7, #a7a7a7);
    -webkit-background-clip: text;
}

.versaButton.versaButtonDisabled {
    border: solid 1px var(--button-disabled-color) !important;
    background-color: var(--button-disabled-color) !important;
    pointer-events: none;
}

    .versaButton.versaButtonDisabled::after {
        color: #9d9d9d;
    }

    .versaButton.versaButtonDisabled > span.material-icons {
        color: #9d9d9d;
        background: -webkit-linear-gradient(#9d9d9d, #696969) !important;
        -webkit-background-clip: text !important;
    }

div.versaButton.versaDropDown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    position: relative;
    min-width: 8rem;
    text-align: left;
}

    div.versaButton.versaDropDown:hover {
        min-width: 8rem;
        text-align: left;
    }

    div.versaButton.versaDropDown:after {
        display: flex;
        align-items: center;
        justify-content: center;
        content: '▼';
        font-family: Arial;
        font-size: 1rem;
        color: var(--button-text-color);
    }

    div.versaButton.versaDropDown:hover::after {
        color: var(--button-hover-text-color);
    }

    div.versaButton.versaDropDown.Active {
        color: var(--button-hover-text-color) !important;
        border: solid 1px var(--button-hover-border-color);
        background-color: var(--button-hover-color) !important;
    }

        div.versaButton.versaDropDown.Active:after {
            display: flex;
            align-items: center;
            justify-content: center;
            content: '▲';
            font-family: Arial;
            font-size: 1rem;
            color: var(--button-hover-text-color);
        }

div.versaDropDown > ul.versaDropDownMenu {
    z-index: 5;
    visibility: hidden;
    position: absolute;
    left: -1px;
    top: 15px;
    min-height: 0;
    max-height: 0;
    border: var(--cm-border);
    border-radius: var(--default-input-border-radius);
    background-color: var(--cm-background-color);
    list-style-type: none;
    padding-inline-start: 0;
    overflow: hidden;
    transition: all ease-out 150ms;
}

div.versaDropDown.Active > ul.versaDropDownMenu {
    visibility: visible;
    min-height: 2rem;
    max-height: 48rem;
    transition: all ease-in 250ms 150ms;
}

div.toolbarbutton.versaDropDown > ul.versaDropDownMenu {
    top: 4px;
    border: var(--cm-border);
}

.versaDropDownMenu li {
    width: calc(100% - 2rem);
    margin: 0 0 0 2rem;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: var(--default-font-size);
    white-space: nowrap;
    color: var(--cm-font-color);
    border: solid 1px transparent;
    background-color: var(--cm-background-color);
}

    .versaDropDownMenu li:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: 100%;
        background-color: var(--cm-icon-background-color);
    }

    .versaDropDownMenu li:not(.divider):hover {
        color: var(--cm-font-hover-color);
        background-color: var(--cm-background-hover-color) !important;
    }

    .versaDropDownMenu li.divider {
        padding: 0;
        margin: 0.2rem 0;
        width: 100%;
        max-height: 1px;
        min-height: 1px;
        border: none;
        background-color: var(--cm-divider-color);
    }

.customButtonImg {
    display: inline;
    width: 16px;
    height: 16px;
    margin: 6px;
    border-style: none;
    border-width: 0px;
}

.customButtonText {
    display: inline;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
}

.customButton {
    background-color: #ffffff;
    border-left: 0px solid #A0A0A0;
    border-right: 0px solid #A0A0A0;
    border-top: 0px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    height: 30px;
    width: 100%;
    cursor: default;
}

.customButtonOver {
    background-color: #e6f2fa;
    border-left: 0px solid #A0A0A0;
    border-right: 0px solid #A0A0A0;
    border-top: 0px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    height: 30px;
    width: 100%;
    cursor: default;
}

.imgButton {
    height: 16px;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    cursor: default;
    border-width: 1px;
    border-color: #707070;
    border-style: solid;
}

.imgButtonDisabled {
    height: 16px;
    background-color: transparent;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    cursor: default;
}

.imgButtonDisabled, input[type="button"].buttonDisabled, input[type="button"]:disabled, input[type="submit"]:disabled {
    color: #838383 !important;
    background-color: var(--button-disabled-color) !important;
    border-width: 1px !important;
    border-color: var(--button-disabled-color) !important;
    border-style: solid !important;
    cursor: not-allowed;
    outline: none;
}

.imgButtonVerticalHolder {
    height: 24px;
}

.sideButton, .sideButtonOver, .sideButtonSelected {
    position: relative;
    border: solid 1px transparent;
    background-color: transparent;
    padding: 0.5rem;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sideButtonOver {
    border: 1px solid var(--tab-highlight-border-color);
    background-color: var(--tab-highlight-border-color);
}

.sideButtonSelected {
    margin: 0 0 0 -0.5rem;
    border: 1px solid var(--tab-border-color);
    background-color: var(--default-background-color);
}

/* Context Menu Start */
.ContextMenuBodyShadow {
    z-index: 100;
    position: absolute;
    display: none;
    border: var(--cm-border);
    border-radius: calc(var(--default-border-radius) / 1.5);
    background-color: var(--cm-background-color);
    box-shadow: var(--default-box-shadow);
}

.ContextMenuBody {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 1rem);
    margin: 0.5rem 0;
}

.ContextMenuIFrameBody {
    z-index: 1;
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 0;
    border: var(--cm-border);
    border-radius: calc(var(--default-border-radius) / 1.5);
    background-color: var(--cm-background-color);
    box-shadow: var(--default-box-shadow);
}

    .ContextMenuBody:before, .ContextMenuIFrameBody:before {
        content: ' ';
        position: absolute;
        background-color: var(--cm-icon-background-color);
        width: 24px;
        white-space: nowrap;
    }

.ContextSubMenuBody {
    z-index: 200;
    position: absolute;
    padding: 0.5rem 0;
    min-width: calc(var(--default-font-size) * 12);
    height: max-content;
    border: var(--cm-border);
    background-color: var(--cm-background-color);
    border-radius: calc(var(--default-border-radius) / 1.5);
    box-shadow: var(--default-box-shadow);
}

.ContextMenuItem, .ContextMenuItemOver {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    border-style: solid;
    border-width: 1px;
    color: var(--cm-font-color);
    border-color: var(--cm-background-color);
    background-color: var(--cm-background-color);
    padding: 0.25rem;
    margin: 0;
    cursor: default;
}

    .ContextMenuItem:hover, .ContextMenuItemOver {
        color: var(--cm-font-hover-color);
        border-color: var(--cm-background-hover-color);
        background-color: var(--cm-background-hover-color);
    }

    .ContextMenuItem > .ContextSubMenuBody {
        display: none;
    }

    .ContextMenuItem:hover > .ContextSubMenuBody, .ContextMenuItemOver > .ContextSubMenuBody {
        display: block;
        left: 98%;
    }

.ContextMenuItemDisabled {
    filter: alpha(opacity=35);
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    cursor: default;
    min-height: 2.5rem;
    border-top: solid 1px transparent;
    border-right: solid 1px transparent;
    border-bottom: solid 1px transparent;
    border-left: solid 1px transparent;
    padding: 2px;
    margin: 0;
}

.ContextMenuItemDivider {
    position: relative;
    background-color: var(--cm-divider-color);
    border: none;
    height: 1px;
    cursor: default;
}

.ContextMenuItemImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
}

    .ContextMenuItemImage > span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.75) !important;
        color: var(--default-icon-color);
    }

.ContextMenuItemText {
    position: relative;
    font-family: var(--default-font-family);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    white-space: nowrap;
    padding: 0;
    margin: 0 0.5rem;
    cursor: default;
    border: none;
}

.ContextMenuItemImageBlank {
    position: relative;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border: none;
}
/* Context Menu End */
.timeline {
    background-color: rgb(128,255,128);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
}

.disableImage {
    color: #B5B6CE;
    cursor: default;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
    /* filter: progid:DXImageTransform.Microsoft.Emboss(); */
}

.editDivImg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--default-input-background-color);
    margin: 0 -0.1rem 0 0;
    padding: 0.1rem;
    min-height: 2.65rem;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius) 0 0 var(--default-input-border-radius);
    border-right: none;
    outline: none;
}

.editDiv {
    display: inline-block;
    background-color: var(--default-input-background-color);
    border: var(--default-input-border);
    width: 100px;
    text-align: left;
    padding: 0.25rem;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: text;
    outline: none;
}

.editDivRight {
    float: left;
    background-color: var(--default-input-background-color) !important;
    border: var(--default-input-border) !important;
    border-radius: 0 var(--default-input-border-radius) var(--default-input-border-radius) 0 !important;
    border-left: none !important;
    width: 100px;
    text-align: left;
    padding: 0.25rem;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}

div[contenteditable="true"] {
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    outline: none;
}

/* Start Application Tab Styling */

/* Side Panel */
.sidePanel {
    z-index: 2001;
    position: fixed;
    display: grid;
    grid-template-rows: 3.65rem 1fr;
    top: 71px;
    width: 32vw;
    height: calc(100vh - 71px);
    border: solid 1px transparent;
    background-color: transparent;
    opacity: 0.0;
    transition-property: right, opacity, background-color;
    transition-duration: 500ms;
    transition-timing-function: linear;
}
    .sidePanel.right {
        right: -134vw;
    }
    .sidePanel.left {
        left: -34vw;
    }
    .sidePanel.right.show {
        right: 0;
        top: 71px;
        border-left: solid 1px var(--tab-border-color);
        background-color: var(--default-background-color);
        opacity: 1.0;
    }
    .sidePanel.left.show {
        left: 0;
        top: 0;
        border-right: solid 1px var(--tab-border-color);
        background-color: var(--default-background-color);
        opacity: 1.0;
    }
    .sidePanel > iframe {
        width: 100%;
        height: 100%;
    }

/* Side Tabs */
.mainSideBody {
    position: relative;
    margin-left: 200px;
    top: 10px;
    background-color: var(--default-background-color);
}

.sidetabs {
    float: left;
    width: 188px;
    padding-top: 12px;
    padding-left: 10px;
    background-color: var(--panel-background-color);
}

.sidetabselected, .sidetabsunselected {
    background-color: var(--tabon-background-color);
    font-size: var(--default-font-size);
    color: var(--tabon-text-color);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    text-align: Left;
    cursor: pointer;
    min-height: 2.5rem;
    padding: 0.5rem;
    margin-bottom: 6px;
    border-bottom: solid 1px var(--tab-border-color);
    border-left: solid 3px var(--tab-highlight-border-color);
    border-top: none;
    border-right: none;
    border-radius: var(--tab-border-radius) 0 0 var(--tab-border-radius);
    user-select: none;
}

.sidetabsunselected {
    background-color: transparent;
    color: var(--taboff-text-color);
    padding: 0.5rem 7px;
    border-left: solid 1px var(--tab-border-color);
}

    .sidetabselected:hover, .sidetabsunselected:hover {
        background-color: var(--tabon-background-color);
        font-size: var(--default-font-size);
        color: var(--taboff-text-color);
        padding: 0.5rem;
        border-left: solid 3px var(--tab-highlight-border-color);
    }

.sidetabshidden {
    display: none;
}

.sidetabhighlighted {
    background-color: #f2ca47;
    font-size: 1.3rem;
    color: var(--tabon-text-color);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    text-align: Left;
    cursor: pointer;
    min-height: 2.5rem;
    padding: 0.5rem;
    margin-bottom: 6px;
    border-bottom: solid 1px var(--tab-border-color);
    border-left: solid 3px var(--tab-highlight-border-color);
    border-top: none;
    border-right: none;
    border-radius: var(--tab-border-radius) 0 0 var(--tab-border-radius);
    user-select: none;
}

.sidetabsnone {
    background-color: transparent;
}

    .sidetabsnone > img[src^="photo.png"] {
        opacity: 0.3;
    }

.sidetabimg {
    width: 16px;
    height: 16px;
    margin: 5px;
    border-style: none;
    border-width: 0px;
}

.sidetabtext {
    display: inline;
    position: relative;
    min-height: 2.5rem;
    font-size: 1.3rem;
    line-height: 1;
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    text-decoration: none;
}

/* General Tabs */
.tabbody {
    background-color: var(--default-background-color); /*#f4f3ee;*/
    border-style: solid;
    border-width: 1px;
    border-top-color: var(--tab-border-color);
    border-bottom-color: var(--tab-border-color);
    border-left-color: var(--tab-border-color);
    border-right-color: var(--tab-border-color);
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    padding: 1.5rem;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--taboff-text-color);
    text-align: left;
    cursor: default;
}

#cellIFRAME, #cellButtons {
    padding: 0 0 0 1rem;
    white-space: normal;
}

.tabbody:has(#cellIFRAME) {
    height: calc(100vh - 12.3rem);
}

.tabbody #cellIFRAME {
    height: calc(100vh - 16rem);
    padding: 0 !important;
}

/* Used for search tab list */
#divGridSearch {
    z-index: 10;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 21vw;
    border: var(--default-input-border);
    background-color: var(--default-input-background-color);
    border-radius: calc(var(--default-border-radius)/2);
    padding: 0.5rem;
}

    #divGridSearch input[type="text"] {
        width: 70%;
        border: none;
        outline: none
    }

    #divGridSearch span {
        position: absolute;
        right: 0.5rem;
        bottom: 0.2rem;
        width: max-content;
        border: none;
        outline: none;
    }

    #divGridSearch div.windowClose {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 1px;
        right: 5px;
        background-position: -78px center;
        background-size: auto 16px;
        background-color: #c95656;
    }

.highlightFind {
    background-color: #f6f815;
    color: #000000;
    text-transform: uppercase;
}

.highlightFocus {
    background-color: #FF9632 !important;
}

.taboff, .tabon, .tabover, .tabalert, .tabdisabled, .tabspacer {
    background-color: var(--taboff-background-color);
    border: solid 1px var(--tab-border-color);
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--taboff-text-color);
    text-align: center;
    padding: 0 0.5rem;
    white-space: nowrap !important;
    cursor: pointer;
    user-select: none;
}

.tabon {
    background-color: var(--tabon-background-color); /*#f4f3ee;*/
    border-top: solid 3px var(--tab-highlight-border-color);
    border-bottom: none;
    color: var(--tabon-text-color);
}

.taboff:hover, .tabover {
    background-color: var(--taboff-background-color);
    border-top: solid 1px var(--tab-highlight-border-color);
    cursor: default;
}

.taboffsmall {
    width: 15px;
    background-color: var(--taboff-background-color);
    border: solid 1px var(--tab-border-color);
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 0.75);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--taboff-text-color);
    text-align: center;
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.tabalert {
    background-color: var(--tabalert-background-color);
    border: solid 1px var(--tabalert-background-color);
    color: var(--tabalert-text-color);
}

.tabdisabled {
    background-color: #ece9d8;
    color: #aaaaaa;
}

.tabspacer {
    padding: 0 !important;
    border: none;
    border-bottom: solid 1px var(--tab-border-color);
    background-color: transparent;
}

.tabdivspacer {
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.tabnone {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-bottom-color: var(--tab-border-color);
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    user-select: none;
}

.tabhide {
    display: none;
}

.tabclose {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius);
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px center;
    background-color: transparent;
}

    .tabclose:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: #c95656;
    }

/* MDI Tabs */
.mditabbody {
    background-color: var(--default-background-color);
    border-style: solid;
    border-width: 1px;
    border-top-color: var(--tab-border-color);
    border-bottom-color: var(--tab-border-color);
    border-left-color: var(--tab-border-color);
    border-right-color: var(--tab-border-color);
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-radius: 0;
    padding: 1rem;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--taboff-text-color);
    text-align: left;
    cursor: default;
}

    .mditabbody.outer {
        border-width: 0 !important;
        border-radius: 0 0 var(--default-border-radius) var(--default-border-radius) !important;
    }

    .mditabbody select {
        padding: 0.25rem 2.5rem 0.25rem 0.5rem !important;
    }

    .mditabbody #versaGrid-Header {
        color: var(--vg-header-color);
    }

.mditabon, .mditaboff, .mditabover, .mditabhighlight, .mditabhighlight1a, .mditabdisabled {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--tabon-background-color);
    border: solid 1px var(--tab-border-color);
    border-left-color: var(--tab-border-color);
    border-top: solid 3px var(--tab-highlight-border-color);
    border-bottom: none;
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--tabon-text-color);
    text-align: center;
    padding: 0 1rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
    /* this is required to cover up a missing pixel on bottom corners on the selected tab */
    .mditabon::before {
        position: absolute;
        left: -1px;
        bottom: -1px;
        content: '';
        width: 1px;
        height: 1px;
        background-color: var(--tab-border-color);
    }

    .mditabon::after {
        position: absolute;
        right: -1px;
        bottom: -1px;
        content: '';
        width: 1px;
        height: 1px;
        background-color: var(--tab-border-color);
    }

    .mditabon:has(.tabclose) {
        padding: 0 0.25rem 0 1rem;
    }

    .mditaboff:has(.tabclose), .mditabover:has(.tabclose) {
        padding: 2px 0.25rem 0 1rem;
    }

        .mditabon:has(.tabclose) > div:first-child, .mditaboff:has(.tabclose) > div:first-child, .mditabover:has(.tabclose) > div:first-child {
            width: calc(100% - 1.5rem);
        }

.mditabhighlight {
    color: var(--taboff-text-color);
}

.mditabhighlight1a {
    background-color: #fae38b;
    border-top: solid 3px var(--tab-border-color);
    color: var(--taboff-text-color);
}

.mditaboff, .mditabover {
    padding: 2px 1rem 0 1rem; /* 2px top padding is needed to offset the 2px missing border-top */
    background-color: var(--taboff-background-color);
    border: solid 1px var(--tab-border-color);
    border-top: solid 1px var(--tab-border-color);
    border-bottom: solid 1px var(--tab-border-color);
    color: var(--taboff-text-color);
}

    .mditaboff:hover, .mditabhighlight1a:hover, .mditabover {
        background-color: var(--tabon-background-color);
        border-top: solid 1px var(--tab-highlight-border-color);
    }

.mditabdisabled {
    color: #aaaaaa;
    padding: 2px 1rem 0 1rem; /* 2px top padding is needed to offset the 2px missing border-top */
    border: solid 1px var(--tab-border-color);
    background-color: #797979;
    user-select: none;
    cursor: not-allowed;
}

.mditabhidden {
    display: none;
}

.mditabspacer {
    background-color: var(--tab-background-color);
    border-style: solid;
    border-width: 1px;
    border-right-color: var(--tab-border-color);
    border-left-color: var(--tab-border-color);
    border-bottom-color: var(--tab-border-color);
    border-top-color: var(--tab-border-color);
    border-top-width: 1px;
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    cursor: default;
    white-space: nowrap;
}

.mditabdivspacer {
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.mditabnone {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-bottom-color: var(--tab-border-color);
    border-top-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-style: none;
    user-select: none;
}
/* End Application Tab Styling */

.dgContainer, .dgLookupContainer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--default-background-color);
    border: var(--vg-container-border);
}

    .dgContainer.tablisting {
        height: 100vh;
    }

    .dgContainer:has(.noRecords, .norecords) {
        width: 100% !important;
        border: none;
        overflow: hidden;
    }

    .dgContainer .noRecords, .norecords {
        font-weight: var(--default-font-weight);
        font-style: italic;
        color: var(--default-font-color) !important;
        padding: 1rem;
    }

.dgLookupContainer {
    position: absolute;
    padding: 0.5rem;
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow);
    overflow: hidden;
}

    .dgLookupContainer:before {
        content: attr(data-title);
        width: 100%;
        color: var(--default-font-color);
    }

    .dgLookupContainer .datagrid {
        margin: 0.5rem 0;
        padding: 0.5rem;
        height: calc(100% - 3rem);
        border: var(--vg-container-border) !important;
        border-collapse: collapse;
        overflow: auto;
        outline: var(--default-input-outline);
    }

        .dgLookupContainer .datagrid > div {
            padding: 0.5rem;
            color: var(--vg-row-color);
            background-color: var(--vg-row-background-color);
            border-bottom: solid 1px var(--vg-row-select-background-color);
        }

            .dgLookupContainer .datagrid > div:nth-child(even) {
                color: var(--vg-row-alt-color);
                background-color: var(--vg-row-alt-background-color);
            }

            .dgLookupContainer .datagrid > div.datagridHighlightRow {
                background-color: var(--vg-row-select-background-color);
            }

            .dgLookupContainer .datagrid > div:hover {
                color: var(--vg-row-hover-color);
                background-color: var(--vg-row-hover-background-color);
                cursor: pointer;
            }

#divHeader + .dgContainer:has(.datagrid) {
    width: 100% !important;
    border: var(--vg-container-border);
    border-top: solid 1px transparent !important;
    border-left: solid 1px transparent !important;
}

.dgAuditLogContainer {
    margin: -1rem 0 0 -1rem;
    width: calc(100% + 2rem);
    height: calc(100% + 1.5rem);
    border: none;
}

    .dgAuditLogContainer .dgContainer {
        height: calc(100% - 3rem) !important;
        border: none !important;
    }

#gvEntityList + .noRecords {
    font-size: 1.3rem;
}

.datagrid, .datagridnoborders, .datagridHeader, .datagridCell, .datagridSelectCell, .datagridRow, .datagridAltRow, .datagridArchiveRow, .versagrid, .versagrid-noborders, .versagrid-header, .versagrid-select-row, .versagrid-highlight-row, .versagrid-row, .versagrid-alt-row, .versagrid-archive-row {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
    cursor: default;
}
    .versagrid, .versagrid-noborders, .versagrid-header, .versagrid-select-row, .versagrid-highlight-row, .versagrid-row, .versagrid-alt-row, .versagrid-archive-row {
        user-select: none;
    }

    .datagrid span.material-icons, .datagrid i.material-icons {
        font-size: calc(var(--default-icon-size) * 0.8) !important;
    }

.datagridnoborders {
    cursor: default;
}

    .datagridnoborders th, .datagridnoborders td {
        padding: 0.75rem;
    }

.datagrid {
    border: solid 0px transparent !important;
    border-collapse: collapse;
    /*border-right: solid 1px transparent;*/
}

    .datagrid tr[data-actioncount] > td:last-child {
        white-space: nowrap;
    }

    .datagrid th, .datagrid td {
        border: solid var(--vg-cell-border-width) var(--vg-cell-border-color);
        padding: 0.75rem;
    }
/*
        .datagrid td:first-child {
            border-left: 1px solid transparent;
        }

        .datagrid td:last-child {
            border-right: 1px solid transparent;
        }*/

tr.datagridHeader {
    border: none !important;
}

th.datagridHeader[data-sortby], td.datagridHeader[data-sortby] {
    cursor: pointer;
}

th.datagridHeader, th.datagridHeaderAsc, th.datagridHeaderDesc, td.datagridHeader, td.datagridHeaderAsc, td.datagridHeaderDesc {
    position: sticky; /* ensure headers are fixed to the top */
    top: 0;
    z-index: 2;
}

th.datagridHeader, th.datagridHeaderAsc, th.datagridHeaderDesc, td.datagridHeader, td.datagridHeaderAsc, td.datagridHeaderDesc, .versagrid-row-header {
    color: var(--vg-header-color);
    background-color: var(--vg-header-background-color);
    border: none;
    border-bottom: solid var(--vg-header-border-width) var(--vg-header-border-color);
    text-align: left;
}

    th.datagridHeader:after, td.datagridHeader:after {
        content: '';
        background-image: none;
        background-repeat: no-repeat;
    }

    th.datagridHeaderAsc:after, td.datagridHeaderAsc:after {
        content: '';
        float: right;
        width: 16px;
        height: 16px;
        content: '';
        background-image: url(../images/ascending.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    th.datagridHeaderDesc:after, td.datagridHeaderDesc:after {
        content: '';
        float: right;
        width: 16px;
        height: 16px;
        background-image: url(../images/descending.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    th.datagridHeader > i.material-icons, td.datagridHeader > i.material-icons {
        font-size: var(--default-icon-size);
        color: var(--default-icon-color);
        padding: 0;
    }

    th.datagridHeader a, td.datagridHeader a {
        color: var(--default-link-color);
    }

        th.datagridHeader a:hover, td.datagridHeader a:hover {
            color: var(--default-link-hover-color);
            background-color: transparent;
        }

    th.datagridHeader:first-child, td.datagridHeader:first-child {
        border-left: none;
        border-right: none;
    }

    th.datagridHeader:last-child, td.datagridHeader:last-child {
        border-left: none;
        border-right: none;
    }    

/* Override "whosline" datagrid styling */
#whosonline th.datagridHeader:first-child, #whosonline td.datagridHeader:first-child {
    border-left: none;
}

#whosonline th:first-child, #whosonline td:first-child {
    border-left: none;
}

.datagridRow {
    color: var(--vg-row-color);
    background-color: var(--vg-row-background-color);
    border-bottom: solid 1px var(--vg-row-border-color);
}

.datagridAltRow {
    color: var(--vg-row-alt-color);
    background-color: var(--vg-row-alt-background-color);
    border-bottom: solid 1px var(--vg-row-border-color);
}

.datagridSelectRow {
    color: var(--vg-row-select-color) !important;
    background-color: var(--vg-row-select-background-color) !important;
    border-bottom: solid 1px var(--vg-row-border-color) !important;
}

    .datagridSelectRow label, .datagridSelectRow span, .datagridSelectRow a {
        color: var(--vg-row-select-color) !important;
    }

.datagridArchiveRow {
    color: #333333;
    background-color: #EFE0FF;
    border-bottom: solid 1px var(--vg-row-border-color);
}

.datagrid .datagrid-textarea {
    width: 42rem;
    height: 28rem;
    padding: 1rem;
    white-space: wrap;
    border: var(--default-input-border);
    overflow: auto;
}

/* AI Styling */
/* Autocomplete */
.suggestion-overlay {
    font-family: inherit;
    font-size: var(--default-font-size);
    color: var(--default-suggestion-font-color) !important;
    background-color: var(--default-suggestion-background-color) !important;
    border: solid 1px var(--default-suggestion-border-color) !important;
    border-radius: var(--default-input-border-radius);
    white-space: pre;
}

.SysImageContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.SysImageCell, .SysImageSelectCell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 10rem;
    height: 9rem;
    padding: 1rem;
    color: var(--vg-row-color);
    background-color: var(--vg-row-background-color);
    border: solid 1px transparent;
    border-radius: var(--default-border-radius);
    user-select: none;
}

.SysImageSelectCell {
    color: var(--vg-row-select-color) !important;
    background-color: var(--vg-row-select-background-color) !important;
}

.SysImageCell:hover {
    color: var(--vg-row-hover-color);
    background-color: var(--vg-row-hover-background-color);
}

.SysImageCell span, .SysImageSelectCell span {
    width: 100%;
    font-size: calc(var(--default-font-size) * 0.75);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}

.datagridnoborders .datagridRow, .datagridnoborders .datagridAltRow, .datagridnoborders .datagridSelectRow, .datagridnoborders .datagridArchiveRow {
    border-bottom: solid 1px transparent !important;
}

.datagridCell:hover, .datagridRow:hover, .datagridAltRow:hover, .datagridArchiveRow:hover, .datagridHighlightRow {
    color: var(--vg-row-hover-color);
    background-color: var(--vg-row-hover-background-color);
}

    .datagridRow:hover span, .datagridAltRow:hover span, .datagridArchiveRow:hover span, .datagridHighlightRow span,
    .datagridRow:hover a, .datagridAltRow:hover a, .datagridArchiveRow:hover a, .datagridHighlightRow a {
        color: var(--vg-row-hover-color) !important;
    }

#versaGrid-Header {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0.3rem;
    height: 36px;
    color: var(--default-font-color);
    background-color: var(--default-background-color);
    border-bottom: solid 1px var(--default-header-border-color);
}

.versaGrid-SubHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1/3;
    grid-row: 2/3;
}

.versaGrid-Paging {
    position: relative;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.versagrid-nav-button {
    width: 32px;
    height: 24px;
}

.versagrid-nav-dropdown {
    width: 64px;
    text-align: center;
}

.versagrid-row {
    color: var(--vg-row-color);
    background-color: var(--vg-row-background-color);
}

.versagrid-alt-row {
    color: var(--vg-row-alt-color);
    background-color: var(--vg-row-alt-background-color);
}

.versagrid-select-row {
    color: var(--vg-row-select-color) !important;
    background-color: var(--vg-row-select-background-color);
}

    .versagrid-select-row a:hover {
        color: #4dd302;
        background-color: transparent;
    }

.versagrid-highlight-row {
    color: var(--vg-row-hover-color) !important;
    background-color: var(--vg-row-hover-background-color) !important; /* #FFE8A7 */
}

    .versagrid-highlight-row a:hover {
        color: var(--default-link-color);
        background-color: transparent;
    }

.versagrid-row:hover, .versagrid-alt-row:hover {
    color: var(--vg-row-hover-color) !important;
    background-color: var(--vg-row-hover-background-color) !important;
}

.versagrid-archive-row {
    color: #333333 !important;
    background-color: #EFE0FF !important;
}

div.versaimg {
    resize: none;
    overflow: hidden;
}

    div.versaimg > img {
        object-fit: contain;
    }

    div.versaimg[style*="width"] > img, div.versaimg[style*="height"] > img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

#mdlayer {
    z-index: 3000;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    overflow: hidden;
    background-color: var(--default-lockout-background-color) !important;
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

    #mdlayer.drag {
        z-index: 100000;
    }

.modaldrag {
    z-index: 100001;
    background-color: var(--default-lockout-background-color) !important;
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

/* Inline Windows Start */
.windowHeader {
    height: 20px;
    background-color: var(--vw-border-color);
    padding: 4px 4px 4px 4px;
    border-top: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowBody {
    background-color: #f0f0f0;
    padding: 6px 6px 0px 6px;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowFooter {
    background-color: #f0f0f0;
    padding: 4px 4px 4px 4px;
    text-align: right;
    border-bottom: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
}

.windowTitle {
    position: relative;
    top: 2px;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
}

.windowClose, .windowCloseHover {
    position: relative;
    float: right;
    display: inline;
    width: 24px;
    height: 20px;
    cursor: pointer;
    border-radius: var(--default-input-border-radius);
    background-image: url(../images/window_icons.png);
    background-repeat: no-repeat;
    background-position: -96px center;
    background-color: transparent;
}

    .windowClose:hover, .windowCloseHover {
        background-image: url(../images/window_icons_hover.png);
        background-color: #c95656;
    }
/* Inline Windows End */
/* Style For WebForm Layout Start */
.divRow {
    position: relative;
    padding: 0.25rem;
    min-height: 2.5rem;
    color: var(--default-font-color);
    clear: both;
}

.divCol1Container {
    position: absolute;
    width: 100%;
}

.divCol1 {
    position: relative;
    margin: 0 0 0 70px;
}

.divCol2 {
    position: relative;
    top: 2px;
    width: 70px;
    float: left;
}

.divFixedCol1 {
    position: relative;
    display: flex;
    align-items: center;
    width: 9.5rem;
    float: left;
    white-space: nowrap;
}

.divFixedCol2 {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 24rem;
    float: left;
    white-space: nowrap;
}

.textBox100 /* 100% Wide TextBox */ {
    position: relative;
    width: 100%;
    left: -2px;
}
/* Style For WebForm Layout End */
.progress {
    border: none;
    background-image: url(../images/loading_background.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-top: 0px;
    z-index: 1;
}

#progress-bar {
    z-index: 2001;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32vw;
    height: 5rem;
    transform: translate(-50%, -50%);
    border: solid 1px #19c105;
    background-color: #fff;
}

    #progress-bar.show {
        display: flex;
    }

    #progress-bar::before {
        position: absolute;
        inset: 0;
        content: '';
        width: calc(var(--progress) + 0%);
        height: calc(100% - 0.4rem);
        padding: 0.2rem;
        background-color: #4eeb3b;
    }

    #progress-bar::after {
        z-index: 2;
        content: attr(data-progress)'%';
        font-size: 1.3rem;
        font-weight: 600;
        color: #737373;
    }

/* Style For Reporting Dashboard Charting Start */
.imgReportChart {
    padding: 20px 0 20px 0;
}
/* Style For Reporting Dashboard Charting End */
.hideUserCustomisePanel {
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transform: translate(-1px, calc(100% + 21rem));
    border: 1px solid var(--system-panel-background-color);
    border-radius: var(--default-border-radius);
    background-color: var(--system-panel-background-color);
    color: var(--default-font-color);
    box-shadow: var(--default-box-shadow);
    opacity: 0.0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -webkit-transition-property: bottom opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: bottom opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: bottom opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-out;
    transition-property: bottom opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}

.showUserCustomisePanel {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    transform: translate(calc(0% + 1rem), calc(100% - 2rem));
    border: 1px solid var(--system-panel-background-color);
    border-radius: var(--default-border-radius);
    background-color: var(--system-panel-background-color);
    color: var(--default-font-color);
    opacity: 1;
    box-shadow: var(--default-box-shadow);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -webkit-transition-property: bottom opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: bottom opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: bottom opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-in;
    transition-property: bottom opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
}

.panel-icon {
    /*    filter: var(--default-image-filter);*/
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 100%;
    cursor: pointer;
}

    .panel-icon span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.75);
        color: var(--default-icon-click-color);
    }

    .panel-icon:hover span.material-icons {
        color: var(--default-icon-background-hover-color);
        cursor: pointer;
    }

/* Style for Custom Free Text Panel Start */
#divDetailsCol1 {
    position: relative;
    margin: 0 var(--panel-property-width) 0 0;
}

#divCallSettings, #divTaskSettings, #divProblemSettings, #divChangeRequestSettings, #divCustomSettings {
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1.0;
    width: var(--panel-property-width);
    margin: -10px;
    padding: 1rem;
    height: calc(100% + 94px);
    border-left: solid 1px var(--panel-border-color);
    background-color: var(--panel-background-color);
    overflow: hidden;
    transition-property: right, opacity;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

#divCustomSettings {
    z-index: 4;
}

    #divCustomSettings.hide, #divCallSettings.hide, #divTaskSettings.hide, #divProblemSettings.hide, #divChangeRequestSettings.hide {
        opacity: 0.0;
        right: calc((var(--panel-property-width) + 1rem) * -1);
        background-color: transparent !important;
        transition-property: right, opacity;
        transition-duration: 1000ms;
        transition-timing-function: ease-in-out;
    }
        #divCustomSettings.hide > .divRow, #divCallSettings.hide > .divRow, #divTaskSettings.hide > .divRow, #divProblemSettings.hide > .divRow, #divChangeRequestSettings.hide > .divRow {
            color: transparent !important;
        }

        #divWorkload {
            z-index: 3;
            position: absolute;
            display: grid;
            grid-template-rows: repeat(2, 3.1rem) 1fr;
            grid-row-gap: 0.25rem;
            align-items: center;
            background-color: var(--default-background-color);
            border: solid 1px var(--vw-border-color);
            border-radius: var(--vw-border-radius);
            padding: 0;
            width: 300px;
            height: 252px;
            overflow: hidden;
        }

    #divWorkload > div:first-child {
        padding: 0.5rem;
        background-color: var(--vw-border-color);
    }

    #divWorkload > div:nth-child(2) {
        margin: 0 0.5rem;
    }

    #divWorkload > div:nth-child(3) {
        border: var(--vg-container-border);
        width: calc(100% - 1rem);
        height: calc(100% - 1rem);
        margin: 0 0.5rem;
        overflow-x: hidden;
        overflow-y: auto;
    }

.divCustomContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-font-color);
    width: 24px;
    height: 24px;
    right: 4px;
    overflow: hidden;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#divPinPanel {
    position: relative;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    aspect-ratio: 1/1;
    cursor: pointer;
}

    #divPinPanel > img {
        width: 12px;
        aspect-ratio: 1/1;
    }

/* Style for Custom Free Text Panel End */
/* Style for versaChat Start */
/* This is required here for different themes */
.versaChatShow {
    position: fixed;
    z-index: 2001;
    visibility: visible;
    background-color: var(--default-background-color);
    border: solid 1px var(--panel-border-color);
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow);
    overflow: hidden;
    width: 36vw;
    height: 42vh;
    min-width: 490px;
    min-height: 352px;
    right: 2px;
    bottom: 30px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.versaChatHide {
    position: fixed;
    z-index: 10;
    visibility: hidden;
    background-color: var(--default-background-color);
    border: solid 1px var(--panel-border-color);
    border-radius: var(--default-border-radius);
    overflow: hidden;
    width: 36vw;
    height: 0;
    min-width: 490px;
    min-height: 0;
    right: 2px;
    bottom: 30px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: height opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: height opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: height opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: height opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.versaChatStatus, .versaChatAlert {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    margin: 0 1rem;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: 1;
    text-decoration: none;
    color: var(--vp-statusbar-text-color);
    background-color: var(--vp-statusbar-background-color);
    cursor: pointer;
    user-select: none;
}

    .versaChatStatus:hover, .versaChatStatus:hover .statusBarText {
        color: var(--vp-statusbar-text-hover-color) !important;
        background-color: var(--vp-statusbar-background-hover-color) !important;
    }

.versaChatAlert {
    position: relative;
    float: right;
    padding: 6px 6px 0 6px;
    height: 30px;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: 1;
    color: #15428B;
    text-decoration: none;
    background-color: #ffc83c;
}

.chatStyle1, .chatBold1, .chatBold2, .chatBold3 {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    text-decoration: none;
}

.chatBold1 {
    font-weight: 600;
}

.chatBold2 {
    font-weight: 600;
    color: #ffffff;
}

.chatBold3 {
    font-weight: 600;
    font-style: italic;
}
/* Style for versaChat End */

/* CSS loader - Hour Glass Spinner */
.lds-hourglass, .processing {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
}

    .lds-hourglass:after, .processing:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 3.2rem solid var(--hourglass-color);
        border-color: var(--hourglass-color) transparent var(--hourglass-color) transparent;
        animation: lds-hourglass 1.2s infinite;
    }

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

/* CSS loader - Gradient Bar */
.gradient-bar {
    width: 24rem;
    height: 1rem;
    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 - Expanding Dots */
.expanding-dots {
    display: flex;
    gap: 1rem;
}

    .expanding-dots span {
        width: 1.25rem;
        height: 1.25rem;
        background: #20a743 !important;
        border-radius: 50%;
        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;
    }
}

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

    .bouncing-balls span {
        width: 1.6rem;
        height: 1.6rem;
        background: #20a743 !important;
        border-radius: 50%;
        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;
        }

@keyframes bounce {
    to {
        transform: translateY(-30px);
    }
}

.overlay {
    position: absolute !important;
    left: unset !important;
    top: unset !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    inset: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    visibility: visible;
    opacity: 0.8;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    border-radius: calc(var(--default-border-radius) / 2);
    background-color: var(--default-lockout-background-color) !important;
    -webkit-transition-property: visibility background-color opacity;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-property: visibility background-color opacity;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: ease-in;
    -o-transition-property: visibility background-color opacity;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: ease-in;
    transition-property: visibility background-color opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
}

    .overlay.rel-pos {
        position: relative !important;
    }

@-webkit-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@-moz-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@-o-keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

@keyframes gridrefresh {
    0% {
        left: -2%;
        letter-spacing: 1px;
    }

    100% {
        left: 102%;
        letter-spacing: 10px;
    }
}

.overlaytext {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    width: unset !important;
    z-index: 3;
    overflow: hidden;
    visibility: visible;
    font-family: var(--default-font-family) !important;
    font-size: var(--default-font-size) !important;
    font-style: var(--default-font-style) !important;
    font-weight: var(--default-font-weight) !important;
    line-height: calc(var(--default-line-height) * 6) !important;
    color: var(--default-font-color) !important;
    text-align: center;
    opacity: 1.0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    transform: none !important;
}

.overlaytransition {
    position: absolute !important;
    left: unset !important;
    top: unset !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    inset: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    border-radius: calc(var(--default-border-radius) / 2);
    background-color: transparent;
    -webkit-transition-property: visibility background-color opacity;
    -webkit-transition-duration: 1500ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: visibility background-color opacity;
    -moz-transition-duration: 1500ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: visibility background-color opacity;
    -o-transition-duration: 1500ms;
    -o-transition-timing-function: ease-out;
    transition-property: visibility background-color opacity;
    transition-duration: 1500ms;
    transition-timing-function: ease-out;
}

.transparent {
    width: 100%;
    height: 100%;
    opacity: 0.9;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    background-color: #818181;
}

@-webkit-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@-moz-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@-o-keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

@keyframes overlay-progress {
    0% {
        content: '.';
        letter-spacing: 0px;
        transform: translate(50%, 360%);
    }

    20% {
        content: '..';
        letter-spacing: 3px;
        transform: translate(70%, 360%);
    }

    40% {
        content: '...';
        letter-spacing: 6px;
        transform: translate(90%, 360%);
    }

    60% {
        content: '....';
        letter-spacing: 6px;
        transform: translate(110%, 360%);
    }

    80% {
        content: '.....';
        letter-spacing: 12px;
        transform: translate(130%, 360%);
    }

    100% {
        content: '......';
        letter-spacing: 12px;
        transform: translate(150%, 360%);
    }
}

.overlay-signin {
    z-index: 1031;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    opacity: 0.9 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90) !important;
    background-color: rgb(65 67 69 / 61%) !important;
}

   /* .overlay-signin::after {
        content: '......';
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 50%;
        height: 10%;
        margin: 0 auto;
        font-family: var(--default-font-family);
        font-size: calc(var(--default-font-size) * 1.8);
        font-weight: var(--default-font-weight);
        color: #ffffff;
        animation: overlay-progress alternate 5000ms infinite;
        -webkit-animation: overlay-progress alternate 5000ms infinite;
        -moz-animation: overlay-progress alternate 5000ms infinite;
        -o-animation: overlay-progress alternate 5000ms infinite;
    }
*/
    .overlay-signin::before {
        content: 'Validating Your Access';
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 50%;
        height: 50%;
        margin: 0 auto;
        transform: translate(50%, 50%);
        font-family: var(--default-font-family);
        font-size: calc(var(--default-font-size) * 1.8);
        font-weight: var(--default-font-weight);
        line-height: calc(var(--default-line-height) * 6);
        text-align: center;
        color: #ffffff;
    }
/* Notification Area */
.headernotification {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px;
    width: 50px;
    height: 50px;
    background-color: #47e621;
    border: none;
    cursor: pointer;
}

.headernotificationover {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px;
    width: 50px;
    height: 50px;
    background-color: #0d223f;
    border: none;
    cursor: pointer;
}

.headernotification span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: solid 1px #d9d9d9;
    border-radius: 50%;
    right: 5px;
    top: 5px;
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 0.8);
    font-weight: bold;
    font-style: var(--default-font-style);
    text-align: center;
    background-color: #ffffff;
    color: rgb(207, 10, 10);
}

.headernotificationover span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: solid 1px #d9d9d9;
    border-radius: 50%;
    right: 5px;
    top: 5px;
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 0.8);
    font-weight: bold;
    font-style: var(--default-font-style);
    text-align: center;
    background-color: #000000;
    color: rgb(255, 255, 255);
}

.notificationHide {
    z-index: 1000;
    visibility: hidden;
    position: absolute;
    right: 4px;
    top: -490px;
    width: 370px;
    height: 486px;
    background-color: var(--default-background-color);
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow);
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: z-index top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: z-index top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: z-index top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: z-index top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

.notificationShow {
    z-index: 2000;
    visibility: visible;
    position: absolute;
    right: 4px;
    top: 49px;
    width: 370px;
    height: 486px;
    background-color: var(--default-background-color);
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
    opacity: 1.0;
    filter: alpha(opacity=100);
    box-shadow: var(--default-box-shadow);
    -webkit-transition-property: z-index top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: z-index top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: z-index top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: z-index top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
    cursor: default;
}

    .notificationShow:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 55px;
        top: -15px;
        border: 7px solid;
        border-color: transparent transparent var(--default-system-menu-border-color) transparent;
    }

    .notificationShow:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 55px;
        top: -14px;
        border: 7px solid;
        border-color: transparent transparent var(--default-system-menu-background-color) transparent;
    }

.notificationHeader {
    top: 0;
    font-family: var(--default-font-family);
    font-size: 12pt;
    font-weight: bold;
    font-style: var(--default-font-style);
    color: var(--default-system-menu-text-color);
    height: 36px;
    padding: 6px;
    background-color: var(--default-system-menu-background-color);
    border-bottom: solid 1px var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
}

.notificationContent {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    padding: 0;
    height: 418px;
    overflow-y: auto;
    overflow-x: hidden;
    top: 30px;
    cursor: default;
}

    .notificationContent.overlay {
        position: absolute;
        inset: 0;
        z-index: 2000;
        overflow: hidden;
        width: 100%;
        height: 100%;
        visibility: visible;
        opacity: 0.5;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
        border-radius: var(--default-border-radius);
        background-color: #878787;
        -webkit-transition-property: visibility background-color opacity;
        -webkit-transition-duration: 250ms;
        -webkit-transition-timing-function: ease-in;
        -moz-transition-property: visibility background-color opacity;
        -moz-transition-duration: 250ms;
        -moz-transition-timing-function: ease-in;
        -o-transition-property: visibility background-color opacity;
        -o-transition-duration: 250ms;
        -o-transition-timing-function: ease-in;
        transition-property: visibility background-color opacity;
        transition-duration: 250ms;
        transition-timing-function: ease-in;
    }

.notificationItem {
    visibility: visible;
    position: relative;
    padding: 8px;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    left: 0;
    min-height: 80px;
    width: calc(100% - 1em);
    overflow-y: auto;
    overflow-x: hidden;
    border: solid 1px var(--default-system-menu-border-color);
    border-radius: calc(var(--default-border-radius) / 3);
    background-color: transparent;
    margin: 6px 10px 10px 6px;
    cursor: pointer;
}

    .notificationItem:hover, .notificationItem:hover p.bold1, .notificationItem:hover .notificationClose {
        color: var(--default-system-menu-text-hover-color);
        background-color: var(--default-system-menu-background-hover-color);
    }
/* Multi-line Ellipsis */
.notificationItem {
    overflow: hidden;
    position: relative;
    min-height: 80px;
    max-height: 132px;
    text-align: left;
    padding-right: 1em;
}

    .notificationItem:before {
        content: '...';
        position: absolute;
        right: 8px;
        bottom: 4px;
    }

    .notificationItem:after {
        content: '';
        position: absolute;
        right: 0;
        width: 330px;
        height: 132px;
        margin-top: 0.2em;
    }

    .notificationItem p.bold1 {
        font-size: 1.2rem;
    }

.notificationDismiss {
    visibility: hidden;
    position: relative;
    padding: 0;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    left: 390px;
    min-height: 0;
    max-height: 0;
    width: calc(100% - 1em);
    overflow-y: hidden;
    overflow-x: hidden;
    border: none;
    border-radius: calc(var(--default-border-radius) / 3);
    background-color: transparent;
    margin: 0;
    -webkit-transition-property: all;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: all;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: all;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: all;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

    .notificationDismiss p.bold1 {
        font-size: 1.2rem;
    }

.notifyMeContainerHide {
    z-index: 4;
    position: fixed;
    visibility: hidden;
    right: -8px;
    bottom: -192px;
    width: 348px;
    height: 192px;
    -o-transition-property: bottom visibility;
    -o-transition-duration: 1000ms;
    -o-transition-timing-function: ease-out;
    -moz-transition-property: bottom visibility;
    -moz-transition-duration: 1000ms;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: bottom visibility;
    -webkit-transition-duration: 1000ms;
    -webkit-transition-timing-function: ease-out;
    transition-property: bottom visibility;
    transition-duration: 1000ms;
    transition-timing-function: ease-out;
}

.notifyMeContainerShow {
    z-index: 4;
    position: fixed;
    visibility: visible;
    right: -8px;
    bottom: 48px;
    width: 348px;
    height: 192px;
    -o-transition-property: bottom visibility;
    -o-transition-duration: 1000ms;
    -o-transition-timing-function: ease-in;
    -moz-transition-property: bottom visibility;
    -moz-transition-duration: 1000ms;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-property: bottom visibility;
    -webkit-transition-duration: 1000ms;
    -webkit-transition-timing-function: ease-in;
    transition-property: bottom visibility;
    transition-duration: 1000ms;
    transition-timing-function: ease-in;
}

.notifyMeHide {
    z-index: 1;
    visibility: hidden;
    position: absolute;
    transform: translate(0, 248px);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: transparent;
    width: 328px;
    height: 192px;
    overflow: hidden;
    border: solid var(--vp-border-width) var(--vw-border-color);
    border-radius: var(--default-border-radius);
    background-color: var(--default-background-color);
    box-shadow: var(--default-box-shadow);
    padding: 0px;
    margin: 0 0 0 0;
    cursor: pointer;
}

.notifyMeShow {
    z-index: 8;
    visibility: visible;
    position: absolute;
    transform: translate(0, 0);
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    width: 328px;
    height: 192px;
    overflow: hidden;
    border: solid var(--vp-border-width) var(--vw-border-color);
    border-radius: var(--default-border-radius);
    background-color: var(--default-background-color);
    box-shadow: var(--default-box-shadow);
    padding: 0px;
    margin: 3px 0 0 0;
    cursor: pointer;
}

.notifyHeader {
    /* Heading */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--vw-title-color);
    padding: 4px;
    width: 100%;
    height: 32px;
    background-color: var(--vw-border-color);
}

    .notifyHeader > span {
        width: calc(100% - 3rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Close Button */
    .notifyHeader > .notifyClose {
        width: 24px;
        height: 20px;
        cursor: pointer;
        border-radius: var(--default-input-border-radius);
        background-image: url(../images/window_icons.png);
        background-repeat: no-repeat;
        background-position: -96px 0;
        background-color: #C75050;
    }

.notifyMeHide > div:nth-child(2n), .notifyMeShow > div:nth-child(2n) {
    /* Title */
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    padding: 1rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notifyMeHide > div:nth-child(3n), .notifyMeShow > div:nth-child(3n) {
    /* Description */
    font-family: var(--default-font-family);
    font-size: calc(var(--default-font-size) * 0.9);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    padding: 1rem;
    width: 100%;
    height: 10.5rem;
}

/* Multi-line Ellipsis */
.notifyMeShow > div:nth-child(3n) {
    overflow: hidden;
    position: relative;
    max-height: 10.5rem;
    text-align: left;
    padding-right: 1em;
}

    .notifyMeShow > div:nth-child(3n):before {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .notifyMeShow > div:nth-child(3n):after {
        content: '';
        position: absolute;
        right: 0;
        width: 100%;
        height: 10.5rem;
        margin-top: 0.2em;
    }

.notificationAbout {
    position: absolute;
    float: right;
    top: -2px;
    right: 64px;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url(../images/info2.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
    cursor: pointer;
}

.notificationSettings {
    position: absolute;
    float: right;
    top: -2px;
    right: 32px;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url(../images/settings2.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
    cursor: pointer;
}

.notificationClose:after {
    content: '\2192';
    font-family: 'Arial Black';
}

.notificationClose {
    position: absolute;
    float: right;
    top: -4px;
    right: 8px;
    width: 24px;
    height: 24px;
    font-family: 'Arial Black';
    font-weight: bold;
    font-size: 22px;
    font-style: var(--default-font-style);
    line-height: 18px;
    color: #858484;
    background-color: transparent;
    cursor: pointer;
}

.notificationFooter {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-weight: bold;
    font-style: var(--default-font-style);
    color: var(--default-font-color);
    height: 30px;
    padding: 6px;
    background-color: var(--default-background-color);
    border-top: solid 1px var(--default-system-menu-border-color);
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
    cursor: default;
}

    .notificationFooter label {
        min-width: 100px;
        font-family: var(--default-font-family);
        font-size: var(--default-font-size);
        font-weight: bold;
        font-style: var(--default-font-style);
        color: var(--default-font-color);
        cursor: pointer;
    }
/* Start Settings Dialog Area */
#SettingsContainer {
    z-index: 5001;
    position: absolute;
    width: 282px;
    height: 312px;
    left: 50%;
    top: 50%;
    font-size: var(--default-font-size);
    font-family: var(--default-font-family);
    color: var(--default-font-color);
    transform: translate(-50%, -50%);
    border: 1px solid rgb(102, 102, 102);
    border-radius: var(--default-border-radius);
    background-color: var(--default-background-color);
    box-shadow: var(--default-box-shadow);
    box-sizing: unset;
}

    #SettingsContainer > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
        color: var(--default-system-menu-text-color);
        background-image: url(../images/settings.png);
        background-repeat: no-repeat;
        background-position: 0.5rem center;
        background-color: var(--default-system-menu-background-color);
        border-width: 1px;
        border-style: solid;
        border-color: transparent transparent rgb(102, 102, 102);
        border-image: initial;
        border-radius: calc(var(--default-border-radius) / 2) calc(var(--default-border-radius) / 2) 0px 0px;
        box-sizing: unset;
    }

        #SettingsContainer > div:first-child > span:first-child {
            position: relative;
            left: 24px;
            font-size: 9pt;
            font-weight: bold;
            line-height: 24px;
            padding: 0px 4px 4px;
        }
/* End Settings Dialog Area */
/* End Notification Area*/
/* Quick Summary Styles */
#imgQuickSummary {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #imgQuickSummary span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.75);
        color: var(--default-icon-click-color);
    }

    #imgQuickSummary:hover span.material-icons {
        color: var(--default-icon-background-hover-color);
        cursor: pointer;
    }

#lblUnreadEmail {
    display: grid;
    grid-template-columns: 1fr repeat(4, 2.5rem);
    column-gap: 0.5rem;
    align-items: center;
    white-space: nowrap;
    color: var(--default-link-color);
    background-color: var(--vp-statusbar-background-color);
    border-right: solid 1px var(--vp-statusbar-border-color);
}

    #lblUnreadEmail span:nth-child(n+2) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #lblUnreadEmail span[onclick]:hover {
        color: var(--default-link-hover-color);
        background-color: var(--default-link-background-hover-color);
        cursor: pointer;
        user-select: none;
    }

/* End Quick Summary Styles */
/* CRM Correspondence Styles Start */
.imgAttach {
    float: left;
    display: inline;
    font-family: 'Segoe UI', Arial, Verdana, Tahoma;
    width: 16px;
    height: 16px;
    padding: 0 2px 0 0;
}

.textAttach {
    float: left;
    display: inline;
    padding: 1px 3px 1px 1px;
    font-family: 'Segoe UI', Arial, Verdana, Tahoma;
    font-size: 1.3rem;
    line-height: 1.5;
}
/* CRM Correspondence Styles End */
/* Additional versaChat Styles Start */
/*
#vchatImgPreview.hidePreview {
    visibility: hidden;
    position: fixed;
    z-index: 900;
    left: 0px;
    top: 51px;
    background-color: #ffffff;
    margin: 0 auto;
    border: solid 6px var(--vw-border-color);
    border-radius: var(--vw-border-radius);
    overflow: hidden;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -webkit-transition-property: left top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}

#vchatImgPreview.showPreview {
    visibility: visible;
    position: fixed;
    z-index: 900;
    left: 0px;
    top: 51px;
    background-color: #ffffff;
    margin: 0 auto;
    border: solid 6px var(--vw-border-color);
    border-radius: var(--vw-border-radius);
    overflow: hidden;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -webkit-transition-property: left top opacity visibility;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: left top opacity visibility;
    -moz-transition-duration: 250ms;
    -moz-transition-timing-function: linear;
    -o-transition-property: left top opacity visibility;
    -o-transition-duration: 250ms;
    -o-transition-timing-function: linear;
    transition-property: left top opacity visibility;
    transition-duration: 250ms;
    transition-timing-function: linear;
}
*/
/* Additional versaChat Styles End */
/* Start versaFooterMenu */
.versafooterToolsVisible {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 100vw;
    height: 4rem;
    padding: 0 0.8rem;
    background-color: var(--vp-background-color);
    border-top: solid 1px var(--vp-statusbar-border-color);
    border-bottom: none;
}

.versafooterToolsHidden {
    display: block;
    clear: both;
    height: 1px;
    background-color: transparent;
    border-top: none;
    border-bottom: none;
}

.versafooterGripDown:before {
    content: 's';
    font-family: 'Wingdings 3';
    font-weight: bold;
    font-size: 8px;
    line-height: 9px;
    margin: 0 4px 0 0;
}

.versafooterGripDown:hover {
    color: #adadad;
}

.versafooterGripDown {
    z-index: 4;
    position: absolute;
    left: 0;
    bottom: 64px;
    width: 100%;
    height: 8px;
    color: #f1f1f1;
    text-align: right;
    background-color: #f1f1f1;
    border-top: solid 1px #fff;
    cursor: pointer;
}

.versafooterGripUp:before {
    content: 'r';
    font-family: 'Wingdings 3';
    font-weight: bold;
    font-size: 4px;
    line-height: 9px;
    margin: 0 4px 0 0;
}

.versafooterGripUp:hover {
    color: #ffffff;
    bottom: 28px;
    height: 4px;
    background-color: #0072c6;
    border-top: solid 1px #ffffff;
}

.versafooterGripUp {
    z-index: 4;
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
    height: 1px;
    color: #0072c6;
    text-align: right;
    background-color: transparent;
    border-top: none 0px transparent;
    cursor: pointer;
}

.versafooterToolsContent, .versafooterToolsContentActive {
    width: max-content !important;
    font-size: calc(var(--default-font-size) * 1.3);
    line-height: 2;
    color: var(--default-footer-menu-color);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-family: var(--default-font-family);
    text-transform: none;
    cursor: pointer;
}

    .versafooterToolsContent:hover, .versafooterToolsContentActive:hover {
        color: var(--default-footer-menu-hover-color);
    }

.versafooterToolsContentActive {
    text-decoration: none;
    background-color: transparent;
    color: #0072c6;
    cursor: pointer;
}
/* End versaFooterMenu */

/* Start Javascript Object Properties Container */
#PropertiesContainer {
    z-index: 10001;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: 3rem 1fr;
    width: 32rem;
    height: 28rem;
    border: solid 1px var(--default-header-border-color);
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow);
    background-color: var(--dialog-background-color);
    -webkit-box-sizing: unset;
    box-sizing: unset;
}

    #PropertiesContainer > div:nth-child(1) {
        /* Header */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--default-header-background-color);
        border: solid 1px transparent;
        border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
        padding: 0.5rem;
        font-size: 9pt;
        line-height: 1;
        color: var(--default-header-font-color);
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-weight: var(--default-font-weight);
        text-decoration: none;
        -webkit-box-sizing: unset;
        box-sizing: unset;
    }

        #PropertiesContainer > div:nth-child(1) > div:nth-child(1):hover {
            background-color: #cc1b34;
        }

        #PropertiesContainer > div:nth-child(1) > div:nth-child(1) {
            /* Close Button */
            float: right;
            width: 20px;
            height: 14px;
            padding: 4px;
            background-color: transparent;
            border-radius: var(--default-input-border-radius);
            font-size: 9pt;
            line-height: var(--default-line-height);
            color: #ffffff;
            font-family: var(--default-font-family);
            font-style: var(--default-font-style);
            font-weight: var(--default-font-weight);
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

    #PropertiesContainer > div:nth-child(2) {
        /* Info Window */
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        background-color: var(--default-background-color);
        border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
        -webkit-box-sizing: unset;
        box-sizing: unset;
    }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(1) {
            /* Product Name */
            font-size: calc(var(--default-font-size) * 1.4);
            line-height: 2;
            color: var(--default-font-color);
            font-family: var(--default-font-family);
            font-style: var(--default-font-style);
            font-weight: var(--default-font-weight);
            text-align: left;
            text-decoration: none;
            height: 4rem;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(2) {
            /* Version */
            font-size: calc(var(--default-font-size) * 1.2);
            line-height: 2;
            color: var(--default-font-color);
            font-family: var(--default-font-family);
            font-style: var(--default-font-style);
            font-weight: var(--default-font-weight);
            text-align: left;
            text-decoration: none;
            height: 4rem;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }

        #PropertiesContainer > div:nth-child(2) > div:nth-child(3) {
            /* Copyright */
            position: absolute;
            bottom: 0.5rem;
            font-family: var(--default-font-family);
            font-style: var(--default-font-style);
            font-weight: var(--default-font-weight);
            font-size: calc(var(--default-font-size) * 0.8);
            line-height: var(--default-line-height);
            color: var(--default-font-color);
            text-align: left;
            text-decoration: none;
            height: 2rem;
            -webkit-box-sizing: unset;
            box-sizing: unset;
        }
/* End Javascript Object Properties Container */
/* Start Dashboard Nav Css */
.mysummarysubheader {
    height: 28px;
    border-bottom: solid 1px #a0a0a0;
    padding: 3px 0 0 0;
}

.mysummarylist {
    list-style-type: none;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-padding-start: 10px;
    margin: 10px 0 0 -6px;
}

.mysummaryitem {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-align: left;
    text-decoration: none;
    padding: 8px;
    cursor: pointer;
}

.mysummaryitemover {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-align: left;
    text-decoration: underline;
    padding: 8px;
    cursor: pointer;
}
/* End Dashboard Nav Css */
/* Start Account Access Browser Info */
.browserAccessInfoHeading {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: calc(var(--default-font-size) * 1.4);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
}

.browserAccessInfo {
    width: calc(100% - 12px);
    height: calc(100% - 42px);
    margin: 12px 6px 6px 6px;
}

    .browserAccessInfo div:nth-child(n+1) {
        position: relative;
        top: 2px;
        float: left;
        width: 92px;
        height: 24px;
        margin: 0 0 6px 0;
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-size: var(--default-font-size);
        line-height: var(--default-line-height);
        color: var(--default-font-color);
        font-weight: bold;
        white-space: nowrap;
    }

    .browserAccessInfo div:nth-child(2n+1) {
        position: relative;
        top: 2px;
        float: left;
        width: calc(100% - 96px);
        height: 24px;
        margin: 0 0 6px 0;
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-weight: var(--default-font-weight);
        font-size: var(--default-font-size);
        line-height: var(--default-line-height);
        color: var(--default-font-color);
        white-space: nowrap;
    }

    .browserAccessInfo div:first-child {
        width: 100%;
        height: 28px;
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-size: var(--default-font-size);
        line-height: var(--default-line-height);
        color: var(--default-font-color);
        font-weight: bold;
        text-decoration: underline;
    }
/* End Account Access Browser Info */
/* Hide and Show Divs Based on Media Size */
@media (min-width: 1078px) {

    #divSearchOptions {
        position: absolute;
        top: 3.6rem;
        left: -1px;
        width: 37.5rem;
        height: 15rem;
        padding: 0.5rem 0;
        border: var(--default-quick-search-border);
        border-radius: 0.5rem;
        background-color: var(--default-background-color);
        opacity: 1;
        overflow: hidden;
        transition-property: all;
        transition-duration: 500ms;
        transition-delay: 600ms;
        transition-timing-function: linear;
    }

        #divSearchOptions.hideOptions {
            padding: 0;
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition-property: all;
            transition-duration: 500ms;
            transition-timing-function: linear;
        }

        #divSearchOptions > span {
            display: block;
            clear: both;
            font-size: var(--default-font-size);
            line-height: 1;
            padding: 0.5rem 1rem;
            color: var(--default-font-color);
            background-color: transparent;
            cursor: pointer;
        }

            #divSearchOptions > span:hover {
                color: var(--vg-row-hover-color);
                background-color: var(--vg-row-hover-background-color);
            }

    #divGotoRecord, #divQuickSearch {
        position: relative;
        display: flex;
        align-items: center;
        border-radius: 2rem;
        background-color: var(--default-quick-search-background-color);
    }

        #divGotoRecord:hover, #divQuickSearch:hover,
        #divGotoRecord:focus, #divQuickSearch:focus,
        #divGotoRecord:focus-visible, #divQuickSearch:focus-visible,
        #divGotoRecord:has(:hover, :focus), #divQuickSearch:has(:hover, :focus),
        #divQuickSearch:has(#txtQuickSearch:not(:placeholder-shown)) {
            border: var(--default-quick-search-border);
        }

        #divQuickSearch:has(#divSearchOptions:not(.hideOptions, :hover, :focus)) {
        }

    #txtRecordId, #txtQuickSearch {
        font-size: var(--default-font-size);
        width: 21rem;
        margin: 0.5rem;
        padding: 0 1rem;
        color: var(--default-quick-search-color);
        text-align: center;
        border: 1px none transparent;
        background-color: transparent;
        outline: none;
        transition: width 250ms linear;
    }

        #txtQuickSearch::placeholder {
            color: var(--default-quick-search-placeholder-color);
        }

        #txtQuickSearch.expand {
            width: 36rem;
            text-align: left;
            transition: width 500ms 600ms linear;
        }

    /*   #txtQuickSearch:focus,
        #txtQuickSearch:not(:placeholder-shown) {
            width: 36rem;
        }*/
    #divGotoRecord > span.material-icons {
        position: absolute;
        right: 0.25rem;
        top: 50%;
        transform: rotate(0deg) translate(0, -50%);
        font-size: var(--default-icon-size);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        cursor: pointer;
        transition-property: opacity, transform;
        transition-duration: 500ms;
    }

    #divQuickSearch > span.material-icons {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: rotate(90deg) translate(0, -50%);
        font-size: var(--default-icon-size);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        cursor: pointer;
        transition-property: opacity, transform;
        transition-duration: 500ms;
    }

        /* Clear Icon */
        #divQuickSearch > span.material-icons:nth-of-type(1) {
            color: #fd7272 !important;
        }
        /* Search Icon */
        #divQuickSearch > span.material-icons:nth-of-type(2) {
            color: #556fed;
        }

    #divQuickSearch:has(input:not(:placeholder-shown)) span.material-icons:nth-of-type(1),
    #divQuickSearch:has(input:placeholder-shown) span.material-icons:nth-of-type(2) {
        visibility: visible;
        pointer-events: all;
        transform: rotate(0deg) translate(0, -50%);
        opacity: 1;
    }
}

#divDocExplorer {
    position: relative;
    background-color: var(--default-header-background-color);
}

@media (max-width: 1077px) {
    #divQuickSearch {
        display: none;
    }
}

@media (min-width: 778px) {
    #srsAppName {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.8rem;
        color: var(--default-heading1-color);
        margin: 0;
        padding: 0.5rem;
    }
}

@media (max-width: 777px) {
    #srsAppName {
        display: none;
    }
}

@media (min-width: 920px) {
    #srsControls {
        z-index: 2030;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 919px) {
    #srsControls {
        display: none;
    }
}

@media (min-width: 960px) {
    .mainBodyHeader > #divFilters {
        display: block;
    }
}

@media (max-width: 959px) {
    .mainBodyHeader > #divFilters {
        display: none;
    }
}

@media (min-width: 901px) {
    #CurrentLocation {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #CurrentLocation span.material-icons {
            font-size: calc(var(--default-icon-size) * 0.75);
            color: var(--default-icon-color);
        }
}

@media (max-width: 900px) {
    #CurrentLocation {
        display: none;
    }
}

@media (max-width: 652px) {
    #divChatStatus {
        display: none;
    }
}


/* Start versaWins Styles */
#versaWinsTray {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.versawindowtitle, .versawindowtitle1, .versawindowtitle2, .versawindowtitle3 {
    display: inline-grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    justify-content: space-between;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--vw-title-color);
    text-decoration: none;
    text-align: left;
    background-color: var(--vw-border-color);
    border-bottom: 3px solid var(--vw-border-color);
    border-radius: calc(var(--vw-border-radius) / 4) calc(var(--vw-border-radius) / 4) 0 0;
    padding: 0.25rem;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    cursor: grab;
}

.versawindowborder[data-active="true"] > .versawindowtitle, .versawindowborder[data-active="true"] > .versawindowtitle1, .versawindowborder[data-active="true"] > .versawindowtitle2, .versawindowborder[data-active="true"] > .versawindowtitle3 {
    background-color: var(--vw-border-active-color);
    border-bottom: 3px solid var(--vw-border-active-color);
}

.versawindowtitle1:active, .versawindowtitle2:active, .versawindowtitle3:active {
    cursor: grabbing;
}

.versawindowtitle1 div:first-child, .versawindowtitle2 div:first-child, .versawindowtitle3 div:first-child {
    width: calc(100% - 4rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 0 0 2.5rem;
    cursor: grab;
}

    .versawindowtitle1 div:first-child:active, .versawindowtitle2 div:first-child:active, .versawindowtitle3 div:first-child:active {
        cursor: grabbing;
    }

.versawindowtitle {
    background-image: none;
    cursor: default;
}

    .versawindowtitle div:first-child {
        width: 100%;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: default;
    }

.versawindowtitle1 {
    background-image: url(../images/favicon.png);
    background-repeat: no-repeat;
    background-position: 4px center;
}

.versawindowtitle2 {
    background-image: url(../images/info.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.versawindowtitle3 {
    background-image: url(../images/help1.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.vwboxmini {
    display: inline-grid;
    align-items: center;
    grid-template-columns: 1fr 2rem;
    width: 216px;
    color: var(--vw-title-color);
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    text-decoration: none;
    text-align: left;
    background-color: var(--vw-border-color);
    border-top: 1px solid var(--vw-border-color);
    border-bottom: 3px solid var(--vw-border-hover-color);
    border-radius: calc(var(--vw-border-radius) / 2) calc(var(--vw-border-radius) / 2) 0 0;
    padding: 0.25rem;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    background-image: url(../images/favicon.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
    cursor: default;
}

    .vwboxmini:hover {
        color: var(--vw-title-hover-color);
        border-top: 1px solid var(--vw-border-hover-color);
        border-bottom: 3px solid var(--vw-border-color);
        background-color: var(--vw-border-hover-color);
    }

    .vwboxmini > div:first-child {
        display: inline-block;
        width: calc(100% - 3rem);
        position: relative;
        line-height: 1.2;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 0 0 24px;
    }

.versawindow {
    background-color: #eeeeee;
    padding: 8px;
    border: 1px solid var(--vw-border-color);
    border-radius: var(--vw-border-radius);
    box-shadow: var(--default-box-shadow);
}

.versawindownoborder {
    display: grid;
    grid-template-rows: 1fr;
    background-color: var(--vw-border-color);
}

.versawindowborder {
    display: grid;
    grid-template-rows: 3rem 1fr;
    border-style: solid;
    border-width: var(--vw-border-width);
    border-color: var(--vw-border-color);
    border-top-width: 3px;
    border-radius: var(--vw-border-radius);
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--default-box-shadow);
}

    .versawindowborder[data-active="true"] {
        border-color: var(--vw-border-active-color);
    }

.vwbox {
    position: absolute;
    visibility: visible;
    background-color: #acacac;
    padding: 5px 5px 5px 5px;
    border: 1px solid #c6c6c6;
    box-shadow: var(--default-box-shadow);
}

.vwboxheader {
    position: relative;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--vw-title-color);
    background-color: var(--vw-border-color);
    cursor: default;
}

.vwboxtitlebuttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0 0.5rem;
    margin: 0 0.25rem 0 0;
}

.versawindowborder iframe {
    width: 100% !important;
    height: 100% !important;
    background-color: var(--default-background-color);
    border-radius: 0 0 var(--vw-border-radius) var(--vw-border-radius);
}

.versawindownoborder iframe {
    width: 100% !important;
    height: 100% !important;
    background-color: var(--default-background-color);
}

.vwboxhelp, .vwboxclose, .vwboxrestore, .vwboxmin, .vwboxmax, .vwboxpopout {
    position: relative;
    display: inline-table;
    width: 2.5rem;
    border: solid 1px transparent;
    border-radius: var(--default-input-border-radius);
    background-repeat: no-repeat;
    background-color: transparent;
    cursor: pointer;
}

.vwboxhelp {
    display: none;
    background-image: url(../images/info2.png);
    background-position: center center;
}

    .vwboxhelp:hover {
        background-image: url(../images/info2.png);
        background-color: var(--toolbar-button-hover-color);
    }

.vwboxclose {
    margin: 0 -0.5rem;
    background-image: url(../images/window_icons.png);
    background-position: -96px center;
}

    .vwboxclose:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: #c95656;
    }

.vwboxrestore {
    background-image: url(../images/window_icons.png);
    background-position: -48px center;
}

    .vwboxrestore:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: var(--toolbar-button-hover-color);
    }

.vwboxmin {
    background-image: url(../images/window_icons.png);
    background-position: -24px center;
}

    .vwboxmin:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: var(--toolbar-button-hover-color);
    }

.vwboxmax {
    background-image: url(../images/window_icons.png);
    background-position: -72px center;
}

    .vwboxmax:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: var(--toolbar-button-hover-color);
    }

.vwboxpopout {
    background-image: url(../images/window_icons.png);
    background-position: 0 center;
}

    .vwboxpopout:hover {
        background-image: url(../images/window_icons_hover.png);
        background-color: var(--toolbar-button-hover-color);
    }

.vwboxmesssage1, .vwboxmessage2, .vwboxmessage3, .vwboxmessage4 {
    position: relative;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    color: var(--default-font-color);
    min-height: 235px;
    padding: 1rem 6rem;
    border-top: 1px solid var(--panel-border-color);
    border-right: 1px solid var(--panel-border-color);
    border-left: 1px solid var(--panel-border-color);
    background-color: var(--default-background-color);
}

.vwboxmessage1 {
    background-image: url(../images/cross.png);
    background-position: 1rem;
    background-repeat: no-repeat;
}

.vwboxmessage2 {
    background-image: url(../images/excl1.png);
    background-position: 1rem;
    background-repeat: no-repeat;
}

.vwboxmessage3 {
    background-image: url(../images/info1.png);
    background-position: 1rem;
    background-repeat: no-repeat;
}

.vwboxmessage4 {
    background-image: url(../images/vdicon.png);
    background-position: 1rem;
    background-repeat: no-repeat;
}

.vwboxinput {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    text-align: center;
    border-top: 1px solid var(--default-system-menu-border-color);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
    background-color: var(--dialog-background-color);
}

    .vwboxinput input {
        position: relative;
        width: 60px;
        top: 2px;
        font-family: var(--default-font-family);
        font-size: var(--default-font-size);
        line-height: var(--default-line-height);
        font-style: var(--default-font-style);
        font-weight: var(--default-font-weight);
        color: var(--default-input-color);
        background-color: var(--default-input-background-color);
        outline: var(--default-input-outline);
    }

#vwLockout {
    z-index: 2030;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    background-color: var(--default-lockout-background-color);
}

#vwlayer {
    opacity: 0.2;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    background-color: var(--default-lockout-background-color);
}

    #vwlayer.drag {
        z-index: 100000;
    }

#vwResizeMasker {
    z-index: 2000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    background-color: var(--default-lockout-background-color);
}

.versawindowdrag {
    z-index: 100001;
    position: absolute;
    left: 0;
    top: 3rem;
    width: 100%;
    height: calc(100% - 3rem);
    opacity: 0.7;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    border-radius: 0 0 var(--vw-border-radius) var(--vw-border-radius);
    background-color: var(--default-lockout-background-color);
}
/* End versaWins Styles */
/* Start versaCalendar Nav Styling */
#divContents > div.calButton, #divContents > div.calButtonSelected {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    width: 8rem;
    aspect-ratio: 1/1;
    margin: 0 0 1rem 0;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-decoration: none;
    border: solid 1px transparent;
    border-radius: var(--default-border-radius);
    background-color: transparent;
    user-select: none;
}

#divContents > div.calButtonSelected {
    color: var(--toolbar-button-hover-text-color);
    border: solid 1px var(--toolbar-button-hover-border-color);
    background-color: var(--toolbar-button-hover-color);
    /*box-shadow: var(--default-box-shadow);*/
}

div.calButtonSelected > span.material-icons {
    color: var(--toolbar-button-hover-text-color) !important;
}

#divContents > div.calButton::after {
    content: attr(data-label);
    width: 100%;
}

#divContents > div.calButtonSelected::after {
    content: attr(data-label);
    width: 100%;
}
/*#divContents > div.calButton > img {
    box-shadow: 1px 1px 3px transparent;
}

#divContents > div.calButtonSelected > img {
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}*/
/* End versaCalendar Nav Styling */
/* Start Event Calendar */
#VersaCalendar_trHeader > td {
    border: none;
}

#VersaCalendar_tblCalendar.datagrid {
    width: 100%;
    height: calc(100vh - 4.5rem);
    background-color: var(--default-background-color);
    border-width: var(--vg-cell-border-width);
    border-style: solid;
    border-color: transparent;
    border-collapse: collapse;
}

    #VersaCalendar_tblCalendar.datagrid th, #VersaCalendar_tblCalendar.datagrid > tbody > tr:first-child > td {
        border: solid 1px transparent !important;
        border-bottom: solid 1px var(--vc-day-border-color) !important;
    }

    #VersaCalendar_tblCalendar.datagrid td:not(.eventcalendarWeekdayHeader) {
        border: solid 1px var(--vc-day-border-color) !important;
    }

.eventHeading {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: 600;
    font-size: calc(var(--default-font-size) * 1.5);
    line-height: var(--default-line-height);
    color: var(--default-heading1a-color);
    text-decoration: none;
}

.eventTitle {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: 600;
    font-size: calc(var(--default-font-size) * 1.2);
    line-height: var(--default-line-height);
    text-decoration: none;
}

.eventBold {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: 600;
    font-size: calc(var(--default-font-size) * 1.1);
    line-height: var(--default-line-height);
    text-decoration: none;
}

.eventStyle {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: 600;
    font-size: calc(var(--default-font-size) * 1.1);
    line-height: var(--default-line-height);
    text-decoration: none;
}

.eventcalendar, .eventcalendarNav, .eventcalendarMonth, .eventcalendarWeekday {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: 600;
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    cursor: default;
}

.eventcalendar {
    border-color: var(--vg-cell-border-color);
    cursor: default;
    border-bottom: 1px solid var(--vg-header-border-color);
}

    .eventcalendar.td {
        background-color: var(--default-background-color);
    }

.eventcalendarNav, .eventcalendarMonth {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: calc(var(--default-font-size) * 1.2);
    line-height: var(--default-line-height);
    color: var(--vc-header-color);
    background-color: var(--vc-header-background-color);
    border: solid 1px var(--default-header-background-color) !important;
    padding: 1rem;
    text-align: center !important;
    cursor: pointer;
}

    .eventcalendarNav:hover, .eventcalendarMonth:hover {
        color: var(--vg-row-hover-color);
        background-color: var(--vg-row-hover-background-color);
    }

.eventcalendarWeekdayHeader {
    width: calc(100% / 7) !important;
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    text-align: center;
    color: var(--vc-weekday-color);
    background-color: var(--vc-weekday-background-color);
    border: solid 1px transparent;
}

.eventcalendarDay, .eventcalendarToday, .eventcalendarDaySelected {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    background-color: var(--default-background-color);
    text-align: left;
    width: calc(100% / 7) !important;
}

    .eventcalendarDay:not(:has(.eventcalendarDayNumber)) {
        background-color: var( --vc-noday-background-color);
    }

.eventcalendarDayNumber {
    float: right;
    width: 4rem;
    font-size: calc(var(--default-font-size) * 1.3);
    text-align: right;
}

.eventcalendarDayEvent {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    
    display: inline-grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.5rem;
    align-items: center;  
    width: 100%;
}

    .eventcalendarDayEvent > span:last-child {
        width: calc(100% - 2rem);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;    
    }

    .eventcalendarDayEvent:hover {
        text-decoration: underline;
    }

.eventcalendarDayEventContainer {
    position: relative;
    float: right;
    width: calc(calc(100vw / 7) - 2rem);
    height: calc(calc(100vh / var(--cal-num-weeks)) - 7rem);
    min-height: 5rem;
    overflow: auto;
    background-color: transparent;
}

    .eventcalendarDayEventContainer ul {
        /*
    list-style-position: inside;
    list-style-image: url(../images/../images/overlay.png);
    */
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .eventcalendarDayEventContainer ul li {
            min-height: 19px;
            padding: 0 0 2px 0;
        }

.eventcalendarDaySelected {
    font-weight: 600;
    color: var(--vc-selected-color);
    background-color: var(--vc-selected-background-color);
}

    .eventcalendarDaySelected .eventcalendarTodayEvent, .eventcalendarDaySelected .eventcalendarDayEvent {
        color: var(--vc-selected-color) !important;
    }
/*   .eventcalendarDaySelected > .eventcalendarDayNumber {
        color: var(--default-heading2a-color);
        background-color: var(--default-heading2-background-color);
    }*/
.eventcalendarToday {
    font-weight: 600;
    color: var(--vc-today-color);
    background-color: var(--vc-today-background-color);
}

.eventcalendarTodayNumber {
    float: right;
    width: 4rem;
    max-width: 4rem;
    font-size: calc(var(--default-font-size) * 1.3);
    text-align: right;
}

.eventcalendarTodayEvent {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    color: var(--default-heading3a-color);
    text-align: left;
    white-space: normal;
    cursor: pointer;
    text-decoration: none;
}

    .eventcalendarTodayEvent:hover {
        text-decoration: underline;
    }

#divSmallCalendar {
    position: absolute;
    top: 1rem;
    width: 452px;
    border: solid 1px var(--default-system-menu-border-color);
    background-color: var(--default-system-menu-content-background-color);
}

    #divSmallCalendar table:nth-child(2) {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 450px;
        background-color: var(--default-system-menu-content-background-color);
    }
/* End Event Calendar */
/* Start Contact Search (Address Book) */
#divSearchArea1, #divSearchArea2 {
    display: none;
    height: 11.5rem !important;
    padding: 0.75rem;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    overflow-y: auto;
}

#divSearchArea2 {
    height: 14rem !important;
    margin: -2rem 0 0 0;
}
/* End Contact Search (Address Book) */
#PersonaliseStylesheet {
    z-index: 10;
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    padding: 1rem;
    border: var(--default-input-border);
    border-radius: var(--default-input-border-radius);
    background-color: var(--default-input-background-color);
}
/* Start Reading Pane */
.noScrolls {
    overflow: hidden; /* Remove Scrollbars */
}

.PrintSummary {
    color: var(--default-font-color);
    background-color: var(--default-background-color);
    padding: 1rem;
}

.checklist {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    justify-content: left;
    column-gap: 0.75rem;
}

.readingPaneHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem !important;
    border: none;
    border-bottom: solid 1px transparent;
    background-color: var(--default-header-background-color);
}

    .readingPaneHeader > span {
        font-family: var(--default-font-family);
        font-style: var(--default-font-style);
        font-weight: var(--default-font-weight);
        font-size: calc(var(--default-font-size) * 1.3);
        line-height: var(--default-line-height);
        color: var(--default-heading1-color);
        /* Add ellipsis on 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.readingPaneBody {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100vh;
    background-color: var(--default-background-color);
}

.readingPaneContainer {
    width: 100vw;
    height: calc(100vh - 7rem);
    background-color: var(--default-background-color);
    border: none;
    padding: 1rem;
    margin: 0;
    overflow: auto;
}

.readingPaneFrame {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border: solid 1px var(--vp-border-color);
    border-top: none;
}

.printFriendlyTable {
    background-color: var(--default-background-color);
    border: solid 1px transparent;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
}

    .printFriendlyTable tr {
        border-bottom: solid 1px var(--vg-header-border-color);
    }

    .printFriendlyTable td {
        padding: 1rem;
    }

        .printFriendlyTable td:first-child:not([colspan]) {
            width: 100px;
            white-space: nowrap;
        }

.printFriendlyTableHeading {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: calc(var(--default-font-size) * 1.2);
    line-height: var(--default-line-height);
    text-decoration: none;
    color: var(--default-heading1-color);
    border: solid 1px var(--vp-border-color);
    background-color: var(--default-heading1-background-color);
}

.printFriendlyTable span, .style1, .style2, .style3, .sysmessage, .sysmessagetitle, .smtext1, .smtext2 {
    font-family: var(--default-font-family);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    text-decoration: none !important;
    outline: none !important;
}

.smtext1 {
    font-size: calc(var(--default-font-size) * 0.8);
}

.smtext2 {
    font-size: calc(var(--default-font-size) * 0.75);
}

.last-comm {
    display: grid;
    grid-template-columns: 5rem 1fr;
    grid-gap: 0.3rem;
}

.grid-column-2 {
    grid-column: 1/3;
}

.previewBody {
    border-color: var(--default-system-menu-border-color);
    background-color: var(--default-background-color);
}

.commentsBody {
    padding: 0;
    background-color: var(--default-background-color);
}

.correspondenceBody {
    padding: 0;
    background-color: var(--default-background-color);
}

.systemTable {
    background-color: var(--default-background-color);
    border: solid 1px var(--default-system-menu-border-color);
    width: 100%;
    border-collapse: collapse;
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-decoration: none;
}

    .systemTable td {
        border: 1px solid #dddddd;
        border-collapse: collapse;
    }

.systemTableHeading {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-style: var(--default-font-style);
    font-weight: var(--default-font-weight);
    line-height: var(--default-line-height);
    color: var(--default-font-color);
    text-decoration: none;
    background-color: var(--default-system-menu-background-color);
}
/* End Reading Pane */
/* Start Mark Down Code Styling */
pre:has(code) {
    position: relative;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--default-system-menu-text-color);
    background: var(--default-system-menu-background-color);
    border: 1px solid var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius);
}

pre[data-codelang]:has(code)::before {
    content: attr(data-codelang);
    text-transform: uppercase;
    width: calc(100% - 1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.5rem;
    color: var(--default-heading1a-color);
    background-color: var(--default-heading1-background-color);
    border-bottom: 1px solid var(--default-system-menu-border-color);
    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
}

code {
    font-family: "YaHei Consolas Hybrid", Consolas, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, monospace, monospace;
    display: inline-block;
    max-width: initial;
    padding: 0;
    margin: 3rem 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    border: 0;
    border: none;
    background: none;
}

    code li {
        list-style-type: decimal;
    }

        code li:nth-child(even) {
            background-color: #eee;
        }

p > code {
    margin: 0 !important;
}

/* End Mark Down Code Styling */
/* Start Tag Lookup Styling */
#tagLookup {
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--default-background-color);
    border: 1px solid var(--panel-border-color);
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-box-shadow);
}
    /* Heading */
    #tagLookup > div:first-child {
        font-family: var(--default-font-family);
        font-size: var(--default-font-size);
        color: var(--vw-title-color);
        padding: 0.5rem;
        border-bottom: 1px solid var(--vw-border-color);
        border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
        background-color: var(--vw-border-color);
    }

    #tagLookup > div:last-child {
        padding: 0.35rem;
        border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
    }

    #tagLookup > div:first-child > a:has(span.material-icons) {
        position: absolute;
        top: 0;
        right: 0.5rem;
        color: var(--default-icon-hover-color);
    }

    #tagLookup > div:first-child > a span.material-icons {
        font-size: calc(var(--default-icon-size) * 0.8);
    }

    #tagLookup > ul {
        list-style-type: none;
        font-family: var(--default-font-family);
        font-size: var(--default-font-size);
        color: var(--default-font-color);
        margin: 0px;
        padding: 0px;
        min-width: 9em;
        min-height: 6rem;
        max-height: 12rem;
        overflow: auto;
    }

    #tagLookup li {
        padding: 0.5rem;
        color: var(--vg-row-color);
        background-color: var(--vg-row-background-color);
        cursor: default;
    }

        #tagLookup li:hover, #tagLookup li.highlighted {
            color: var(--vg-row-hover-color);
            background-color: var(--vg-row-hover-background-color);
        }
/* End Tag Lookup Styling */
/* Start WZ Tool Tip Custom Style */
#WzTtDiV {
    border: solid 1px var(--vw-border-color);
    border-radius: var(--vw-border-radius);
}

#WzTiTl {
    background: var(--vw-border-color) !important;
    padding: 0.5rem 1rem !important;
}

#WzTiTlI {
    /*Ensure consistent style on title text */
    font-family: var(--default-font-family) !important;
    line-height: var(--default-line-height) !important;
    font-size: calc(var(--default-font-size) * 0.9) !important;
    font-weight: var(--default-font-weight) !important;
    color: var(--vw-title-color) !important;
}

#WzClOsE {
    position: absolute !important;
    top: -2px !important;
    right: 1rem !important;
    left: unset !important;
    width: 24px;
    height: 20px;
    color: transparent !important;
    border-radius: var(--default-input-border-radius);
    background-image: url(../images/window_icons.png) !important;
    background-repeat: no-repeat !important;
    background-position: -96px center !important;
    background-color: transparent !important;
}

    #WzClOsE:hover {
        background-image: url(../images/window_icons_hover.png) !important;
        background-color: #c95656 !important;
    }

/* End WZ Tool Tip Custom Style */