@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800&display=swap');
body{
    font-family: 'Cairo', sans-serif;
    color: #000
}
.header .header-tabs .nav-link{color: #fff}
.the-box{text-align: center;position: relative;min-height: 150px}
.the-box > a{position: absolute;width: 100%;height: 100%;top: 0;right: 0;display: block;}
.box-item .card:hover{opacity: .93}
.the-box h4{color: #fff}
.box-item{min-width: 20%}
.the-box > img{margin-top: 20px;margin-bottom: 10px}
.box-item-1 .card{color: #fff;background-color: #009ef7}
.box-item-2 .card{color: #fff;background-color: #fdd245}
.box-item-3 .card{color: #fff;background-color: #f86709}
.box-item-4 .card{color: #fff;background-color: #8b2839}
.box-item-5 .card{color: #fff;background-color: #083a61}
.box-item-6 .card{color: #fff;background-color: #0680a1}
.box-item-7 .card{color: #fff;background-color: #634490}
.box-item-8 .card{color: #fff;background-color: #EE5397}
.box-item-9 .card{color: #fff;background-color: #FE4E4E}
.box-item-10 .card{color: #fff;background-color: #00C4D4}
.btn-small {
    font-size: 12px;
    padding: 6px 13px !important;
    border-radius: 4px;
}
.the-table th {
    font-size: 11px !important;
    font-weight: 700 !IMPORTANT;
}
.the-table td {
    font-size: 11px !important;
    font-weight: 600 !IMPORTANT;
}
.header .header-tabs .nav-link.active{color: #000}
.header .header-tabs .nav-link.active:hover{color: #000;opacity: 1}
.header .header-tabs .nav-link i{color: #fff;font-size: 22px}
.header .header-tabs .nav-link.active i{color: #000}
.header .header-tabs .nav-link:hover{color: #fff;opacity: .85}
.header .header-tabs .nav-link{border-radius: 0}
.menu-item .menu-link .menu-title{font-weight: 600}
.login-title{color: #fff;font-weight: 700}
.menu-title-gray-700 .menu-item .menu-link .menu-title{color: #000}
.form-label{color: #000;font-weight: 600}
.modal-title{color: #000}
.form-control{font-size: .9rem}
.btn{font-weight: 600}
.the-table2 th,table.dataTable.the-table2 thead th{text-align: initial;padding: 1.25rem !important}

table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc:after{margin-right: 0.5rem}
.h-disabled:hover{cursor: auto;color: #000 !important}
.h-disabled2:hover{cursor: auto;color: #7e8299 !Important}
.h-disabled2:hover i{cursor: auto;color: #7e8299 !Important}
.h-disabled2 i{color: #7e8299 !Important}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after{
    display: none
}
.modal .container-fluid{padding: 0 !Important}
.form-check-label{color: #000}
.nav-line-tabs .nav-item .nav-link{color: #000;font-weight: 700}
.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item.show .nav-link, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled){border-bottom-width: 2px}
.card .card-header {
    min-height: 40px;
    padding: 0 2.95rem;
}
    .card .card-header .card-title .card-label {
        color: #009ef7
    }
.flatpickr-input {
    background-color: #f4f4f4 !important
}
.btn-edit {
    display: block;
    width: 100%;
    padding: 10px 13px !important;
}
.the-state {
    background-color: #fff;
    color: #000 !important;
    font-weight: 700;
    opacity: 1 !important;
    padding: 0 0 15px !important;
    text-align: left;
}
.modal-header{padding-top:10px;padding-bottom:10px}
/* start responsive */
@media only screen and (max-width : 992px) {
    .box-item{min-width: 30%;width: 30%}
}
@media only screen and (max-width : 767px) {
    .box-item{min-width: 45%;width: 45%}
}
@media only screen and (max-width : 480px) {
    .box-item{min-width: 90%;width: 90%}
}