section{
        height:100%;
    }
     .w_20{
        width:20%;
    }
      .w_40{
        width:50%;
    }
    .passcode-group.w_40{
        width:80%;
    }
    
     .wrapper{
        width:100%;
        margin:0 auto;
    }
    .row .col_sm_3{
        width: 251px;
    }
    .row .col_sm_8 {
        width: 70.83333333%;
    }
     .prelogin__header{
        height:100px;
         display: flex;
        align-items: center; 
    }
    .login_top34{
        padding-top: 34px;
    }
    .prelogin__body .next{
        width:20% !important;
        position: relative;
        top: 6px;
    }
    .common_text_color{
        color: #8A979B !important;
        text-decoration: none;
    }
    .forgot_user_pass{
        color: #8A979B !important;
        text-decoration: none;
    }
    a.forgot_user_pass:before {
        content: '';
        border: 1px solid #ddd;
        position: relative;
        right: 6px;
    }
    a.forgot_user_pass:focus, a.forgot_user_pass:hover{
        text-decoration: none;
    }
    a.common_text_color:focus, a.common_text_color:hover{
        text-decoration: none;
    }
    .paddtop50{
        padding-top: 50px;
    }
     .prelogin__body{
       
        height: calc(100vh - 100px);
        box-shadow: 0px 0px 26px #dbd6d6;
    }
    .row .logo{
        padding-left:23px;
    }
    .prelogin__body .btn_primary
    {
        padding: 8px;
        background:var(--primary__color);
        color:#fff;
        width: 205px;
        height: 42px;
        font-size: 16px;
        font-weight: 600; 
        font-family: 'Lato',sans-serif;
    }
    .prelogin__body .setpassword_btn {
        padding: 8px;
        background:#086375;
        color:#fff;
        width: 205px;
        height: 42px;
        font-size: 16px;
        font-weight: 600; 
        font-family: 'Lato',sans-serif;
    }
    .prelogin__body .forgot_next_btn{
        padding: 8px;
        background:#086375;
        color:#fff;
        width: 205px;
        height: 42px;
        font-size: 16px;
        font-weight: 600; 
        font-family: 'Lato',sans-serif;
    }
    .forgot_error_pop {
        color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    margin-bottom: 19px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    font-family: 'Lato',sans-serif;
    font-weight: bolder;
    width: 44%;
    margin-top: 15px;
    }
    .text_center{
        text-align: center;
    }
    .btn-close{
        font-size: 12px;
    }
   
button{
    color:red;
    font-family: 'Lato',sans-serif;
     font-weight: 900;
    font-size: 16px;
}
.prelogin_form .has-error .checkbox, .prelogin_form .has-error .checkbox-inline, .prelogin_form .has-error .control-label, .prelogin_form .has-error .help-block, .prelogin_form .has-error .radio, .prelogin_form .has-error .radio-inline, .prelogin_form .has-error.checkbox label, .prelogin_form .has-error.checkbox-inline label, .prelogin_form .has-error.radio label, .prelogin_form .has-error.radio-inline label {
    padding: 5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    font-family: 'Lato',sans-serif;
    font-weight: bolder;
    width: 442px;
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
    margin-top: 5px;
}
.title h1{ 
    font-size: 30px;
    font-family: 'Lato',sans-serif;
     font-weight: 900;
     color: var(--primary__color);   
}
p{
    font-size: 16px;
    font-weight: normal;
    font-family: 'Lato',sans-serif;
    color:#707070;
}
.prelogin_form input{
    border: 1px solid #707070;
    padding-left: 30px;
    width: 442px;
    height: 42px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Lato',sans-serif;
    outline: transparent;
    color: #8A979B;
}
.back_arrow{
    margin-top: -2px;
    margin-right: 4px;
}
 .form-control:focus {
    color: #8A979B !important;
    background-color: #fff !important;
    border: 1px solid #707070 !important;
    outline: 0 !important;
    box-shadow:none !important;
}
.btn-check:focus+.btn, .btn:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
.form-control:focus
.prelogin_form input .form-control:focus{
    -webkit-box-shadow: transparent;
    box-shadow: transparent;
}
.login_next_button .btn.active.focus, .login_next_button .btn.active:focus, .login_next_button .btn.focus, .login_next_button .btn:active.focus, 
.login_next_button .btn:active:focus, .login_next_button .btn:focus{
    outline: none;
     outline: 0px auto;
    outline-offset: 0px;
}
.login_next_button .btn.focus, .login_next_button .btn:focus, .login_next_button .btn:hover {
    color: #fff;
    text-decoration: none;
}
.prelogin_form input ::-webkit-input-placeholder { /* Webkit */
    color: #8A979B !important;
    font-weight: 400;
 }
  
 .prelogin_form input :-moz-placeholder { /* Firefox 18-4 */
    color: #8A979B !important;
    font-weight: 400;
 }
  
 .prelogin_form input ::-moz-placeholder {  /* Firefox 19+ */
    color: #8A979B !important;
    font-weight: 400;
 }
  
 .prelogin_form input :-ms-input-placeholder {  /*  IE10+  */
    color: #8A979B !important;
    font-weight: 400;
 }
.back{
   text-align: center;
    border-radius: 20px;
    padding: 6px 0px 6px 0px;
    box-shadow: 0px 2px 4px #ccc;
    margin: 30px 0px 40px 0;
    width: 76px;
    color:#000;
    font-weight: 900;
    font-size: 12px;
    font-family: 'Lato',sans-serif;
    cursor: pointer;
}
.prelogin_form .has-error .form-control:focus {
    border-color: #707070;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.prelogin_form .btn.focus,.prelogin_form .btn:focus,.prelogin_form .btn:hover {
    color: #fff ;
    text-decoration: none;
}
.prelogin_form .has-error .form-control {
    border-color: #707070 ;
    -webkit-box-shadow: none ;
    box-shadow: none;
}
    .prelogin__body .pt_5{
        padding-top: 2.5rem;
    }
    body .row{
            margin: 0;
            --bs-gutter-x: 0rem;
     }
     .prelogin__body .mt_5{
        margin-top: 1rem;
     }
     .hide{
         display: none;
     }
#myDiv{
    display: none;
}
.display_flex{
    display: flex;
}
.other-login {
    display: flex;
    align-items: end;
}
.other-login a{
    color: #5E5E5E;
    font-weight: 600;
    background: #FFF;
    border: solid 1px #8C8C8C;
    padding: 8px 12px;
    margin-right: 20px;
    width: 35%;
    font-size: 0.8rem;
}
.dynamic-icon{
    background: url('../../img/microsoft.png');
    width: 21px;
    vertical-align: middle;
    height: 21px;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 12px;
}
.okta-icon{
    background: url('../../img/okta-three.png');
    width: 78px;
    vertical-align: middle;
    height: 23px;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 12px;
}
#okta-auth.btn{
background-color: transparent;
}

@media only screen and (max-width: 1299px) {
    .wrapper {
    width: 100%;
    }
    .row .col_sm_3{
        width: 25%;
    }
    .w_40{
        width: 60%;
    }  
    
}

@media only screen and (max-width: 1024px) {
    .other-login{
        display: block;
    }
    .other-login a{
        width: 100%;
    margin-bottom: 15px;
    }
     .row .col_sm_3{
        width: 30%;
    }
    .prelogin_form .has-error .checkbox, .prelogin_form .has-error .checkbox-inline, .prelogin_form .has-error .control-label, .prelogin_form .has-error .help-block, .prelogin_form .has-error .radio, .prelogin_form .has-error .radio-inline, .prelogin_form .has-error.checkbox label, .prelogin_form .has-error.checkbox-inline label, .prelogin_form .has-error.radio label, .prelogin_form .has-error.radio-inline label {
        width: 100%;
       
    }
}
@media only screen and (max-width: 900px) {
    .row .col_sm_3{
        width: 32%;
    }
    .prelogin__body .forgot_next_btn {
        width: 35%;   
    }
    .prelogin_form input {
        width: 100%;
    }
    .prelogin__body .btn_primary {
        width: 55%;
    }
    
}
@media only screen and (max-width: 767px) {
     .passcode-group.w_40{
        width: 100% !important ;
    }
    .forgot_error_pop {
        width: 100%;
    }
    .other-login{
    text-align: center;
    }
    .prelogin__body .setpassword_btn{
        width: 100%;
    }
    .prelogin__body .forgot_next_btn{
        width: 100%;
    }
    .prelogin__body .btn_primary {
        width: 100%;
    }
    .prelogin_form .has-error .checkbox, .prelogin_form .has-error .checkbox-inline, .prelogin_form .has-error .control-label, .prelogin_form .has-error .help-block, .prelogin_form .has-error .radio, .prelogin_form .has-error .radio-inline, .prelogin_form .has-error.checkbox label, .prelogin_form .has-error.checkbox-inline label, .prelogin_form .has-error.radio label, .prelogin_form .has-error.radio-inline label {
        width: 100%;
    }
    section.wrapper,.prelogin__body .col_sm_3,.prelogin_form .w_40
    {
        width:100%;
    }
     .prelogin__header{
        height: auto;
        box-shadow: none;
    }
    .logo.col_sm_3{
        width: 100%;
    }
   .logo.col_sm_3 img{
       padding-left: 0px;
   }
    .prelogin__header .title h1{
        font-size: 21px;
        padding: 15px 25px;
        margin: 0;
    }
     .prelogin__body{
        box-shadow: none;
    }
    .prelogin__body .col_sm_3{
        display: none;
    }
    .title{
        background: var(--primary__color);   
    }
    p{
        text-align: left;
    }
     .prelogin_form{
         width: 90%;
    margin: 0 auto;
    }
    button.w_20{
        width:100%;
    }
    button.submit_btn
    {
        width: 90%;
    margin: 20px auto;
    text-align: center;
    display: table;
    }
    .title h1{
        color:#fff;
        padding-left: 25px;
    }
    .row{
        margin: 0;
    }
     .logo{
    padding-left: 45px;
    padding-top: 15px;
    padding-bottom: 15px;
    }
    .prelogin_form input {
        width: 100%;
    }
    .prelogin__body .next {
        width: 100% !important;
         top: 12px;
    }
    .prelogin__body .mt_5 {
        margin-top: 2.5rem;
    }
   
}




.prelogin_form input:-webkit-autofill,
.prelogin_form input:-webkit-autofill:hover, 
.prelogin_form input:-webkit-autofill:focus
.prelogin_form input:-webkit-autofill, 
.prelogin_form textarea:-webkit-autofill,
.prelogin_form textarea:-webkit-autofill:hover
.prelogin_form textarea:-webkit-autofill:focus,
.prelogin_form select:-webkit-autofill,
.prelogin_form select:-webkit-autofill:hover,
.prelogin_form select:-webkit-autofill:focus {
  border: 1px solid #707070 !important;
  -webkit-text-fill-color: #707070 !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* Library Update */
#microsoft-btn {
    --primary__color:#0d6efd;
}