@font-face {
    font-family: "Material Design Icons";
    src: url("../fonts/mdi/materialdesignicons-webfont.eot?v=4.6.95");
    src: url("../fonts/mdi/materialdesignicons-webfont.eot?#iefix&v=4.6.95") format("embedded-opentype"), url("../fonts/mdi/materialdesignicons-webfont.woff2?v=4.6.95") format("woff2"), url("../fonts/mdi/materialdesignicons-webfont.woff?v=4.6.95") format("woff"), url("../fonts/mdi/materialdesignicons-webfont.ttf?v=4.6.95") format("truetype");
    font-weight: normal;
    font-style: normal
}

.mdi:before,
.mdi-set {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mdi-account-convert::before {
    content: "\F00A";
}

.mdi-account-plus-outline::before {
    content: "\F800";
}

#login-modal, .login_static {
    direction: rtl;
}
.login_static {
    width: 500px;
    max-width: 100%;
    margin: auto;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    padding: 1.5rem;
}

#login-modal .modal-dialog .modal-content,
.login_static .modal-dialog .modal-content {
    border: none;
}

#login-modal .modal-dialog .modal-content .modal-header,
.login_static .modal-dialog .modal-content .modal-header {
    padding: 0;
}

#login-modal .modal-dialog .modal-content .modal-header .tab,
.login_static .modal-dialog .modal-content .modal-header .tab {
    width: 100%;
    margin: 0;
}

#login-modal .modal-dialog .modal-content .modal-header .tab a,
.login_static .modal-dialog .modal-content .modal-header .tab a {
    text-align: center;
    background: #f8f9fa;
    font-size: 15px;
    color: #979898;
    font-weight: 500;
}

#login-modal .modal-dialog .modal-content .modal-header .tab a .mdi,
.login_static .modal-dialog .modal-content .modal-header .tab a .mdi {
    display: block;
    font-size: 20px;
    position: relative;
    top: 9px;
}

#login-modal .modal-dialog .modal-content .modal-header .tab a.active,
.login_static .modal-dialog .modal-content .modal-header .tab a.active {
    background: white;
    color: #595a5a;
}

#login-modal .modal-dialog .modal-content .form-control,
.login_static .modal-dialog .modal-content .form-control,
#login-modal .modal-dialog .modal-content .btn,
.login_static .modal-dialog .modal-content .btn {
    border-radius: 21px !important;
}

#login-modal .modal-dialog .modal-content .required,
.login_static .modal-dialog .modal-content .required {
    color: #F05B82;
}

#login-modal .modal-dialog .modal-content .checkbox,
.login_static .modal-dialog .modal-content .checkbox {
    margin-bottom: 15px;
}

#login-modal .modal-dialog .modal-content .checkbox label,
.login_static .modal-dialog .modal-content .checkbox label {
    position: relative;
    text-indent: 28px;
    display: inline-block;
    cursor: pointer;
}

#login-modal .modal-dialog .modal-content .checkbox label:before,
.login_static .modal-dialog .modal-content .checkbox label:before {
    font-family: "Material Design Icons";
    content: '\f43d';
    font-size: 23px;
    position: absolute;
    right: -28px;
    top: -1px;
    color: #979898;
}

#login-modal .modal-dialog .modal-content .checkbox input[type=checkbox],
.login_static .modal-dialog .modal-content .checkbox input[type=checkbox] {
    display: none;
}

#login-modal .modal-dialog .modal-content .checkbox input[type=checkbox]:checked+label:before,
.login_static .modal-dialog .modal-content .checkbox input[type=checkbox]:checked+label:before {
    content: '\f5e0';
    color: #00CBCB;
}

#login-modal .modal-dialog .modal-content .modal-body form:not(.active),
.login_static .modal-dialog .modal-content .modal-body form:not(.active) {
    display: none;
}

#login-modal .modal-dialog .modal-content .modal-body .msg,
.login_static .modal-dialog .modal-content .modal-body .msg {
    font-size: 12px;
    padding: 7px;
    margin-bottom: 10px;
    display: none;
}

#login-modal .modal-dialog .modal-content .modal-body .msg-alert,
.login_static .modal-dialog .modal-content .modal-body .msg-alert {
    background-color: #fffde4;
    border: 1px solid #f6e8a1;
    color: #a37731;
}

#login-modal .modal-dialog .modal-content .modal-body .msg-success,
.login_static .modal-dialog .modal-content .modal-body .msg-success {
    background-color: #e4ffea;
    border: 1px solid #b1f6a0;
    color: #46a344;
}

#login-modal .modal-dialog .modal-content .modal-body #progress,
.login_static .modal-dialog .modal-content .modal-body #progress {
    height: 8px;
    width: 100%;
    margin: 8px 0;
    border-radius: 4px;
    background: #f0f1f2;
}

#login-modal .modal-dialog .modal-content .modal-body #progress-bar,
.login_static .modal-dialog .modal-content .modal-body #progress-bar {
    width: 0;
    height: 100%;
    transition: width 500ms linear;
    border-radius: 4px;
}

#login-modal .modal-dialog .modal-content .modal-body .progress-bar-danger,
.login_static .modal-dialog .modal-content .modal-body .progress-bar-danger {
    background: #eb0000;
}

#login-modal .modal-dialog .modal-content .modal-body .progress-bar-warning,
.login_static .modal-dialog .modal-content .modal-body .progress-bar-warning {
    background: #ff8c28;
}

#login-modal .modal-dialog .modal-content .modal-body .progress-bar-success,
.login_static .modal-dialog .modal-content .modal-body .progress-bar-success {
    background: #009e00;
}