:root{
    --v-theme-on-surface: 51,48,60;
    --v-shadow-key-umbra-opacity: rgba(var(--v-theme-on-surface), 0.03);
    --v-shadow-key-penumbra-opacity: rgba(var(--v-theme-on-surface), 0.02);
    --v-shadow-key-ambient-opacity: rgba(var(--v-theme-on-surface), 0.01);
    --v-border-color: 75, 70, 92;
    --v-border-opacity: 0.12;
}


@charset "UTF-8";
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url(../font/rb_regular.ttf),url(../font/rb_bold.ttf);
}

body{
    font-family: 'Droid Arabic Kufi', serif !important;

}
.navbar-brand img {
    height: 2.3rem;

}

.navbar-brand {
    display: inline-block;
     padding-top: 5px;
     padding-bottom: 6px;
}


/* Mounir css */

.content-wrapper{
    background: #f8f7fa;
    margin-top: 15px;
}

.sidebar-content .sidebar-user {
    border-bottom: 0;
}

.sidebar-content .sidebar-user .card-body{
    padding: 1rem .75rem;
}

.sidebar-content .media-title {
    color: rgb(228 230 244 / 87%);
    text-align: center;
}

.navbar-top.sidebar-xs .sidebar-content .media-title{
    display: none;
}

.page-content .sidebar-content{
    background: rgb(47, 51, 73) !important;
}

.sidebar-content .nav-sidebar .nav-item:not(.nav-item-divider) {
    border-bottom: 0 !important;
}

.page-content .sidebar-dark .nav-sidebar .nav-link{
    color: #abadbf !important;
    display: flex;
    align-items: center;
    border-radius: 0.4rem;
    margin: 0 0.875rem;
    padding: 10px;
    margin-bottom: 5px;
}
.page-content .sidebar-dark .nav-sidebar .nav-link:not(.disabled):hover, .page-content .sidebar-dark .nav-sidebar > .nav-item-open > .nav-link:not(.disabled) {
    background: #34384e !important;
    color: #abadbf !important;
}

.page-content .nav-sidebar .nav-item .nav-link.active,
.page-content .sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.page-content .nav-sidebar .nav-item .nav-link.active:hover{
    background: linear-gradient(-72.47deg,rgb(115,103,240) 22.16%,rgba(115,103,240,.7) 76.47%)!important;
    color: #fff !important;
    box-shadow: 0 3px 1px -2px rgba(12, 16, 27, 0.15);
}


.nav-group-sub .nav-item{
    background: #2f3349 !important;
    color: #abadbf !important;
}

.sidebar-dark .nav-sidebar > .nav-item-submenu > .nav-group-sub, .sidebar-light .card[class*=bg-]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item-submenu > .nav-group-sub{
    background: rgb(47, 51, 73) !important;
}

.nav-group-sub .nav-item a{
    background: none!important;
}

.page-content .nav-sidebar .nav-link i {
    margin-right: 0;
    margin-top: 0;
    margin-left: .5rem;
}

.badge-primary {
    color: rgba(115,103,240);
    background-color: rgba(115 103 240 / 12%);
}

.sidebar-content .nav-sidebar .nav-link .badge{
    border-radius: 50%;
    margin-left: 25px !important;
    padding: 6px;
    font-size: .8em;
    min-height: 25px;
    min-width: 25px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-content .nav-item-submenu > .nav-link:after{
    top: 12px !important;
    left: 12px;
    font-size: 20px;
}


.navbar-top .navbar-dark{
    background: #f8f7fa;
}

.navbar-top #navbar-mobile{
    background: #fff;
    margin: 0 0 0 20px;
    position: relative;
    top: 15px;
    height: 55px;
    border-radius: 6px;
    box-shadow: 0 3px 9px 1px var(--v-shadow-key-umbra-opacity),0 9px 8px var(--v-shadow-key-penumbra-opacity),0 1px 6px 4px var(--v-shadow-key-ambient-opacity);
}

.navbar-dark .navbar-nav-link {
    color: #4d4b55 !important;
}

.navbar-dark .navbar-nav .nav-item span span{
    color: #4d4b55 !important;
}

.content-wrapper .card{
    background: #fff !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: 0 3px 9px 1px var(--v-shadow-key-umbra-opacity),0 9px 8px var(--v-shadow-key-penumbra-opacity),0 1px 6px 4px var(--v-shadow-key-ambient-opacity)!important;
}

.content-wrapper .card .card-header {
    background: none !important;
    border-radius: 0 !important;
    border-bottom: thin solid rgba(var(--v-border-color),var(--v-border-opacity))!important;
}

.content-wrapper .card .card-header .card-title{
    color: rgba(51,48,60) !important;
}

.content-wrapper .table-bordered {
    border: 0 !important;
}

.content-wrapper .table thead th{
    border-bottom: thin solid rgba(var(--v-border-color),var(--v-border-opacity))!important;
    color: rgba(var(--v-theme-on-surface));
}

.content-wrapper .table-bordered td, .content-wrapper .table-bordered th{
    border: 0 !important;
    border-bottom: thin solid rgba(var(--v-border-color),var(--v-border-opacity))!important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: none !important;
}

.content-wrapper .table-bordered td a, .content-wrapper .table-bordered td a span{
    color: rgba(115,103,240);
}

.form-control{
    min-height: 40px !important;
    border-radius: 6px !important;
}

.form-control:focus{
    border-color: #7367f0 !important;
}

.btn{
    height: 40px !important;
    box-shadow: 0 3px 5px 2px var(--v-shadow-key-umbra-opacity),0 5px 3px var(--v-shadow-key-penumbra-opacity),0 1px 4px 2px var(--v-shadow-key-ambient-opacity);
    padding: 0 20px !important;
    color: #fff !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.page-content .btn{
    border-radius: 6px !important;
}

.btn-primary,
.btn-grey-blue{
    background: rgb(115,103,240) !important;
}
.btn-success{
    background: rgb(40,199,111) !important;
}
.btn-warning{
    background: rgb(255,159,67) !important;
}
.btn-secondary{
    background: rgb(168,170,174) !important;
}
.btn-info{
    background: rgb(0,207,232) !important;
}
.btn-danger{
    background: rgb(234,84,85) !important;
}

.btn-outline-primary , .btn-light-primary{
    color: rgb(115,103,240) !important;
    border-color: rgb(115,103,240) !important;
}
.btn-outline-success{
    color: rgb(40,199,111) !important;
}
.btn-outline-warning{
    color: rgb(255,159,67) !important;
}
.btn-outline-secondary{
    color: rgb(168,170,174) !important;
}
.btn-outline-info{
    color: rgb(0,207,232) !important;
}
.btn-outline-danger{
    color: rgb(234,84,85) !important;
}

/*.btn-light-primary{
    background: rgb(248,249,250) !important;
    color: rgba(51,48,60)!important;
    border-color: rgb(212,212,212) !important;
}
*/
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-danger:hover
{
    color: #fff !important;
}
.btn-outline-info:hover{
    background: rgb(0,207,232) !important;
}
.btn-outline-primary:hover,.btn-light-primary:hover , .btn-outline-primary.active{
    background: rgb(115,103,240) !important;
    color: #fff !important;
}

.input-group > .form-control:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.page-link {
    min-width: 40px;
    min-height: 40px;
    aspect-ratio: 1 / 1;
    color: #6f6e76 !important;
    background-color: #eeeeef;
    border: none;
    font-size: 15px;
    border-radius: 50%!important;
    margin: 0.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.page-item.active .page-link {
    color: #7366f0 !important;
    background-color: #dfdbfb;
}

.page-item.disabled .page-link{
    background-color: #eeeeef;
    opacity: 0.3;
}
.nav-tabs-bottom .nav-link{
    font-size: 16px;
}
.nav-tabs-bottom .nav-link.active{
    background: #f9f9fa;
    color: rgba(115,103,240);
}
.nav-tabs-bottom .nav-link:hover{
    color: rgba(115,103,240);
}

.nav-tabs-bottom .nav-link.active:before {
    background-color: rgba(115,103,240) !important;
    background: #f9f9fa;
}

input[aria-describedby="addon-wrapping"],
.radius-r0,
select.order-status-change,
.select2-selection.select2-selection--multiple{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-text{
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.radius-6{
    border-radius: 6px !important;
}

.crypto-card-3.pull-up{
    text-align: right !important;
}

.crypto-card-3.pull-up .card-body{
    padding: 20px 20px 5px 20px;
    text-align: center;
}

.crypto-card-3.pull-up{
    border: 1px solid transparent !important;
    transition: 0.3s;
}

.crypto-card-3.pull-up:hover{
    border: 1px solid #7367f0 !important;
}

.crypto-card-3.pull-up .card-body i{
    background: #eeecfd;
    padding: 10px;
    font-size: 25px !important;
    border-radius: 6px;
    color: #7366f0 !important;
}

.crypto-card-3.pull-up .card-footer{
    background: none;
    border: 0;
    padding: 0 24px;
    text-align: center;
}

 .crypto-card-3.pull-up .card-footer h2 span{
    font-size: 1.25rem!important;
    color: rgba(51,48,60)!important;
    font-weight: normal !important;
 }

.crypto-card-3.pull-up img{
    height: 80px;
    width: auto;
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 6px 5px #f1f1f1;
 }

.content-wrapper .breadcrumb {
    background: #ffffff;
    border-radius: 6px;
    border: 0;
    box-shadow: 0 3px 9px 1px var(--v-shadow-key-umbra-opacity),0 9px 8px var(--v-shadow-key-penumbra-opacity),0 1px 6px 4px var(--v-shadow-key-ambient-opacity);
}

.badge{
    font-size: 12px;
}
.badge-success{
    background: rgb(40,199,111) !important;
}
input[type=radio]:checked {
    appearance: none;
    background-color: #7367f0 !important;
    border-color: #7367f0 !important;
    box-shadow: inset 0px 0px 0px 2px #fff;
}
input[type=radio]{
    width: 16px;
    height: 16px;
    appearance: none;
    border-radius: 50%;
    border: 1px solid #a1a0a5;
    transition: 0.3s;
}

#basic-form-layouts .card-footer,
#dom .card-footer,
#search-form .card-footer{
    background: none !important;
}

.select2-selection--multiple:not([class*=bg-]):not([class*=border-]){
    border-radius: 6px !important;
}

.statistics .tab-content{
    background: #f8f7fa;
}

.statistics .nav-tabs{
    margin-bottom: 0;
}

#minimal-statistics{
    padding: 10px;
    border: 1px solid #7366f0;
    border-radius: 6px;
}

.minimal-statistics .card-content .media i{
    background: #eeecfd;
    padding: 6px;
    font-size: 20px !important;
    border-radius: 6px;
    color: #7366f0 !important;
}

.minimal-statistics .card-content .media{
    flex-direction: column;
}


.minimal-statistics .card-content .media h2{
    font-size: 16px;
    color: rgb(51 48 60 / 80%);
    margin: 0;
}

.minimal-statistics .card-content .media h3{
    background: #eeecfd;
    padding: 5px 10px;
    font-size: 18px;
    border-radius: 6px;
    color: #7366f0;
    display: table;
    margin: 0;
}

.stat-all-card{
    display: flex;
    align-items: center;
}

.stat-all-card i{
    background: #eeecfd;
    padding: 10px;
    font-size: 18px;
    border-radius: 6px;
    color: #7366f0;
    margin-left: 10px;
}

.stat-all-card h2{
    font-size: 16px;
    color: rgb(51 48 60 / 80%);
    margin-bottom: 0;
    text-align: right;
}

.stat-all-card span{
    font-size: 16px;
    color: rgb(51 48 60 / 68%);
    display: block;
    text-align: right;
}

.card-stat{
    padding: 10px 20px;
    background:rgba(115,103,240) !important;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    box-shadow: 0 3px 9px 1px var(--v-shadow-key-umbra-opacity),0 9px 8px var(--v-shadow-key-penumbra-opacity),0 1px 6px 4px var(--v-shadow-key-ambient-opacity)!important;
    display: flex;
    align-items: center;
}

.card-stat h3{
    color: #ebe9fa;
    font-size: 20px;
}

.card-stat p{
    background: #fff;
    padding: 5px 10px;
    font-size: 13px;
    color: #7367f0;
    margin: 0 10px 0 0;
    border-radius: 6px;
}

.card-stat .head-total{
    color: #fff;
    font-size: 16px;
}

.total-card span{
    color: #777;
    font-size: 13px;
}

.minimal-statistics .card.h-100{
    margin-bottom: 0 !important;
}

/*.table .btn-group{
    background-color: rgba(115 103 240 / 12%);
    border-radius: 6px;
}

.table .btn-group a{
    margin: 0 !important;
    color: rgba(115,103,240) !important;
    padding: 7px 12px;
    border-radius: 6px;
}

.table .btn-group:hover{
    background: rgba(115,103,240);
}
.table .btn-group:hover a{
    background: rgba(115,103,240);
    color: #fff !important;
}*/

.btn.btn-sm{
    padding: 0.25rem 0.5rem !important;
    font-size: .875rem !important;
}

.breadcrumb-item a{
    color: rgba(115,103,240) !important;
}

.content-wrapper .table-bordered td a span.navi-text{
    color: #fff !important;
}

.header-title h1 span , .header-title small{
    margin-right: 0 !important;
}

.flex-100{
    flex: 1 0 100%;
}

.modal-dialog-scrollable .modal-content{
        overflow: auto;
}

.modal-header{
    padding-bottom: 15px !important;
    border-bottom: thin solid rgba(var(--v-border-color),var(--v-border-opacity))!important;
}

.disabled .badge-success{
    color: #fff !important;
    background-color: #f44336 !important;
}
#basic-form-layouts .form-section{
    color: rgba(51,48,60) !important;
    font-weight: normal !important;
}

.navbar-brand-sm{
    border-radius: 6px;
    background: #fff;
    width: 95%;
    text-align: center;
    color: #abadbf;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
}

.navbar-brand-sm span , .navbar-brand-sm a{
    color: #7367f0;
}

.navbar-brand-sm img{
    height: 30px;
    border-radius: 6px;
    margin-left: 7px;
}

.navbar-brand-sm button{
    color: #7367f0 !important;
}

.navbar-brand-sm button i{
    font-size: 20px;
}

.navbar-collapse .navbar-nav{
    display: flex;
    align-items: center;
}

.navbar-collapse .nav-item span img{
    height: 30px;
    border-radius: 6px;
}

.navbar-collapse .nav-item a{
    color: #7367f0;
    padding: 5px;
}

.dropdown-user{
    font-size: 16px;
}

.dropdown-user i{
    font-size: 25px;
    margin-right: 5px;
    color: #7367f0;
}

.dropdown-user .dropdown-menu{
    background: #fff;
    border-radius: 6px;
    border: 0;
    margin-top: 5px;
    left: -20px !important;
}

.dropdown-user .dropdown-menu .dropdown-item{
    color: #7367f0 !important;
}

.dropdown-user .dropdown-menu .dropdown-item:hover{
    background: #eeecfd;
}

/*media*/

@media (max-width: 1440px){

    .statistics .nav-tabs {
        display: grid;
        grid-auto-flow: column;
        scroll-behavior: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .statistics .nav-link {
        scroll-snap-align: start;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
    }

}

@media (max-width: 1199.9px){}

@media (max-width: 991.9px){
    #tab1 .card-stat{
        display: block !important;
    }
    #tab1 .card-stat .head-total{
        text-align: left;
        margin-top: 10px;
    }
}

@media (max-width: 768px){
    .navbar-dark .navbar-toggler{
        color: #2f3349;
    }
    .navbar-top #navbar-mobile{
        height: auto;
    }
    .select2-container{
        width: 100% !important;
    }
    .navbar .navbar-collapse{
        margin: 0 30px !important;
    }
    .navbar .navbar-collapse .nav-item:nth-child(2),
    .navbar .navbar-collapse .nav-item:nth-child(3){
        display: none !important;
    }
    .navbar .navbar-collapse .nav-item a{
        margin-right: 0 !important;
    }
    .navbar-top #navbar-mobile{
        top: 0;
    }
    .navbar-collapse .navbar-nav{
        display: block;
    }
    .dropdown-user .dropdown-menu{
        margin-top: 0 !important;
    }
    .content.mt-md-0.mt-5,
    .content{
        margin-top: 30px !important;
    }
}

@media (max-width: 575.9px){

    .flex-100 a:nth-child(2){
        margin-top: 10px !important;
    }

}

@media (max-width: 500px){

}
.animate-element {
    display: none;
}
.animate-element-up {
    display: none;
}
.animate-element-from-left {
    display: none;
}
.animate-element-from-right {
    display: none;
}
.animate-card {
    animation-name: slide-in-down;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-25%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1!important;
    }
}
.animate-card-up {
    animation-name: slide-in-up;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes slide-in-up {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1!important;
    }
}
.animate-card-from-left {
    animation-name: slide-in-from-left;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes slide-in-from-left {
    0% {
        transform: translateX(-10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1!important;
    }
}
.animate-card-from-right {
    animation-name: slide-in-from-right;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes slide-in-from-right {
    0% {
        transform: translateX(10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1!important;
    }
}
.fileinput-remove,.fileinput-cancel{
    display: none !important;
}