@charset "UTF-8";

@font-face {
    font-family: AllerRegular;
    src: url(/Fonts/aller_rg-webfont.eot);
    src: url(/Fonts/aller_rg-webfont.eot?#iefix) format('embedded-opentype'),
         url(/Fonts/aller_rg-webfont.woff2) format('woff2'),
         url(/Fonts/aller_rg-webfont.woff) format('woff'),
         url(/Fonts/aller_rg-webfont.ttf) format('truetype'),
         url(/Fonts/aller_rg-webfont.svg#allerregular) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: FontAwesome;
    src: url(/Fonts/fontawesome-webfont.eot);
    src: url(/Fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
         url(/Fonts/fontawesome-webfont.woff2) format('woff2'),
         url(/Fonts/fontawesome-webfont.woff) format('woff'),
         url(/Fonts/fontawesome-webfont.ttf) format('truetype'),
         url(/Fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
    font-weight: normal;
    font-style: normal;
}

@keyframes pulse {
    0% { background-color: white }
    50% { background-color: lightyellow }
    100% { background-color: white }
}

/* General */
body { font-size: 1em }
    body, body * { box-sizing: border-box }
body, input, select, textarea { font-family: AllerRegular }
img, textarea { vertical-align: middle }
a img { border: none } /* Fix for IE 10 and below adding borders to images within links */

/* Text inputs */
textarea, input { border: 1px solid #ccc; border-radius: 0.45em; padding: 0.31em 0.63em }
    /* Focus */
    textarea:focus, input:focus { outline: none }
    /* Disabled */
    textarea[disabled], input[disabled] { background-color: #EBEBE4; color: #545454 }
    /* Read only */
    textarea[readonly], input[readonly] { border: solid 0.075em; border-radius: 0.45em; padding: 0.25em 0.56em; background-color: transparent; cursor: default }
    /* Required placeholder */
    textarea[required]::-webkit-input-placeholder, input[required]::-webkit-input-placeholder { /* Edge */ color: rgba(255, 0, 0, 0.7) }
    textarea[required]:-ms-input-placeholder, input[required]:-ms-input-placeholder { /* For IE */ color: rgba(255, 0, 0, 0.7) }
    textarea[required]::placeholder, input[required]::placeholder { color: rgba(255, 0, 0, 0.7) }

/* Dropdowns */
select { border-radius: 0.45em; padding: 0.15em 0.3em }
    /* Size selectors */
    select[size] { /*IE Req 0*/ padding: 0; padding: initial }
        select[size]::-webkit-scrollbar { width: 0.5em }
        select[size]::-webkit-scrollbar-thumb { border-radius: 0.2em; border-top-right-radius: 1em; border-bottom-right-radius: 1em }
        select[size][disabled]::-webkit-scrollbar-thumb { background-color: graytext }
        select[size] > option { padding: 0.15em 0.3em }
    /* Focus */
    select:focus { outline: none }
    /* Disabled */
    select[disabled] { border-color: graytext; background-color: white; color: graytext }

/* Buttons */
button, input[type=button], input[type=submit], input[type=reset] { border: none; border-radius: 0.45em; padding: 0.27em 0.54em }
    /* Focus */
    button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus { outline: none; box-shadow: 0 0 0 0.0625em #4d90fe }
    /* Disabled */
    button[disabled], input[type=button][disabled], input[type=submit][disabled], input[type=reset][disabled] { background-color: #545454; color: graytext }

/* Radio | Checkbox lists */
input[type=checkbox], input[type=radio] { padding: initial }
    input[type=checkbox]:focus, input[type=radio]:focus { outline: initial }
    input[type=checkbox] + label, input[type=radio] + label { margin-left: 0.3125em; display: inline-block; vertical-align: top }

/* TODO: Look into styles for <fieldset> tags */

/* Charms */
.Charm { position: relative; padding: 0 }
    .Charm:not(.Password)::after, .Charm.Password > input + i::before { position: absolute; text-align: center; right: 0; font-family: FontAwesome; width: 1.88em; line-height: 1.88em }
    .Charm.Password > input + i::before { font-style: normal }
    .Charm > input, .Charm > textarea { width: 100%; padding-right: 1.88em }
    /* Charm Options */
    .Charm.Company::after { content: "\f1ad" }
    .Charm.User::after { content: "\f007" }
    .Charm.Email::after { content: "\f0e0" }
    .Charm.Phone::after { content: "\f095" }
    .Charm.Address::after { content: "\f02d" }
    /*.Charm.Calendar::after { content: "\f073" }*/
    .Charm.Note::after { content: "\f040" }
    .Charm.Password > input[type=password] + i::before { content: "\f070" }
    .Charm.Password > input[type=text] + i::before { content: "\f06e" }

/* Checkbox Sliders */
.CheckSlider { display: inline-block; position: relative; width: 2.5em; height: 1.25em; border-radius: 0.625em; cursor: pointer }
    .CheckSlider::after, .CheckSlider::before { position: absolute; font-size: 0.75em; line-height: 1.66667em; font-weight: bold }
    .CheckSlider::before { content: 'Y'; left: 0.583333em }
    .CheckSlider::after { content: 'N'; right: 0.583333em }
    .CheckSlider input[type=checkbox] { visibility: hidden }
        .CheckSlider input[type=checkbox] + label { position: absolute; cursor: pointer; width: 1.25em; height: 1em; top: 0.125em; left: 0.125em; margin: 0; z-index: 1; border-radius: 0.5em; transition: left 0.3s ease }
        .CheckSlider input[type=checkbox]:checked + label { left: 1.125em }
    .CheckSlider + label { margin-left: 0.5em; vertical-align: text-top; display: inline-block; max-width: calc(100% - 3.3em) }

/* Error Messages */
#CapsLockNote { display: none; text-align: center; padding-top: 0.3125em }
#ErrorMessage, #PasswordResetError { display: table; margin: 0.3em auto; border: solid 0.1em Black !important; border-radius: 0.45em; background: White url(/Images/ErrorIcon.png) 0.4em center/1.4em no-repeat !important; padding: 0.42em; padding-left: 2.2em; font-size: 1.5em; color: Red !important }
    #ErrorMessage a:link, #ErrorMessage a:visited, #PasswordResetError a:link, #PasswordResetError a:visited { color: Red !important }
#BrowserUpdate, noscript { display: table; margin: 0.3em auto; border-radius: 0.45em; padding: 0.2em 0.6em; font-size: 1em; animation-name: pulse; animation-duration: 4s; animation-iteration-count: infinite }
#UnauthorizedMessageTitle { color: Red !important; font-size: 3em; text-align: center }
#UnauthorizedMessageText { width: 80%; margin: auto; font-size: 1.375em; text-align: center }
/* End Error Messages */

/* ETC Support Message */
#ETCMessage { display: table; margin: 0.3em auto; border-radius: 0.45em; padding: 0.2em 0.6em; font-size: 1em; background-color: white; max-width: 300px }
/* End ETC Support Message */

/* Misc Classes */
.Left { text-align: left }
.Center { text-align: center }
.Right { text-align: right }
.Medium { font-size: 1em /* 12pt, 16px, default */ }
.Large { font-size: 1.1667em /* 14pt, 19px, <big> */ }
.XLarge { font-size: 1.3333em /* 16pt, 21px */ }
.XXLarge { font-size: 1.5em /* 18pt, 24px, <big><big> */ }
.StandardTable { margin: auto }
table.StandardTable { border-collapse: collapse }
.Processing { display: none; white-space: nowrap }
/* End General */

/*
    Page Specific
*/

/* Top Section */
#ProvidedBy { position: absolute; top: 0.3em; left: 0.4em; text-align: center; white-space: nowrap }
#CompanyTitle { margin-top: 2em; text-align: center }
    #CompanyTitle img { max-height: 200px; max-width: 75%; height: auto; width: auto }
    #CompanyTitle table { margin: auto; border: double 0.35em }
        #CompanyTitle table td { padding: 0.2em 0.35em; text-align: center; font-size: 2em }
/* End Top Section */

/* Standard Login */
#StandardLogin { background-image: url(/Images/ShadeLogin.png); background-repeat: repeat-x; padding: 0.625em; max-width: 320px }
    #StandardLogin .Charm > input { padding-right: 1.869em }
    #StandardLogin .Charm:not(.Password)::after, #StandardLogin .Charm.Password > input + i::before { width: 1.869em; line-height: 1.893em }
    #StandardLogin .Processing { line-height: 1.85em }
/* End Standard Login */

/* List Login | Quickpunch */
#ListLogin { min-width: 625px; }
    #ListLogin td { vertical-align: top }
        #ListLogin td:not(:first-child) { padding-left: 0.62em }
        #ListLogin td select { width: 100% }
        #ListLogin td.Charm > input { padding-right: 1.878em }
        #ListLogin td.Charm.Password > input + i::before { width: 1.878em; line-height: 1.878em; font-size: 1.3333em }
        #ListLogin td .Processing { line-height: 1.8em }
/* End List Login | Quickpunch */

/* Password Reset */
#PasswordResetStart .Charm { max-width: 80%; width: 375px; margin: auto }
    #PasswordResetStart .Charm > input { padding-right: 1.878em }
    #PasswordResetStart .Charm::after { width: 2.505em; line-height: 2.5em }
#PasswordResetStart #PasswordResetEmailError { margin-top: 0.3125em }
#PasswordResetStart #PasswordResetSent { margin: auto; width: 575px }
#PasswordResetStart .Processing { line-height: 1.88em }

#PasswordChange .Charm { margin: 1em auto; width: 300px }
    #PasswordChange .Charm > input { padding-right: 1.8615em }
    #PasswordChange .Charm.Password > input + i::before { width: 1.5055em; line-height: 1.5em }
/* End Password Reset */

/* Grant Access */
#GrantAccess { background-image: url(/Images/ShadeLogin.png); background-repeat: repeat-x; padding: 0.625em; max-width: 350px }
    #GrantAccess .Charm > input { padding-right: 1.869em }
    #GrantAccess .Charm:not(.Password)::after, #GrantAccess .Charm.Password > input + i::before { width: 1.869em; line-height: 1.893em }
    #GrantAccess .Processing { line-height: 1.85em }
/* End Grant Access */

/* Lower area */
#RememberCheckboxes { max-width: 255px; margin: 0.625em auto }
.CheckSlider:not(:first-child) { margin-top: 0.625em }
#LoginLinks { margin: 1em 0 }
    #LoginLinks a { white-space: nowrap }
/* End lower area */

/* Account Create */
    /*#CreateAccount { width: 80%; margin: 3em auto }
    #CreateAccount .Charm:not(.Password)::after, .Charm.Password > input + i::before { width: 1.536em; line-height: 1.55em }
    #CreateAccount .Charm > input, .Charm > textarea { padding-right: 1.843em }*/
    /*#CreateAccount .Charm.Calendar::after { width: 1.78em; line-height: 1.78em }
    #CreateAccount .Charm.Calendar > input { padding-right: 2.12em }*/
    #PayPeriodStart { min-width: 411px}

    /*#CreateAccount .Required { font-weight: bold; color: red !important; font-size: 1.2em }*/

    /*#CreateAccount table { border-collapse: collapse; width: 100% }
        #CreateAccount table, #CreateAccount table th, #CreateAccount table td { border: 0.0625em solid; padding: 0.4375em }

    #CreateAccount hr { border: 0; height: 0.1875em; margin-bottom: 0 }
    #CreateAccount select { margin-left: 0.3125em }*/

    #CreateAccountBody .Missing { border: 0.125em solid red !important; background-color: lightCoral }
/* End Account Create */