/*HEADER CONTENT*/
.header-area {
    background-color: white;
    height: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-header {
        padding: 15px 0
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .main-header {
        padding: 15px 0
    }
}

@media (max-width: 575px) {
    .main-header {
        padding: 15px 0
    }
}

.main-header .main-menu ul li {
    display: inline-block;
    position: relative;
    z-index: 1
}

    .main-header .main-menu ul li a {
        color: #3c3e48;
        font-weight: 500;
        padding: 39px 19px;
        text-transform: uppercase;
        display: block;
        font-size: 16px;
        font-family: 'Tajawal', sans-serif;
        -webkit-transition: all .3s ease-out 0s;
        -moz-transition: all .3s ease-out 0s;
        -ms-transition: all .3s ease-out 0s;
        -o-transition: all .3s ease-out 0s;
        transition: all .3s ease-out 0s
    }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-header .main-menu ul li a {
        padding: 39px 15px
    }
}

.main-header .main-menu ul li:hover > a {
    color: #818181
}

.main-header .main-menu ul ul.submenu {
    position: absolute;
    width: 170px;
    background: #fff;
    left: 0;
    top: 120%;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.05);
    padding: 17px 0;
    border-top: 5px solid #818181;
    border-bottom: 5px solid #818181;
    border-radius: 0 37px 0px 24px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s
}

    .main-header .main-menu ul ul.submenu > li {
        margin-left: 7px;
        display: block
    }

        .main-header .main-menu ul ul.submenu > li > a {
            padding: 6px 10px !important;
            font-size: 14px;
            color: #0b1c39;
            text-transform: capitalize
        }

            .main-header .main-menu ul ul.submenu > li > a:hover {
                color: #818181;
                background: none
            }

.main-header ul > li:hover > ul.submenu {
    visibility: visible;
    opacity: 1;
    top: 100%
}

.header-sticky ul li a {
    padding: 10px 19px
}

.header-sticky.sticky-bar.sticky .main-menu ul > li > a {
    padding: 26px 20px
}


.mobile_menu {
    position: absolute;
    right: 0px;
    width: 100%;
    z-index: 99;
    top: -15px
}

    .mobile_menu .slicknav_menu {
        background: transparent;
        margin-top: 0px !important
    }

        .mobile_menu .slicknav_menu .slicknav_btn {
            top: -21px
        }

            .mobile_menu .slicknav_menu .slicknav_btn .slicknav_icon-bar {
                background-color: #467fcf !important;
            }

        .mobile_menu .slicknav_menu .slicknav_nav {
            margin-top: 24px !important
        }

            .mobile_menu .slicknav_menu .slicknav_nav a:hover {
                background: transparent;
                color: #818181
            }

            .mobile_menu .slicknav_menu .slicknav_nav a {
                font-size: 15px;
                padding: 7px 10px
            }

            .mobile_menu .slicknav_menu .slicknav_nav .slicknav_item a {
                padding: 0 !important
            }

.logo {
    max-width: 100px;
}

@media only screen and (device-width: 768px) {
    /* For general iPad layouts */
    .logo {
        max-width: 90px;
        float: left;
    }
}

@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    .logo {
        max-width: 90px;
        float: left;
    }
}



/*FOOTER CONTENT*/


.footer-area .footer-logo {
    margin-bottom: 30px;
    max-width: 100px;
}

.footer-area .footer-pera .info1 {
    line-height: 1.8;
    margin-bottom: 30px;
    padding-right: 5px
}

.footer-area .footer-pera .info2 {
    margin-bottom: 0
}

.footer-area .footer-pera.footer-pera2 p {
    line-height: 1.9;
    padding: 0
}

.footer-area .footer-tittle h4 {
    color: #495057;
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
    margin-bottom: 38px;
    font-weight: 500;
    text-transform: uppercase
}

.footer-area .footer-tittle ul li {
    color: #cfcfcf;
    margin-bottom: 15px;
    text-transform: capitalize;
    font-size: 14px
}

    .footer-area .footer-tittle ul li a {
        color: #495057;
        font-weight: 300
    }

        .footer-area .footer-tittle ul li a:hover {
            padding-left: 5px
        }

.footer-bottom-area .footer-border {
    border-top: 1px solid #26282c;
    padding: 33px 0px 33px
}

.footer-bottom-area .footer-copy-right p {
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    margin: 0;
    color: #495057
}

.footer-main {
    background-color: white;
}

.footer-area .footer-logo {
    margin-bottom: 30px
}

.footer-bottom-area .footer-copy-right p i {
    color: #cd0102
}

.footer-bottom-area .footer-copy-right p a {
    color: #cd0102
}

    .footer-bottom-area .footer-copy-right p a:hover {
        color: #fff
    }

.footer-padding {
    padding-top: 135px;
    padding-bottom: 74px
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .footer-padding {
        padding-top: 120px;
        padding-bottom: 74px
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer-padding {
        padding-top: 120px;
        padding-bottom: 0px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .footer-padding {
        padding-top: 100px;
        padding-bottom: 0px
    }
}

@media (max-width: 575px) {
    .footer-padding {
        padding-top: 100px;
        padding-bottom: 0px
    }
}


/*MAIN CONTENT*/

.login-wrapper {
    background-image: url('../images/login-background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.body {
    font-family: 'Tajawal', sans-serif;
}

.font-family-ar {
    font-family: 'Tajawal', sans-serif;
}

.card-title-ar {
    font-size: 23px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: 'Tajawal', sans-serif;
}

.form-label-ar {
    display: block;
    margin-bottom: .375rem;
    font-weight: 500;
    font-size: 0.875rem;
    font-family: 'Tajawal', sans-serif;
}

hr {
    border: 1px solid black;
    border-radius: 5px;
}

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

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

.login-padding {
    padding-top: 40px;
    padding-bottom: 40px;
}

.form-control {
    font-family: 'Tajawal' !important;
}

.form-group.col-xs-12 {
    padding-right: 0.75rem;
}

select.mul-select {
    height: 34%;
    width: 100%;
}

.page-group {
    float: left;
    margin-top: 20px;
    margin-bottom: 0px;
}

h1, h2, h3, h3, h4, h5, h6 {
    font-family: 'Tajawal', sans-serif !important;
}

a {
    font-family: 'Tajawal', sans-serif !important;
}

p {
    font-family: 'Tajawal', sans-serif !important;
}

.col-padding {
    padding-bottom: 20px;
}

tr {
    font-family: 'Tajawal', sans-serif !important;
}

th {
    font-family: 'Tajawal', sans-serif !important;
}

.btn {
    font-family: 'Tajawal', sans-serif !important
}

/*STEPS STYLE*/
.steps-form {
    display: table;
    width: 100%;
    position: relative;
    
}

    .steps-form .steps-row {
        display: table-row;
    }

        .steps-form .steps-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
        }

        .steps-form .steps-row .steps-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

            .steps-form .steps-row .steps-step p {
                margin-top: 0.5rem;
            }

            .steps-form .steps-row .steps-step button[disabled] {
                opacity: 1 !important;
                filter: alpha(opacity=100) !important;
            }

            .steps-form .steps-row .steps-step .btn-circle {
                width: 30px;
                height: 30px;
                text-align: center;
                padding: 6px 0;
                font-size: 12px;
                line-height: 1.428571429;
                border-radius: 15px;
                margin-top: 0;

            }

            /* [THE ERROR BASE] */
            .error {
                border: 1px solid #D8D8D8;
                padding: 5px;
                border-radius: 5px;
                font-family: 'Tajawal', sans-serif;
                font-size: 15px;
                color: #ba3939;
                background: #ffe0e0;
                text-align: center;
            }

            .radiobtn input[type="radio"] {
                width: 100px;
                float: left;
                height: 100px;
                margin-right: 50px;

            }


/*STEPS STYLE END*/