body {
    background-color: rgb(237, 237, 237)!important;
}

#ms-error-header {
    margin: 80px!important;
    min-height: 0px!important;
}

.center-container {
 display: flex;
 background-color: #fff;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 padding-top: 50px;
 padding-bottom: 50px;
 border-radius: 10px;
}

 .center-container > *:not(img) {
     margin-top: 10px;
 }

 .center-container > *:not(img) {
     width: 63%;
 } 


 /* لوگوی سولیکو */
img#solicoBrand {
    padding-bottom: 50px;
}

img#OTPCode{
 width: 300px;
}

/* تصویر کاربر */
img#user {
    width: 300px;
}


#ctl00_PlaceHolderMain_signInControl_labelforIdentifier{
    font-size: 16px;
    padding-top: 10px;
}


input[type=submit].button-main {
 background-color: #0b78d1;
 color: #fff;
 border: 1px solid #0b78d1;
 border-radius: 5px;
 font-size: 14px;
 text-align: center;
 margin-left: 0px;
 width: 527px;
 padding: 11px;
 margin-top: 20px;
}

 input[type=submit].button-main:disabled {
     background: #9E9E9E !important;
     color: #fff !important;
     border-color: #9E9E9E !important;
     cursor: not-allowed;
     opacity: 0.3;
 }

input[type=text].login-text-input {
 border: 1px solid #d1d5db;
 font-size: 16px;
 color: rgb(102,102,102);
 text-align: center;
 border-radius: 4px;
 padding: 11px;
 width: 502px;
 margin-top: 15px;
}


.employee {
 font-size:20px;
 font-weight: bold;
}

a.login {
 font-size: 16px;
 font-weight: bold;
 text-decoration: none;
 color: #0b78d1;
 cursor: pointer;
}

input[type=submit].btn-return, input[type=submit].btn-resend {
 text-decoration: none;
 border: none;
 color: #0b78d1;
 cursor: pointer;
 background: transparent;
 font-size: 16px;
 font-weight: bold;
 margin-left: 0px;
}

input[type=submit].btn-return:focus-visible, input[type=submit].btn-resend:focus-visible {
outline-color:white;
}

.code-container {
 display: flex;
 gap: 10px;
 justify-content: center;
 margin: 15px 0;
}

.msg-countdown {
 color: rgb(128,128,128);
 font-size: 16px;
}


input[type=text].code-input {
 width: 50px;
 height: 60px;
 text-align: center;
 font-size: 24px;
 font-weight: bold;
 border-radius: 0px;
 background-color: #fff;
 border: 0px solid #ccc;
 border-bottom: 1px solid #ccc;
}

 input[type=text].code-input:focus {
     border-color: #0072C6;
     outline: none;
     box-shadow: 0 0 5px rgba(0,114,198,0.5);
 }



/* Mobile Responsive */
@media (max-width: 768px) {
    #ms-error-body {
        background-size: auto;
        overflow: auto;
        width: 340px;
        margin-right: auto;
        margin-left: auto;
    }

    .center-container > *:not(img) {
        width: 75%;
    }

    img#user {
        width: 50%;
    }
    
    input[type=text].login-text-input {
        width: 70%;
        font-size: 13px;
    }
    
    input[type=submit].button-main {
        width: 79%;
        font-size: 14px;
    }
    
    .code-container {
        gap: 6px;
    }
    
    input[type=text].code-input {
        width: 40px;
        height: 50px;
        font-size: 20px;
    }
    
    #ms-error-header {
        margin: 20px !important;
    }
    
    .employee {
        font-size: 16px;
    }
    
    a.login,
    input[type=submit].btn-return,
    input[type=submit].btn-resend {
        font-size: 14px;
    }
    
    }