﻿* {
    margin: 0;
}

html {
    height: 100%;
    padding: 0;
    min-width: 502px;
    min-height: 502px;
}

body {
    height: 100%;
    background-color: gray;
    padding: 0;
    position: relative;
}

::-webkit-input-placeholder {
    color: #CCCCCC;
}

::-moz-placeholder {
    color: #CCCCCC;
}
/* firefox 19+ */
:-ms-input-placeholder {
    color: #CCCCCC;
}
/* ie */
input:-moz-placeholder {
    color: #CCCCCC;
}

#divMainWrapper {
    min-width: 497px;
    max-width: 497px;
    min-height: 396px;
    margin: -255px 0 0 -250px;
    top: 38%; /*for the old notice*/
    /*top: 50%; new notice*/
    left: 50%;
    position: absolute;
}

#divMainContent {
    min-width: 464px;
    max-width: 464px;
    padding: 22px 16px 19px;
    background-color: #EDE8E6;
    border: 1px solid #EDE8E6;
    border-radius: 5px;
    position: static;
}

#lblNsNotice {
    width: 505px;
    min-width: 665px;
    margin-left: -85px;
}

/*#lblMessage {
    width: 525px;
    margin-left: 50px;
}*/

#divNextSpotSupportNumbers {
    min-width: 500px;
    width: 500px;
    max-width: 490px;
    margin: 2px 0 0 7.5px;
    position: static;
    height: 22px;
}

#divNextSpotSupportWrap {
    min-width: 494px;
    width: 494px;
    max-width: 494px;
    margin: 0 auto;
}

.supportInfo {
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    color: #EDE8E6;
    float: left;
}

    .supportInfo.supportSeparator {
        margin: 0 2px;
    }

#nextSPOTLoginLogo {
    margin: 0 0 0 104px;
}

.clearBoth {
    clear: both;
}

.hiddenElement {
    display: none;
    visibility: collapse;
}

#divLoginBox {
    margin: 20px 0 0 0;
}

#divLoginWrapper {
    width: 258px;
    margin-left: auto;
    margin-right: auto;
}

#loginValidationSummary, #loginValidationVerfitication {
    min-width: 256px;
    max-width: 256px;
    margin: 0 0 4px 0;
    padding: 0 0 4px 0;
    border: 1px solid #FF3A3A;
    background-color: #FFFFFF;
    border-radius: 4px;
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    list-style-type: none;
}

    #loginValidationSummary > li {
        padding: 4px 0 0 12px;
        color: black;
    }

        #loginValidationSummary > li:first-child {
            padding: 4px 0 4px 12px;
            background-color: #FF3A3A;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }

#loginValidationVerfitication {
    width: 50%;
    margin: auto;
    height: 30px;
    margin-bottom: 10px;
}

    #loginValidationVerfitication > li {
        padding: 4px 0 0 0;
        color: black;
    }

        #loginValidationVerfitication > li:first-child {
            padding: 4px 0 4px 0;
            background-color: #FF3A3A;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }

#verfiticationHeader > li {
    margin-top: 7px;
}

.loginInputs {
    height: 28px;
    min-width: 248px;
    padding: 4px;
    border: 1px solid #CCCCCC;
    font-family: Arial;
    font-size: 14px;
    line-height: 28px;
    vertical-align: middle;
    outline: none;
}

#txtUsername {
    border-radius: 0;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#pbPassword {
    border-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#divRememberMe {
    min-height: 16px;
    margin: 8px 0 0 76px;
    position: relative;
}

#chkRememberMe {
    margin: 0 4px 0 0;
    padding: 0px;
    cursor: pointer;
    top: 0;
    position: absolute;
}

#lblRememberMe {
    margin: 4px 0 0 0;
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    top: -3px;
    left: 16px;
    position: absolute;
    cursor: pointer;
}

#btnLogin {
    min-height: 40px;
    min-width: 258px;
    margin: 8px 0 0 0;
    padding: 0px;
    background-color: #616162;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    outline: none;
    font-family: Arial;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

    #btnLogin:hover {
        background-color: #484849;
    }

    #btnLogin:active {
        background-color: #484849;
        font-size: 12.5px;
    }

.authCodeBtn {
    min-height: 40px;
    min-width: 258px;
    margin: 8px 0 0 0;
    padding: 0px;
    background-color: #616162;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    outline: none;
    font-family: Arial;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

    .authCodeBtn:hover {
        background-color: #484849;
    }

    .authCodeBtn:active {
        background-color: #484849;
        font-size: 12.5px;
    }

.disabledButton {
    background-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

#divLoginForgotBoxes {
    width: 194px;
    margin: 16px 32px 0 32px;
}

.loginForgotButtons {
    min-height: 32px;
    min-width: 194px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    outline: none;
    font-family: Arial;
    font-size: 12px;
    line-height: 12px;
    color: black;
    cursor: pointer;
}

    .loginForgotButtons:hover {
        background-color: #F5F5F5;
    }

    .loginForgotButtons:active {
        background-color: #F5F5F5;
        font-size: 12.5px;
    }

#btnForgotUsername {
    margin: 4px 0 0 0;
}

#divLoginBoxFooter {
    width: 194px;
    margin: 24px 32px 0 32px;
}

#imgFotoKemLogo {
    margin: 0 1px 0 26px;
}

#lblFotokemCopyRight {
    margin: 0 0 0 21px;
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    color: #5F5F5F;
}

.label {
    margin: 0 0 0 21px;
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    color: #5F5F5F;
}

#lnkTermsOfuse {
    cursor: pointer;
    text-decoration: none;
}

/*--Captcha-----------------------------------------------------*/
.captchaMainContainer {
    width: 100%;
}

.centerCaptchaContent {
    text-align: center;
    font-family: Arial;
    font-size: 12px;
}

.captchaHeaderContent {
    font-size: 15px;
    margin-top: 10px;
}

#captcha-image {
    margin-top: 10px;
    margin-bottom: 10px;
}

.refresh-captchaImage {
    height: 20px;
    width: 20px;
    position: absolute;
    margin-top: 30px;
    margin-left: 5px;
}

#captchaCode {
    margin-bottom: 10px;
    height: 25px;
    width: 170px;
    border: solid 1px #CCCCCC;
    border-radius: 6px;
    outline: none;
    font-family: Arial;
    font-size: 12px;
    line-height: 12px;
    color: black;
    text-align: center;
}

#captchaWindow_wnd_title {
    text-align: center;
}

#submitCaptcha {
    font-family: Arial;
    font-size: 12px;
}

/*-------------------------------------CHILD WINDOW SECTION-------------------------------*/

.k-window-title {
    margin-top: -5px;
    font-family: Arial;
    font-size: 23px;
    font-weight: bold;
    line-height: 38.4px;
    color: black;
    overflow: visible;
}

.k-window-titlebar {
    background-color: transparent;
    background-image: none;
    border: none;
}

.k-window {
    background-image: linear-gradient(to bottom, #CCCCCC 0%, #EAEAEA 100%);
}

.k-window-content {
    background: none;
}

/*------------------------------Confirmation Child Windows------------------------------*/

.divUtilityWindowMessage {
    max-width: 388px;
    margin-top: 8px;
    margin-left: 12px;
    float: left;
}

.lblUtilityWindowMessage {
    min-width: 300px;
    font-family: Arial;
    font-size: 12px;
    color: black;
    float: left;
}

.divUtilityWindowToolBar {
    margin-top: 24px;
    float: right;
}

.utilityWindowButtons {
    width: 74px;
    height: 21px;
    font-family: Arial;
    font-size: 12px;
    border-color: #7B7B7B;
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;
    outline: none;
    -webkit-border-radius: 2px;
    -webkit-appearance: none;
    background-color: #F0F0F0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: left;
}

    .utilityWindowButtons:focus {
        font-weight: bold;
    }

#txtCode {
    margin-top: 25px;
    border-radius: 5px;
    text-align: center;
}

.verificationCodeContent {
    font-family: Arial;
    font-size: 13px;
    text-align: center;
}

#divVerificationWindowWrapper {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#divVerificationWindowFooter {
    margin: 24px 32px 0 32px;
}

#nsBusyIndicator {
    background-color: rgba(255,255,255, .5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    position: absolute;
}

    #nsBusyIndicator img {
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -27px 0 0 -27px;
    }

/*--------------------------------END OF SECTION------------------------------------------*/

/*--------------------------------VERIFICATION WINDOW---------------------------------------*/
/*.imgVerificationFotoKemLogo {
    height: 22px;
    width: 120px;
}*/

.verificationLabel {
    font-family: Arial;
    font-size: 11px;
    line-height: 11px;
    color: #5F5F5F;
}

.lblFooter {
    color: #fff;
    font-family: Arial;
    font-size: 14px;
    text-align: center;
    display: block;
    line-height: 20px;
}

.important-alert {
    padding: 15px;
    /*margin: 20px 0;*/
    border: 1px solid #f5c6cb; /* Light red border */
    border-radius: 5px;
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    font-family: Arial;
    font-size: 14px;
    line-height: 1.5;
}

    .important-alert p {
        margin: 0;
        word-break: break-word;
    }

    .important-alert strong {
        font-weight: bold;
    }
