:root {
    --primary-color: #364f79;
    --secondary-color: #b4a35a;
}

.navbar-brand-box {
    align-items: center;
    display: flex;
    justify-content: center;
}

.navbar-brand-box h3 {
    color: var(--primary-color)
}

#sidebar-menu ul li a,
.btn {
    font-family: 'Noto Sans Arabic', sans-serif !important;
}

.btn {
    font-size: 14px;
}

body {
    font-family: 'Noto Sans Arabic', sans-serif !important;
}


.logo-sm h3 {
    font-size: 14px;
}

body[data-sidebar=dark] .vertical-menu,
body[data-sidebar=dark] .navbar-brand-box,
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a,
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul ul {
    background: #ececf1;
}



body[data-sidebar=dark] .mm-active>a,
body[data-sidebar="dark"] #sidebar-menu ul>li>a.mm-active,
body[data-sidebar="dark"] .mm-active .active {
    background: var(--primary-color);
    color: #fff !important;
}

body[data-sidebar=dark] .mm-active>a i,
body[data-sidebar="dark"] .mm-active .active i,
#sidebar-menu ul li a.mm-active i {
    color: #fff !important;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li ul li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li ul li a:hover i,
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li.mm-active a,
.page-title {
    color: var(--primary-color) !important;
}



body[data-sidebar=dark] #sidebar-menu ul li.mm-active a:hover,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active a:hover i {
    color: #fff !important;
}

.metismenu li {
    font-weight: bold;
}

#sidebar-menu ul li a i {
    font-size: 18px;
}

.btn-primary {
    background: #38decb;
    border-color: var(--primary-color)    ;
}

.btn-primary:hover,
.form-check-input:checked {
    background: var(--primary-color)    ;
    border-color: var(--primary-color)    ;
}


input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: var(--primary-color)     !important;
}

button:focus,
button.active,
.page-item.active .page-link {
    background: var(--primary-color)     !important;
    border-color: var(--primary-color)     !important;
}

button {
    font-size: 16px;
    font-weight: 500;
}

li.mm-active a:hover {
    color: #fff;
}


/* #d7982f , #38decb  */

.margin-r-20 {
    margin-right: 20px;
}

input {
    text-align: right;
}

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