@import url('https://fonts.googleapis.com/css?family=Tajawal:100,100i,300,300i,400,400i,700,700i,900,900i|Lobster+Two:400,400i,700,700i|Tajawal:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Tajawal');

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}



body {
    font-size: 15px;
    color: #777777;
    line-height: 1.8em;
    font-weight: 400;
    background: #ffffff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-font-smoothing: antialiased;
    font-family: "Tajawal", sans-serif !important;
}

.mainDiv {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.topheader {
    width: 100%;
    background-color: #339ba7;
}

    .topheader > img {
        width: 100%;
        height: auto;
        min-height: 350px;
        max-height: 350px;
        object-fit: cover;
    }

.L-side {
    /* background: url("../images/main-bg-of-statistics.jpg") left -400px top -50px;*/
    /* min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

    .L-side:before {
        /* background-color: #339ba7;*/

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: inline-block;
        content: "";
    }

.R-side {
    background: #fff;
    /* max-height: 100vh;*/
}

    .R-side header {
        text-align: center;
        padding: 30px 15px;
    }

.LoginForm {
    padding: 30px 50px 30px;
}

.info-header-wrapper {
    background: #ddf4fa;
    border-radius: 10px;
    padding: 10px;
    color: #009da9;
}

    .info-header-wrapper .info-Ar span {
        text-align: right;
        direction: rtl;
    }

    .info-header-wrapper .info-Ar span,
    .info-header-wrapper .info-En span {
        display: block;
    }

        .info-header-wrapper .info-Ar span:first-child,
        .info-header-wrapper .info-En span:first-child {
            font-size: 25px;
        }

.LoginForm label {
    color: #009da9;
}

/*label.Ar-label {
    float: right;
}*/

.TBC-btn {
    background: #f6cc2a;
    color: #009da9;
    font-weight: bold;
}

    .TBC-btn:hover {
        color: #fff;
    }

.form-group label {
    font-size: 20px;
}

.form-group input {
    border-color: #a3ddec;
}

.forget-links {
    padding: 10px 0 30px;
}

    .forget-links a {
        color: #009da9;
        font-size: 20px;
    }

    .forget-links .tbc-login-Ar {
        float: right;
        direction: rtl;
    }

.R-slider {
    color: #fff;
    margin: 36% 40px 0;
    border: 2px #fff solid;
    padding: 15px;
    position: relative;
}

.SliderInfo .testimonials-name {
    display: table;
    margin: auto;
    padding: 10px 20px;
    font-size: 130%;
}

.SliderInfo p {
    font-size: 25px;
    line-height: 50px;
}

.SliderInfo .testimonials-name:before,
.SliderInfo .testimonials-name:after {
    display: none;
}

.SliderInfo .slick-list {
    margin: 0;
    text-align: center;
}

.staff-login {
    border-top: 1px #dedede dashed;
    padding-top: 30px;
}

.loginForm-wrapper {
    /* margin: 0px auto 0;*/
    margin: 20px auto 0;
}

.englishInput {
    text-align: left !important;
    direction: ltr;
}

.loginForm-bg {
    background: white;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.11);
    padding: 15px;
    /* max-width: 82%;*/
    margin: 0px auto 0;
    text-align: start;
}

    .loginForm-bg .card-header {
        background-color: #069ca8 !important;
        color: white !important;
        font-size: 1rem;
    }

.Logos img {
    width: 7rem;
    margin-bottom: 1rem;
}

.login-title {
    font-size: 1.5rem;
}

.leftcard {
    position: relative;
}

.blockquote {
    color: white;
    text-align: center;
}

.card.left {
    margin: 70px auto;
    background-color: transparent;
    text-align: center;
    color: white;
    border-color: white;
}

    .card.left .icon-box {
        position: relative;
        width: 100px;
        height: 100px;
        color: #009da9;
        font-size: 46px;
        text-align: center;
        border-radius: 50%;
        margin: 0 auto;
        margin-top: -50px;
        line-height: 100px;
        background-color: #ffffff;
        border: 1px solid #efefef;
    }

    .card.left img {
        max-width: 100%;
        vertical-align: baseline;
    }

.center {
    margin: 0 auto;
}

[dir="rtl"] .custom-control.custom-checkbox {
    padding-left: 0;
    text-align: right;
}

[dir="rtl"] label.custom-control-label {
    position: relative;
    padding-right: 1.5rem;
}

    [dir="rtl"] label.custom-control-label::before,
    [dir="rtl"] label.custom-control-label::after {
        right: 0;
        left: auto;
    }

@media (max-width: 1440px) and (min-width: 1024px) {
    .loginForm-bg {
        /* max-width: 82%;*/
        margin: 0 auto;
    }

    .Logos img {
        width: 7rem;
    }

    .info-header-wrapper {
        font-size: 14px;
    }

    .LoginForm {
        padding: 30px 50px 10px;
    }
}

@media (max-width: 1024px) and (min-width: 600px) {
    .loginForm-bg {
        max-width: 92%;
        margin: 0 auto;
    }

    .Logos img {
        width: 7rem;
    }

    .R-side header {
        padding: 30px 15px 0;
    }

    .SliderInfo p {
        font-size: 18px;
        line-height: 36px;
    }

    .leftcard {
        display: none;
    }

    .L-side {
        /* background: #019eb1;*/
        height: auto;
        min-width: 100%;
    }

    .topheader > img {
        display: none;
    }

    .R-side {
        min-width: 100%;
    }
}

@media (max-width: 996px) {
    .leftcard {
        display: none;
    }

    .L-side {
        /*background: #019eb1;*/
        height: auto;
        min-height: 20px;
    }

    .topheader > img {
        display: none;
    }

    .comp {
        margin-top: 1rem;
    }
}

@media (max-width: 600px) {
    .L-side {
        /* background: #019eb1;*/
        height: auto;
        min-height: 20px;
    }

    .topheader > img {
        display: none;
    }

    .loginForm-bg {
        max-width: 100%;
    }

    .LoginForm {
        padding: 50px 15px 30px;
    }

    .R-side header {
        padding: 30px 15px 0;
    }

    .loginForm-bg {
        margin: 15px auto 0;
    }

    .info-header-wrapper span,
    .info-header-wrapper .info-Ar span {
        text-align: center;
    }

    .form-group label {
        font-size: 15px;
    }

    .forget-links a {
        font-size: 15px;
    }

    .TBC-btn,
    .btn-outline-info {
        width: 100%;
        margin-bottom: 10px;
    }
}

.grants-page .card {
    margin-top: 20px;
    border-bottom: 1px solid lightgray;
}

    .grants-page .card .card-title {
        font-size: 120%;
        font-weight: bold;
    }

        .grants-page .card .card-title img {
            width: 100px;
            height: 100px;
        }

    .grants-page .card label {
        font-weight: bold;
    }

.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-radius: 0.25rem 0 0 0.25rem;
}

.input-group > .form-control:not(:last-child) {
    border-radius: 0 0.25rem 0.25rem 0;
}

.custom-control > .custom-control-label {
    font-size: 20px;
}

input.remove-spin-btn::-webkit-outer-spin-button,
input.remove-spin-btn::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.remove-spin-btn[type=number] {
    -moz-appearance: textfield;
}