/*----------------------------------------
    Login Screen Style
    By: ALGOHRY
------------------------------------------*/
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Tajawal", sans-serif !important;
}

a {
    color: #1399a0;
}

    .forgot-password,
    .input-field h5,
    a.active {
        font-weight: bold;
    }

.btn-primary {
    background-color: #1399a0 !important;
    color: white !important;
    border-radius: 8px;
}

    .btn-primary:hover {
        background-color: #0f8287 !important;
    }

.btn-secondary {
    background-color: #0b6e73 !important;
    color: white !important;
    border-radius: 8px;
}

    .btn-secondary:hover {
        background-color: #09585c !important;
    }

.login-bg {
    background-image: url("../../../../Rpt/images/smartPro_login_bg.png");
}

#login-page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

    #login-page .card-panel.border-radius-6.login-card {
        margin-right: 0 !important;
    }

.auth-card {
    background-color: #fff;
    border-radius: 30px;
    width: 500px;
    padding: 20px;
}

.right-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    width: 40%;
    max-width: 600px;
    margin: 0 auto;
}

.positioned-chart {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 33%;
    opacity: 0.8;
}

.left-side {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 8vh 0;
    width: 60%;
    max-width: calc(100% - 500px);
}

    .left-side .login-form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 350px;
        padding-top: 84px;
        padding-bottom: 100px;
    }

.tabs .tab a:focus,
.tabs .tab a:focus.active {
    background-color: rgba(19, 153, 160, 0.2);
}

.tabs .tab a:hover,
.tabs .tab a.active {
    color: #1399a0;
    background-color: transparent;
}

.tabs .indicator {
    background-color: #1399a0;
}

.input-field .prefix.active {
    color: #1399a0;
}

input[type="text"]:not(.browser-default):focus:not([readonly]) + label {
    color: #1399a0;
}

input:not([type]):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="password"]:not(.browser-default):focus:not([readonly]),
input[type="email"]:not(.browser-default):focus:not([readonly]),
input[type="url"]:not(.browser-default):focus:not([readonly]),
input[type="time"]:not(.browser-default):focus:not([readonly]),
input[type="date"]:not(.browser-default):focus:not([readonly]),
input[type="datetime"]:not(.browser-default):focus:not([readonly]),
input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
input[type="tel"]:not(.browser-default):focus:not([readonly]),
input[type="number"]:not(.browser-default):focus:not([readonly]),
input[type="search"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #1399a0;
    box-shadow: 0 1px 0 0 #1399a0;
}

@media (max-width: 992px) {
    .right-side {
        width: 50%;
    }

    .left-side {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .right-side {
        width: 60%;
    }

    .left-side {
        width: 40%;
    }
}

@media (max-width: 576px) {
    .right-side {
        width: 80%;
        max-width: 100%;
    }

    .left-side {
        width: 100%;
        padding: 4vh 0;
    }
}