@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url("../fonts/DroidKufi-Regular.ttf");
  }

body{
    direction: rtl;
    text-align: right;
    font-family: 'Droid Arabic Kufi', sans-serif !important;
}

.main-menu{
    background-color: #0e336a;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.fa-2x-home {
    font-size: 1.5em !important;
}
.row{
    margin: 0!important;
}

.menu-img{
    width: 460px;
}

.side-menu {
    background-color: #0e336a;
    z-index: 999;
    padding-top: 50px!important;
    height: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.navbar-brand{
    padding-bottom: 10px;
}

.menu-name{
    padding: 0;
}

.menu-name li{
    list-style-type: none;
}

.profile-img{
    background-color: #fff;
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    height: 80px;
    width: 80px;
    margin: 10px auto 10px;
}

.profile-name{
    color: #fff;
}

.modal-body .close{
    position: absolute;
    left: 20px;
    color: #0e336a;
    font-size: 35px;
    transition: .3s;
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    color: #0e336a;
    text-decoration: none;
    opacity: 1;
}

.modal-img{
    background-color: #fff;
    border-radius: 50%;
    border: 3px solid #0e336a;
    padding: 15px;
    text-align: center;
    height: 90px;
    width: 90px;
    margin: 10px auto 10px;
}

.modal-name{
    color: #0e336a;
    text-align: center;
    margin-bottom: 10px;
}

.side-list{
    padding: 0 ;
}

.side-list li{
    list-style-type: none;
    text-align: right;

}

.side-list li a{
    color: #fff;
    margin: 0 15px 0 0;
    display: block;
    margin-bottom: 15px;
    padding: 5px;
    transition: .3s;
}

.side-list li:not(:last-child) a{
    border-bottom: 2px solid #fff!important;
}

.side-list li a:hover ,.menu-active{
    background-color: #fff;
    color: #0e336a!important;
    text-decoration: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.side-list li a span.menu-span{

    display:inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat!important;
}

.menu4 .menu-span {
    background: url("../images/4.png");
}
.menu5 .menu-span {
    background: url("../images/5.png");
}
.menu6 .menu-span {
    background: url("../images/6.png");
}
.menu7 .menu-span {
    background: url("../images/7.png");
}
.menu29 .menu-span {
    background: url("../images/29.png");
}
.menu30 .menu-span {
    background: url("../images/30.png");
}
.menu31 .menu-span {
    background: url("../images/31.png");
}
.menu32 .menu-span {
    background: url("../images/32.png");
}

.main-content{
    padding-top: 0px;

}
.page-name-circle{
    position: absolute;
    top: -70px;
    right: 20px;
    width: 137px;
    height: 135px;
    background-color: #fff;
    text-align: center;
    border-radius: 50%;
    border: 7px solid #0e336a;
    padding: 15px;

}


.blue-btn{
    background-color: #0e336a;
    color: #fff;
    padding: 5px 40px;
    width: 200px;
    border-radius: 30px;
    position: relative;
    margin-bottom: 10px;
}

.red-btn{
    background-color: #6d0000;
    color: #fff;
    padding: 5px 40px;
    width: 200px;
    border-radius: 30px;
    position: relative;
    margin-bottom: 10px;
}

.btns-section{
    padding-bottom: 10px;
    text-align: left!important;
}

.switch-section{
    padding-top: 25px;
    text-align: left!important;
}

.switcher{
    margin-right: 25px;
}

.blue-btn span img{
    width: 18px;
}
.blue-btn span{
    width: 30px;
    height: 30px;
    background-color: #fff;
    padding: 5px;
    border-radius: 50%;
}
.save-exit-btn{
    position: absolute;
    left: 4px;
    top: 2px;
}

.save-btn{
    position: absolute;
    right: 4px;
    top: 2px;
}

.content-section{
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 20px;
    background-color: #eee;
    border-radius: 10px;
}


hr{
    border-color: #fff;
}

.page-title{
    color: #0e336a;
    font-weight: 700;
}

.page-title img{
    vertical-align: bottom;
}

.page-form select.form-control, .page-form  input.form-control, .page-form  textarea.form-control{
    border: 0;
    padding: 5px 15px;
    text-align: right;
}

.form-group label{
    color: #0e336a;
    font-weight: 700;
}

.select2-container--default {
    border: 0;
    width: 100%;
    text-align: right;
}

.page-table{
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    overflow: hidden;
}

.table-header{
    background-color: #cecece;
    color: #fff;
}

.table-header th{
    vertical-align: middle!important;
    font-size: 16px!important;
    font-weight: 500!important;
    text-align: center;
    border-bottom: 2px solid #b7b7b7!important;
}

.filter-info{
    border: 0;
    background-color: #eee;
    padding: 5px 15px;
    text-align: right;
    font-size: 14px;
    color: #a7a7a7;
    border-radius: 5px;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-right: 0.5em;
    display: inline-block;
    width: auto;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter label {
    text-align: right;
    background-color: #0e336a;
    padding: 4px 15px 6px 5px;
    color: #fff;
    border-radius: 20px;
    font-size: 20px;
}

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 20px;
    border: 0;
}

tbody tr td ,tbody tr th{
    vertical-align: middle!important;
    color: #0e336a;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.page-item.disabled .page-link {
    color: #ffffff;
    pointer-events: none;
    cursor: auto;
    background-color: #0e336a;
    border-color: #0e336a;
}

.page-item:last-child .page-link {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: #ffffff;
    pointer-events: none;
    cursor: auto;
    background-color: #0e336a;
    border-color: #0e336a;
}

.page-item:first-child .page-link {
    /* margin-left: 0; */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #ffffff;
    pointer-events: none;
    cursor: auto;
    background-color: #0e336a;
    border-color: #0e336a;
}

 .page-item.active .page-link {
    color: #0e336a;
    background-color: #ffffff;
    border-color: #dedede;
}

.page-link{
    color: #0e336a;
    background-color: #f3f3f3;
    border-color: #f3f3f3;
}

table.table-bordered.dataTable tbody td{
    padding: 10px 5px;
}

div.dataTables_wrapper div.dataTables_paginate, div.dataTables_wrapper div.dataTables_info{
    margin-bottom: 10px;
}

div.dataTables_wrapper div.dataTables_length select{
    border-radius: 20px;
    border: 2px solid #0e336a;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
    padding-right: 0;
    padding-left: 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 5px 1px;
}

.filter-form{
    padding-right: 160px;
    padding-top: 25px
}

.filter-form .page-form select.form-control, .filter-form .page-form input.form-control, .filter-form .page-form textarea.form-control {
    border: 0;
    background-color: #eee;
    padding: 5px 15px;
    text-align: right;
}



.myTab {
    border-bottom: 3px solid #0e336a;
}

.myTab .nav-item{
   margin-right: 0px;
   margin-bottom: -1px;
   position: relative;
}


.tab-content{
    padding-top: 20px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff!important;
    background-color: #0e336a!important;
    border-color: #0e336a;
}

.nav-tabs .nav-item .nav-link, .nav-tabs .nav-link {
    color: #0e336a;
    background-color: #eee;
    border-color: #0e336a;
}

.tabSpan1{
    background: url("../images/35.png");
}
.tabSpan2{
    background: url("../images/36.png");
}
.tabSpan3{
    background: url("../images/37.png");
}
.tabSpan4{
    background: url("../images/38.png");
}
.tabSpan5{
    background: url("../images/39.png");
}

.tabMenu1.active .tabSpan1{
    background: url("../images/35x.png");
}
.tabMenu2.active .tabSpan2{
    background: url("../images/36x.png");
}
.tabMenu3.active .tabSpan3{
    background: url("../images/37x.png");
}
.tabMenu4.active .tabSpan4{
    background: url("../images/38x.png");
}
.tabMenu5.active .tabSpan5{
    background: url("../images/39x.png");
}


.iconSpan{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background-position: center!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
}

.cut1:before {
    content: "";
    position: absolute;
    top: -9px;
    left: -9px;
    width: 20px;
    height: 20px;
    z-index: 9;
    border-right: 1px solid #0e336a;
    background: #FFF;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
  }

  .cut2:before {
    content: "";
    position: absolute;
    top: -10px;
    right: -9px;
    width: 18px;
    height: 20px;
    z-index: 9;
    border-bottom: 1px solid #0e336a;
    background: #FFF;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
  }

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    right: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

  input:checked + .slider {
    background-color: #0e336a;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #0e336a;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(-35px);
    -ms-transform: translateX(-35px);
    transform: translateX(-35px);
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

.afterTitle::after{
    content: "";
}

.signature{
    height: 150px;
    width: 150px;
    display: inline-block;
    background: url("../images/58.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    padding-top: 40px;
    text-align: center;
    cursor: pointer;
}

.signature-input{
    z-index: -1;
    position: absolute;
    opacity: 0;
    width: 0;
    right: 0;
}

/* Modals CSS */

.modal-bg{
    background-color: #eee;

}

.modal-body, .modal-content{
    border-radius: 20px;
    border: 0;
}

.modalHR{
    border-color: #bdbdbd!important;
    border-top: 3px solid;
    margin: 10px 0 20px!important;
}

.modalTitle{
    color: #0e336a;
}

.modal-username{
    border: 0;
    background-color: #ececec;
    padding: 5px 15px;
    text-align: right;
    display: block;
    font-size: 14px;
    color: #0e336a;
    border-radius: 5px;
    width: 100%;
}


.modal-save-start-btn{
    width: 225px!important;
    font-size: 13px;
    padding: 8px 40px;
}
.modal-save-btn{
    width: 150px!important;
    padding: 5px 20px!important;
}
.modal-red-btn{
    width: 100px!important;
    padding: 5px 20px!important;
}

.modal-body select.form-control, .modal-body input.form-control, .modal-body textarea.form-control {
    border: 0;
    padding: 4px 15px 0;
    text-align: right;
    background-color: #ececec;
    color: #0e336a;
}

.gallery img{
    width: 48%;
    margin: 5px;
    vertical-align: top;
}

.img-remove{
    color: #0e336a;
    font-size: 15px;
    transition: .3s;
    padding: 3px 10px;
}


.modalTab {
    border-bottom: 3px solid #0e336a;
    padding: 0;
    margin-bottom: 20px;
}

.modalTab .nav-item{
   margin-right: 0px;
   margin-bottom: -1px;
   position: relative;
}

.modalTab .cut1:before, .modalTab .cut2:before{
    background: #eee!important;
}

.idPreview img:not(:last-child){
    margin-bottom: 10px;
}

.details-height{
    height: 80vh;
    overflow-y: scroll;
    padding-left: 10px;
}
/* width */
.details-height::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  .details-height::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  .details-height::-webkit-scrollbar-thumb {
    background: #0e336a;
    border-radius: 10px;
  }

  /* Handle on hover */
  .details-height::-webkit-scrollbar-thumb:hover {
    background: #0e336a;
  }

.vechileSearch-details{
    border: 1px solid #0e336a;
    padding: 10px;
    border-radius: 10px;
}

.vechileSearchIcon{
    position: absolute;
    top: 5px;
    right: 4px;
    color: #0e336a;
}


.modalTabSpan1{
    background: url("../images/78.png");
}
.modalTabSpan2{
    background: url("../images/79.png");
}
.modalTabSpan3{
    background: url("../images/80.png");
}
.modalTabSpan4{
    background: url("../images/81.png");
}

.modalTabMenu1.active .modalTabSpan1{
    background: url("../images/78x.png");
}
.modalTabMenu2.active .modalTabSpan2{
    background: url("../images/79x.png");
}
.modalTabMenu3.active .modalTabSpan3{
    background: url("../images/80x.png");
}
.modalTabMenu4.active .modalTabSpan4{
    background: url("../images/81x.png");
}

.questtions-section .card-header{
    padding: 3px 15px;
}

.question-btn{
    padding: 5px;
    width: 86%;
    text-align: right;
    color: #072858;
}

.question-btn:hover, .question-btn:focus{
    text-decoration: none;
}

#accordionClose .question-btn{
    width: 100%;
}

.closeBtn{
    float: left;
    margin-top: 12px;
    margin-left: 5px;
    vertical-align: middle;
    width: 25px;
    box-shadow: none;
    height: 25px;
    background-color: #6d0000;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border: 0;
    cursor: pointer;
}

.closeBtn:focus{
    outline: none;
}


.closeBtn a:hover{
    text-decoration: none;
}

.arrow-img{
    float: left;
    margin-top: 6px;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    background-position: center!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background: url("../images/98.png");
}

.collapsed .arrow-img{
    background: url("../images/97.png");
}

.readFromID{
    border-bottom: 3px solid #0e336a;
    margin-bottom: 20px;
}

.idPreview img{
    width: 100%;
}

.select2-container--default {
    border: 0;
    width: 100%!important;
    text-align: right;
}

.select2-container{
    border: 0;
    width: 100%!important;
    background-color: #eee!important;
}

.summary + span{
    background-color: #ececec!important;
}

.form-mt{
    margin-top: 20px!important;
}

@media (min-width: 1200px){
    .container {
        max-width: 80%;
    }
}


.login-content{
    padding-top: 54px;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: url(../images/bg-kw.jpg), linear-gradient(#f3f3f3,#f3f3f3);
    background-position-y: center;
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    overflow-y: auto;
}

@media (min-width: 1800px){
    .login-content{
        padding-top: 150px;
    }
}

.login-content label{
    font-size: 20px;
}

.login-content input{
    background-color: #d8d8d8;
    border: 0;
}

.btn-up{
    background-color: transparent;
    border: 0;
    vertical-align: text-top;
    padding: 0;
    cursor: pointer;
}

.btn-up img{
    transform: rotateX(180deg);
}

.btn-down{
    background-color: transparent;
    border: 0;
    vertical-align: text-top;
    padding: 0;
    cursor: pointer;
}

.form-bg{
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

/****** New ******/

.dashSection {
    border-radius: 20px;
    border: 1px solid #333333;
    padding: 10px;
    min-height: 150px;
}

.leftBorder {
    border-left: 1px solid #333333;
}

.dashSection h5 {
    color: #0e336a;
    font-size: 16px;
}

.textRed {
    color: red !important;
}

.dashSection h2 {
    color: #0e336a;
    font-size: 60px;
}