@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&display=swap');
html{
    scroll-behavior: smooth;
}
body{
    background-color: #F4F6F9 !important;
    font-family: 'Roboto', sans-serif;
}
div{
    font-family: 'Roboto', sans-serif;
    color: #383838;
    font-weight: 400;
}
.f-raleway{
    font-family: 'Raleway', sans-serif;
} 
.fw-bold{
    font-weight: bold;
}
.btn-blue{
    background-color: #1F5A82;
    color: white;
}
.btn-blue:hover{
    background-color: #1b4d6e;
    color: white;
}
.nav-sidebar .nav-item a{
    color: white;
}
.main-sidebar{
    width: 260px;
    box-shadow: 0;
}
.elevation-4{
    box-shadow: none !important;
    background-color: #383838;
}
.main-header {
    background-color: #FD9935;
    /* overflow-x: hidden; */
    
}
.navbar-light .navbar-nav .nav-link {
    color: white;
}
.main-header a i{
    color: white
}
.sidebar-mini .main-sidebar .nav-link, .sidebar-mini-md .main-sidebar .nav-link, .sidebar-mini-xs .main-sidebar .nav-link {
    /* width: calc(260px - .5rem); */
    max-width: calc(260px - .5rem);
    transition: width ease-in-out .3s;
    border-radius: .25rem;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: none;
}

/* content */
.content-header h1{
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #56B790;
    font-size: clamp(24px, 28px, 32px);
}
.content-header a{
    text-decoration: none;
    color: #7C7C7C;
    font-size: clamp(18px, 18px, 20px);
}
.breadcrumb-item.active {
    color: #6c757d;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(18px, 18px, 20px);
}
.breadcrumb-item{
    color: #6c757d;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
}

/* t-card */
.t-cards{
    border-radius: .8rem;
}
.t-card-img{
    background-color: #F2F2F2;  
    border-radius: .6rem;
}
.t-card-heading h5{
    font-family: 'Roboto', sans-serif;
    color: #616161;
    font-size: 17px;
    font-weight: 400;
}

/* b-card */
.b-card{
    font-family: 'Roboto', sans-serif;
    border-radius: 1.2rem;
    background-color: white;
}
.b-card-header{
    border-radius: 1.2rem 1.2rem 0px 0px ;
    background-color: #53D397;
    color: white;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}
.b-card-header h5{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    text-transform: uppercase;
}

.b-card-header .header-btn{
    font-size: 14px; 
    font-weight: 500;
    background-color: #7C7C7C;
    text-transform: capitalize;


}

.b-card-header .d-flex h5{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    color: white;
}

.b-card-body{
    background-color: white;
    border-radius: 0px 0px 1.2rem 1.2rem;
    color: #706F6F;
    font-weight: 400;

}

/* form */
.t-lebel{
    font-family: 'Roboto', sans-serif;
    color: #706F6F;
}
label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 400;
    font-size: 16px;
}
.t-input{
    font-size: 14px;
}
.form-control {
    height: calc(2.25rem);
    font-size: .8rem;
    line-height: 1.5;
    color: #706F6F;
    border-radius: .45rem;
    font-weight: 400;
    border: 1px solid #706F6F;
}
.check-lebel{
    color: #7C7C7C;
}
.chekbox-header{
    font-family: 'Roboto', sans-serif;  
    font-style: italic;
}
.light-lebel{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #7C7C7C;
    font-size: 15px;
}
.send{
    margin-left: clamp(1rem, 1rem, 2.5rem);
}

/* btn */
.btn-tqams{
    background-color: #53D397;
    border-color: #53D397;
    padding-left: clamp(1.2rem, 1.2rem, 2rem);
    padding-right: clamp(1.2rem, 1.2rem, 2rem);
}
.btn-upper{
    font-size: 14px;
    background-color: #53D397;
    border-color: #53D397;
    padding-left: clamp(1.5rem, 1rem, 2.5rem);
    padding-right: clamp(1.5rem, 1rem, 2.5rem);
}

.btn-tqams-secondary{
    padding-left: clamp(1.2rem, 1rem, 1.8rem);
    padding-right: clamp(1.2rem, 1rem, 1.8rem);
}


/* data tables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.25em .25em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    color: #333 !important;
    border: none;
    border-radius: 0px;
}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1;
    color: #6C757D;
    background-color: #fff;
    border: none;
    border-radius: 4px;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #CECECE;
    border: none;
    border-color: none;
    font-weight: bold;
}

.page-item.active .page-link::after {
    box-sizing: none;
    border: none;
    border-color: none;
}

.dataTables_filter .form-control {
    margin-left: 0px;
    display: inline-block;
    width: auto;
    height: calc(2.25rem);
    font-size: .8rem;
    line-height: 1.2;
    color: #706F6F;
    border-radius: 0px;
    font-weight: 400;
    border: 1px solid #CECECE;
}

.dataTables_length .form-control {
    margin-left: 0px;
    display: inline-block;
    width: auto;
    height: calc(2.25rem);
    font-size: .8rem;
    line-height: 1.2;
    color: #706F6F;
    border-radius: 0px;
    font-weight: 400;
    border: 1px solid #CECECE;
}



/* tabel */
.table-bordered td, .table-bordered th {
    border: 1px solid #CECECE;
}
.table-bordered thead {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #616161;
    background-color: #EBEBEB;
}

.table .btn-warning{
    color: white;
}

.btn-group-sm>.btn, .btn-sm {
    padding: .25rem .5rem;
    font-size: .7rem;
    line-height: 1.5;
    border-radius: .2rem;
}
table thead tr th{
    font-size: 14px;
}
table thead tr td{
    font-size: 14px;
}

/* background header image */
.header-bg-image{
    background-repeat: no-repeat;
    /* background-position: center; */
    background-size: cover;
    height: 250px;
    width: 100%;
    border-radius: 1.2rem;
}

.header-clor-overlay{
    background-color: #56B790;
    width: 100%;
    height: 250px;
    border-radius: 1.2rem;
    padding: 0px;
    margin: 0px;
    opacity: .7;
}

/* details */
.details-body{
    background-color: white;
    border-radius: 1.2rem;
    position: relative;
    bottom: 100px;
}
.details-header{
    color: #56B790;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
}

/* add btn */
.add-btn-card{
    font-family: 'Roboto', sans-serif;
    border-radius: 1.2rem;
    background-color: white;
}

@media (max-width: 991.98px){
    .sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar::before {
        margin-left: -260px !important;
    }
}


@media (max-width: 768px){
    .main-sidebar{
        width: 260px;
    }
}
@media (min-width: 768px){
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        transition: margin-left .3s ease-in-out;
        margin-left: 260px;
    }
}

/* mobile */
@media (max-width: 576px) { 
    .b-card{
        border-radius: .8rem;
    }
    .b-card-header{
        border-radius: .8rem .8rem 0px 0px ;
    }
    .b-card-body{
        border-radius: 0px 0px .8rem .8rem;
    }

    .header-bg-image{
        height: 200px;
        width: 100%;
        border-radius: .8em;
    }

    .header-bg-image{
        border-radius: .8rem;
    }
    
    /* details */
    .details-body{
        border-radius: .8rem;
        bottom: 90px;
    }
}


/* image */