/* WE ARE WORKING ON CONSOLIDATING THE TWO CSS STYLE SHEETS - 'AUTOCHLOR.CSS' AND 'MOBILEAUTOCHLOR.CSS';
    DESKTOP MODULES WILL ONLY REFERENCE 'AUTOCHLOR.CSS', WHILE MOBILE MODULES WILL ONLY REFERENCE 'MOBILEAUTOCHLOR.CSS';
 */
body {
    margin: 0px;
    font-size: 9pt;
    font-family: Arial;
}

.Title {
    font-weight: bold;
    font-size: 9pt;
    font-family: Arial;
}

.ListBox {
    font-size: 8pt;
    font-family: Arial;
    text-transform: uppercase;
    border: 1px;
    border-style: solid;
    border-color: Black;
    display: inline-block;
}

    .ListBox input, .ListBox select {
        border: 1px;
        border-style: solid;
        border-color: Black;
        text-transform: uppercase;
    }


.ListBoxReadOnly {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 0px;
}

    .ListBoxReadOnly input, .ListBoxReadOnly select {
        border: 1px;
        border-style: solid;
        border-color: Gray;
    }

.InputBox {
    font-size: 8pt;
    font-family: Arial;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxRequired {
    font-size: 8pt;
    font-family: Arial;
    background-color: #FF9999;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxLower {
    font-size: 8pt;
    font-family: Arial;
    text-transform: lowercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxLowerRequired {
    font-size: 8pt;
    font-family: Arial;
    background-color: #FF9999;
    text-transform: lowercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxLowerReadOnly {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 1px;
    border-style: solid;
    border-color: Gray;
    text-transform: lowercase;
    overflow: hidden;
}

.InputBoxNormal {
    font-size: 8pt;
    font-family: Arial;
    text-transform: none;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxNormalRequired {
    font-size: 8pt;
    font-family: Arial;
    background-color: #FF9999;
    text-transform: none;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxNormalReadOnly {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 1px;
    border-style: solid;
    border-color: Gray;
    overflow: hidden;
}

.InputBoxNumber {
    font-size: 8pt;
    font-family: Arial;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxNumberRequired {
    font-size: 8pt;
    font-family: Arial;
    background-color: #FF9999;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: Black;
}

.InputBoxNumberReadOnly {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 1px;
    border-style: solid;
    border-color: Gray;
    text-align: right;
    text-transform: uppercase;
    overflow: hidden;
}

.InputBoxReadOnly {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 1px;
    border-style: solid;
    border-color: Gray;
    text-transform: uppercase;
    overflow: hidden;
}

.InputBoxReadOnlyRequired {
    border-style: none;
    background-color: Transparent;
    font-size: 8pt;
    font-family: Arial;
    color: Gray;
    border: 1px;
    border-style: solid;
    border-color: Gray;
    text-transform: uppercase;
    background-color: #FF9999;
    overflow: hidden;
}

.VerificationText {
    font-size: 9pt;
    font-family: Arial;
    color: #FF0000;
}

.SiteMap {
    font-size: 9pt;
    color: navy;
    font-family: Arial;
}

    a.SiteMap:hover {
        color: Orange;
        text-decoration: underline;
        cursor: pointer;
    }

.SiteMapCurrent {
    font-size: 9pt;
    color: maroon;
    font-family: Arial;
    text-decoration: none;
}

.BackToPrevious {
    font-size: 9pt;
    color: Orange;
    font-family: Arial;
    text-decoration: underline, blink;
    cursor: pointer;
}

.TSSelectHelperStyleItemSelection {
    font-size: 8pt;
    color: black;
    background-color: White;
    font-family: Arial;
    text-decoration: none;
    cursor: pointer;
}

.TSSelectHelperStyleItemSelectionHover {
    font-size: 8pt;
    background-color: Orange;
    color: #FFFFFF;
    font-family: Arial;
    text-decoration: none;
    cursor: pointer;
}

.TSSelectHelperStyleClose {
    font-size: 8pt;
    font-family: Arial;
    text-decoration: none;
    cursor: pointer;
}

.TSSelectHelperStyleTotal {
    font-size: 8pt;
    font-family: Arial;
    text-decoration: none;
}

.TSSelectHelperStylePageUpDown {
    font-size: 8pt;
    font-family: Arial;
    text-decoration: none;
    cursor: pointer;
}

.Note {
    font-size: 8pt;
    color: #0000FF;
    font-family: Arial;
    text-decoration: none;
}

.HIDE99 {
    display: none;
}

.HIDECONTROL {
    display: none;
    visibility: hidden;
}

.HIDEINNERTEXT {
    color: transparent;
    user-select: none;
}

.GridViewResult {
    white-space: normal;
}

.ServerCalendar_TSStyle {
    border-spacing: 0;
    border-collapse: collapse;
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap; /* Opera <7 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
}

.ServerCalendar_TSStyleCurrentDayCell {
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #FFC182;
    color: #FFFFFF;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleSelectDayCell {
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #FFB0E5;
    font-weight: bold;
    color: #FFFFFF;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleCurrentDay {
    font-weight: normal;
    text-align: left;
}

.ServerCalendar_TSStyleSelectDay {
    font-weight: normal;
    text-align: left;
}

.ServerCalendar_TSStyleWeekdayDayCell {
    font-size: 12pt;
    color: #0000cc;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #FFFFFF;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekendDayCell {
    font-size: 12pt;
    color: #FFFFFF;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #009999;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekdayCell {
    color: #0000cc;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #FFFFFF;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekendCell {
    color: #FFFFFF;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #7EE0E0;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekdayCellOtherMonth {
    color: #0000cc;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #EBEBEB;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekendCellOtherMonth {
    color: #FFFFFF;
    border-bottom: #000099 1px solid;
    border-left: #000099 1px solid;
    border-top: #000099 1px solid;
    border-right: #000099 1px solid;
    background-color: #EBEBEB;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
}

.ServerCalendar_TSStyleWeekday {
    font-weight: normal;
    text-align: left;
}

.ServerCalendar_TSStyleWeekend {
    font-weight: normal;
    text-align: left;
}

.ServerCalendar_TSStyleWeekdayOtherMonth {
    font-weight: normal;
    text-align: left;
}

.ServerCalendar_TSStyleWeekendOtherMonth {
    font-weight: normal;
    text-align: left;
}

.Calendar_TICKET {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #212121;
    text-decoration: none;
}

.Calendar_WORKORDER {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #7C6F57;
    text-decoration: none;
}

.Calendar_CUSTOMERTICKET {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #730E0E;
    text-decoration: none;
}

.Calendar_PURCHASEORDER {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #632E63;
    text-decoration: none;
}

.Calendar_WRITEOFFPROJECT {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #753116;
    text-decoration: none;
}

.Calendar_REROUTEPROJECT {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #11452C;
    text-decoration: none;
}

.Calendar_EOPPROJECT {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #888A2B;
    text-decoration: none;
}

.Calendar_COMMISSION {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #9F6844;
    text-decoration: none;
}


.Calendar_IQMSORDER {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #172759;
    text-decoration: none;
}

.Calendar_PURCHASEORDERRECEIPT {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #220442;
    text-decoration: none;
}
.Calendar_DOCUMENTUSER {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #056792;
    text-decoration: none;
}

.Calendar_ELECTRONICAGREEMENTMACHINE {
    font-size: 8pt;
    font-family: Arial;
    font-weight: normal;
    color: #164D38;
    text-decoration: none;
}

.FrequentlyAskedQuestions_Table {
    background-color: #f5f5f5;
    white-space: normal;
}

.FrequentlyAskedQuestions_Question {
    font-weight: bold;
    width: auto;
}


#MODAL {
    background: white;
    position: fixed;
    top: calc(50% - 280px / 2);
    left: calc(50% - 380px / 2);
    font-size: 1rem;
    border: black 1px solid;
    color: black;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 280px;
    max-height: 280px;
    border-spacing: 2px;
    z-index: 2;
}

    #MODAL div {
        font-size: 14pt;
        font-weight: bold;
        padding: 1px;
    }

    #MODAL > div:first-of-type {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: white;
    }

        #MODAL > div:first-of-type > a {
            text-decoration: none;
            font-weight: normal;
            font-size: 16px;
            color: white;
        }

    #MODAL p {
        margin: 0;
        margin-top: .5em;
        margin-bottom: .5em;
    }

    #MODAL a {
        text-align: center;
        font-size: 10pt;
    }

    #MODAL > div:last-of-type {
        display: flex;
        flex-direction: column;
        overflow: scroll;
        padding: 4px;
        flex: 1;
    }

    #MODAL p:nth-child(1) {
        font-weight: bold;
        font-size: 14pt;
    }

#MODALBACKGROUND {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgb(135,135,135);
    opacity: 0.4;
    z-index: 1;
    display: none;
}

#MODAL:has(.ErrorMessage) > div:first-of-type {
    background-color: #FF0000;
}

#MODAL:has(.ErrorMessage) p:nth-child(1) {
    color: #FF0000;
}

#MODAL:has(.ErrorMessage) p:nth-child(2) {
    font-weight: normal;
    font-size: 12px;
}

#MODAL:has(.WarningMessage) > div:first-of-type {
    background-color: #FF8000;
}

#MODAL:has(.WarningMessage) p:nth-child(1) {
    color: #FF8000;
}

#MODAL:has(.GoodMessage) > div:first-of-type {
    background-color: #00FF00;
}

#MODAL:has(.GoodMessage) p:nth-child(1) {
    color: #00FF00;
}

#MODAL:has(.GoodMessage) > div:last-of-type > p:nth-child(2) a {
    font-size: 12pt;
    color: orange;
}

.ButtonWrapper {
    display: flex;
    width: 90vw;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.5ch 2.5ch;
}

.MobileWindow {
    display: block;
    width: 540px;
    height: 1200px;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: scale(.5);
    transform-origin: 0 0;
    font-size: 16pt;
    white-space: normal;
    background-image: url(../images/MobileBackground.png);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    outline: solid 2px black;
}

.MobileWindow::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
}

    .MobileWindow > div > :is(a,div) {
        position: relative;
    }

table td:has(> .MobileWindow) {
    display: block;
    max-height: 600px;
}

._TSGridViewWebComponent {
    max-width: 200px;
    overflow: hidden;
    font-size: .8em;
    box-sizing: border-box;
}

    ._TSGridViewWebComponent a[href='#'], ._TSGridViewWebComponent a[href=''] {
        pointer-events: none;
        cursor: default;
        opacity: 50%;
    }

body:has(.DefaultPageBody) ._TSGridViewWebComponent :not(.TwoHorizontalButtons) > * {
    color: #FFF;
}

body:has(.DefaultPageBody) ._TSGridViewWebComponent:has(> :not(span:empty)) {
    background-image: url('../images/MobileBackground.png');
    --text-color: #FFF;
    color: #FFF;
}

body:has(.WelcomeBody) ._TSGridViewWebComponent :not(.TwoHorizontalButtons) > * {
    --text-color: #000;
    --background-color: white;
}

body:has(.WelcomeBody) ._TSGridViewWebComponent:has(> :not(span:empty)) {
    --background-color: white;
    --text-color: #000;
    color: #000;
    background-color: var(--background-color);
}

.SystemExternalTimePunch {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f3f3f3;
}

.SystemExternalTimePunch_Box {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 2px 0 #d2d2d2;
    margin: 10px;
}

.SystemExternalTimePunch_Title {
    border-bottom: 1px solid #d2d2d2;
    padding: 0 0 5px;
}