@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/Lato-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --white: #ffffff;
    --white-95-opacity: rgba(255, 255, 255, 0.95);
    --black: #111;
    --gray-1: #E9ECEF;
    --gray-2: #D2DAE3;
    --gray-3: #9EA7B3;
    --gray-4: #666F7A;
    --gray-6: #ccd0d7;
    --btn-primary-blue: #4caedd;
    --blue-4: #4092B9;
    --box-shadow: 0px 0px 10px 1px rgba(17,17,17,0.45);
    --error-red: #ef393f;
    --green-check: #2ec26d;
    --message-error-text-red:239, 55, 62;
    --locked-red:255, 71, 19;
    --message-blue-text: 0, 113, 206;
    --message-success-text-green: 64, 176, 73;
    --font-face: 'LatoRegular', Arial, Helvetica, sans-serif !important;
    --font-xsmall: 11px;
    --font-small: 13px;
    --font-normal: 14px;
    --font-large: 16px;
    --h3-font--size: 24px;
    --container-max--width: 700px;
}

*, *:hover, *:active {outline: none;}
a {
    color: var(--blue-4);
}

body.login {
    display: flex;
    width: 100vw;
    position: relative;
    min-height: 100vh;
    background-image: url(../images/bg-poly.svg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: var(--white);
    font-size: var(--font-normal);
    font-family: var(--font-face);
}

@media only screen and (max-width: 1024px) {
    body.login {
        background-position: right center;
    }
}

body.login .container {
    display: flex;
    flex-direction: column;
    max-width: var(--container-max--width); /* 700px */
    margin: 10vh auto 0;
    flex-grow: 1;
    position: relative;
}

body.login .container .login-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    border-radius: 5px;
    background: var(--white-95-opacity);
    margin-bottom: 20px;
    max-height: calc(100vh - 30vh);
    -webkit-box-shadow: var(--box-shadow);
    -moz-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

body.login .container .login-box .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 auto;
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
}

body.login .container .login-box .wrapper.no-message {
    margin-top: 60px;
}

body.login .container .login-box .wrapper h3 {
    font-family: var(--font-face);
    color: var(--black);
    font-size: var(--h3-font--size);
    font-weight: bold;
    margin: 10px 0;
}

body.login .container .login-box .wrapper .form-wrapper {
    width: 100%;
    margin-top: 20px;
}

/* This is to remove the reveal 'eye' icon and the 'x' clear icon from password input in excel and edge */
body.login .container .login-box .wrapper .form-wrapper input::-ms-reveal, 
body.login .container .login-box .wrapper .form-wrapper input::-ms-clear {
    display: none;
}

body.login .container .login-box .wrapper .form-wrapper .input-row:first-of-type {
    margin-bottom: 20px;
}

body.login .container .login-box .wrapper .form-wrapper .input-row.margin-bottom-10px {
    margin-bottom: 10px;
}

body.login .container .login-box .wrapper .form-wrapper .input-row input {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--gray-6) !important;
    padding: 6px 0;
    font-size: var(--font-large);
    background-color: transparent !important;
    background: none !important;
}

body.login .container .login-box .wrapper .form-wrapper .input-row input::placeholder {
    color: var(--gray-3);
}

body.login .container .login-box .wrapper .form-wrapper .input-row input:focus,
body.login .container .login-box .wrapper .form-wrapper .input-row input:active {
    border-bottom: 2px solid var(--btn-primary-blue) !important;
}

body.login .container .login-box .wrapper .form-wrapper .input-row {
    position: relative;
}

body.login .container .login-box .wrapper .form-wrapper .form-footer {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.login .container .login-box .wrapper .form-wrapper .form-footer a {
    color: var(--black);
    text-decoration: underline;
    text-underline-position: under;
}

body.login .container .login-box .forgot-pass {
    align-self: center;
    height: 70px;
}

button:focus {
    outline: none !important;
}

button.login-submit {
    display: flex;
    align-items: center;
    border:none;
    background: transparent;
    position: absolute;
    right: 0;
    top:0;
    bottom: 0;
    z-index: 1;
}

button.login-submit[disabled] img {
    width: 24px;
    height: 24px;
    opacity: 0.30
}

button.login-submit img {
    width: 24px;
    height: 24px;
    opacity: 1
}



.login-wrapper--logo {
    width: 34px;
    height: 37px;
}

body.login .container .login-box .message-wrapper {
    border-radius: 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
}

body.login .container .login-box.forgot-password .form-wrapper {
    height: 25vh;
}

body.login .container .login-box.forgot-password .form-wrapper form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container button {
    margin-left: 5px;
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-primary {
    background: var(--btn-primary-blue);
    border-color: var(--btn-primary-blue);
    color: var(--white);
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-primary:hover {
    background: var(--blue-4);
    border-color: var(--blue-4);
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-default {
    border-color: var(--gray-4);
    background-color: var(--white);
    color: var(--gray-4);
}

body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-default:hover {
    border-color: var(--gray-4);
    background-color: var(--gray-1);
    color: var(--gray-4);
}

body.login .container .login-box.forgot-password .form-wrapper form .confirmation-paragraph {
    margin-top: 40px;
}

body.login .container footer {
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


@media only screen and (max-width: 1024px) {
    body.login .container footer {
        left: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 5px;
    }
}

body.login .container footer a {
    color: var(--black);
    text-decoration: underline;
    text-underline-position: under;
}

.prophix-logo--white {
    position: absolute;
    width: 145px;
    right: 45px;
    bottom: 35px;
}

/*Checkbox style*/

.checkbox {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
}

.checkbox > label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 12px;
}

.checkbox > label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    left: 0;
    margin-left: -20px;
    border: 1px solid var(--gray-3);
    border-radius: 3px;
    background-color: var(--white);
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox > label::after {
    position: absolute;
    content: "";
    color: var(--blue-4);
    width: 10px;
    height: 7px;
    left: 5px;
    top: 6px;
    border: 3px solid var(--blue-4);
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    margin-left: -20px;
    transition: all 0.15s ease-in-out;
    opacity: 0;
}

.checkbox input[type="checkbox"] {
    opacity: 0;
}
.checkbox input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

.checkbox input[type="checkbox"].has-error + label::before {
    border-color: var(--error-red);
}

.checkbox input[type="checkbox"]:hover + label::before {
    --blue-4: rgb(64, 146, 185); /* hex converted to rgb for the box shadow rgba */
    border-color: var(--blue-4);
    box-shadow: 0 0 6px rgba(var(--blue-4), 0.8);
}

.checkbox input[type="checkbox"].has-error + label::before {
    --error-red: rgb(239, 57, 63); /* hex converted to rgb for the box shadow rgba */
    border-color: var(--error-red);
    box-shadow: 0 0 6px rgba(var(--error-red), 0.8);
            
}

.checkbox input[type="checkbox"]:disabled + label {
    cursor: default;
}

.checkbox input[type="checkbox"]:disabled + label::after {
    border-color: var(--gray-2);
}

.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="checkbox"]:disabled:hover + label::before {
    cursor: default;
    box-shadow: none;
    border-color: var(--gray-2);      
}

/* Error list */
.error-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.error-list p {
    font-size: var(--font-xsmall);
    color: var(--gray-4);
    margin-bottom: 15px;
}

.error-list ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}

.error-list ul li {
    width: 100%;
    padding: 5px 0;
    color: var(--gray-4);
    font-size: var(--font-small);
}

.error-list ul li i.icon-close::before {
    color: rgb(var(--message-error-text-red));
    margin-right: 5px;
}

.error-list ul li i.icon-check::before {
    color: var(--green-check);
    margin-right: 5px;
}


/* Message boxes */

.info-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    min-height: 36px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: var(--font-normal);
    font-weight: bold;
}

.info-message i {
    margin-right: 5px;
}

/* message styles */
.info-message.blue-message {
    color:#0F79D0;
    background:#E5F0FA;
}

.info-message.locked-message {
    color: rgb(var(--locked-red));
    background-color: rgba(var(--locked-red), .10);
}

.info-message.error-message {
    color: rgb(var(--message-error-text-red));
    background-color: rgba(var(--message-error-text-red), .10);
}

.info-message.success-message {
    color: rgb(var(--message-success-text-green));
    background-color: rgba(var(--message-success-text-green), .10);
}

/* Excel styles */
body.login.excel {
    overflow: hidden;
    display: flex;
    min-width: 322px;
    position: relative;
    min-height: 100vh;
    background-image: url(../images/bg-poly--excel.svg);
    background-size: cover;
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--white);
    font-size: var(--font-normal);
    font-family: var(--font-face);
}

body.login.excel .info-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
    min-height: 36px;
    border-radius: 5px !important;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
}

body.login.excel .info-message.error-message {
    color: #EF373E;
    background-color: #FDEBEB;
}

body.login.excel .container {
    padding: 0 20px;
}

body.login.excel .login-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    margin-bottom: 20px;
    box-shadow: 0 0 0 0;
}

body.login.excel .login-box .form-wrapper {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.login.excel .login-box .form-footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}

body.login.excel .login-box .form-footer span {
    margin-bottom: 20px;
}

body.login.excel .login-box .form-footer span a {
    text-decoration: none !important;
}

body.login.excel .login-box .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

body.login.excel .container .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
body.login.excel .container .footer a {
    color: var(--blue-4);
    margin-bottom: 10px;
}

/* IE11 / Excel Desktop App -- Neither understands css variables */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    a {
        color: #4092B9;
    }
    
    body.login {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        position: relative;
        min-height: 100vh;
        background-image: url(../images/bg-poly.svg);
        background-size: cover;
        background-position: left center;
        background-attachment: fixed;
        background-color: #fff;
        font-size: 14px;
        font-family:'Lato', Arial, Helvetica, sans-serif !important;
    }
    
    body.login .container {
        display: flex;
        flex-direction: column;
        max-width: 700px; /* 700px */
        width: 100%;
        margin: 10vh auto 0;
        height: calc(100vh - 10vh);
        flex-grow: 1;
        position: relative;
    }
    
    body.login .container .login-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-grow: 1;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.95);
        margin-bottom: 20px;
        max-height: calc(100vh - 30vh);
        -webkit-box-shadow: 0px 0px 10px 1px rgba(17,17,17,0.45);
        -moz-box-shadow: 0px 0px 10px 1px rgba(17,17,17,0.45);
        box-shadow: 0px 0px 10px 1px rgba(17,17,17,0.45);
    }

    body.login .container .login-box .wrapper h3 {
        font-family:'Lato', Arial, Helvetica, sans-serif !important;
        color: #000;
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0;
    }
    
    body.login .container .login-box .wrapper .form-wrapper .form-footer a {
        color: #000;
        text-decoration: underline;
        text-underline-position: under;
    }
    
   
    
    body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-primary {
        background: #4caedd;
        border-color: #4caedd;
        color: #fff;
    }
    
    body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-primary:hover {
        background: #4092B9;
        border-color: #4092B9;
    }
    
    body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-default {
        border-color:#666F7A;
        background-color: #fff;
        color:#666F7A;
    }
    
    body.login .container .login-box.forgot-password .form-wrapper form .login-buttons-container .btn-default:hover {
        border-color: #666F7A;
        background-color: #E9ECEF;
        color: #666F7A;
    }

    
    body.login .container footer {
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    body.login .container footer a {
        color: #4092B9;
        text-decoration: underline;
        text-underline-position: under;
    }
    
    /*Checkbox style*/
    
   
    .checkbox > label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 21px;
        height: 21px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #9EA7B3;
        border-radius: 3px;
        background-color: #fff;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
    
    .checkbox > label::after {
        position: absolute;
        content: "";
        color: #4092B9;
        width: 10px;
        height: 7px;
        left: 5px;
        top: 6px;
        border: 3px solid #4092B9;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        margin-left: -20px;
        transition: all 0.15s ease-in-out;
        opacity: 0;
    }
    
    .checkbox input[type="checkbox"].has-error + label::before {
        border-color: #ef393f;
    }
    
    .checkbox input[type="checkbox"]:hover + label::before {
        border-color: #4092b9;
        box-shadow: 0 0 6px rgba(#4092b9, 0.8);
    }
    
    .checkbox input[type="checkbox"].has-error + label::before {
       
        border-color: #ef393f;
        box-shadow: 0 0 6px rgba(#ef393f, 0.8);
                
    }
   
    .checkbox input[type="checkbox"]:disabled + label::after {
        border-color: #D2DAE3;
    }
    
    .checkbox input[type="checkbox"]:disabled + label::before,
    .checkbox input[type="checkbox"]:disabled:hover + label::before {
        cursor: default;
        box-shadow: none;
        border-color: #D2DAE3;      
    }
    
    /* Error list */
    
    .error-list p {
        font-size: 11px;
        color: #666f7a;
        margin-bottom: 15px;
    }
    
    .error-list ul li {
        width: 100%;
        padding: 5px 0;
        color: #666f7a;
        font-size:13px;
    }
    
    .error-list ul li i.icon-close::before {
        color: rgb(239,55,62);
        margin-right: 5px;
    }
    
    .error-list ul li i.icon-check::before {
        color:#2ec26d;
        margin-right: 5px;
    }
    
    
    /* Message boxes */
    
    .info-message {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 10px 0;
        min-height: 36px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size:14px;
        font-weight: bold;
    }

    
    /* message styles */
    .info-message.blue-message {
        color:#0F79D0;
        background:#E5F0FA;
    }
    
    .info-message.locked-message {
        color: #ff4713;
        background-color: rgba(#ff4713, .10);
    }
    
    .info-message.error-message {
        color: #EF373E;
        background-color: #FDEBEB;
    }
    
    .info-message.success-message {
        color: #40b049;
        background-color: rgba(#40b049, .10);
    }
    
    /* Excel styles */
    body.login.excel {
        overflow: hidden;
        display: flex;
        min-width: 322px;
        position: relative;
        min-height: 100vh;
        background-image: url(../images/bg-poly--excel.svg);
        background-size: cover;
        background-position: left center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-color: #fff;
        font-size: 14px;
        font-family:'Lato', Arial, Helvetica, sans-serif !important;
    }
    
    body.login.excel .container {
        padding: 0 20px;
    }
    body.login.excel .container .footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

     body.login.excel .container .footer span {
        display: block;
        width: 100%;
     }

   
    body.login.excel .login-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-grow: 1;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        margin-bottom: 20px;
        box-shadow: 0 0 0 0;
    }
    
    body.login.excel .login-box .form-wrapper {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    body.login.excel .login-box .form-footer {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
    }
    
    body.login.excel .login-box .form-footer span {
        margin-bottom: 20px;
    }
    
    body.login.excel .login-box .form-footer span a {
        text-decoration: none !important;
    }
    
    body.login.excel .login-box .footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    body.login.excel .container .login-box .wrapper .form-wrapper .input-row input {
        width: 100%;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #ccd0d7 !important;
        padding: 6px 0;
        font-size: 16px;
        background-color: transparent !important;
        background: none !important;
    }

    body.login.excel .container .login-box .wrapper .form-wrapper .input-row input::placeholder {
        color: #9EA7B3;
    }

    body.login.excel .container .login-box .wrapper .form-wrapper .input-row input:focus,
    body.login.excel .container .login-box .wrapper .form-wrapper .input-row input:active {
        border-bottom: 2px solid #4caedd !important;
    }
    
}