/*
    Using Colors
    Declare variables using format: --[colorNameHere]
    Reference them by format: var(--[colorNameHere])
*/
:root {
    /*Colors- 
        Ordered by ROYGBIV and then by lightness (lightest to darkest) 
        Colors that are not titled as colors (themes) are at the end.
        Ideally, theme colors should reference colors higher in the list.
    */
    /*Reds*/
    --red-lt95: #ffe6e6;
    --red-lt90: #ffcccc;
    --red-lt87: #ffbbbb;
    --red-lt85: #ffb3b3;
    --red-lt80: #ffb3b3;
    --red-lt78: #ff9191;
    --red-lt76-sat82: #f49191; /*Old table rows color*/
    --red-lt75: #ff8080;
    --red-lt72: #ff7070;
    --red-lt70-sat82: #f17474; /*Old table rows hover color*/
    --redPastel: #ff9999;
    --redPastel-hover: #ff6666;
    --red: #ff0000;
    --red-hover: #cc0000;
    --lightRed: var(--red-lt80);
    --lightRed-hover: var(--red-lt75);
    --lightRedPastel: var(--red-lt87);
    --brightRed: #e73232;
    --brightRed-hover: #cd1818;
    /*Oranges*/
    --lightOrange: #ffae34;
    --lightOrangePastel: #ffcdb2;
    --lightOrange-hover: orange;
    --orangePastel: #ff9c66;
    --orangePastel-hover: #f07f42;
    --lightBrown: #a99270;
    --lightBrown-hover: #8f7856;
    --lighterBrown: #c6b69f;
    --lighterBrown-hover: #b39d80;
    /*Yellows*/
    --lightYellowPastel: #ffffbb;
    --yellowPastel: #ffff99;
    --lightYellow-button: #ffff66;
    --yellowPastel-hover: #ffff66;
    --lightYellow: #ffff66;
    --lightYellow-hover: #ffde4d;
    --lightTan: #efef8f;
    --lightTan-hover: #e0e06c;
    /*Greens*/
    --yellowGreen: #9ACD32;
    --green-lt95: #e6ffe6;
    --green-lt90: #ccffcc;
    --green-lt85: #b3ffb3;
    --green-lt80: #99ff99;
    --green-lt85-sat76-slightyellow: #bff6bc;
    --green-lt75-sat76-slightyellow: #95f090; /*This is the old color for green table rows*/
    --green-lt65-sat76-slightyellow: #69ea62; /*This is the old hover color for green table rows*/
    --lightGreen-button: #7bcd73;
    --greenPastel: #bff6bc;
    --greenPastel-hover: #94f08f;
    --lightGreen-85: var(--green-lt85-sat76-slightyellow);
    --lightGreen: var(--green-lt75-sat76-slightyellow);
    --lightGreen-hover: var(--green-lt65-sat76-slightyellow);
    --greenGray: #aed0b7;
    --greenGray-hover: #8ebe9b;
    /*Blues*/
    --lightBlue: #94c2d1;
    --lightBlue-hover: #70adc2;
    --blue: #668cff;
    --blue-hover: #4d79ff;
    --aqua: #40E0D0;
    --aqua-hover: #20c5b5;
    --darkBlue: #000066;
    /*Purples*/
    --purple: #b366ff;
    --purple-hover: #9933ff;
    --mediumPurple: mediumpurple;
    --pink: #e6b3e6;
    --pink-hover: #df9fdf;
    --pinker: #ffcdf7;
    /*Greyscale*/
    --veryLightGray: #f1f1f1;
    --veryLightGray-hover: #d1d1d1;
    --lightGray: #cccccc;
    --lightGray-hover: #bfbfbf;
    --mediumGray: #bbb;
    --mediumGray-hover: #aaa;
    /*Pastels for grouped lists*/
    --pastel1: #fbfbea;
    --pastel2: #eafbf2;
    --pastel3: #eaeafb;
    --pastel4: #fbeaf2;
    --pastel5: #eefbea;
    --pastel6: #eaf7fb;
    --pastel7: #f7eafb;
    --pastel8: #fbeeea;
    /*Gradients*/
    --orangeGrayStripes: repeating-linear-gradient(45deg,#FFAE34,#FFAE34 14px, #bbb 14px, #bbb 20px);
    --orangeGrayStripes-hover: repeating-linear-gradient(45deg,orange,orange 14px, #aaa 14px, #aaa 20px);
    --orangeGrayStripes-small: repeating-linear-gradient(45deg,#FFAE34,#FFAE34 5px, #bbb 5px, #bbb 8px);
    --orangeGrayStripes-small-hover: repeating-linear-gradient(45deg,orange,orange 5px, #aaa 5px, #aaa 8px);
    --brownTanStripes: repeating-linear-gradient(45deg,#a99270,#a99270 14px, #efef8f 14px, #efef8f 20px);
    --brownTanStripes-hover: repeating-linear-gradient(45deg,#8f7856,#8f7856 14px, #e0e06c 14px, #e0e06c 20px);
    --brownTanStripes-small: repeating-linear-gradient(45deg,#a99270,#a99270 5px, #efef8f 5px, #efef8f 8px);
    --brownTanStripes-small-hover: repeating-linear-gradient(45deg,#8f7856,#8f7856 5px, #e0e06c 5px, #e0e06c 8px);
    /*Themes*/
    --homeButtonHover: #000066;
    --highlightColor: darkorange;
    --backLinkHover: darkorange;
    --scheduleSelected: darkorange;
    --backLinkBackground: #000066;
    --menuSectionBackground: #173982;
    --calendarBackground: #000066;
    --scheduleBorder: #000066;
    --topMenuHover: #000066;
    --topMenuForegroundHover: white;
    --homeMenuTheme: #173982;
    --homeMenuThemeText: white;
    --homeMenuHover: #000066;
    --homeMenuHoverText: white;
    --topMenuHighlight: white;
    --topMenuTheme: #000066;
    --sideMenuTheme: #173982;
    --sideMenuHover: #000066;
    --homeMenuHoverOld: #98aacd;
    --duration: .2s;
    --distance: 2px;
    --easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    --siteBackground: #cdd9e4;
    --boxShadowHover: inset 0 0 0 99999px rgba(128, 128, 128, 0.2);
    --boxShadowActive: inset 0 0 0 99999px rgba(128, 128, 128, 0.4);
    --boxShadowHover-white: inset 0 0 0 99999px rgba(255, 255, 255, 0.2);
    --boxShadowActive-white: inset 0 0 0 99999px rgba(255, 255, 255, 0.4);
    --boxShadowHover-black: inset 0 0 0 99999px rgba(0, 0, 0, 0.2);
    --boxShadowActive-black: inset 0 0 0 99999px rgba(0, 0, 0, 0.4);
    --boxShadowHover-slight: inset 0 0 0 99999px rgba(128, 128, 128, 0.1);
    --boxShadowElevate: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: var(--siteBackground);
}

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128,128,128,0.2);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;

    & > .spinner {
        background-color: white;
        border-radius: 0.5vmin;
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        padding: 1rem;
        color: #110063;
    }
}

.hoverable {
    opacity: 0.6;
}

    .hoverable:hover {
        opacity: 0.6;
        cursor: pointer;
    }

.fa-stack.small {
    font-size: 0.5em;
}

    .fa-stack.small i {
        vertical-align: middle;
    }

#tableContainer .characterCheckbox {
    font-size: x-large;
}

/*############################//
//                            //
//        PRINTING            //
//                            //
//############################*/

.print-show {
    display: none !important;
}

@media print {
    html, body {
        height: auto !important;
        overflow: visible !important;
        filter: grayscale(100%) !important;
    }

    * {
        color: black !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    #commonmenu {
        display: none !important;
    }

    #box, .body-content {
        overflow: visible !important;
    }

    .header-align-center {
        border: none !important;
    }

    .details-section {
        border: none !important;
    }

    .info-tab-section {
        display: none !important;
    }

    info-tabs {
        display: none !important;
    }

    .print-hide {
        display: none !important;
    }

    .print-show {
        display: block !important;
    }

    .print-invisible {
        visibility: hidden !important;
    }

    .link-label {
        text-decoration: none !important;
    }

    pfd-scratch-pad {
        display: none;
    }

    #Feedback, #ClickHistory, #ClickHistoryPopup {
        display: none !important;
    }
}

.quote-block {
    display: inline-block;
    background-color: white;
    padding: 2px;
}

a.quote-request.link-white.comment {
    background-color: var(--yellowPastel);
}

    a.quote-request.link-white.comment:hover {
        background-color: var(--yellowPastel-hover);
    }

a.quote-request.link-white.important.comment {
    background-color: var(--redPastel);
}

    a.quote-request.link-white.important.comment:hover {
        background-color: var(--redPastel-hover);
    }

.badge {
    position: absolute;
    display: inline-block;
    top: -10px;
    right: -10px;
    width: 1.65rem;
    line-height: 1.65rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0.75rem;
    background: red;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.link-white .badge {
    top: 0;
    right: 0;
    width: 1.4rem;
    line-height: 1.4rem;
    font-size: 0.65rem;
}

    .link-white:hover .badge {
        box-shadow: var(--boxShadowHover);
    }

.badgeInline, .badgeTotal {
    display: inline-block;
    width: 1.65rem;
    line-height: 1.65rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0.65rem;
    background: red;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

    .badgeTotal.important {
        background-color: mediumpurple;
    }

    .badgeTotal.none {
        background-color: var(--veryLightGray);
        color: var(--topMenuTheme);
    }

    .badgeInline[value="0"], .badge[value="0"], .badgeInline.inactive, .badge.inactive {
        display: none;
    }

.hasBadge {
    padding-block: 18px !important;
}

#texting-topmenu:has(.badgeInline[value="0"]) {
    display: none;
}

/*#region Highlight UI*/

.highlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    display: none;
    z-index: 100000;
}

.highlight-start-button {
    background-color: #3b82f6;
    color: white;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .highlight-start-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

.highlighted-element-clone {
    position: absolute;
    z-index: 100001;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;
    border: 3px solid #60a5fa;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.highlight-box {
    position: absolute;
    background-color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 280px;
    text-align: left;
    font-size: 0.9rem;
    color: #475569;
    z-index: 100002;
    transition: top 0.3s ease, left 0.3s ease, transform 0.3s ease;
}

    .highlight-box h3 {
        font-size: 1.125rem;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0.5rem;
        color: #1e293b;
    }

.highlight-box-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
    gap: 0.5rem;
}

    .highlight-box-footer button, .highlight-box i.fa-xmark {
        background-color: #e2e8f0;
        color: #475569;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .highlight-box-footer button:disabled {
            background-color: #f1f5f9;
            color: #94a3b8;
            cursor: not-allowed;
        }

        .highlight-box-footer button:hover:not(:disabled), .highlight-box i.fa-xmark:hover {
            background-color: #c9d9e8;
        }

        .highlight-box-footer button.next-button {
            background-color: #3b82f6;
            color: white;
        }

            .highlight-box-footer button.next-button:hover:not(:disabled) {
                background-color: #2563eb;
            }

    .highlight-box i.fa-xmark {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        padding: 0.25rem 0.5rem;
    }

/*#endregion*/

#box {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    margin: 0px;
    overflow-x: auto;
}

#commonmenu {
    flex: 0 1 auto;
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: block;
    background-color: var(--topMenuTheme);
    color: white;
}

.topnav {
    background-color: var(--topMenuTheme);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    overflow: hidden;
    display: flex;
}

    .topnav ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
        display: flex;
    }

        .topnav ul li {
            display: flex;
            padding-left: 10px;
        }

.topmenu-link {
    display: flex;
    align-items: center;
    color: white;
    height: 52px;
    line-height: 52px;
    text-align: center;
    padding: 0px 4px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    min-width: 40px;
    transition-duration: 0.1s;
    column-gap: 0.25rem;
}

    .topmenu-link:after {
        content: '';
        position: absolute;
        bottom: 1px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--topMenuHighlight);
        opacity: 0;
    }

    .topmenu-link:hover:after, .topmenu-link:focus:after {
        opacity: 1;
        transform: translateY(0);
        transition: transform var(--duration) var(--easeOutBack), opacity var(--duration);
    }

#options-topmenu {
    position: relative;
    display: inline-block;
}

    /*Hide the tasks header if it does not contain any elements.*/
    #options-topmenu:not(#options-topmenu:has(.tasks-dropdown-content div)) {
        display: none;
    }

#tasks-topmenu {
    position: relative;
    display: inline-block;
}

    /*Hide the tasks header if it does not contain any links.*/
    #tasks-topmenu:not(#tasks-topmenu:has(.tasks-dropdown-content a)) {
        display: none;
    }

.tasks-dropdown-content {
    display: flex;
    visibility: hidden;
    position: fixed;
    top: 52px;
    margin: 0px auto;
    background-color: white;
    width: 250px;
    max-height: 500px;
    text-align: center;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    user-select: none;
    border-top: 1px solid var(--menuSectionBackground);
    border-left: 1px solid var(--menuSectionBackground);
    border-right: 1px solid var(--menuSectionBackground);
    flex-direction: column;
    transition-duration: 0.1s;
}

    .tasks-dropdown-content a {
        background-color: white;
        color: var(--menuSectionBackground);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 14px;
        padding: 0 6px;
        text-decoration: none;
        display: flex;
        align-items: center;
        user-select: none;
        border-bottom: 1px solid var(--menuSectionBackground);
        gap: 5px;
    }

        .tasks-dropdown-content a:hover {
            background-color: var(--backLinkHover);
            cursor: pointer;
        }

        .tasks-dropdown-content a .badge-container {
            min-width: 30px;
        }

        .tasks-dropdown-content a .tasks-dropdown-text {
            min-height: 50px;
            display: flex;
            align-items: center;
            text-align: left;
        }

    .tasks-dropdown-content .task-toggle-button {
        background-color: white;
        color: var(--menuSectionBackground);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 14px;
        padding: 0 6px;
        text-decoration: none;
        display: flex;
        align-items: center;
        user-select: none;
        border-bottom: 1px solid var(--menuSectionBackground);
        gap: 5px;
        min-height: 50px;
    }

    /* Use both css and JavaScript so that it works while the JavaScript is loading. */
    .topmenu-link.focus + .tasks-dropdown-content, .topmenu-link:focus-within + .tasks-dropdown-content, .tasks-dropdown-content:focus-within {
        visibility: visible;
    }

#Tasks .task-toggle-button {
    display: flex;
    margin: auto;
    border: 1px solid white;
    border-radius: 6px;
    padding: 5px;
    gap: 5px;
}

/* I'm sure there's a simpler way to just wrap this. */
#Tasks .mypwd-column-body {
    max-height: 800px;
}

.task-toggle-button label.switch {
    min-width: 56px;
}

.task-toggle-button.show-everything {
    align-items: center;
}

@media only screen and (max-width: 1200px) {
    #Tasks .mypwd-column-body {
        max-height: 1000px;
    }
}

@media only screen and (max-width: 650px) {
    #options-topmenu {
        display: none;
    }

    #Tasks .mypwd-column-body {
        max-height: none;
    }
}

@media only screen and (max-width: 535px) {
    #tasks-topmenu {
        display: none;
    }
}

@media only screen and (max-width: 460px) {
    #mypwd-topmenu {
        display: none;
    }
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 4.00em;
    height: 2.125em;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: transform .4s;
    transition: transform .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.625em;
        width: 1.625em;
        left: 0.25em;
        bottom: 0.25em;
        background-color: white;
        -webkit-transition: transform .4s;
        transition: transform .4s;
    }

.slider-input:checked + .slider {
    background-color: var(--topMenuTheme);
}

.slider-input:focus + .slider {
    box-shadow: 0 0 1px var(--topMenuTheme);
}

.slider-input:checked + .slider:before {
    -webkit-transform: translateX(1.875em);
    -ms-transform: translateX(1.875em);
    transform: translateX(1.875em);
}

/* Rounded sliders */
.slider.round {
    border-radius: 2.125em;
}

    .slider.round:before {
        border-radius: 50%;
    }

.topnav-extended-logo {
    display: inline-block;
    height: 44px;
}

#short_logo {
    display: none;
}

.topnav-short-logo {
    display: none;
    height: 45px;
}

#pwdiconandtitle {
    text-align: left;
    padding-left: 5px;
    padding-right: 2px;
    color: white;
    cursor: pointer;
    transition-duration: 0.1s;
    border-radius: 3px;
}

    #pwdiconandtitle ul li {
        padding-left: 0px;
    }

.topmenu-align-right {
    display: flex;
    margin-left: auto;
    display: inline-block;
    text-align: left;
}

#login-link {
    display: none;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    left: 0;
    overflow-x: hidden;
    transition: 0.2s;
    background-color: var(--sideMenuTheme);
}

    .sidenav > div {
        height: 100%;
        border-right: 3px solid grey;
    }

    .sidenav ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        text-align: left;
    }

        .sidenav ul li {
            display: block;
        }

    .sidenav a {
        padding: 16px 14px;
        text-decoration: none;
        color: white;
        display: block;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        transition: 0.1s;
        position: relative;
        text-decoration: none;
        transition-duration: 0.1s;
        cursor: pointer;
        border-radius: 3px;
    }

        .sidenav a:hover {
            transition-duration: 0.1s;
            background-color: var(--sideMenuHover);
        }

    .sidenav.expanded {
        width: 175px; /*width: auto causes the animation to stop working*/
    }

#nav-icon {
    margin-top: 0px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    cursor: pointer;
}

    #nav-icon span {
        display: block;
        position: absolute;
        height: 5px;
        width: 40px;
        background-color: white;
        border-radius: 6px;
        opacity: 1;
        left: 5px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .1s ease-in-out;
        -moz-transition: .1s ease-in-out;
        -o-transition: .1s ease-in-out;
        transition: .1s ease-in-out;
    }

        #nav-icon span:nth-child(1) {
            top: 12px;
        }

        #nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
            top: 24px;
        }

        #nav-icon span:nth-child(4) {
            top: 36px;
        }

    #nav-icon.open span:nth-child(1), #nav-icon.open span:nth-child(4) {
        top: 24px;
        width: 0%;
        left: 50%;
    }

    #nav-icon.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #nav-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #nav-icon:hover span {
        color: #eeeeee;
        background: #eeeeee;
        transition: 0.1s;
    }

.email-span {
    font-size: 14px;
    max-width: 90px;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/*
    Use a div with this id to store data attributes to be assigned to variables in JavaScript. It works for complex objects and primitives.
    This is the recommended, secure way to do this: https://learn.microsoft.com/en-us/aspnet/core/security/cross-site-scripting?view=aspnetcore-5.0
    Hint: to pass complex objects, use this format: data-variable-name='@Json.Serialize(variableToPassToJavascript)'. (Make sure to use single quotes!)
    Access the variable in JavaScript using the format: var modelAll = $('#variablesRazorToJavaScript').data('variable-name');.

    Also, be careful when accessing properties - Json.Serialize makes them start with a lowercase letter (camelCase).
    If you need to maintain uppercase, you can use Newtonsoft.Json.JsonConvert.SerializeObject instead.
*/
#variablesRazorToJavaScript {
    display: none;
}

.container {
    padding: 3px 5px 3px 5px;
    flex: 1 1 auto;
    position: relative;
}

footer {
    flex: 0 1 20px;
    margin-top: auto;
    padding: 0px;
    width: 100%;
}

    footer div {
        padding: 0px 20px;
        height: 25px;
        line-height: 25px;
    }

    footer #app_version {
        margin-left: 10px;
        font-style: italic;
        font-size: 12px;
        font-family: monospace;
    }

        footer #app_version:not([data-show="True"]) {
            display: none;
        }

body:has(#ClickHistory:not(.disabled)) footer div {
    padding: 0px 44px;
}

.header-section {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}

.header-align-left {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px;
}

.header-align-center {
    width: 60%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    text-align: center;
    background-color: #888888;
    color: #f1f1f1;
    border: 2px solid black;
    border-radius: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    margin: 0 0 auto 0;
    position: relative;
}

div.header-align-center {
    font-size: 32px;
}

.header-align-center:has(> .subheader) {
    position: relative;
    gap: 5px;
}

    .header-align-center > .subheader {
        width: 100%;
        padding-bottom: 2px;
        font-size: medium;
        color: black;
        border-radius: 0 0 6px 6px;
        background-color: white;
    }

.header-align-right {
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 5px;
}

.header-section .header-align-center.long-text {
    width: 64%;
}

.header-section:has(.header-align-center.long-text) .header-align-right,
.header-section:has(.header-align-center.long-text) .header-align-right {
    width: 18%;
}

.back-link, .link-gold, .link-grey, .link-lightgreen, .link-lightred, .link-white, .link-white-disabled, .link-yellow, .link-lightblue, .link-brown {
    margin: 0;
    padding: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;
}

    .back-link:hover, .link-gold:hover, .link-grey:hover, .link-lightgreen:hover, .link-lightred:hover, .link-white:hover, .link-yellow:hover,
    .link-lightblue:hover, .link-brown:hover {
        color: var(--backLinkBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 1pt black;
        cursor: pointer;
    }

.back-link {
    background-color: var(--backLinkBackground);
    color: white;
}

    .back-link.active {
        color: var(--backLinkBackground);
        background-color: var(--backLinkHover);
    }

.link-gold {
    background-color: gold;
    color: black;
}

.link-grey {
    background-color: lightgrey;
    color: black;
}

.link-lightgreen {
    background-color: lightgreen;
    color: black;
}

.link-lightred {
    background-color: lightcoral;
    color: black;
}

.link-white {
    background-color: white;
    color: var(--backLinkBackground);
}

.link-white-disabled {
    background-color: var(--mediumGray);
    color: var(--backLinkBackground);
}

.link-yellow {
    background-color: var(--lightYellow-button);
    color: black;
}

.link-lightblue {
    background-color: var(--lightBlue);
    color: black;
}

.link-brown {
    background-color: var(--lightBrown);
    color: black;
}

.yellow {
    background-color: yellow;
}

.page-link {
    min-width: 44px;
    margin: 5px 5px 0px 5px;
    padding: 5px;
    background-color: var(--backLinkBackground);
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;
}

    .page-link:hover {
        color: var(--backLinkBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 1pt black;
        cursor: pointer;
    }

.menu-category {
    padding: 10px;
    margin-bottom: 40px;
    width: 100%;
    background-color: var(--menuSectionBackground);
    border: 3px ridge black;
    border-radius: 10px;
}

.menu-category-header {
    text-align: center;
    margin: 0px;
    padding: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: black;
}

.menu-category-header-white {
    text-align: center;
    margin: 0px;
    padding: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.menu-category-header-light {
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: white;
}

.menu-category-body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.menu-button {
    width: 110px;
    height: 60px;
    padding: 5px;
    position: relative;
    color: var(--menuSectionBackground);
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 15px 15px;
    user-select: none;
}

    .menu-button:hover, .menu-button:focus {
        color: var(--menuSectionBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 2pt black;
        cursor: pointer;
    }

@media only screen and (max-width: 1000px) {
    .menu-button {
        margin: 12px 6px;
    }
}

.menu-button-wide-short {
    width: 200px;
    height: 50px;
}

.menu-button-large {
    width: 180px;
    height: 100px;
    margin: 20px;
    padding: 5px;
    background-color: white;
    color: var(--menuSectionBackground);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    display: flex;
    flex-direction: column;
    user-select: none;
}

    .menu-button-large:hover {
        color: var(--menuSectionBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 2pt black;
        cursor: pointer;
    }

@media only screen and (max-width: 1000px) {
    .menu-button-large {
        margin: 20px 6px;
    }
}

.menu-button-flex-horizontal {
    max-width: 500px;
    min-width: 200px;
    height: fit-content;
    margin: 20px;
    padding: 5px;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--menuSectionBackground);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    justify-content: center;
    text-align: center;
}

/*  .menu-button-flex:hover {
        color: var(--menuSectionBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 2pt black;
        cursor: pointer;
    }*/

@media only screen and (max-width: 1000px) {
    .menu-button-flex-horizontal {
        margin: 20px 6px;
    }
}

.menu-button-flex {
    width: fit-content;
    min-width: 200px;
    height: fit-content;
    margin: 20px;
    padding: 5px;
    background-color: lightgray;
    color: var(--menuSectionBackground);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    display: flex;
    flex-direction: column;
    user-select: none;
}

@media only screen and (max-width: 1000px) {
    .menu-button-flex {
        margin: 20px 6px;
    }
}

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 60px;
    margin: 0px auto;
    background-color: white;
    width: 100%;
    text-align: center;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
    user-select: none;
    border-top: 1px solid var(--menuSectionBackground);
    border-left: 1px solid var(--menuSectionBackground);
    border-right: 1px solid var(--menuSectionBackground);
}

    .menu-dropdown-content a {
        background-color: white;
        color: var(--menuSectionBackground);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 14px;
        padding: 12px 6px;
        text-decoration: none;
        display: block;
        transition-duration: 0.2s;
        user-select: none;
        border-bottom: 1px solid var(--menuSectionBackground);
    }

        .menu-dropdown-content a:hover {
            background-color: var(--backLinkHover);
            cursor: pointer;
        }

    .menu-dropdown .menu-button:hover + .menu-dropdown-content, .menu-dropdown .menu-button:focus + .menu-dropdown-content, .menu-dropdown-content:hover {
        display: block;
    }

.button-with-dropdown, .button-pink {
    min-width: 110px;
    height: 31px;
    padding: 5px;
    background-color: white;
    color: var(--backLinkBackground);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;
}

    .button-with-dropdown:hover, .button-with-dropdown:focus,
    .button-pink:hover, .button-pink:focus {
        color: var(--backLinkBackground);
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 1pt black;
        cursor: pointer;
    }

.button-pink {
    background-color: var(--pink);
}

.button-dropdown {
    position: relative;
    display: inline-block;
}

.button-dropdown-content {
    display: none;
    position: absolute;
    top: 31px;
    margin: 0px auto;
    background-color: white;
    width: 100%;
    text-align: center;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 20;
    user-select: none;
    border-top: 1px solid var(--menuSectionBackground);
    border-left: 1px solid var(--menuSectionBackground);
    border-right: 1px solid var(--menuSectionBackground);
}

    .button-dropdown-content a {
        background-color: white;
        color: var(--menuSectionBackground);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        font-size: 14px;
        padding: 10px 5px;
        text-decoration: none;
        display: block;
        transition-duration: 0.2s;
        user-select: none;
        border-bottom: 1px solid var(--menuSectionBackground);
    }

        .button-dropdown-content a:hover {
            background-color: var(--backLinkHover);
            cursor: pointer;
        }

        .button-dropdown-content a.unavailable-dropdown-item {
            background-color: var(--pink);
        }

            .button-dropdown-content a.unavailable-dropdown-item:hover {
                background-color: var(--backLinkHover);
            }

        .button-dropdown-content a.special-dropdown-item {
            background-color: var(--yellowPastel);
        }

            .button-dropdown-content a.special-dropdown-item:hover {
                background-color: var(--backLinkHover);
            }

    .button-dropdown .button-with-dropdown:hover + .button-dropdown-content, .button-dropdown .button-with-dropdown:focus + .button-dropdown-content,
    .button-dropdown-content:hover {
        display: block;
    }

menu {
    position: absolute;
    display: none;
    z-index: 100;
    left: 0px;
    top: 0px;
    height: fit-content;
    width: fit-content;
    min-width: 220px;
    padding: 2px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

menuitem {
    display: block;
    padding: 2px 3px;
    border-radius: 6px;
}

    menuitem:hover {
        background-color: #cccccc;
    }

    menuitem:has(a) {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    menuitem.disabled-menuitem > a {
        color: darkgray;
        cursor: default;
    }

    menuitem:has(a):not(.disabled-menuitem):hover {
        background-color: inherit;
    }

    menuitem:not(.disabled-menuitem) > a:hover {
        background-color: #cccccc;
    }

    menuitem > a {
        color: black;
        text-decoration: none;
        padding: 2px 3px;
        border-radius: 6px;
        width: 100%;
    }

.filter-section {
    margin: 0 5px 10px 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 8px;
    column-gap: 12px;
}

.plus-minus-group {
    display: flex;
    flex-direction: column;
    height: 31px;
    width: 18px;
    gap: 1px;
    background-color: grey;
}

.plus-button, .minus-button {
    font-size: 10px;
    flex-grow: 1;
    padding: 0;
    border-style: solid;
    border-color: grey;
    border-radius: 0px;
    background-color: var(--veryLightGray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .plus-button:hover, .minus-button:hover {
        background-color: var(--veryLightGray-hover);
    }

.plus-button {
    border-width: 1px 1px 0px 0px;
}

.minus-button {
    border-width: 0px 1px 1px 0px;
}

.snap-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 31px;
    width: 17px;
    font-size: 12px;
    background: var(--veryLightGray);
    border: 1px solid #777;
    border-left: none;
    cursor: pointer;
}

    .snap-button:hover {
        background: var(--veryLightGray-hover);
    }

label.radio-label:has(input[type=radio]:checked) {
    color: var(--blue);
}

    label.radio-label > input[type=radio] {
        accent-color: var(--blue);
    }

.required-outline:invalid {
    outline: 2px solid red;
}

    .required-outline:invalid + .select2-container .select2-selection--single {
        outline: 2px solid red;
    }

    .required-outline:invalid + .select2-container .select2-selection--multiple {
        outline: 2px solid red;
    }

input:not([type=button]):not([type=checkbox]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=reset]):not([type=submit]) {
    padding: 5px 0px 5px 8px;
    font-size: 16px;
    font-family: Arial;
    border: 1px solid #767676;
    border-radius: 2px;
}

input[type=checkbox] {
    display: block;
}

.checkbox-row input[type=checkbox], .checkbox-row div, .checkbox-row span, .checkbox-row strong, .checkbox-big br {
    display: inline;
    vertical-align: middle;
}

.checkbox-big {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
}

.checkboxTimestamp {
    margin-left: 20px;
    font-size: 12px;
}

.checkboxOrRow {
    font-weight: bold;
    padding-left: 10px;
}

select {
    padding: 5px 0px 5px 5px;
    font-size: 16px;
    font-family: Arial;
    border: 1px solid #767676;
    border-radius: 2px;
}

.currency {
    padding-left: 15px !important;
}

.currency-symbol {
    position: absolute;
    padding: 2px 5px;
}

textarea {
    padding: 5px;
    font-size: 16px;
    font-family: Arial;
    border: 1px solid #767676;
    border-radius: 2px;
    width: 100%;
    resize: none;
    overflow: auto;
}

    textarea + .maxlength-feedback {
        position: fixed;
        padding-left: 0.3em;
        padding-right: 0.3em;
        color: #fff;
        background-color: #3c8243;
        border-radius: 1px 1px 2px 1px;
        text-align: right;
    }

        textarea + .maxlength-feedback:hover {
            opacity: 0.15;
        }

.textarea-adjust-height {
    min-height: 30px;
    overflow: hidden !important;
}

.textarea-wrapper {
    overflow-x: auto;
}

.textarea-line-numbers {
    height: 250px;
    font-size: 14px;
    padding: 5px 3px;
}

.date-picker, .date-time-picker, .from-date-picker, .from-date-time-picker {
    cursor: pointer;
}

.date-input {
    width: 100px;
}

.search-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.key-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    margin-left: auto;
    row-gap: 8px;
    column-gap: 14px;
}

.clear-filter {
    max-height: 28px;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    transition-duration: 0.2s;
    cursor: pointer;
}

    .clear-filter:hover {
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 1pt black;
    }

#RulesPageContent {
    padding: 0 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    #RulesPageContent .p1 {
        font-size: 18px;
        padding-left: 40px;
        text-indent: -40px;
    }

    #RulesPageContent .p2 {
        font-size: 16px;
        padding-left: 80px;
        text-indent: -40px;
    }

    #RulesPageContent .p3 {
        font-size: 16px;
        padding-left: 120px;
        text-indent: -40px;
    }

    #RulesPageContent .p4 {
        font-size: 16px;
        padding-left: 160px;
        text-indent: -40px;
    }

    #RulesPageContent .p5 {
        font-size: 16px;
        padding-left: 200px;
        text-indent: -40px;
    }

.page-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.responsive-page {
    width: 100%;
    padding: 20px 100px;
}

@media only screen and (max-width: 1000px) {
    .responsive-page {
        padding: 20px;
    }
}

.details-section {
    display: inline-block;
    background-color: lightblue;
    padding: 5px;
    border-radius: 5px;
    border: 3px solid black;
    color: black;
    width: 100%;
}

.details-label {
    width: 40%;
    font-weight: bold;
    padding: 5px;
}

.details-input {
    width: 60%;
}

.details-value {
    width: 60%;
    padding: 5px;
}

.details-heading {
    width: 100%;
    font-weight: bold;
    text-align: center;
}

.read-only-input {
    background-color: transparent;
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    border: none !important;
}

.row {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .row > input[type=checkbox] {
        display: inline;
    }

.bold-heading {
    margin: 0px;
    padding: 5px 0 2px 5px !important;
    font-weight: bold;
}

/*New css styling to replace .responsive and .details-section*/
.bold {
    font-weight: bold;
}

.details-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

.details-column {
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media only screen and (max-width: 600px) {
    .details-column {
        width: 100%;
    }
}

.details-block {
    background-color: lightblue;
    padding: 5px;
    border-radius: 5px;
    border: 3px solid black;
    color: black;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .details-block .section {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }

.row-40-60 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
}

    .row-40-60 > label {
        width: 40%;
        font-weight: bold;
        padding-right: 5px;
    }

    .row-40-60 > .label-and-checkbox {
        width: 40%;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }

        .row-40-60 > .label-and-checkbox > label {
            font-weight: bold;
        }

    .row-40-60 .text-value {
        display: flex;
        align-items: center;
        min-height: 30px;
        width: 60%;
        min-width: 250px;
    }

    .row-40-60 select,
    .row-40-60 .text-value,
    .row-40-60 input:not([type=button],[type=checkbox],[type=hidden],[type=image],[type=radio],[type=reset],[type=submit]) {
        width: 60%;
        min-width: 250px;
    }

    .row-40-60 .select2-container {
        width: 60% !important;
        min-width: 250px;
    }

.row-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 5px;
}

    .row-inline .text-value {
        margin-left: 5px;
        margin-right: 10px;
    }

.submit-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

    .submit-section .submit, .submit-section .submit-red {
        min-width: 100px;
    }

.submit-message {
    font-weight: bold;
    font-size: 20px;
    color: green;
}



.text-danger {
    color: red;
}

.circle-button-red {
    margin: 0;
    padding: 0;
    color: red;
    background-color: white;
    width: 20px;
    line-height: 20px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-sizing: initial;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    user-select: none;
}

    .circle-button-red:hover {
        box-shadow: 0 0 0pt 1pt black;
        cursor: pointer;
    }

.circle-button-green {
    margin: 0;
    padding: 0;
    color: green;
    background-color: white;
    width: 20px;
    line-height: 20px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    box-sizing: initial;
    outline: none;
    transition-duration: 0.2s;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    user-select: none;
}

    .circle-button-green:hover {
        box-shadow: 0 0 0pt 1pt black;
        cursor: pointer;
    }

.hint {
    width: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    border: 1px solid var(--darkBlue);
    color: white;
    background-color: var(--darkBlue);
    cursor: default;
    position: relative;
    display: inline-block;
    box-sizing: initial;
}

    .hint.small {
        width: 14px;
        line-height: 14px;
        font-size: 14px;
    }

    .hint.large {
        padding: 3px;
    }

    .hint.resizable {
        width: 1em;
        height: 1em;
        line-height: 1em;
        padding: 2px;
    }

        .hint.resizable.small {
            font-size: 14px;
        }

span.hint {
    display: inline-block;
}

.square-inline {
    width: 14px;
    height: 14px;
    text-align: center;
    color: white;
    background-color: black;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.square-inline-small {
    width: 10px;
    height: 10px;
    text-align: center;
    color: white;
    background-color: black;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.image-sharp {
    image-rendering: optimizeQuality;
}

.imageRow {
    justify-content: center;
}

    .imageRow a img {
        max-width: 100%;
        max-height: 300px;
    }

.note__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 5px;
}

    .note__header > h4 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 500;
        display: inline-block;
        margin: 0;
    }

    .note__header > span {
        font-weight: lighter;
        font-size: 0.7em;
        opacity: 0.6;
    }

    .note__header > hr {
        margin-bottom: 1em;
    }

.delete-confirm {
    margin-left: auto;
}

.delete-button {
    padding-inline: 0.5rem;
    color: #771F26;
}

    .delete-button:hover {
        cursor: pointer;
    }

.ui-widget-content {
    border: none;
    color: black;
    background-color: white;
}

.ui-widget {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

    .ui-widget.ui-widget-content {
        border: none;
    }

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 400px;
    max-height: 400px;
    overflow: auto;
    background-color: white;
    border: 2px solid var(--darkBlue) !important;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 14px;
    white-space: pre-line;
}

/*Ensures the autocomplete text doesn't appear at the bottom of the screen.*/
.ui-helper-hidden-accessible {
    display: none !important;
}

ul.ui-autocomplete.ui-menu {
    background-color: #eeeeee;
    border-radius: 3px;
    border: 1px solid black;
    padding: 3px;
    float: left;
    cursor: pointer;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
    background-color: #cccccc;
}

.ui-autocomplete {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 400px;
    max-height: 350px;
    z-index: 20;
}

    .ui-autocomplete > li > div {
        padding: 3px;
        white-space: nowrap;
    }

@media only screen and (max-width: 500px) {
    .ui-autocomplete {
        max-width: 280px;
    }
}

.not-active {
    pointer-events: none;
    visibility: hidden;
    cursor: default;
    text-decoration: none;
    color: black;
}

.submit {
    background-color: var(--lightGreen-button);
    padding: 5px 10px;
    color: black;
    font-size: 16px;
    font-weight: bold;
    transition-duration: 0.2s;
    border-radius: 10px;
    border: 2px solid black;
    outline: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    text-align: center;
    user-select: none;
}

    .submit:hover {
        background-color: var(--backLinkHover);
        color: var(--backLinkBackground);
        box-shadow: 0 0 0pt 1pt black;
    }

.nosubmit {
    background-color: grey;
    padding: 5px 10px;
    color: black;
    font-size: 16px;
    font-weight: bold;
    transition-duration: 0.2s;
    border-radius: 10px;
    border: 2px solid black;
    outline: none;
    cursor: context-menu;
    display: inline-block;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    text-align: center;
    min-width: 100px;
    margin: 0;
}

.submit-yellow {
    background-color: var(--lightYellow-button);
    padding: 5px 10px;
    color: black;
    font-size: 16px;
    font-weight: bold;
    transition-duration: 0.2s;
    border-radius: 10px;
    border: 2px solid black;
    outline: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    text-align: center;
    user-select: none;
}

    .submit-yellow:hover {
        background-color: var(--backLinkHover);
        color: var(--backLinkBackground);
        box-shadow: 0 0 0pt 1pt black;
    }

.submit-red {
    background-color: lightcoral;
    padding: 5px 10px;
    color: black;
    font-size: 16px;
    font-weight: bold;
    transition-duration: 0.2s;
    border-radius: 10px;
    border: 2px solid black;
    outline: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    text-align: center;
    user-select: none;
}

    .submit-red:hover {
        background-color: var(--backLinkHover);
        color: var(--backLinkBackground);
        box-shadow: 0 0 0pt 1pt black;
    }

.formSubmitted {
    line-height: 32px;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: green;
}

.formSubmitted-red {
    line-height: 32px;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: red;
}

.readOnly {
    display: none;
}

.button-with-toggle {
    display: flex;
    height: 31px;
    padding: 0 0 0 5px;
    gap: 2px;
}

    .button-with-toggle .toggle-table {
        pointer-events: none;
    }

.block-table-top {
    display: flex;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 2px solid #aaa;
    background-color: #ddd;
    color: black;
    margin: 0;
    padding: 3px 5px;
    font-weight: bold;
}

.container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.tableContainer {
    overflow: auto;
    position: relative;
    height: 100%;
    width: 100%;
}

@media only screen and (max-width: 925px), only screen and (max-height: 500px) {
    .tableContainer {
        display: flex;
        flex-direction: column;
        overflow: auto;
        min-height: calc(100vh - 25px) !important;
    }

    .grid-container {
        min-height: calc(100vh - 25px) !important;
    }
}

.table-regular {
    margin: 0 auto;
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-regular th {
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
        border-right: 2px solid #999;
    }

    .table-regular td {
        border-bottom: 2px solid #999;
        border-right: 2px solid #999;
    }

        .table-regular th:first-child, .table-regular td:first-child {
            border-left: 2px solid #999;
        }

    .table-regular thead {
        position: sticky;
        top: 0px;
        z-index: 1;
    }

        .table-regular thead th {
            padding: 4px;
            background: #555;
            color: #f1f1f1;
            font-size: 14px;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }

            .table-regular thead th a {
                text-decoration: none;
                color: #f1f1f1;
                display: block;
            }

    .table-regular tbody tr {
        background-color: var(--veryLightGray);
    }

    /*To prevent the hover effect, add the .no-hover class to the table.*/
    .table-regular:not(.no-hover) tbody tr:hover {
        background-color: var(--veryLightGray-hover);
        cursor: pointer;
    }

    .table-regular tbody tr td {
        padding: 3px 5px;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

.table-thin {
    margin: 0 auto;
    position: relative;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-thin th {
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
    }

    .table-thin td {
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
    }

        .table-thin th:first-child, .table-thin td:first-child {
            border-left: 1px solid #999;
        }

    .table-thin thead {
        position: sticky;
        top: 0px;
        z-index: 1;
    }

        .table-thin thead th {
            padding: 4px 6px;
            background-color: var(--mediumGray);
            color: black;
        }

            .table-thin thead th a {
                text-decoration: none;
                display: block;
            }

    .table-thin tbody tr {
        background-color: var(--veryLightGray);
    }

        .table-thin tbody tr td {
            padding: 3px;
            font-size: 14px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: right;
        }

        .table-thin tbody tr th {
            position: sticky;
            top: 0px;
            padding: 4px 6px;
            background-color: var(--mediumGray);
            color: black;
            font-size: 14px;
            text-align: center;
        }

.table-row-invisible {
    background-color: var(--siteBackground) !important;
    border: none !important;
    cursor: initial !important;
    height: 20px !important;
}

.hiddenRow td {
    border-right: 2px dotted #999 !important;
    border-bottom: 2px dotted #999 !important;
}

.hiddenRow td:first-child {
    border-left: 2px dotted #999 !important;
}

@media screen {
    tfoot.sticky-footer {
        position: sticky;
        inset-block-end: 0;
    }
}

tfoot.sticky-footer > tr > td {
    background-color: floralwhite;
    border-top: 1px solid #999999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    padding: 3px 5px;
    color: black;
    border-right-style: solid !important; /*to undo the style for info-panel*/
}

.sticky-row {
    position: sticky;
    top: 0px;
    z-index: 1;
}

    .sticky-row th {
        border-top: 1px solid #999 !important;
    }

.table-list-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-shadow: var(--boxShadowHover-slight); /*Slightly stand out.*/
}

    .table-list-group > div:not(:last-child) {
        border-bottom: 2px solid #999;
    }

    .table-list-group > div {
        display: flex;
        flex-grow: 1;
    }

        .table-list-group > div > div:not(:last-child) {
            border-right: 2px solid #999;
        }

        .table-list-group > div > div {
            display: flex;
            align-items: center;
            padding: 2px;
            width: min-content;
        }

.entryLink {
    text-decoration: none;
    color: initial;
}

    .entryLink:hover {
        text-decoration: underline;
        cursor: pointer;
    }

.whiteMenuKey, .whiteMenuKey a {
    background-color: white;
}

.lightYellowMenuKey, .lightYellowMenuKey a {
    background-color: var(--lightYellowPastel);
}

.lightOrangeMenuKey, .lightOrangeMenuKey a {
    background-color: var(--lightOrangePastel);
}

.lightGreenMenuKey, .lightGreenMenuKey a {
    background-color: var(--greenPastel);
}

.lightRedMenuKey, .lightRedMenuKey a {
    background-color: var(--lightRedPastel);
}

.lightGreenKey {
    background-color: var(--lightGreen) !important;
}

    .lightGreenKey:hover {
        background-color: var(--lightGreen-hover) !important;
        cursor: pointer;
    }

.lightGreenKeyNoSelect {
    background-color: var(--lightGreen) !important;
}

    .lightGreenKeyNoSelect:hover {
        background-color: var(--lightGreen-hover) !important;
        cursor: pointer;
    }

.lightYellowKey {
    background-color: var(--lightYellow) !important;
}

    .lightYellowKey:hover {
        background-color: var(--lightYellow-hover) !important;
        cursor: pointer;
    }

.lightRedKey {
    background-color: var(--lightRed) !important;
}

    .lightRedKey:hover {
        background-color: var(--lightRed-hover) !important;
        cursor: pointer;
    }

.lightTanKey {
    background-color: var(--lightTan) !important;
}

    .lightTanKey:hover {
        background-color: var(--lightTan-hover) !important;
        cursor: pointer;
    }

.lightOrangeKey {
    background-color: var(--lightOrange) !important;
}

    .lightOrangeKey:hover {
        background-color: var(--lightOrange-hover) !important;
        cursor: pointer;
    }

.blueKey {
    background-color: var(--blue) !important;
}

    .blueKey:hover {
        background-color: var(--blue-hover) !important;
        cursor: pointer;
    }

.orangeGrayStripesKey {
    background: var(--orangeGrayStripes) !important;
}

    .orangeGrayStripesKey:hover {
        background: var(--orangeGrayStripes-hover) !important;
        cursor: pointer;
    }

.orangeGrayStripesKey-small {
    background: var(--orangeGrayStripes-small) !important;
}

    .orangeGrayStripesKey-small:hover {
        background: var(--orangeGrayStripes-small-hover) !important;
        cursor: pointer;
    }

.redKey {
    background: var(--red) !important;
}

    .redKey:hover {
        background: var(--red-hover) !important;
        cursor: pointer;
    }

.aquaKey {
    background: var(--aqua) !important;
}

    .aquaKey:hover {
        background: var(--aqua-hover) !important;
        cursor: pointer;
    }

.lightBlueKey {
    background: var(--lightBlue) !important;
}

    .lightBlueKey:hover {
        background: var(--lightBlue-hover) !important;
        cursor: pointer;
    }

.lightGrayKey {
    background: var(--lightGray) !important;
}

    .lightGrayKey:hover {
        background: var(--lightGray-hover) !important;
        cursor: pointer;
    }

.mediumGrayKey {
    background-color: var(--mediumGray) !important;
}

    .mediumGrayKey:hover {
        background-color: var(--mediumGray-hover) !important;
        cursor: pointer;
    }

.greenGrayKey {
    background-color: var(--greenGray) !important;
}

    .greenGrayKey:hover {
        background-color: var(--greenGray-hover) !important;
        cursor: pointer;
    }

.pinkKey {
    background-color: var(--pink) !important;
}

    .pinkKey:hover {
        background-color: var(--pink-hover) !important;
        cursor: pointer;
    }

.purpleKey {
    background-color: var(--purple) !important;
}

    .purpleKey:hover {
        background-color: var(--purple-hover) !important;
        cursor: pointer;
    }

.orangePastelKey {
    background-color: var(--orangePastel) !important;
}

    .orangePastelKey:hover {
        background-color: var(--orangePastel-hover) !important;
        cursor: pointer;
    }

.brightRedKey {
    background-color: var(--brightRed) !important;
}

    .brightRedKey:hover {
        background-color: var(--brightRed-hover) !important;
        cursor: pointer;
    }

.lightBrownKey {
    background-color: var(--lightBrown) !important;
}

    .lightBrownKey:hover {
        background-color: var(--lightBrown-hover) !important;
        cursor: pointer;
    }

.brownTanStripesKey {
    background: var(--brownTanStripes) !important;
}

    .brownTanStripesKey:hover {
        background: var(--brownTanStripes-hover) !important;
        cursor: pointer;
    }

.brownTanStripesKey-small {
    background: var(--brownTanStripes-small) !important;
}

    .brownTanStripesKey-small:hover {
        background: var(--brownTanStripes-small-hover) !important;
        cursor: pointer;
    }

.mediumPurple {
    background-color: var(--mediumPurple) !important;
}

.goldKey {
    background-color: goldenrod !important;
}

    .goldKey:hover {
        background-color: darkgoldenrod !important;
    }

.paidHoliday {
    background-color: #9696d9;
}

.nonPaidHoliday {
    background-color: #D99F96;
}

tr[data-received="true"] {
    background-color: var(--lightGreen) !important;
}

    tr[data-received="true"]:hover {
        background-color: var(--lightGreen-hover) !important;
    }

tr[data-cancelled="true"] {
    background-color: var(--redPastel) !important;
}

    tr[data-cancelled="true"]:hover {
        background-color: var(--redPastel-hover) !important;
    }

tr.staged > td {
    background-color: var(--lightGreen) !important;
}

tr[data-not-available="true"] {
    background-color: var(--redPastel) !important;
}

.no-padding {
    padding: 0 !important;
}

.eta-updated {
    background-color: #ccff15 !important;
}

.tableSortLink {
}

    .tableSortLink:hover {
        color: var(--highlightColor);
    }

.hover-cell {
    cursor: pointer !important;
}

    .hover-cell:hover {
        background-color: var(--veryLightGray-hover);
    }

.table-regular .hover-cell:hover {
    background-color: var(--lightGray-hover);
}

.limit-text {
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

info-panel .limit-text {
    max-width: 415px;
}

@media only screen and (max-width: 700px) {
    info-panel .limit-text {
        max-width: 350px;
    }
}

@media only screen and (max-width: 600px) {
    info-panel .limit-text {
        max-width: 250px;
    }
}

#rich-title {
    position: fixed;
    border: 1px solid black;
    padding-inline: 5px;
    margin: 0;
    display: none;
    background-color: white;
    pointer-events: none;
    z-index: 5000;
}

#rich-title-author {
    display: block;
    font-size: 15px;
    padding: 5px 0;
    border-bottom: 1px solid grey;
    margin-bottom: 5px;
}

#rich-title-note {
    font-size: 17px;
    line-height: 1.5em;
    overflow: hidden;
    white-space: pre-line;
    word-wrap: break-word;
    max-width: 30rem !important;
}

.none-block {
    background-color: var(--veryLightGray);
    border: 2px solid #999;
    padding: 10px;
    width: fit-content;
    margin: 0 auto;
}

.header-align-right i.fa-rotate-right {
    padding: 4px;
    border-radius: 50%;
    border: 1px solid black;
    background-color: var(--lightYellow-button);
}

    .header-align-right i.fa-rotate-right:hover {
        cursor: pointer;
        background-color: var(--backLinkHover);
        box-shadow: 0 0 0pt 1pt black;
    }

#refreshDiv {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0px;
    column-gap: 4px;
}

.countdown {
    width: 20px;
    max-width: 30px;
    display: inline-block;
}

.ui-datepicker {
    width: 256px;
    background-color: #ffffff;
    margin: 5px auto;
    padding: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    z-index: 1000 !important;
}

    .ui-datepicker a {
        text-decoration: none;
    }

    .ui-datepicker table {
        width: 100%;
        margin: 0 0 2px 2px;
    }

    .ui-datepicker td {
        font-family: Arial;
    }

    .ui-datepicker .ui-datepicker-header {
        background-color: var(--calendarBackground);
        color: white;
        padding: 5px;
        border: none;
        border-radius: initial;
        font-weight: normal;
        line-height: 20px;
        font-family: Arial;
    }

    .ui-datepicker .ui-datepicker-title {
        text-align: center;
        line-height: initial;
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: initial;
        top: initial;
        width: initial;
        height: initial;
        color: white;
    }

        .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
            display: initial;
            position: initial;
            left: initial;
            margin-left: initial;
            top: initial;
            margin-top: initial;
        }

    .ui-datepicker .ui-datepicker-prev {
        display: inline-block;
        float: left;
        left: initial;
    }

        .ui-datepicker .ui-datepicker-prev:hover {
            color: var(--backLinkHover);
            background-color: var(--calendarBackground);
            cursor: pointer;
            border: none;
        }

    .ui-datepicker .ui-datepicker-next {
        display: inline-block;
        float: right;
        right: initial;
    }

.ui-datepicker-next:hover {
    color: var(--backLinkHover);
    background-color: var(--calendarBackground);
    cursor: pointer;
    border: none;
}

.ui-datepicker .ui-icon {
    display: initial;
    text-indent: initial;
    overflow: initial;
    background-repeat: initial;
    left: initial;
    background-image: initial;
    top: initial;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: initial;
    line-height: 20px;
}

.ui-datepicker-month {
    padding: 0 3px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    background-color: var(--calendarBackground);
    color: white;
    border: none;
    outline: none;
    text-align-last: right;
    /* remove dropdown arrow for Firefox */
    -moz-appearance: none;
    /* remove dropdown arrow for Safari, Chrome, Opera */
    -webkit-appearance: none;
}

    .ui-datepicker-month:hover {
        color: var(--backLinkHover);
        cursor: pointer;
    }

    .ui-datepicker-month option {
        font-family: Arial;
        font-weight: normal;
        background-color: white;
        color: black;
        direction: rtl;
    }

    /* remove dropdown arrow for IE10 */
    .ui-datepicker-month::-ms-expand {
        display: none;
    }

.ui-datepicker-year {
    padding: 0 3px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    background-color: var(--calendarBackground);
    color: white;
    border: none;
    outline: none;
    /* remove dropdown arrow for Firefox */
    -moz-appearance: none;
    /* remove dropdown arrow for Safari, Chrome, Opera */
    -webkit-appearance: none;
}

    .ui-datepicker-year:hover {
        color: var(--backLinkHover);
        cursor: pointer;
    }

    .ui-datepicker-year option {
        font-family: Arial;
        font-weight: normal;
        background-color: white;
        color: black;
    }

    /* remove dropdown arrow for IE10 */
    .ui-datepicker-year::-ms-expand {
        display: none;
    }

.ui-datepicker-calendar {
    margin: 0;
    padding: 0;
    border: none;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #dddddd;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: var(--calendarBackground);
    border: 1px solid var(--calendarBackground);
    color: white;
}

.ui-timepicker-div .ui-widget-header {
    display: none;
}

.ui-timepicker-select {
    padding: 5px;
}

.ui-datepicker-current {
    display: none;
}

.ui-datepicker-close:hover {
    color: var(--backLinkHover);
}

.ui-timepicker-div.ui-timepicker-oneLine dl {
    margin: 0;
}

.ui-datepicker-buttonpane.ui-widget-content {
    margin: 0;
}

.ui_tpicker_time_label {
    padding: 0 !important;
    margin: 10px 0px 15px 5px;
    font-weight: bold;
}

.ui_tpicker_time_label:empty {
    display: none !important;
}

.ui_tpicker_hour {
    display: inline-block;
    float: left;
    padding-left: 15px;
    padding-top: 5px;
}

.ui_tpicker_minute {
    display: inline-block;
    float: left;
    padding-right: 15px;
    padding-top: 5px;
}

.ui-dialog-content p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select2-multiple[multiple] {
    height: 35px;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #767676 !important;
    border-radius: 2px;
}

select:not(.select2-custom) + .select2-container--default .select2-selection--single,
select:not(.select2-custom) + .select2-container--default .select2-selection--multiple {
    border-radius: 2px !important;
}

select:not(.select2-custom) + .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
select:not(.select2-custom) + .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 31px !important;
    padding-right: 15px !important;
}

.select2-container .select2-selection--single {
    font-family: Arial !important;
    font-size: 16px !important;
    height: 31px !important;
}

.select2-container .select2-selection--multiple {
    font-family: Arial !important;
    font-size: 16px !important;
    min-height: 31px !important;
    padding-left: 3px !important;
    padding-right: 10px !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: #efefefbb !important;
}

    .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
    .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__rendered {
        color: black !important;
    }

.select2-results {
    font-family: Arial !important;
}

.select2-results__option {
    padding: 6px 5px !important;
    min-height: 30px;
}

input:disabled, textarea:disabled {
    color: black;
    background-color: #efefefbb;
}

.comma-list {
    display: inline;
    list-style: none;
    padding: 0px;
}

    .comma-list li {
        display: inline;
    }

        .comma-list li::after {
            content: ", ";
        }

        .comma-list li:last-child::after {
            content: "";
        }

/* Loading Animation */

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #555 transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

.header-align-center .lds-ring {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    height: 31px;
    width: 31px;
}

    .header-align-center .lds-ring div {
        width: 31px;
        height: 31px;
        margin: 0 auto;
        border: 4.8px solid #fff;
        border-color: #555 transparent transparent transparent;
    }

/* Account/Profile menu */

#account-logout {
    min-width: 100px;
}

account-menu {
    position: fixed;
    top: 52px;
    right: 5px;
    height: fit-content;
    width: fit-content;
    z-index: 100;
    padding: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-radius: 0.5vmin;
    background-color: white;
    box-shadow: var(--boxShadowElevate);
}

    account-menu .lds-ring {
        width: 60px;
        height: 60px;
    }

        account-menu .lds-ring div {
            width: 48px;
            height: 48px;
        }

div.logout {
    width: 25%;
    cursor: pointer;
    padding: 2px;
    margin-left: 5px;
    border-radius: .2vmin;
}

    div.logout:hover, div.my-pwd:hover, div.feedback:hover {
        background-color: var(--veryLightGray);
    }

a[data-analytics_clicks]:not(a[data-analytics_clicks=""]) {
    background: white;
    color: var(--darkBlue);
}

    a[data-analytics_clicks]:not(a[data-analytics_clicks=""]):hover {
        box-shadow: var(--boxShadowHover-black);
    }

    a[data-analytics_clicks]:not(a[data-analytics_clicks=""]).analytics-excluded {
        background: var(--red-lt80) !important;
        color: black !important;
    }

#clickHistoryOption:hover, #swapOrigin:hover {
    cursor: pointer;
    box-shadow: var(--boxShadowHover);
}

#ClickHistory, #ClickHistory_cancel, #ClickHistory_list {
    z-index: 1000;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5.5px 7px;
    background-color: gold;
    font-size: 18px;
    color: black;
    cursor: pointer;
    box-shadow: var(--boxShadowElevate);
    border-radius: 100%;
    border: 1px solid black;
}

    #ClickHistory:hover, #ClickHistory_cancel:hover, #ClickHistory_list:hover {
        box-shadow: var(--boxShadowHover);
    }

#ClickHistory_list, #ClickHistory_cancel {
    padding: 4px 6px;
    font-size: 21px;
    display: none;
}

#ClickHistory_list {
    bottom: 50px;
    background-color: var(--lightBlue);
    font-size: 16px;
    aspect-ratio: 1 / 1;
}

#ClickHistory_cancel {
    bottom: 90px;
    background-color: salmon;
}

#ClickHistory.disabled {
    display: none !important;
}

#ClickHistoryPopup {
    z-index: 1000;
    position: absolute;
    bottom: 50px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 7.5px;
    background-color: palegoldenrod;
    border-radius: 20px;
    box-shadow: var(--boxShadowElevate);
    padding: 10px;
}

    #ClickHistoryPopup div:has(> h3) {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap: 5px;
    }

    #ClickHistoryPopup #click_filters {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    #ClickHistoryPopup i.fa-filter {
        padding: 5px;
        border-radius: 8px;
    }

        #ClickHistoryPopup i.fa-filter:hover {
            cursor: pointer;
            box-shadow: var(--boxShadowHover);
        }

    #ClickHistoryPopup h3 {
        margin: 0;
        padding: 0;
    }

    #ClickHistoryPopup div:has(> input, > select) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
    }

    #ClickHistoryPopup label {
        flex-grow: 1;
    }

    #ClickHistoryPopup div:has(> button) {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    #ClickHistoryPopup #click_history_key {
        display: flex;
        padding: 2px;
        background: white;
        font-size: 10px;
    }

        #ClickHistoryPopup #click_history_key > span {
            padding: 5px 0;
            flex: 1;
        }

#Feedback {
    z-index: 10000;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 6px 8px 5px 8px;
    background-color: var(--menuSectionBackground);
    color: lightcoral;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #F0F0F0;
    box-shadow: var(--boxShadowHover);
}

    #Feedback:hover {
        background-color: var(--darkBlue);
    }

    #Feedback:has(.count:empty) {
        color: white;
    }

    #Feedback .count {
        display: none;
    }

#FeedbackDialog, .feedback-dialog-tooltip {
    z-index: 10000;
}

    #FeedbackDialog > div {
        background-color: var(--siteBackground);
    }

    #FeedbackDialog textarea {
        height: 300px;
    }

    #FeedbackDialog a:has(sup) {
        color: lightcoral;
    }

        #FeedbackDialog a:has(sup):hover {
            color: red;
        }

        #FeedbackDialog a:has(sup):active {
            color: darkred;
        }

dialog .dialog-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 5px 0;
    padding: 5px;
    border-radius: 20px;
    background: var(--veryLightGray);
    max-height: 300px;
    overflow-y: auto;
}

    dialog .dialog-list > div {
        flex: 1;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 16px;
        display: flex;
        gap: 10px;
        align-items: center;
    }

        dialog .dialog-list > div:has(> i) {
            padding: 0 0 0 10px;
        }

        dialog .dialog-list > div:hover {
            box-shadow: var(--boxShadowHover);
        }

        dialog .dialog-list > div > div {
            width: 100%;
            font-size: 15px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        dialog .dialog-list > div > span {
            font-size: 14px;
            font-style: italic;
            white-space: nowrap;
            color: rgba(0, 0, 0, 0.9);
        }

        dialog .dialog-list > div.off > div, dialog .dialog-list > div.off > span {
            text-decoration: line-through auto red;
            color: red;
        }

        dialog .dialog-list > div > i {
            padding: 5px;
            border-radius: 0 50% 50% 0;
        }

            dialog .dialog-list > div > i:hover {
                box-shadow: var(--boxShadowActive);
            }

a.stop-ghosting {
    width: 50%;
    background-color: var(--lightRed);
    border-right: 1px solid black;
    padding: 5px;
    cursor: pointer;
}

    a.stop-ghosting:hover {
        background-color: var(--lightRed-hover);
    }

a.change-ghost {
    width: 50%;
    border-left: 1px solid black;
    color: black;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
}

a.ghost-user {
    background-color: gold;
    width: 100%;
    padding: 5px;
}

    a.change-ghost:hover, a.ghost-user:hover {
        background-color: var(--lightOrange);
    }

.selectable {
    -webkit-touch-callout: initial; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: text; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome and Opera */
}

/* When you want an element nested under a .unselectable element to act normally. */
.unselectable-cancel {
    -webkit-touch-callout: initial; /* iOS Safari */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* Internet Explorer/Edge */
    user-select: text; /* Chrome and Opera */
}

/*====================================
    Modal Form Styles
====================================*/

.submit-blue {
    color: white !important;
    background-color: #000066 !important;
    height: 2.5em;
    margin-bottom: 0 !important;
    width: 100%;
    outline: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5vmin;
    border-bottom-right-radius: 0.5vmin;
    border-color: transparent !important;
    cursor: pointer;
    font-size: 1rem !important;
    /* Sticky button style */

    position: sticky;
    bottom: 0;
}

    .submit-blue:hover {
        border: none !important;
        background-color: #22008a !important;
        outline: none !important;
        cursor: pointer;
    }

    .submit-blue:focus {
        outline: 0;
        background-color: #000066 !important;
    }

    .submit-blue:disabled {
        filter: grayscale(30%);
        color: #959595 !important;
        cursor: not-allowed;
    }

.submit-green {
    color: white !important;
    background-color: #006600 !important;
    height: 2.5em;
    margin-bottom: 0 !important;
    width: 100%;
    outline: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5vmin;
    border-bottom-right-radius: 0.5vmin;
    border-color: transparent !important;
}

    .submit-green > i {
        margin: 0 10px;
        color: var(--veryLightGray);
        background-color: #006600;
    }

.input {
    padding-inline: 1em;
    padding-top: 0.5em;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

    .input > input,
    .input > textarea {
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background-color: #f3f2f1;
        color: #777573;
        padding: 0.3125em;
        line-height: 1.5em;
        font-family: Arial;
        font-size: 1em;
    }

    .input > label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-bottom: 0.25rem;
    }

        .input > label.blue, .input-checkbox > label.blue {
            border: 1px solid black;
            padding-inline: 1rem;
            width: max-content;
            background-color: aliceblue;
            margin: 0;
        }

    .input > textarea {
        min-height: 8em;
        height: auto;
        margin-bottom: 0.25em;
    }

        .input > input:focus,
        .input > textarea:focus {
            border-bottom: 2px solid #000066 !important;
        }

.input-2 {
    padding-inline: 1em;
    padding-top: 0.5em;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

    .input-2 > label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-bottom: 0.25rem;
    }

.submit:focus {
    outline: 0;
    opacity: 100%;
}

modal-overlay {
    display: none;
    position: absolute;
    z-index: 999;
}

.input-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1em 1em 0 1em;
    gap: 0.25rem;
}

    .input-inline > input {
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background-color: #f3f2f1;
        color: #777573;
        padding: 0.3125em;
        line-height: 1.5em;
    }

        .input-inline > input:focus {
            border-bottom: 2px solid #000066 !important;
        }

    .input-inline > label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .input-inline .checkbox {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        cursor: pointer;
    }

.input-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1em 1em 0 1em;
    gap: 0.25rem;
}

    .input-checkbox > label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .input-checkbox .checkbox {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 100%;
        cursor: pointer;
    }

    .input-checkbox .checkbox-disabled {
        background-color: forestgreen;
    }

#ETAChangelogContainer {
    width: 100%;
    overflow: auto;
    height: 120px;
}

#ETAChangelogInput {
    display: none;
}

#ETAChangelog {
    width: 100%;
    border-collapse: collapse;
}

    #ETAChangelog th {
        position: sticky;
        top: 0;
        background-color: #413382;
        color: white;
        font-weight: bolder;
    }

    #ETAChangelog th,
    #ETAChangelog td {
        font-weight: normal;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1rem;
        text-align: left;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
        padding-inline: 2px;
    }

    #ETAChangelog tr:nth-child(even) {
        background-color: #f2f2f2;
    }

.notes-column {
    text-align: left !important;
    vertical-align: baseline;
}

.note {
    max-height: 3em;
    line-height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    max-width: 20rem !important;
}

.note-2-lines {
    max-width: 20rem !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.author {
    display: block;
    font-size: 0.7em;
}

.notes-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 0.3125em;
    width: 100%;
}

.notes-table {
    background-color: lightblue;
    width: 100%;
    font-family: Arial;
    border-spacing: 1em;
    border-radius: 0.5vmin;
    box-shadow: var(--boxShadowElevate);
}

    .notes-table > tbody > tr > td {
        text-align: left !important;
    }

    .notes-table > tbody > tr > th {
        text-align: left !important;
        width: 33.33%;
    }

.notes-button {
    background-color: white;
    color: #000066;
    font-family: Arial;
    font-size: 1em;
    font-weight: bold;
    border: none !important;
    height: 3em;
    width: 100%;
    line-height: 1.5em;
    padding: 0.3125em;
    user-select: none;
    border-radius: 0.5vmin;
    box-shadow: var(--boxShadowElevate);
}

    .notes-button:hover {
        cursor: pointer;
    }

    .notes-button:focus {
        outline: 0;
        background-color: white !important;
    }

.notes-submit {
    color: white !important;
    background-color: #000066 !important;
    font-size: 16px;
    font-weight: bold;
    height: 2.5em;
    margin-bottom: 0 !important;
    width: 100%;
    outline: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.5vmin;
    border-bottom-right-radius: 0.5vmin;
    border-color: transparent !important;
}

    .notes-submit:hover {
        border: none !important;
        background-color: #22008a !important;
        outline: none !important;
        cursor: pointer;
    }

    .notes-submit:focus {
        outline: 0;
        background-color: #000066 !important;
    }

.notes-form {
    background-color: white;
    display: none;
    width: 100%;
    border-radius: 0.5vmin;
    box-shadow: var(--boxShadowElevate);
}

    .notes-form > form {
        margin: 0;
        padding: 0;
        width: 100%;
    }

.notes-input {
    padding: 1em;
    padding-bottom: 0;
}

    .notes-input > input,
    .notes-input > textarea {
        width: 100%;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background-color: #f3f2f1;
        color: #777573;
        margin-bottom: 1em;
        padding: 0.3125em;
        line-height: 1.5em;
    }

    .notes-input > textarea {
        min-height: 16em;
        height: auto;
    }

        .notes-input > input:focus,
        .notes-input > textarea:focus {
            border-bottom: 2px solid #000066 !important;
        }

.notes-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

    .notes-list > li {
        background-color: white;
        font-family: Arial;
        padding: 1em;
        border-radius: 0.5vmin;
        box-shadow: var(--boxShadowElevate);
    }

        .notes-list > li:not(:first-child) {
            margin-top: 0.3125em;
        }

        .notes-list > li > article > p {
            margin: 0;
            max-height: 16em;
            overflow-y: auto;
            white-space: pre-line;
        }

@media only screen and (min-width:1025px) {
    .notes-table {
        width: 60%;
    }

    .notes-button {
        width: 60%;
    }

    .notes-form {
        width: 60%;
    }

    .notes-list {
        width: 60%;
    }
}

.toggle-table {
    font-size: 1rem;
    line-height: 1.5rem;
    width: 1.5rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 50%;
}

    .toggle-table:hover {
        border: 1px solid var(--backLinkBackground);
        border-radius: 50%;
        color: var(--backLinkBackground);
        background-color: white;
        cursor: pointer;
    }

.info-tab-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
    gap: 10px;
}

.info-tab-title {
    position: relative;
    background-color: moccasin;
    color: black;
    border: 2px solid black;
    padding: 0.25rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    outline: none;
    user-select: none;
    text-align: center;
    min-width: 250px;
    margin: 0 auto;
}

    .info-tab-title > i.fa-key {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px;
        border-radius: 100%;
        cursor: pointer;
        color: black;
        font-size: 12px;
    }

        .info-tab-title > i.fa-key:hover, .info-tab-title > i.fa-key.showing {
            background-color: #ffd080;
        }

        .info-tab-title > i.fa-key:active {
            background-color: #ffbe4d;
        }

.info-tab-key {
    padding: 2.5px;
    margin: auto;
}

info-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

info-tab {
    position: relative;
    box-sizing: border-box;
    background-color: white;
    color: #000066;
    border: 1px solid black;
    padding: 0.25rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    user-select: none;
    transition-duration: 0.2s;
}

    info-tab:hover, info-tab[aria-selected="true"] {
        box-shadow: 0 0 0pt 2pt darkorange;
        cursor: pointer;
    }

    /*Grey out any tabs that don't contain any visible rows.*/
    info-tab:not([data-count]):not(:has(+ * tbody > tr:not([style*="display: none"]))), info-tab[data-count="0"] {
        background-color: var(--mediumGray-hover);
    }

    info-tab:has(+ * :is(.folder-title .fa-spin))::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent;
        border-top: 2px solid gold;
        border-right: 2px solid gold;
        box-sizing: border-box;
        animation: trace-border 2s linear infinite;
    }

info-panel {
    width: 100%;
    flex-basis: 100%;
    display: none;
}

    info-panel tfoot > tr > td {
        padding: 6px 10px;
        background: #555;
        color: #f1f1f1;
        text-align: center;
        font-weight: bold;
        border-right-style: hidden !important;
        padding: 5px;
    }

        info-panel tfoot > tr > td:last-child {
            border-right: 2px solid #999 !important;
        }

    info-panel table tr > td {
        font-size: 14px !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }

    info-panel table th.sortable, table.custom-sortable th.sortable {
        cursor: pointer;
    }

    info-panel table th:is(.sorted-asc,.sorted-desc), table.custom-sortable th:is(.sorted-asc,.sorted-desc) {
        color: var(--highlightColor);
    }

        info-panel table th span.sort-arrow, table.custom-sortable th span.sort-arrow {
            margin-left: 4px;
        }

    info-panel h3 {
        margin: 10px;
        font-size: 16px;
        color: var(--backLinkBackground);
    }

@keyframes trace-border {
    0% {
        border-top: 2px solid gold;
        border-right: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
    }

    25% {
        border-top: 2px solid gold;
        border-right: 2px solid gold;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
    }

    50% {
        border-top: 2px solid transparent;
        border-right: 2px solid gold;
        border-bottom: 2px solid gold;
        border-left: 2px solid transparent;
    }

    75% {
        border-top: 2px solid transparent;
        border-right: 2px solid transparent;
        border-bottom: 2px solid gold;
        border-left: 2px solid gold;
    }

    100% {
        border-top: 2px solid gold;
        border-right: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-left: 2px solid transparent;
    }
}

@media (max-width:960px) {
    info-panel > div {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        max-width: 100vw;
    }
}

.folder-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    background-color: lightgoldenrodyellow;
    border: 1px solid black;
}

.optionNotUsed {
    background-color: var(--lightRed) !important;
}

    .optionNotUsed:hover {
        background-color: var(--lightRed-hover) !important;
    }

.futureNeed {
    background-color: var(--lightYellow) !important;
}

    .futureNeed:hover {
        background-color: var(--lightYellow-hover) !important;
    }

.not-applied > td {
    background-color: gainsboro;
}

.tableSection {
    width: 100%;
}

    .tableSection .search-group {
        padding: 10px 0;
    }

td.a-holder {
    padding: 0 !important;
    height: 1px;
}

    td.a-holder > a {
        height: 100%;
        color: black;
        padding: 0 4px;
        text-decoration: none;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

td.div-holder {
    padding: 0 !important;
}

    td.div-holder > div {
        height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

th i.fa-refresh {
    cursor: pointer;
}

    th i.fa-refresh.error {
        color: orangered;
    }

#VendorPricingsTable th, #VendorPricingsTable td {
    text-align: center;
}

#VendorPricingsTable thead th {
    font-size: 11px;
}

#VendorPricingsTable tbody tr td {
    padding: 2px 2px;
    font-size: 12px;
}

.ticket-table td.view {
    font-size: 14px;
}

.ticket-table td.na {
    font-size: 12px;
    color: darkred;
}

table:is(#VendorPricingsTable,#VendorOrdersTable,.VendorOrdersTable,#StockPartsTable,#ActionRegisterTable,#warehouseinfo,#glass-calculator-total) td:has(> i):is(:hover,.active),
.show-quote-calculator-changes:is(:hover,.active) {
    box-shadow: var(--boxShadowHover);
}

table:is(#VendorPricingsTable,#VendorOrdersTable,#StockPartsTable,#ActionRegisterTable,#warehouseinfo,#glass-calculator-total) tr:has(td.active) {
    box-shadow: var(--boxShadowHover);
}

td.view, td.na, td.void, td.receipt, td.refund, .documents-table .reupload, .documents-table .download, .documents-table .app,
.documents-table .app.disabled:hover, .documents-table .delete {
    text-align: center;
    background-color: var(--veryLightGray);
}

    td.view:hover, .documents-table .download:hover, .documents-table .downloading .download, td.receipt:hover {
        background-color: var(--lightBlue);
    }

    .documents-table .reupload:hover, .documents-table .reupload.reuploading {
        background-color: var(--lightTan);
    }

    .documents-table .app > i {
        color: black;
    }

    .documents-table .app.attached > i {
        color: green;
    }

    .documents-table .app.disabled > i {
        color: darkred;
    }

    .documents-table .app.failed > i {
        color: red;
    }

    .documents-table .app:not(.disabled) {
        cursor: pointer;
    }

        .documents-table .app:not(.disabled):active {
            background: #e5e5e5;
            -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
            -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
            outline: none;
        }

    td.na:hover, .documents-table .delete:hover, .documents-table .deleting .delete,
    td.void:hover, td.refund:hover {
        background-color: #ffcccb;
    }

    td.na:hover, .documents-table .app.disabled, .documents-table .app.paused, td.refund.disabled, td.void.disabled {
        cursor: default;
    }

.add-document-row {
    background-color: var(--veryLightGray) !important;
}

.add-document-row:hover, #ReuploadDocumentRow:hover, #CreateJobPlanRow:hover {
    background-color: var(--veryLightGray) !important;
    cursor: default !important;
}

.documents-table .veryLightGray-hover, .documents-table tr:has(.reuploading), .documents-table .downloading, .documents-table .deleting {
    background-color: var(--veryLightGray-hover);
}

.documents-table .tsDoc {
    background-color: mistyrose;
}

    .documents-table .tsDoc:hover {
        background-color: #ffcccc;
    }

.documents-table td:is(.reupload,.download,.delete), td.void, td.receipt, td.refund {
    min-width: 40px;
}

td:is(.na,.view):not(.no-min-width) {
    min-width: 60px;
}

.documents-table .app {
    min-width: 34px;
}

.documents-table .delete {
    font-size: large;
    padding: 0;
}

.lightGreenRowButton {
    background-color: var(--lightGreen) !important;
    cursor: pointer;
}

    .lightGreenRowButton:hover {
        background-color: var(--lightGreen-hover) !important;
    }

    .lightGreenRowButton td {
        border-top: 2px solid #999;
    }

#FillOrderNumber:hover {
    cursor: pointer;
}

.modal-section-heading {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 0.25rem;
    padding-left: 1rem;
    font-weight: bold;
}

.modal-add-button {
    color: white !important;
    background-color: #000066 !important;
    height: 2.5em;
    margin-left: 1rem;
    border: none !important;
    outline: none !important;
}

    .modal-add-button:hover {
        border: none !important;
        background-color: #22008a !important;
        outline: none !important;
        cursor: pointer;
    }

.remove-item {
    color: #721c24;
    margin-left: auto;
}

    .remove-item:hover {
        cursor: pointer;
    }

/*#region Custom Dialog */
/*(default color is antiquewhite)*/

.custom-dialog {
    display: none;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(40, 40, 40, .25);
    font-family: sans-serif;
    font-size: 18px;
}

    .custom-dialog textarea, .custom-dialog select {
        border-radius: 10px;
    }

    .custom-dialog input {
        border-radius: 10px !important;
    }

    .custom-dialog > div {
        position: relative;
        margin: 5vh auto;
        max-height: 90vh;
        overflow-y: auto;
        padding: 10px;
        border-radius: 16px;
        background-color: antiquewhite;
        width: min(500px, calc(100% - 25px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-content: safe center;
        row-gap: 10px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
    }

    .custom-dialog .dialog-dismiss, .custom-dialog .dialog-info, .custom-dialog .dialog-delete {
        position: absolute;
        right: 7.5px;
        top: 7.5px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        text-align: center;
    }

        .custom-dialog .dialog-dismiss:hover, .custom-dialog .dialog-info:hover, .custom-dialog .dialog-delete:hover {
            box-shadow: var(--boxShadowHover);
        }

        .custom-dialog .dialog-dismiss:active {
            box-shadow: var(--boxShadowActive);
        }

        .custom-dialog .dialog-dismiss i, .custom-dialog .dialog-info i, .custom-dialog .dialog-delete i {
            padding: 5px;
            line-height: 20px;
        }

    .custom-dialog .dialog-delete {
        color: darkred;
        right: auto;
        left: 7.5px;
    }

    .custom-dialog .dialog-info {
        left: 7.5px;
    }

    .custom-dialog .dialog-title {
        font-size: 24px;
        text-align: center;
    }

    .custom-dialog .dialog-subtitle {
        font-size: 15px;
        text-align: center;
    }

    .custom-dialog .dialog-save {
        font-size: 18px;
        padding: 4px 6px;
        border-radius: 18px;
        margin: auto;
    }

        .custom-dialog .dialog-save:not([disabled]):hover {
            box-shadow: var(--boxShadowHover);
            cursor: pointer;
        }

    .custom-dialog .dialog-saving {
        padding: 10px 0 5px;
        text-align: center;
        display: none;
    }

        .custom-dialog .dialog-saving i {
            color: #555;
        }

    .custom-dialog .dialog-saved {
        display: none;
        text-align: center;
        color: forestgreen;
    }

    .custom-dialog .row-inline :is(input,textarea,select,span.select2.select2-container) {
        flex-grow: 1;
        min-width: 0;
    }

    .custom-dialog select + .select2-container .select2-selection {
        border-radius: 10px;
    }

        .custom-dialog select + .select2-container .select2-selection:focus-visible {
            outline: none;
            border-color: black;
            border-width: 2px;
        }

    .custom-dialog .dialog-hint {
        text-align: center;
        color: black;
        font-size: 14px;
    }

        .custom-dialog .dialog-hint.error {
            color: red;
        }

    .custom-dialog a.dialog-link {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 10px;
        font-size: 14px;
        font-style: italic;
    }

.custom-dialog-tooltip {
    z-index: 100;
}

/*#endregion*/

/* Use a keyframe animation trick to detect a dom node insertion*/

@keyframes domNodeInsert {
    from {
        outline-color: #fff;
    }

    to {
        outline-color: #000;
    }
}

.select2-vo {
    animation-duration: 0.01s;
    animation-name: domNodeInsert
}

.animation-start {
    animation-duration: 0.01s;
    animation-name: domNodeInsert
}

#BigSpinner {
    display: none;
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    z-index: 1100;
    overflow: hidden;
}

    #BigSpinner.lighter {
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    }

    #BigSpinner div.lds-ring {
        width: 120px;
        height: 120px;
        top: 25%;
    }

        #BigSpinner div.lds-ring div {
            width: 100px;
            height: 100px;
            margin: 10px;
            border-width: 10px;
            border-color: white transparent transparent transparent;
        }

.inline-photos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

    .inline-photos.no-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: start;
    }

    .inline-photos .photo, .inline-photos .photo-placeholder, .photo-placeholder {
        margin: 7.5px;
        height: 150px;
        width: 112.5px;
        display: flex;
        position: relative;
        text-align: center;
        border-radius: 10px;
        border-width: 2px;
        border-color: darkgrey;
        border-style: solid;
        flex-shrink: 0;
    }

        .inline-photos .photo :is(img, video, embed) {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: cover;
        }

        .inline-photos .photo:is(:hover,.hover) :is(img, video, embed) {
            border: inherit;
            opacity: 0.9;
            cursor: pointer;
        }

        .inline-photos .photo:is(:active,.active) :is(img, video, embed) {
            opacity: 0.75;
        }

        .inline-photos .photo .fa-circle-notch {
            color: darkgrey;
            margin: auto;
        }

.inline-photos .photo-placeholder, .photo-placeholder {
    border-style: dashed;
}

td [data-mediaurl]:nth-of-type(n+2):not(.photo) {
    display: none;
}

.ui-tooltip.media-viewer-tooltip {
    font-size: 13px;
    text-align: center;
}

/*#region Media Viewer*/

#MediaViewer {
    display: none;
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    z-index: 1000;
    overflow: hidden;
}

    #MediaViewer > div.media-toolbar {
        height: 52px;
        display: flex;
        flex-direction: row;
        background-color: var(--topMenuTheme);
        color: var(--veryLightGray);
        padding: 2px;
        gap: 2px;
    }

        #MediaViewer > div.media-toolbar > .toolbar-item {
            cursor: pointer;
            border-radius: 100%;
            line-height: 48px;
            aspect-ratio: 1 / 1;
        }

            #MediaViewer > div.media-toolbar > .toolbar-item:not(.disabled):is(:hover,.active-item) {
                box-shadow: var(--boxShadowHover-white);
            }

            #MediaViewer > div.media-toolbar > .toolbar-item.hidden {
                visibility: hidden;
            }

            #MediaViewer > div.media-toolbar > .toolbar-item.disabled {
                color: grey;
                cursor: default;
            }

            #MediaViewer > div.media-toolbar > .toolbar-item.share-cancel {
                display: none;
                background-color: white;
                color: var(--red-hover);
            }

            #MediaViewer > div.media-toolbar > .toolbar-item.share.active-item {
                background-color: white;
                color: forestgreen;
            }

            #MediaViewer > div.media-toolbar > .toolbar-item:is(.share-cancel,.share.active-item):hover {
                box-shadow: var(--boxShadowHover-black);
            }

            #MediaViewer > div.media-toolbar > .toolbar-item:is(.arrow-next,.arrow-prev) {
                display: none;
            }

        #MediaViewer > div.media-toolbar > .toolbar-title {
            width: 100%;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            gap: 2px;
            position: relative;
        }

            #MediaViewer > div.media-toolbar > .toolbar-title > :is(.title-1,.title-2) {
                margin: 0 20px;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            #MediaViewer > div.media-toolbar > .toolbar-title > .title-1 {
                font-size: 20px;
            }

            #MediaViewer > div.media-toolbar > .toolbar-title > .title-2 {
                font-size: 15px;
            }

            #MediaViewer > div.media-toolbar > .toolbar-title > #tutorial {
                position: absolute;
                right: 0;
                border-radius: 20px;
                padding: 4px 8px;
                color: white;
                border: 2px solid white;
                background-color: inherit;
                cursor: pointer;
            }

                #MediaViewer > div.media-toolbar > .toolbar-title > #tutorial:hover {
                    box-shadow: var(--boxShadowHover-white);
                }

    #MediaViewer > .media-preview {
        display: flex;
        width: 100%;
        height: calc(100% - 52px);
    }

        #MediaViewer > .media-preview #ResetZoom {
            z-index: 1000;
            border: none;
            border-radius: 32px;
            padding: 6px 10px;
            position: absolute;
            top: 65px;
            left: 50%;
            transform: translateX(-50%);
            background-color: lightgoldenrodyellow;
            opacity: 0;
            transition: opacity 0.25s ease-in-out;
            pointer-events: none;
        }

            #MediaViewer > .media-preview #ResetZoom.visible {
                opacity: 1;
                pointer-events: auto;
            }

        #MediaViewer > .media-preview > .media-sidebar-holder {
            background: var(--topMenuTheme);
            width: 210px;
            display: flex;
            flex-direction: column;
        }

            #MediaViewer > .media-preview > .media-sidebar-holder > .media-sidebar-select-all {
                display: none;
                padding: 10px;
                margin: 10px;
                color: white;
                border-radius: 12px;
                cursor: pointer;
                font-size: 18px;
                background: rgba(255, 255, 255, 0.2);
            }

                #MediaViewer > .media-preview > .media-sidebar-holder > .media-sidebar-select-all:hover {
                    box-shadow: var(--boxShadowHover-white);
                }

        #MediaViewer > .media-preview div.media-sidebar {
            height: 100%;
            padding: 2px 20px 20px;
            display: flex;
            gap: 2px;
            flex-direction: column;
            scroll-padding-top: 5px;
            overflow-y: scroll;
            text-align: center;
            font-family: sans-serif;
            font-size: 14px;
            color: white;
        }

            #MediaViewer > .media-preview div.media-sidebar > .sidebar-item:not(:first-child) {
                position: relative;
                max-width: 160px;
                margin-top: 18px;
            }

            #MediaViewer > .media-preview div.media-sidebar > .sidebar-item {
                position: relative;
                max-width: 160px;
            }

                #MediaViewer > .media-preview div.media-sidebar > .sidebar-item > *:not(i,.view-item) {
                    width: 100%;
                    height: 100%;
                }

                #MediaViewer > .media-preview div.media-sidebar > .sidebar-item > .hover-item {
                    position: absolute;
                }

                #MediaViewer > .media-preview div.media-sidebar > .sidebar-item.active-item {
                    border: 2px solid var(--topMenuTheme);
                    outline: 1px solid white;
                }

                #MediaViewer > .media-preview div.media-sidebar > .sidebar-item:not(.active-item):hover,
                #MediaViewer > .media-preview div.media-sidebar > .sidebar-item:not(.active-item) > .hover-item:hover {
                    cursor: pointer;
                    opacity: 0.95;
                    box-shadow: var(--boxShadowHover-white);
                }

        #MediaViewer > .media-preview > .media-holder {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

            #MediaViewer > .media-preview > .media-holder > .image-holder {
                display: flex;
                width: 100%;
                height: 100%;
                transition: transform .3s;
                transform-origin: 0 0;
            }

                #MediaViewer > .media-preview > .media-holder > .image-holder > img {
                    margin: auto;
                    width: auto;
                    height: auto;
                    max-width: 100%;
                    max-height: 100%;
                }

            #MediaViewer > .media-preview > .media-holder > :is(iframe,embed,video-js) {
                background: transparent;
                height: 100%;
                width: 100%;
            }

            #MediaViewer > .media-preview > .media-holder > div.no-content {
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                background-color: var(--veryLightGray);
            }

                #MediaViewer > .media-preview > .media-holder > :not(.active-element),
                #MediaViewer > .media-preview > .media-holder > div.no-content:not(.active-element) {
                    display: none;
                }

        #MediaViewer > .media-preview > #MediaViewerPages, #MediaViewerError {
            position: absolute;
            bottom: 20px;
            border-radius: 12px;
            background-color: white;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px;
            font-size: large;
            display: flex;
            flex-direction: row;
            gap: 5px;
            box-shadow: var(--boxShadowElevate);
        }

            #MediaViewer > .media-preview > #MediaViewerPages input:first-of-type {
                border-top-left-radius: 10px;
            }

            #MediaViewer > .media-preview > #MediaViewerPages input:last-of-type {
                border-bottom-left-radius: 10px;
            }

            #MediaViewer > .media-preview > #MediaViewerPages > span {
                font-size: 12px;
            }

            #MediaViewer > .media-preview > #MediaViewerPages > button {
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                width: 50px;
            }

                #MediaViewer > .media-preview > #MediaViewerPages > button:hover {
                    cursor: pointer;
                    box-shadow: var(--boxShadowHover);
                }

    #MediaViewerError {
        top: 80px;
        bottom: auto;
        flex-direction: column;
        padding: 5px 10px;
    }

    #MediaViewer:has(.toggle-sidebar.active-item) #MediaViewerError {
        margin-left: 95px;
    }

    #MediaViewerErrorTitle {
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }

    #MediaViewerErrorDescription {
        text-align: center;
        font-size: 16px;
    }

    #MediaViewer .media-viewer-prev, #MediaViewer .media-viewer-next {
        box-shadow: var(--boxShadowElevate);
        background-color: rgba(255,255,255,0.50);
        color: var(--topMenuTheme);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        line-height: 50px;
        aspect-ratio: 1 / 1;
        cursor: pointer;
    }

    #MediaViewer .media-viewer-prev {
        left: 20px;
    }

    #MediaViewer:has(.toggle-sidebar.active-item) .media-viewer-prev {
        left: 210px;
    }

    #MediaViewer .media-viewer-next {
        right: 20px;
    }

        #MediaViewer .media-viewer-prev:hover, #MediaViewer .media-viewer-next:hover {
            background-color: rgba(0,0,102,0.75);
            color: white;
        }

        #MediaViewer .media-viewer-prev.disabled, #MediaViewer .media-viewer-next.disabled {
            display: none;
        }

    #MediaViewer > .media-preview div.media-sidebar > .sidebar-item .view-item {
        display: none;
        position: absolute;
        bottom: 0;
        padding: 2px;
        background: rgba(255, 255, 255, 0.5);
        padding: 5px;
        width: 100%;
        cursor: pointer;
        color: var(--topMenuTheme);
        font-weight: bold;
    }

        #MediaViewer > .media-preview div.media-sidebar > .sidebar-item .view-item:hover {
            background: rgba(255, 255, 255, 0.8);
        }

    #MediaViewer > .media-preview div.media-sidebar > .sidebar-item i,
    #MediaViewer > .media-preview div.media-sidebar > .sidebar-item .number {
        display: none;
        position: absolute;
        top: 24px;
        left: 10px;
        color: white;
        pointer-events: none;
    }

        #MediaViewer > .media-preview div.media-sidebar > .sidebar-item i.fa-ban {
            color: darkred;
            pointer-events: auto;
        }

    #MediaViewer > .media-preview div.media-sidebar > .sidebar-item .number {
        color: var(--topMenuTheme);
        width: fit-content;
        height: fit-content;
        font-size: 18px;
        top: 14.5px;
        left: 18.5px;
    }

    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item > .hover-item,
    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item:not(:has(img)) {
        cursor: not-allowed;
    }

    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item {
        cursor: default;
    }

        #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item img {
            opacity: 0.75;
        }

    #MediaViewer:has(.share.active-item) > .media-preview .media-sidebar-select-all,
    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item i,
    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item .number,
    #MediaViewer:has(.share.active-item) > .media-preview div.media-sidebar > .sidebar-item .view-item {
        display: block;
    }

    #MediaViewer:has(.share.active-item) > div.media-toolbar > .toolbar-item.share-cancel {
        display: block;
    }

#DownloadDialog {
    background: white;
    border-radius: 12px;
    max-width: 450px;
    overflow: visible;
}

    #DownloadDialog > *:not([data-as="title"],#download-loading) {
        margin-bottom: 12px;
    }

    #DownloadDialog label {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 1px;
    }

    #DownloadDialog select {
        outline-color: revert;
    }

    #DownloadDialog #download-loading {
        display: none;
        text-align: center;
    }

    #DownloadDialog .extra-info .select2-container.select2-container--default,
    #DownloadDialog .extra-info textarea,
    #DownloadDialog .extra-info input:not([type="checkbox"]) {
        margin-bottom: 0;
        flex-grow: 1;
        overflow: hidden;
    }

        #DownloadDialog textarea:focus-visible,
        #DownloadDialog input:focus-visible {
            outline: 2px solid black !important;
        }

    #DownloadDialog .extra-info {
        display: none;
        margin-top: 5px;
        padding: 10px;
        font-size: 15px;
        background: var(--veryLightGray);
        border-radius: 10px;
    }

        #DownloadDialog .extra-info > div {
            display: flex;
            gap: 10px;
        }

            #DownloadDialog .extra-info > div:has(select),
            #DownloadDialog .extra-info > div:has(input) {
                align-items: center;
            }

            #DownloadDialog .extra-info > div:has(textarea) > strong  {
                margin-top: 4px;
            }

            #DownloadDialog .extra-info > div textarea {
                height: 90px;
            }

    #DownloadDialog .option:has(input:checked) .extra-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

@media (max-height: 550px) {
    #DownloadDialog:not(:has(.select2-container--open)) {
        overflow: auto;
    }
}

/*Avoid feedback/scratchpad overlap.*/
.vjs-fullscreen-control.vjs-control.vjs-button {
    margin-right: 80px;
}

/*Hide zoom options button, using gestures instead.*/
.vjs-zoom-duck.vjs-zoom-duck-8.vjs-control.vjs-button {
    display: none;
}

@media (max-width: 600px) {
    #MediaViewer > div.media-toolbar > .toolbar-title > :is(.title-1,.title-2) {
        margin: 0;
    }

    #MediaViewer > .media-toolbar > .toolbar-item:is(.pwd-connect,.toggle-sidebar,.share,.share-cancel,.split,.open-in-new),
    #MediaViewer .media-viewer-prev,
    #MediaViewer .media-viewer-next,
    #MediaViewer #tutorial {
        display: none;
    }

    #MediaViewer > div.media-toolbar > .toolbar-item:is(.arrow-next,.arrow-prev) {
        display: block;
    }
}

@media (max-width: 500px) {
    /*Don't need to avoid scratchpad overlap on small screens.*/
    .vjs-fullscreen-control.vjs-control.vjs-button {
        margin-right: 35px;
    }
}

/*#endregion Media Viewer*/

/*Provides default styling for links without using href*/
a.no-href, .fake-link {
    cursor: pointer;
    color: rgb(0, 0, 238);
    text-decoration: underline;
}

    a.no-href:hover, .fake-link:hover {
        color: blue;
    }

    a.no-href:active, .fake-link:active {
        color: orangered;
    }

/*Display <a> element without default styling*/
a.no-link {
    text-decoration: none;
    color: black;
}

.select2-result-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

    .select2-result-row > .select2-result-image {
        width: 30%;
    }

        .select2-result-row > .select2-result-image > img.image {
            width: 100%;
            height: 100%;
            max-height: 100px;
            object-fit: none;
        }

    .select2-result-row > .select2-result-info {
        width: 70%;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .select2-result-row > .select2-result-info > div:first-child {
            font-weight: bold;
        }

.select2-container--default .select2-results > .select2-results__options:has(.select2-result-row) {
    max-height: 300px;
}

/*====================================
    Log Diff
====================================*/

#__LogDiff {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 40, 40, .25);
    font-family: sans-serif;
    font-size: 18px;
    overflow: auto;
}

    #__LogDiff > #__Dialog {
        position: relative;
        margin: 5% auto;
        padding: 10px;
        border-radius: 16px;
        background-color: antiquewhite;
        width: min(600px, calc(100% - 25px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
    }

    #__LogDiff #__Field {
        text-align: center;
        font-size: 20px;
        margin: 0 30px;
        font-weight: bold;
        color: black;
    }

    #__LogDiff #__User {
        text-align: center;
        font-size: 14px;
        margin: 2px auto 0;
        color: #111;
    }

    #__LogDiff table {
        margin-top: 10px;
        font-size: 14px;
        table-layout: fixed;
        width: 100%;
    }

        #__LogDiff table td {
            text-align: center;
        }

    #__LogDiff #__Diff {
        margin-top: 10px;
        text-align: center;
    }

        #__LogDiff #__Diff .__add, .__add {
            background: #91ff96;
        }

        #__LogDiff #__Diff .__remove, .__remove {
            background: #ff9a91;
            text-decoration: line-through;
        }

        #__LogDiff #__Diff .__equal, .__equal {
        }

    #__LogDiff i.fa-clipboard {
        font-size: 14px;
        padding: 5px;
        cursor: pointer;
        color: grey;
    }

        #__LogDiff i.fa-clipboard:not(.copied):hover {
            color: black;
        }

        #__LogDiff i.fa-clipboard.copied {
            cursor: default;
            color: forestgreen;
            transition-duration: 0.4s;
        }

/*====================================
    Dialogs
====================================*/

dialog {
    border-color: transparent;
    border-radius: 1rem;
    box-shadow: var(--boxShadowElevate);
    font-family: Arial;
    padding: 1em;
    min-width: 30%;
    max-width: 60%;
    margin-top: 1rem;
}

    dialog * {
        box-sizing: border-box;
        outline-color: transparent;
    }

    dialog h4 {
        margin: 0 0 16px;
    }

    dialog p {
        word-wrap: break-word;
        white-space: pre-line;
        margin: 0 0 16px;
    }

    dialog [data-as="buttons"] {
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 0.5rem;
    }

    dialog [data-as="input"], dialog [data-as="textarea"] {
        width: 99%;
        margin: 0 auto 16px;
        border-radius: 10px;
        border: none !important;
        outline: 1px solid black !important;
    }

        dialog [data-as="input"]:focus-visible, dialog [data-as="textarea"]:focus-visible {
            outline: 2px solid black !important;
        }

    dialog [data-as="textarea"] {
        height: 300px;
    }

    dialog button {
        margin: 0;
        padding: 5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bold;
        border: none;
        border-radius: 10px;
        min-width: 5rem;
        color: white;
        cursor: pointer;
    }

        dialog button[data-as="accept"] {
            background-color: #668cff;
        }

            dialog button[data-as="accept"]:hover:not(:disabled) {
                background-color: #4d79ff;
            }

        dialog button[data-as="cancel"] {
            background-color: #e73232;
        }

            dialog button[data-as="cancel"]:hover:not(:disabled) {
                background-color: #cd1818;
            }

        dialog button[data-as="dismiss"] {
            background-color: #aaa;
        }

            dialog button[data-as="dismiss"]:hover:not(:disabled) {
                background-color: #999;
            }

        dialog button[data-as="back"] {
            background-color: #bbb;
            color: black;
            margin-right: auto;
        }

            dialog button[data-as="back"]:hover:not(:disabled) {
                background-color: #aaa;
            }

        dialog button:is([data-as="accept"],[data-as="cancel"],[data-as="dismiss"],[data-as="back"]):focus:not(:active) {
            outline: 1.5px solid black;
        }

        dialog button:is([data-as="accept"],[data-as="cancel"],[data-as="dismiss"],[data-as="back"]):disabled {
            opacity: 0.5;
            cursor: default;
        }

/*====================================
    Time Inputs
====================================*/

input[type="time"][data-clear="true"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    input[type="time"][data-clear="true"]::after {
        content: "\f00d";
        font-family: FontAwesome;
        color: #721c24;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: 0.5rem;
        box-sizing: border-box;
        height: 1.25rem;
    }

.VendorPricingItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 5px 5px 0;
    border: 2px solid black;
}

.group-bottom-border-tbody tr:last-child td {
    border-bottom: 3px solid black;
}

.group-top-border td {
    border-top: 3px solid black;
}

tr.group-middle-border:has(+ tr.group-top-border) td {
    border-bottom: none;
}

.group-bottom-border td {
    border-bottom: 3px solid black;
}

.group-middle-border td:first-child {
    border-left: 3px solid black;
}

.group-middle-border td:last-child {
    border-right: 3px solid black;
}

pfd-glass-table td {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.glass-select {
    background-color: #f3f2f1;
    color: #777573;
    border: none;
    padding: 5px 0px 5px 5px;
    font-size: 16px;
    font-family: Arial;
}

#glass-calculator-total {
    position: sticky;
    top: 0;
    padding-inline: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.25rem;
    background-color: #000066;
    color: white;
    text-align: right;
    border-radius: 25px;
    margin-inline: 1rem;
    z-index: 9999;
}

#glass-calculator-total h4 {
    margin-top: 0;
    margin-bottom: 0.125rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}

        #glass-calculator-total h4 span {
            color: yellow;
        }

[data-collapsed] {
    cursor: pointer;
}

/*#region Contacts Styling*/

.link-lightblue.view-contacts {
    padding: 2.5px 5px;
}

.preferred-contact.fa-star {
    cursor: pointer;
}

    .preferred-contact.fa-star.fas {
        color: #3900e6;
    }

    .preferred-contact.fa-star:hover {
        color: #22008a;
    }

    .preferred-contact.fa-star:active {
        color: #000066;
    }

.add-contact:hover {
    cursor: pointer;
    opacity: 0.6;
}

div.row.contacts-section {
    flex-direction: column;
    border-radius: 5px;
    margin-top: 0;
}

    div.row.contacts-section div.contacts {
        position: relative;
        width: calc(100% - 10px);
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding: 1px 0;
        margin: 5px;
        gap: 5px;
    }

    div.row.contacts-section div.contact-key {
        margin-left: 0;
    }

    div.row.contacts-section div.contact-dep::before {
        content: '';
        background-color: black;
        max-width: 600px;
        width: 100%;
        height: 1px;
        border-radius: 100%;
        position: absolute;
    }

    div.row.contacts-section div.contact-dep {
        width: 100%;
        max-width: 600px;
        margin: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 18px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

        div.row.contacts-section div.contact-dep:hover > :not(i) {
            text-decoration: underline;
        }

        div.row.contacts-section div.contact-dep > * {
            position: relative;
            background-color: var(--siteBackground);
            padding: 0 5px;
        }

        div.row.contacts-section div.contact-dep > :first-child {
            padding-right: 2.5px;
        }

        div.row.contacts-section div.contact-dep > :last-child {
            padding-left: 2.5px;
        }

    div.row.contacts-section div.contact-inline {
        width: 100%;
        max-width: 600px;
        position: relative;
        margin: auto;
        padding: 2.5px 5px;
        display: flex;
        justify-content: space-between;
        border-radius: 5px;
        background-color: white;
    }

        div.row.contacts-section div.contact-inline.selected {
            border: 2px dashed darkorange;
            opacity: 0.6;
        }

        div.row.contacts-section div.contact-inline span {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        div.row.contacts-section div.contact-inline > .group-1 {
            display: flex;
            flex-direction: column;
            width: 50%;
        }

            div.row.contacts-section div.contact-inline > .group-1 span:first-of-type {
                font-size: 15px;
                font-weight: bold;
            }

            div.row.contacts-section div.contact-inline > .group-1 span:last-of-type {
                font-size: 14px;
            }

        div.row.contacts-section div.contact-inline > .group-2 {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            width: 50%;
            justify-content: end;
        }

            div.row.contacts-section div.contact-inline > .group-2 div.contact-info {
                display: flex;
                flex-direction: column;
                align-items: end;
                color: dimgrey;
                gap: 2.5px;
                overflow: hidden;
            }

                div.row.contacts-section div.contact-inline > .group-2 div.contact-info span {
                    text-align: right;
                    font-size: 12.5px;
                    width: 100%;
                }

        div.row.contacts-section div.contact-inline .extra {
            position: absolute;
            top: 0;
            right: -26px;
            height: 100%;
            width: 26px;
            justify-content: right;
            display: flex;
            align-items: center;
        }

            div.row.contacts-section div.contact-inline .extra:hover .fa-box-archive {
                opacity: 1;
            }

        div.row.contacts-section div.contact-inline .fa-box-archive {
            opacity: 0.5;
            padding: 2.5px;
        }

        div.row.contacts-section div.contact-inline:not([data-edit="False"]):hover {
            box-shadow: var(--boxShadowHover);
            cursor: pointer;
        }

        div.row.contacts-section div.contact-inline.special, div.row.contacts-section .square-inline.special {
            background-color: var(--lightGreen-85);
        }

        div.row.contacts-section div.contact-inline.archived, div.row.contacts-section .square-inline.archived {
            background-color: blanchedalmond;
        }

        div.row.contacts-section div.contact-inline.obsolete, div.row.contacts-section .square-inline.obsolete {
            background-color: var(--lightRed);
        }

        div.row.contacts-section div.contact-inline.archived {
            display: none;
        }

.details-column .dynamic-contacts {
    border: 1px dotted black;
    border-radius: 5px;
    background-color: #9dd0e1;
}

.details-section div.row.contacts-section:has(.fa-box-archive) .contact-inline {
    width: calc(100% - 26px);
    margin: unset;
}

.details-section div.row.contacts-section div.contact-dep > * {
    background-color: #9dd0e1;
}

div.row.contacts-section div.archived-group {
    margin: auto;
    background-color: blanchedalmond;
    width: fit-content;
    padding: 1px 4px;
    border-radius: 5px;
    cursor: pointer;
}

/*#endregion*/