*{
    margin:0px;
    padding:0px;
}

@font-face {
    font-family: 'Lato';
    src: url('../font/Lato-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato-Bold';
    src: url('../font/Lato-Bold.ttf') format('truetype');
}

body
{
    background:#eeeeee;
    font-family:'Open Sans', 'Droid Sans', Tahoma, Arial, sans-serif;
      font-size:13px;
}

.login-wrapper
{
    width:550px;
    background:#FFFFFF;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin-top:50px;
    box-shadow:0px 0px 3px 1px #cdcdcd;
}

.login-logo {
    width: 100%;
    height: 120px;
    background: #0d73c8 url('../Images/kpers-login-logo.png') no-repeat center 40%;
    position: relative;
}


.login-content
{
    width:100%;
    float:left;
    padding:20px;
    box-sizing:border-box;
    background:#FFFFFF;
}

.login-content p
{
    text-align:justify;
    line-height:24px;
    font-size:13px;
    color:#3d3d3d;
  
}

.login-row
{
    width:100%;
    float:left;
}



label
{
    font-size:13px;
    color:#3d3d3d;
    display:block;
    font-weight:bold;
}

.login-btn {
    background: #456E0C;
    border-radius: 3px;
    border: 0px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 8px 15px 8px 15px;
    cursor: pointer;
    border: 1px solid #77bc1f;
    transition: .3s ease-in-out all;
}

.login-btn:hover {
        color: #052e50;
        background: #FFFFFF;
        border: 1px solid #052e50;
}


.login-btn:focus
{
outline:0;
}

.field-validation-error
{
    color:red;
   margin-bottom:10px;
    display:block;
}

.error-div
{
    color:red;
    padding-top:10px;
}


@media (max-width:435px)
{
    .login-wrapper
    {
        width:80%;
    }

}


*
{
    margin:0px;
    padding:0px;
}

body{
    font-family:'Open Sans', 'Droid Sans', Tahoma, Arial, sans-serif;
}


a{
    font-size:13px;
    text-decoration:none;
}
.login-holder
{
    width:100%;
    max-width:565px;
    margin:30px auto;
    display:table;
    background:#FFFFFF;
    color:#333333;
    box-shadow:0px 0px 3px 1px #cdcdcd;
}


.login-body {
    background:#eeeeee;
}


.login-header {
    width: 100%;
    background: #1982c5;
    position: relative;
}


.login-heade-text {
    padding-bottom: 0px;
    box-sizing: border-box;
    width: 100%;
    bottom: 0px;
    text-align: center;
    color: #fff;
    bottom: 15px;
    position: absolute;
}


.person-image
{
    border-radius:0px 20px 0px 0px;
    width:95px;
    height:66px;
    background:url('../Images/kpers-login-person-img.png') no-repeat;
    float:right;
    display:none;
}

.login-container
{
    padding:10px;
    box-sizing:border-box;
}


.login-home-link{
    width:100%;
    padding:5px;
    box-sizing:border-box;
    float:left;
    text-align:right;

    font-weight:bold;
}

.login-home-link a
{
    color:#333333;
    
}

.login-e-wrapper{

    /*max-width:350px;*/
    margin:0px auto;
}

.login-e-caption
{
    font-family: 'Open Sans', sans-serif;
    font-size: 16pt;        
    font-weight: 400;      
    color: #333333;         
    margin: 0;             
}


.login-e-textbox{
    width:100%;
    float:left;
}

.login-e-textbox input{
    width:100%;
}

.login-e-button-text
{
    width:100%;
    font-size:14px;
    margin-top:10px;
    float:left;
}


.login-e-button-text input
{
    margin-right:5px;
}


.login-disclaimer-link
{
    width:100%;
    float:left;
    text-align:center;
    margin-bottom:0px;
    margin-top:10px;
}

.login-disclaimer-link a
{
    text-decoration:underline;
}


.login-steps-wrapper
{
    padding:10px;
    box-sizing:border-box;
    width:100%;
    float:left;
}

.login-stephead-wrapper
{
    width:100%;
    float:left;
    border-bottom:1px solid #00377b;
    padding-bottom:5px;
   
}

.login-stephead {

    font-family: 'Open Sans', sans-serif;
    font-size: 16pt;
    font-weight: 400;
    color: #333333;
    margin: 0;
}

.login-stephead-count
{
    float:right;
    font-size:12px;
    font-weight:bold;
}

.login-form-content
{
    width:100%;
    float:left;
}

.login-form-content h3
{
    font-weight:normal;
    font-size:12px;
    line-height:20px;
    float:left;
}


.login-row
{
    width:100%;
    float:left;
}


.caption-div {
    width: 50%;
    float: left;
    text-align: right;
    font-size: 14px;
    color: #014274;
    font-weight: normal;
    padding-right: 10px;
    padding-top: 3px;
}


.input-div
{
    width:50%;
    float:left;
    text-align:left;
}

.input-div input
{
  padding:5px 2px;
}

.astrick{
    color:red;
}

.align-center{
    text-align:center;
}


.login-error {
    float: left;
    font-size: 12px;
    color: #CC0000;
    margin-bottom: 10px;
}


.password-ruled-wrapper
{
    width:28%;
    float:left;
    padding-left:10px;
}

.password-ruled-wrapper p{
    font-size:12px;
    margin:5px 0px;
}


.password-ruled-wrapper p:first-child
{
    margin-top:0px;
}

.password-ruled-wrapper li{
    font-size:12px;
    margin:5px 0px;
}


.password-ruled-wrapper li:first-child
{
    margin-top:px;
}

.bold-font{
    font-weight:bold;
}

.select-image-two-column-wrapper
{
    width:60%;
    float:left;

}

.Phrase-group
{
    margin-bottom:15px;
    width:410px;
    margin:0px auto;
}

.challenge-qa-two-column-wrapper
{
    width:100%;
    float:left;

}

.challenge-qa-two-column-wrapper select
{
    width:100%;
}


.ans-challenge-question-two-column-wrapper
{
    width:100%;
    float:left;

}

.field-validation-error
{
    float:left;
    width:100%;
    margin-bottom:5px;
}

.enrollment-div{
    font-size:12px;
    margin-top:10px;
}

.hidden
{
    visibility:hidden;
}

.marg-top-20
{
    margin-top:20px;
}


.kpers-header
{
    width:100%;
    float:left;
    background:#6b92b4;
    height:100px;
    
}



.loginI-container
{
    width:100%;
    float:left;
    background:#355f84;
    padding:20px;
    box-sizing:border-box;
}

.loginI-content
{
    width: 60%;
    float: left;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 25PX;
    text-align: justify;
    padding-right:20px;
    box-sizing:border-box;
   
    
}

.loginI-form
{
    float:left;
    width:40%;
    padding-left:20px;
    box-sizing:border-box;
    border-left:1px solid #FFFFFF;

}

.loginI-form .login-row
{
    margin:5px 0px;
}


.loginI-caption 
{
    width: 30%;
    float: left;
    color: #ffffff;
    font-size: 14px;
    text-align: right;
    margin-right: 20px;
}

.loginI-input
{
    width:60%;
    float:left;
    font-size:14px;
}

.loginI-input input
{
    padding:3px;
    width:170px;
}


.loginI-btn
{
    background: #4b89bf;
    border: 1px solid #c4c6c8;
    padding: 5px 15px;
    font-weight: bold;
    color: #FFF;
    cursor:pointer;
}

.loginI-btn:hover
{
    background: #1f619a;
}

.footer {

    text-align: center;
    color: #333333;
    font-size: 15px;
    width: 100%;
    float:left;
    margin:10px 0px;
}


.login-kpers-logo
{
    margin:25px 0px 0px 20px;
    float:left;
}


.login-sagitec-logo
{
    float: right;
    margin: 15px 25px 0px 0px;
}


#msgnojs {
    padding: 5px 0px;
    margin-bottom: 15px;
    width: 100%;
    float: left;
    border: 1px solid #f28b13;
    background-color: #f7eed7;

    font-size: 13px;
    color: #000;
}

.browserinstruction p {
  
    font-size: 15px;
    color: #ffffff;
}

.instruction ol li {
    margin-left: 20px;
    color: #fff;
    font-size: 13px;
  
}

.insbutton {
    margin: 10px 20px;
}

.instruction p {
    color: #D0842B !important;
}


@media (max-width:820px) {

     .loginI-content {
        width: 50% !important;
    }

    .loginI-form {
    width: 50% !important;
    
}
}

@media (max-width:650px) {

     .loginI-content {
        width: 100% !important;
        
    }

    .loginI-form {
    width: 100% !important;
    border-left:0;
    margin-top:20px;
    
}

    .loginI-btn{
        position: relative;
        left: 87px;
    }


}


.login-btn {
    background: #052e50;
    border-radius: 3px;
    border: 0px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 8px 15px 8px 15px;
    cursor: pointer;
    border: 1px solid #052e50;
    transition: .3s ease-in-out all;
}

.login-btn:hover {
        color: #052e50;
        background: #FFFFFF;
        border: 1px solid #052e50;
}

.form-group
{
    width:100%;
    float:left;
    margin-bottom:15px !important;
}


.mutualauthentication-image
{
    width:80%;
    margin:0px auto;
}


.mutualauthentication-wrapper .caption-div
{
    width:25% !important;
}


.mutualauthentication-wrapper .login-error
{
    margin-left:25%;
}

.mutualauthentication-image img
{
    width:100%;
}

select
{
    border: 1px solid #e0e0e0 !important;
    border-top: 1px solid #dbdbdb !important;
    padding: 6px 10px !important;
    color: #455a64 !important;
    background: #fafafa !important;
    -webkit-box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.01) !important;
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.01) !important;
    line-height: 1.54;
    border-radius: 2px;
    width:80%;
}


.no-left-padding
{
    padding-left:0px !important;
}

.password-rules-text
{
    padding-left:20px;

}

.password-rules-text label
{
    font-weight:normal !important;
}


.password-rules-text ul
{
    padding-left:20px;
}

    .password-rules-text li {
        list-style-type: none;
    }


.challenge-qa-two-column-wrapper .control-label label
{
    display:inline-block;
}

.green-text {

    color: #406510;
}


.login-wrapper .control-label, .control-label label {
    color: #0d73c8 !important;
    font-weight: normal;
    font-size: 14px;
}

.control-label label {
    color: #333333 !important;
    font-weight: normal;
    font-size: 14px;
}

.fleft
{
    float:left;
}

.fright
{
    float:right;
}

/*LoginE Button Disabled*/
input#btnLoginE[disabled]{
    cursor: not-allowed;
    background-color: grey;
    border: 1px solid grey;
    color: white;
}