@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/*Ballroom login*/
#container_login_control, .ui-widget.ui-widget-content {
    top: 50%;
    left: 50%;
    width: 500px;
    padding: 50px 0;
    background: #FFF;
    box-shadow: 3px 3px 10px -6px #2c2c2c;
    font-family: "Open Sans", Arial, sans-serif;
    color: #2c2c2c;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-widget.ui-widget-content {
    width: 500px !important;
}

.overflowVis {
    overflow: visible !important;
}

#container_login_home, .ui-widget.ui-widget-content #login_leftside {
    width: 1000px;
}

#container_login_control .login-section, .login_rightside_popup, .login_leftside_popup {
    float: left;
    position: relative;
    width: 50%;
    padding: 0 50px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    box-sizing: border-box;
}

.login_rightside_popup, .login_leftside_popup {
    padding: 0 50px;
}

#ctl00_QsPH_ctrlLogin_Panel2, #ctl00_Panel1 {
    opacity: 0;
    z-index: 1
}

#container_login_home .slideOut, .ui-widget.ui-widget-content .slideOut {
    opacity: 0;
    margin-left: -250px;
}

#container_login_home .slideIn, .ui-widget.ui-widget-content .slideIn {
    opacity: 1 !important;
    margin-left: -250px;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0 50px;
    border: none;
    background: none;
}

    .ui-dialog .ui-dialog-titlebar .ui-button {
        border: none;
        top: -20px;
        right: 20px;
        background: url(images/close.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
    }

        .ui-dialog .ui-dialog-titlebar .ui-button span {
            display: none;
        }

.ui-dialog-title {
    float: none !important;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#container_login_control h2, #container_login_control .ui-dialog-title, .ui-dialog-title, #forgotpassword .wachtwoord span {
    margin-bottom: 11px !important;
    font-size: 34px;
    font-weight: bold;
    line-height: 27px;
}

#forgotpassword .wachtwoord {
    display: inline-block;
    margin-bottom: 23px;
}

#container_login_control .login-form, .login_leftside_popup {
    margin-top: 30px;
}

#container_login {
    padding: 0;
    overflow: hidden;
}

.container_loginfield, #forgotpassword .login_field {
    position: relative;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
}

    .container_loginfield:first-child {
        margin-bottom: 30px;
    }

    .container_loginfield:last-child {
        margin-bottom: 0;
    }

#container_login_control .login-field, .ui-widget.ui-widget-content .login_field input {
    position: relative;
    width: 100%;
    height: 28px;
    padding: 0 0 4px 0;
    border: none;
    border-bottom: 1px solid #2c2c2c;
    line-height: inherit;
    background: transparent;
    color: #2c2c2c;
    text-indent: 0;
    font-size: 15px;
    font-family: "Open Sans", Arial;
    box-shadow: none;
    z-index: 10;
}

.ui-widget input {
    font-family: "Open Sans", Arial, sans-serif;
}

#loginwait, #btnRequestPasswordwait {
    float: right;
    height: 25px;
    margin-top: 8px;
}

#container_login_control input:focus {
    outline-width: 0;
}

#container_login_control .loginlabel label, .loginlabel2, .container_loginfield label, #forgotpassword label .small span {
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 16px;
    color: #a5a5a5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#forgotpassword label .small {
    position: relative;
    display: block;
    width: 100%;
}

#container_login_control .placeholder_active label, #container_login_control .loginlabel2.placeholder_active, .ui-widget.ui-widget-content .placeholder_active label, #forgotpassword .placeholder_active .small span {
    top: -15px;
    font-size: 11px;
    color: #4892d0;
    font-weight: 600;
}

.show-password {
    position: absolute;
    top: -2px;
    right: 0;
    display: none;
    z-index: 11;
}

.show-password-link {
    text-decoration: none;
}

    .show-password-link svg {
        fill: #a5a5a5;
    }

.showPass svg {
    fill: #4892d0;
}

.error {
    font-size: 13px;
    color: #cf2d2d;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#container_login_control .login-link, .ui-widget.ui-widget-content .login-link_popup {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #4892d0;
}

    #container_login_control .login-link:hover, .ui-widget.ui-widget-content .login-link_popup:hover {
        text-decoration: none;
    }

#container_login_control .loginfield, #container_login_control .login_field {
    display: inline-block;
    width: 100%;
}

.container_loginfield .btnLogin2, .container_loginfield .btnLogin, .btnRequestPassword, #forgotpassword .btnRequestPassword, #forgotpassword .btnRequestCancel_popup {
    float: right;
    padding: 10px 25px;
    border: none;
    background: #4892d0;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

p#ctl00_QsPH_ctrlLogin_ui_changepwd_dialog_lbl_content {
    padding-bottom: 1.5em;
}

.ui-dialog .login-section {
    width: 100%;
}

.ui-dialog .login_leftside_popup, .ui-dialog #login_leftside_main .login_rightside_popup {
    width: 100%;
    margin-top: 3rem;
    opacity: 1;
}

.ui-dialog #forgotpassword .requeststatus {
    width: 100%;
    margin-top: 10px;
    font-size: 0.8rem;
}

    .ui-dialog #forgotpassword .requeststatus.ok, .ui-dialog #forgotpassword .requeststatus.error {
        display: inline-block;
    }

.btnLogin:after, .btnLogin:after {
    content: "";
    clear: both;
}

.btnLogin:hover, .btnLogin2:hover {
    background: #4985b7;
}

.btnAzure {
    width: 100%;
    margin-top: 20px;
}

.ui-dialog .btnAzure {
    width: auto;
    margin: 0 20px 0 0;
}

#container_login_control .container_loginfield .btnRequestCancel, #forgotpassword .btnRequestCancel_popup {
    float: left;
    background: #a5a5a5;
    text-decoration: none;
}

    #container_login_control .container_loginfield .btnRequestCancel:hover {
        background: #9a9a9a;
    }

.loginfield .btnRequestCancel {
    display: inline-block;
}

#back {
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: 90px;
    text-decoration: none;
}

#username-request {
    font-weight: 600;
}

/*Reset*/
.container_logout {
    display: none;
}

.container_passwordrules {
    top: -15px !important;
    background: #f1f1f1 !important;
    filter: initial !important;
}

    .container_passwordrules:before {
        border-color: #f1f1f1 transparent !important;
        border-color: transparent #f1f1f1 !important;
        filter: initial !important;
    }

.txtNewPWD1.rule_error, .match_error {
    border: none;
    border-bottom: 1px solid #cf2d2d;
    background: transparent;
}