@font-face {
    font-family: "Microgramma";
    src:  url("../fonts/Microgramma D Extended Bold.otf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
:root {
    --blue: #324da0;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #135834;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #f7ab1b;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #e2ece2;
    --dark: #212529;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --y-padding: 0.75rem;
    --top-padding: calc(var(--y-padding) / 2);
    --bottom-padding: calc(var(--y-padding) / 2);
    --x-padding: 0.75rem;
    --left-padding: calc(var(--x-padding) / 2);
    --right-padding: calc(var(--x-padding) / 2);
    --gray-light: #c7c7c7;
    --small-font-size: 9px;
    --normal-font-size: 12px;
    --larg-font-size: 16px
}
* {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html{
    background: #faf9f8;
    height: 100%;
}
body{
    letter-spacing: -.26px;
    line-height: 1.5;
    height: 100%;
}
html, body {
    font-size: var(--normal-font-size);
}
body,button, input, optgroup, select, textarea{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
table {
    font-size: 1rem;
}
.h1, h1{
    font-size:1.75rem;
}
.h2, h2{
    font-size:1.50rem;
}
.h3, h3{
    font-size:1.25rem;
}
.h4, h4{
    font-size:1rem;
}
.h5, h5{
    font-size:0.75rem;
}
.h6, h6{
    font-size:0.5rem;
}
h3,h4,h1,h2,h5,h6{
    color: var(--dark);
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
label {
    margin-bottom: 0;
}
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    position: relative;
    z-index: 999999;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
}
::-webkit-scrollbar:active {
    width: 7px;
    height: 7px;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
}
::-webkit-scrollbar-thumb {
    position: relative;
    z-index: 999999;
    border-radius: 10px;
    -webkit-box-shadow: none;
    background: var(--primary);

}
:active::-webkit-scrollbar,
:hover::-webkit-scrollbar{
    width: 7px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    z-index: 999999;
}
/***************global style ***************/
.mce-branding-powered-by {
    display: none;
}
.input-translations {
    min-width: 400px;
}
.nowrap {
    white-space: nowrap !important;
}
.price {
    text-align: right;
}
.mb-10{
    margin-bottom:10px
}
.mb-15{
    margin-bottom:15px
}
.mb-20{
    margin-bottom:20px
}
.mb-25{
    margin-bottom:25px
}
.mb-30{
    margin-bottom:30px
}
.mb-35{
    margin-bottom:35px
}
.mb-40{
    margin-bottom:40px
}
.mb-45{
    margin-bottom:45px
}
.mb-50{
    margin-bottom:50px
}
.mb-60{
    margin-bottom:60px
}
.mb-70{
    margin-bottom:70px
}
.mb-80{
    margin-bottom:80px
}
.mb-90{
    margin-bottom:90px
}
.mt-5{
    margin-top:5px !important;
}
.mt-10{
    margin-top:10px !important;
}
.mt-15{
    margin-top:15px !important;
}
.mt-20{
    margin-top:20px !important;
}
.mt-25{
    margin-top:25px !important;
}
.mt-30{
    margin-top:30px !important;
}
.mt-35{
    margin-top:35px !important;
}
.mt-40{
    margin-top:40px !important;
}
.mt-45{
    margin-top:45px !important;
}
.mt-50{
    margin-top:50px !important;
}
.mt-60{
    margin-top:60px !important;
}
.mt-70{
    margin-top:70px !important;
}
.mt-80{
    margin-top:80px !important;
}
.mt-90{
    margin-top:90px !important;
}
.w-0 {
    width: 0%!important; max-width: 0%!important; display: none;
}
.w-5 {
    width: 5%!important; max-width: 5%!important;
}
.w-10 {
    width: 10%!important; max-width: 10%!important;
}
.w-15 {
    width: 15%!important; max-width: 15%!important;
}
.w-20 {
    width: 20%!important; max-width: 20%!important;
}
.w-30 {
    width: 30%!important; max-width: 30%!important;
}
.w-35 {
    width: 35%!important; max-width: 35%!important;
}
.w-40 {
    width: 40%!important; max-width: 40%!important;
}
.w-45 {
    width: 45%!important; max-width: 45%!important;
}
.w-55 {
    width: 55%!important; max-width: 55%!important;
}
.w-60 {
    width: 60%!important; max-width: 60%!important;
}
.w-65 {
    width: 65%!important; max-width: 65%!important;
}
.w-70 {
    width: 70%!important; max-width: 70%!important;
}
.w-80 {
    width: 80%!important; max-width: 80%!important;
}
.w-85 {
    width: 85%!important; max-width: 85%!important;
}
.w-90 {
    width: 90%!important; max-width: 90%!important;
}
.w-95 {
    width: 95%!important; max-width: 95%!important;
}
.alert-wrapper{
    width:300px;
    top:10px;
    right:10px;
    position:fixed;
    z-index:100;
    text-align:left
}
.alert-wrapper .alert{
    width:300px;
    padding:15px;
    border-radius:3px;
    display:inline-block;
    box-shadow:0 4px 15.36px .64px rgba(0,0,0,.1),0 2px 6px 0 rgba(0,0,0,.12);
    position:relative;
    -webkit-animation:jelly .5s ease-in-out;
    animation:jelly .5s ease-in-out;
    transform-origin:center top;
    z-index:500;
    margin-bottom:10px
}
.alert-wrapper .alert.alert-error{
    background:#fc6868
}
.alert-wrapper .alert.alert-info{
    background:#204d74
}
.alert-wrapper .alert.alert-success{
    background:#4caf50
}
.alert-wrapper .alert.alert-warning{
    background:#ffc107
}
.alert-wrapper .alert .icon{
    position:absolute;
    right:10px;
    top:10px;
    cursor:pointer
}
.alert-wrapper .alert p{
    color:#fff;
    margin:0;
    padding:0;
    font-size:15px
}
html:lang(ar) .alert-wrapper {
    text-align: right;
}
html:lang(ar) .alert-wrapper .alert .icon {
    left: 10px;
    right: auto;
}
.icon {
    color: var(--secondary);
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    background-size: cover;
}
.eye-icon:after {
    content: "\f06e";
}
.angle-left-icon:after {
    content: "\f104";
}
.cross-icon:after {
    content: "\f00d";
}
.sortable-icon:after {
    content: "\f0c9";
}
.pencil-lg-icon:after {
    content: "\f040";
}
.trash-icon:after {
    content: "\f2ed";
}
.full-width{
    width: 100% !important;
}
.as-link:not(.fa){
    color: var(--primary);
}
.as-link:hover, .fa-as-link:hover {
    text-decoration: none;
}
.as-link, .fa-as-link{
    cursor: pointer;
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.required:after {
    content: " *";
    white-space: pre;
    color: rgb(252, 104, 104);
    box-sizing: border-box;
    font-weight: 700;
    display: inline-block;
}

/**************over write main icon****************/
.eye-icon:after,
.angle-left-icon:after,
.angle-right-icon:after,
span.icon.cross-icon:after,
span.icon.sortable-icon:after,
span.icon.pencil-lg-icon:after,
span.icon.trash-icon:after ,
.active.arrow-down-icon:after{
    font: normal normal normal 11px/1 'Font Awesome 5 Pro';
}
span.icon.cross-icon:after {
    content: "\f00d";
}
.angle-left-icon:after {
    content: "\f104";
}
.angle-right-icon:after {
    content: "\f105";
}
/************************ navbar-top ***********************/

.navbar-top-right .system-actions ul li.current-clock, .current-clock{
    color: #fff;
    margin: 0 5px;
    font-size: 11px;
}
.navbar-top-right .system-actions ul li.current-clock >ul li{
    display: inline-block;
    color: #fff;
    left: 0;
    top: 0;
    margin: 0;
}
.navbar-top-right .system-actions ul.clock-date li{
    display: inline-block;
}
.navbar-top-right .system-actions ul li.current-clock span {
    /*font-size: 12px;*/
}
.navbar-top {
    background-color: var(--primary);
    border-bottom: none;
    height: 48px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 5;
    font-size: 0;
}
.navbar-top .navbar-top-left {
    padding: 0px 10px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    height: 48px;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
.navbar-top .navbar-top-right {
    background: transparent;
    height: 48px;
    width: 50%;
    /*text-align: right;*/
    display: inline-block;
    vertical-align: middle;
}
.navbar-top .navbar-top-left .brand-logo {
    display: inline-block;
    float: left;
    padding: 10px;
}

html:lang(ar) .navbar-top .navbar-top-left .brand-logo {
    float: right;
}

.navbar-top .navbar-top-right .profile-info {
    display: block;
    text-align: revert;
    padding: 0px;
    height: 48px;
    vertical-align: middle;
    min-width: 50px;
    margin: 0 25px 0 30px;
    font-size: 1.25rem;
    cursor: pointer;
    position: relative;
}

.navbar-top .navbar-top-right .profile-info i.icon {
    display: none;
}

.navbar-top-right .system-actions .search-box i{
    position: absolute;
    left: 15px;
    top: 7px;
    /*font-size: 15px;*/
    color: #153083;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.navbar-top-right .system-actions .search-box input.search-btn {
    color: #153083;
    background: #e8edff;
    width: 132px;
    border-radius: 5px;
    padding: 5px;
    padding-left: 40px;
    border: none;
    text-transform: capitalize;
    /*font-size: 12px;*/
}
.navbar-top-right .system-actions ul li{
    display: inline-block;
    margin: 0 10px;
    color: #000;
    position: relative;
}
.navbar-top-right .system-actions ul li a,
.navbar-top-right .system-actions ul li a:link{
    color: #000;
}
.navbar-top-right .system-actions ul li ul li {
    display: block;
    /*font-size: 13px;*/
}
.navbar-top-right .system-actions ul li a span{
    /*font-size: 12px;*/
}
.navbar-top-right .system-actions ul li a i{
    color: #fff;
}
.navbar-top-right .system-actions ul li  hr{
    margin-bottom: 10px;
}
.navbar-top-right .user-dropdown .dropdown-toggle::after{
    display: none;
}
.navbar-top-right .system-actions ul li:last-child{
    margin-right: 0px;
    position: relative;
    top: 5px;
    left: 10px;
}

html:lang(ar) .navbar-top-right .system-actions ul li:last-child{
    left: -20px
}

.system-actions {
    padding-top: 4px;
}
.navbar-top-right .system-actions ul li.user-dropdown i.fa.fa-user-circle {
    color: #8aa5f8;
    font-size: 25px;
    /*top: 5px;*/
    position: relative;
}
.navbar-top-right .system-actions ul li.user-dropdown i.fa-user-circle:before {
    background: #fff;
    border-radius: 50%;
}
.navbar-top-right .system-actions ul li.user-dropdown i.fa-user-circle:before {
    background: #fff;
    border-radius: 50%;
}

/*new date style on nav top */
.navbar-top-right .system-actions ul li.dropdown.dropdown-date {
    margin-right: -30px;
    top: 7px;
}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date .dropdown-toggle::after {
    color: #fff;
}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date a i.fas {
    /*font-size: 20px;*/
}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date li.current-clock {
    color: #000;
    text-align: center;

}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date ul li.current-clock >ul li {
    color: #000;
}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date >ul li:last-child{
    left: 0;
}
.navbar-top-right .system-actions ul li.dropdown.dropdown-date .dropdown-menu,
.navbar-top-right .system-actions ul li.dropdown.user-dropdown .dropdown-menu{
    border-radius: 0 0 0.25rem 0.25rem;
    border-bottom: 2px solid var(--primary);
    cursor: default;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list {
    left: 12px;
}

.navbar-top .navbar-top-right .profile-info .dropdown-list {
    top: 63px;
    right: 0!important;
    bottom: inherit!important;
}

.navbar-top .navbar-top-right .profile-info .name{
    /*font-size: 13px;*/
    line-height: 20px;
    position: relative;
    top: 10px;
}
.navbar-top .navbar-top-right .profile-info .role {
    /*font-size: 13px;*/
    visibility: hidden;
}
/*Animate infinite loop of date*/
.navbar-top-right .system-actions ul.clock-date {
    width: 126px;
    height: 26px;
    overflow: hidden;
    position: relative;
    left: 25px;
    top: 5px;
}
.navbar-top-right .system-actions ul.clock-date li#todayAr{
    left: 0;
}
.navbar-top-right .system-actions ul.clock-date> li.word {
    display: inline-block;
    opacity:0;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 30%;
}

html:lang(ar) .navbar-top-right .system-actions ul.clock-date {
    left: 0;
    right: 25px;
    direction: ltr;
    text-align: left;
}


.w1 {
    animation: w1anim 25s infinite;
}

.w2 {
    animation: w2anim 25s infinite;
}

.w3 {
    animation: w3anim 25s infinite;
}

.w4 {
    animation: w4anim 20s infinite;
}

.w5 {
    animation: w5anim 20s infinite;
}



@keyframes w1anim {
    0%{
        opacity: 0;
    }
    17.5%{
        opacity: 1;
    }
    35% {
        opacity:0;
    }
}


@keyframes w2anim {
    35%{
        opacity: 0;
    }
    52.5%{
        opacity: 1;
    }
    70% {
        opacity:0;
    }
}

@keyframes w3anim {
    70%{
        opacity: 0;
    }
    87.5%{
        opacity: 1;
    }
    100% {
        opacity:0;
    }
}

@keyframes w4anim {
    80%{
        opacity: 0;
    }
    90%{
        opacity: 1;
    }
    100% {
        opacity:0;
    }
}

@keyframes w5anim {
    80%{
        opacity: 0;
    }
    90%{
        opacity: 1;
    }
    100% {
        opacity:0;
    }
}

.navbar-top-right .system-actions .main-menu {
    text-align: right;
}

html:lang(ar) .navbar-top-right .system-actions .main-menu {
    text-align: left;
}

/****************brand-logo*******************/
.brand-logo span {
    font-family: Microgramma;
    font-weight: 600;
    color: #fff;
    margin-top: 3px;
    display: block;
    font-size: 1.25rem !important;
}
.brand-logo img {
    /*width: 140px;*/
    height: 48px;
    width: auto;
}

.selectedCompany {
    top: 15px;
    font-weight: 400;
    font-size: 1.125rem !important;
    color: #fff;
    border-left: 2px solid #fff;
    padding: 0 10px;
    margin-top: 0;
    position: relative;
}

html:lang(ar) .selectedCompany {
    border-left: none;
    border-right: 2px solid #fff;
    float: right !important;
}

li.dropdown.user-dropdown.dropdown-open {
    position: relative;
    top: 6px;
}

/****************lang*******************/
.lang-dropdown {
    display: none;
    background: #fff;
    border-radius: 0px;
    margin-top: 2px;
    position: relative;
    z-index: 66;
    color: #000;
}

.lang-text {
    display: inline-block;
    margin-left: 0px;
    vertical-align: top;
    margin-top: 0;
    position: relative;
    top: 8px;
    color: #fff;
    font-size: 12px;
    padding: 0;
}

.lang-dropdown .lang-text a{
    color: #000 !important;
}
.current-lang {
    background: transparent;
    border-radius: 10px;
    color: #fff;
    text-align: center !important;
    padding: 5px;
    height: 43px;
    overflow: hidden;
}
.lang-flag {
    width: 17px;
    display: inline-block;
    position: relative;
    top: -2px;
    border-radius: 50%;
}
.current-lang .lang-flag {
    top: 10px;
    display: none;
}
.switch-lang {
    width: 65px;
    text-align: left;
    cursor: pointer;
    float: right;
}
.switch-lang:hover .lang-dropdown {
    display: block;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s, width 0s ease 0.5s, height 0s ease 0.5s;
    transition: opacity 0.5s, transform 0.5s, width 0s ease 0.5s, height 0s ease 0.5s;
}

html:lang(ar) .switch-lang {
    float: left;
}
/****************notifications*******************/
.notifications-container svg{
    width: 17px;
    position: relative;
    top: 7px;
    left: -5px;
}
.notifications-container svg path{
    fill: #fff;
}
.notifications-container:after {
    border: 10px solid transparent;
    border-bottom-color: var(--primary);
    content: '';
    display: block;
    height: 0;
    left: 10px;
    position: absolute;
    top: -20px;
    width: 0;
}
.notifications-container {
    padding: 2px 0;
    float: right;
    padding-top: 5px;
}

html:lang(ar) .notifications-container {
    float: left;
    margin-left: 5px;
}

.notification {
    width: 50px;
    height: inherit;
    color: #c82121;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 7px;
    margin: 0 5px;
    font-size: 2.5rem;

}
.notification.inside-table {
    /*font-size: 15px;*/
    top: 0px;
    display: inline-block;

}
.notification::after {
    min-width: 20px;
    height: 20px;
    content: attr(data-count);
    background-color: transparent;
    border: 1px solid;
    font-family: monospace;
    font-weight: bold;
    /*font-size: 14px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    right: 12px;
    transition: .3s;
    opacity: 0;
    transform: scale(.5);
    will-change: opacity, transform;
}
.notification.show-count::after {
    opacity: 1;
    transform: scale(1);
}
.notification::before {
    content: "\f0f3";
    font-family: "Font Awesome 5 Pro";
    display: block;
}
.notification.notify::before {
    animation: bell 1s ease-out;
    transform-origin: center top;
}
.show-notifications {
    position: relative;
    margin-right: 10px;
    padding: 0;
}
.show-notifications:hover #icon-bell,
.show-notifications:focus #icon-bell,
.show-notifications.active #icon-bell {
    fill: #a3a3a3;
}
.show-notifications #icon-bell {
    fill: #a3a3a3;
}
.show-notifications .notifications-count {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: transparent;
    color: #fff;
    height: 16px;
    line-height: 15px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 5px;
    min-width: 16px;
    /*font-size: 12px;*/
    font-weight: 700;
}
.notifications.js-notifications.active {
    height: 60vh;
    overflow: auto;
    left: auto;
    right: 0;
}
.notifications.js-notifications {
    width: 362px;
    height: 0px;
    border-radius: 10px;
    transition: 0.5s;
    position: absolute;
    overflow-y: scroll;
    padding: 0px;
    right: 0px;
    margin-top: 5px;
    background-color: #fff;
    -webkit-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
    box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
    cursor: context-menu;
}
.notifications h3,
.notifications .show-all {
    background: transparent;
    color: var(--primary);
    margin: 0;
    padding: 10px;
    width: 100%;
}
.notifications h3 {
    cursor: default;
    /*font-size: 13px;*/
    font-weight: normal;
    text-align: center
}
.notifications .show-all {
    display: block;
    text-align: center;
    text-decoration: none;
    /*font-size: 12px;*/
}
.notifications .show-all:hover,
.notifications .show-all:focus {
    text-decoration: underline;
}
.notifications .notifications-list {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.notifications .notifications-list .item {
    -webkit-transition: -webkit-transform 0.25s ease-out 0.1s;
    -moz-transition: -moz-transform 0.25s ease-out 0.1s;
    -o-transition: -o-transform 0.25s ease-out 0.1s;
    transition: transform 0.25s ease-out 0.1s;
    border-top: 1px solid #bdc3c7;
    color: #7f8c8d;
    cursor: default;
    display: block;
    padding: 10px;
    position: relative;
    white-space: nowrap;
    width: 350px;
}
.notifications .notifications-list .item:before,
.notifications .notifications-list .item .details,
.notifications .notifications-list .item .button-dismiss {
    display: inline-block;
    vertical-align: middle;
}
.notifications .notifications-list .item:before {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: var(--primary);
    content: '';
    height: 8px;
    width: 8px;
}
.notifications .notifications-list .item .details {
    margin-left: 10px;
    white-space: normal;
    width: 280px;
}
.notifications .notifications-list .item .details .title,
.notifications .notifications-list .item .details .date {
    display: block;
}
.notifications .notifications-list .item .details .date {
    color: #95a5a6;
    font-size: 0.85em;
    margin-top: 3px;
}
.notifications .notifications-list .item .button-dismiss {
    color: #bdc3c7;
    font-size: 2.25em;
}
.notifications .notifications-list .item .button-dismiss:hover,
.notifications .notifications-list .item .button-dismiss:focus {
    color: #95a5a6;
}
.notifications .notifications-list .item.no-data {
    display: none;
    text-align: center;
}
.notifications .notifications-list .item.no-data:before {
    display: none;
}
.notifications .notifications-list .item.expired {
    color: #bdc3c7;
}
.notifications .notifications-list .item.expired:before {
    background: #bdc3c7;
}
.notifications .notifications-list .item.expired .details .date {
    color: #bdc3c7;
}
.notifications .notifications-list .item.dismissed {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.notifications.empty .notifications-list .no-data {
    display: block;
    padding: 10px;
}
.button-default {
    -webkit-transition: 0.25s ease-out 0.1s color;
    -moz-transition: 0.25s ease-out 0.1s color;
    -o-transition: 0.25s ease-out 0.1s color;
    transition: 0.25s ease-out 0.1s color;
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    outline: none;
    position: relative;
}
.button-default:focus{
    outline: none !important;
}

/*****************************navbar-left******************************/
/*****************************navbar-left******************************/
/*****************************navbar-left******************************/
.navbar-left .menubar::-webkit-scrollbar-thumb {
    background: #f3f6fa;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;

}
.navbar-left .menubar::-webkit-scrollbar-thumb:active ,
.navbar-left .menubar:hover::-webkit-scrollbar-thumb{
    /* width: 10px;
    border: 10px solid var(--primary); */

}
.navbar-left .menubar::-webkit-scrollbar,
.navbar-left .menubar:active::-webkit-scrollbar,
.navbar-left .menubar:hover::-webkit-scrollbar {
    width: 4px;
}

.navbar-left .menubar:hover::-webkit-scrollbar-thumb,
.aside-nav:hover::-webkit-scrollbar-thumb{
    background: var(--primary);
}

.navbar-left {
    position: fixed;
    left: 0;
    border-right: 1px solid hsla(0,0%,63.5%,.2);
    bottom: 0;
    z-index: 10;
    width: 250px;
    /* height: auto; */
    /* min-height: 100%; */
    /* overflow-y: auto; */
    padding-top: 0px;
    padding-bottom: 80px;
    padding-right: 0px;
    /*background-color: #f3f2f1;*/
    background-color: var(--light);
    color: #333333;
    /*font-size: 12px;*/
    font-weight: 400;
    border-right: 1px solid #e1dfdd;
    -webkit-transition: 0.15S all;
    transition: 0.15S all;    
    top: 48px;
}
html:lang(ar) .navbar-left {
    left: auto;
    right: 0;
}

.navbar-left .menubar {
    overflow-y: auto;
    height: 100%;
}
.navbar-left ul li ul {
    display: none;
}
.navbar-left ul li ul.open {
    display:block;
}
.navbar-left ul li.menu-item.active>ul {
    display:block;
}
html:lang(ar) .navbar-left ul li a i:before {
    content: "\f104";
}
.navbar-left ul li.menu-item.active>ul a i.mdi-flip-v:before,
.navbar-left ul li a i.mdi-flip-v:before,
html:lang(ar) .navbar-left ul li a i.mdi-flip-v:before {
    content: "\f107";
}
.navbar-left ul li a i {
    /*position: absolute;
    right: 5px;*/
    line-height: 1.5;
    color: #a2a3b7;
    /*font-size: 12px;
    top: 22px;
    transform: translateY(-50%);
    padding: 5px;
    border-radius: 50%;
    */
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
html:lang(ar) .navbar-left ul li a i {
    right: auto;
    left: 5px;
}
.navbar-left ul.menubar li.menu-item {
    text-align: inherit;
    margin-bottom: 2px;
    /*font-size: 11px;*/
    text-transform: uppercase;
}
.navbar-left li {
    padding: 0.25rem 0rem;
}
.navbar-left ul.menubar li.menu-item a {
    padding-top: 0.0rem;
    padding-bottom: 0.0rem;
    padding-right: 0;
    padding-left: 1rem;
    /*display: block;*/
    display:flex;
    width: 100%;
    /*padding-right: 35px;*/
    position: relative;
    color: #000;
    text-decoration: none;
    height: 25px;
}
html:lang(ar) .navbar-left ul.menubar li.menu-item a{
    padding-right: 1rem;
    padding-left: 0;
}
.navbar-left ul.menubar li.menu-item >a:before{
    content: "";
    position: absolute;
    top: 10%;
    height: 80%;
    width: 6px;
    left: 5px;
    background-color: var(--primary);
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
    opacity: 0;
}
html:lang(ar) .navbar-left ul.menubar li.menu-item >a:before {
    left: auto;
    right: 5px;
}

.navbar-left ul.menubar li.menu-item a span.admin-icons {
    width: 24px;
    /*height: 20px;*/
    -webkit-transition: 0.15s all;
    transition: 0.15s all;
    /*position: absolute;*/
    left: 15px;
    margin-right: 4px;
    font-size: 1.5rem;
    color: #ccc;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    /*text-align: center;*/
    flex-grow: 0;
}
html:lang(ar) .navbar-left ul.menubar li.menu-item a span.admin-icons {
    margin-left: 4px;
    margin-right: 0px;
}
.navbar-left ul.menubar li.menu-item.active a span.admin-icons,
.navbar-left ul.menubar li.menu-item a:hover span.admin-icons{
    color: var(--primary);
}
.navbar-left ul.menubar li.menu-item a:hover:before ,
.navbar-left ul.menubar li.menu-item.active a:before{
    opacity: 1;
}
.navbar-left ul.menubar li.menu-item > a:hover,
.navbar-left ul.menubar li.menu-item.active>a{
    background-color: var(--white);
}
.navbar-left ul.menubar li.menu-item a span {
    color: #333333;
    display: inline-block;
    /*font-size: 12px;*/
    font-weight: bold;
    white-space: nowrap;
    /*white-space: pre-wrap;*/
    /*position: relative;*/
    word-break: break-all;
    left: 30px;
    padding-top: 0px;
    text-transform: capitalize;
    /*width: 135px;*/
    width: calc(100% - 50px);
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-left ul.menubar li>a span:hover,
.navbar-left ul.menubar li.active>a span{
    color: var(--primary);
    text-decoration: underline;
}
.navbar-left ul.menubar li.menu-item ul {
    /*padding: 0 0 0 0.5rem;*/
    padding: 0;
    padding-left: 1.75rem;
    background-color: var(--white);
}
html:lang(ar) .navbar-left ul.menubar li.menu-item ul {
    padding-left: 0;
    padding-right: 1.75rem;
}
.navbar-left .toggle-menu-btn,.navbar-left a.toggle-menu-btn:link{
    color: #333333;
    /*padding: 5px 20px;*/
    padding: 0.25rem 0 0.25rem 1rem;
    display: block;
    position: relative;
    /* margin-top: 5px;
    margin-bottom: 0px; */
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
    font-size: 1.5rem;
    border-bottom: 1px solid #dfdfdf;
}
html:lang(ar) .navbar-left .toggle-menu-btn {
    padding-left: 0;
    padding-right: 1rem;
}
.navbar-left .toggle-menu-btn:hover{
    color: var(--primary);
}
.navbar-left .toggle-menu-btn:hover{
    color: var(--primary);
}
.navbar-left.collapsed {
    width: 45px;
    /*overflow: hidden;
    display: block;*/
}
.navbar-left ul.menubar li.menu-item.hasSubmenu>a:after{
    position: absolute;
    right: 15px;
    content: "\f105";
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    top: 20%;
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
}
.navbar-left ul.menubar li.menu-item.active.hasSubmenu>a:after{
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg)
}
.navbar-left ul.menubar li.menu-item.hasSubmenu>a:after
{
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
}
.navbar-left.collapsed>ul.menubar li.menu-item i,
.navbar-left.collapsed>ul.menubar li.menu-item ul,
.navbar-left.collapsed>ul.menubar li.menu-item span.icon-details,
.navbar-left.collapsed ul.menubar li.menu-item.hasSubmenu>a:after,
.navbar-left.collapsed>ul.menubar li.menu-item>a:before,
.navbar-left.collapsed ul.menubar li.menu-item >ul.sub-menu li h6,
.navbar-left.collapsed ul.menubar li.menu-item >ul.sub-menu li span{
    opacity: 0;
    display: none!important;
}
/*.navbar-left.collapsed ul.menubar li.menu-item a,*/
/*
.navbar-left.collapsed  ul.menubar li.menu-item a span {
    left: 10px;
    top: 6px;
}
*/
.navbar-left.collapsed ul.menubar li.menu-item {
    margin-bottom: 2px;
}
.navbar-left.collapsed .toggle-menu-btn,
.navbar-left.collapsed a.toggle-menu-btn:link{
    /*padding: 5px 15px;*/
    /*padding: 0.5rem 1.5rem;*/
}
.navbar-left .toggle-menu-btn i {
    width: 24px;
    /*text-align: center;*/
}
.navbar-left ul.menubar li.menu-item> ul.sub-menu {
    padding: 0;
    padding-left: 24px;
    border: none;
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
    display: none;
}
.navbar-left ul.menubar li.menu-item.active> ul.sub-menu {
    display: block;
}
.navbar-left ul.menubar li.menu-item ul.sub>-menu li h6 {
    /*font-size: 12px;*/
    font-weight: 600;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 15px;
}
.navbar-left ul.menubar li.menu-item ul.sub->menu li span {
    /*font-size: 10px;*/
    font-weight: 300;
    padding-left: 20px;
    padding-right: 15px;
    display: block;
}

/******************* content-container *****************/
.content-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;
    padding-left: 250px;
    overflow-x: hidden;
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
    margin-top: 48px;
    background: #faf9f8;
}
html:lang(ar) .content-container{
    padding-right: 250px;
    padding-left: 0;    
}
html:lang(ar) #app.nav-collapsed .content-container {
    padding-right: 45px;
    padding-left: 0;
}
.content-container .content {
    margin-top: 0;
    height: 100%;
    max-width: 100%;
    position: relative;
}
.content-container .inner-section {
    height: 100%;
}
.content-container .content-wrapper.with-no-margin{
    margin-left: 0 !important;
}

.content-container .content.full-page {
    padding: 0;
    position: relative;
    margin-top: 0;
    max-width: 100%;
}
.content-container .aside-nav ul li ul.close-nav-aside {
    padding: 0;
    display: block;
    background: #fff;
}
.content-container .aside-nav ul li.active-submenu.has-submenu ul li a i {
    display: none;
}
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside {
    padding: 0;
    background: #fff;
}
.content-container .aside-nav ul li ul.close-nav-aside li a {
    background-color: transparent;
    color: #000;
    margin: 0;
    /*padding: 0.25rem 0.5rem;*/
    border: none;
    transition: all 0.15s ease-in-out;

}
.content-container .aside-nav ul li ul.close-nav-aside li a i,
.content-container .aside-nav ul li.active ul.close-nav-aside li a i{
    display: none;
}
.content-container .aside-nav ul li ul.close-nav-aside li.active> a{
    background-color: #f3f6fa;
}
.content-container .aside-nav ul li ul.close-nav-aside li.active > a:before {
    opacity: 1;
}
.inner-section .aside-nav>ul>span {
    margin-bottom: 2px;
    display: block;
}
.content-container .aside-nav a {
    background: #fff;
    transition: all 0.15s ease-in-out;
    border-bottom: none;
    position: relative;

}
.content-container .aside-nav ul li a:before,
.content-container .aside-nav a:before{
    content: "";
    position: absolute;
    top: 10%;
    height: 80%;
    width: 3px;
    left: 5px;
    background-color: var(--primary);
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
    opacity: 0;
}
.content-container .aside-nav ul li.has-submenu ul.close-nav-aside a:before{
    left: 13px;
    width: 2px;
}
.content-container .aside-nav .active a {
    border-bottom: none;
    position: relative;
}
.content-container .aside-nav>ul>li>a:hover,
.content-container .aside-nav>ul>li.active,
.content-container .aside-nav>ul>li.active>a,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside a:hover,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside li.active> a{
    background: #edebe9;
    transition: all 0.15s ease-in-out;
    color: #000;
}
.content-container .aside-nav>ul>li.no-active-link>a:hover,
.content-container .aside-nav>ul>li.no-active-link.active,
.content-container .aside-nav>ul>li.no-active-link.active>a,
.content-container .aside-nav ul li.no-active-link.active-submenu ul.close-nav-aside a:hover,
.content-container .aside-nav ul li.no-active-link.active-submenu ul.close-nav-aside li.active a{
    background: #fff;
    transition: all 0.15s ease-in-out;
    color: #000;
}
.content-container .aside-nav ul li.active-submenu.has-submenu a i.angle-right-custom:before,
.content-container .aside-nav ul li.has-submenu a i.angle-right-custom:before{
    content: "\f107";
    transition: all 0.15s ease-in-out;
}
.content-container .aside-nav ul li.has-submenu.no-active-submenu a i.angle-right-custom:before{
    content: "\f105";
}
.content-container .aside-nav >ul >li.active-submenu>a {
    background-color: #edebe9;
}
.content-container .aside-nav >ul >li.has-submenu>a {
    cursor: cell;
    border: none;
}
.content-container .aside-nav ul li ul.close-nav-aside a{
    /*font-size: 10px;*/
}
.content-container .aside-nav ul li ul.close-nav-aside li a:hover,
.content-container .aside-nav ul.has-submenu ul li a:hover,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside a:hover,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside li.active >a,
.content-container .aside-nav a:hover{
    background: #c7e0f4;
    color: var(--primary);
    font-weight: 600;
}
.content-container .aside-nav a.collapse-pages:hover {
    background: transparent;
}
.content-container .aside-nav ul li ul.close-nav-aside li a:hover:before,
.content-container .aside-nav ul.has-submenu ul li a:hover:before,
.content-container .aside-nav>ul> li>a:hover:before,
.content-container .aside-nav>ul>li.active>a:before,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside a:hover:before,
.content-container .aside-nav ul li.active-submenu ul.close-nav-aside li.active > a:before,
.content-container .aside-nav a:hover:before{
    opacity: 1;
}
.content-container .aside-nav a.collapse-pages:hover:before {
    opacity: 0;
}
.content-container .aside-nav ul li ul.close-nav-aside li a:hover:before {
    opacity: 1;
}
.content-container .aside-nav>ul> li.no-active-link>a:hover:before,
.content-container .aside-nav>ul>li.no-active-link.active>a:before,
.content-container .aside-nav ul li.no-active-link.active-submenu ul.close-nav-aside a:hover:before,
.content-container .aside-nav ul li.no-active-link.active-submenu ul.close-nav-aside li.active a:before{
    opacity: 0;
}
.content-container .aside-nav >ul> li {
    background: #fff;
    transition: all 0.15s ease-in-out;
    position: relative;
    z-index: 11;
}
.content-container .aside-nav .active i {
    float: right;
    position: absolute;
    right: 15px;
    z-index: 22;
}
.content-container .aside-nav .active i{
    display: none;
}
.content-container .aside-nav .active.has-submenu i{
    display: block;
}
.content-container .aside-nav>ul> li.active.has-submenu,.content-container .aside-nav>ul> li:hover{
    border-color: #fff !important;
}
.content-container .aside-nav>ul>.active>a {
    color: var(--primary);
}
.content-container .aside-nav ul li ul.close-nav-aside li {
    -webkit-transition: 0.15s all;
    transition: 0.15s all;
    border-bottom: none;
    position: relative;
    margin-bottom: 1px;
}
.content-container .aside-nav ul li ul.close-nav-aside li:last-child {
    margin-bottom: 0;
}
.content-container .aside-nav ul li ul.close-nav-aside li:after {
    height: 2px;
    width:0;
    position: absolute;
    left:0;
    right: 0;
    bottom:0;
    content:"";
    -webkit-transition: 0.15s all;
    transition: 0.15s all;
    display: none;
}
.content-container .aside-nav ul li ul.close-nav-aside li:hover:after {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    width:100%;
}
.content-container .aside-nav ul li.active-submenu a i {
    transition: all 0.15s ease-in-out;
}
.content-container .aside-nav ul li.active-submenu.has-submenu a i {
}
.content-container .aside-nav .has-submenu i {
    float: right;
    position: absolute;
    right: 15px;
    z-index: 22;
    cursor: cell;
}
.content-container .aside-nav {
    top: 48px;
    padding-top: 0;
    width: 190px;
    position: fixed;
    bottom: 0;
    border-right: 1px solid hsla(0,0%,63.5%,.2);
    background-color: #fff;
    padding-bottom: 10px;
    z-index: 1;
    -webkit-transition: 0.3S all;
    transition: 0.3S all;
    overflow: auto;
}
.content-container .aside-nav>ul>li {
    border: none !important;
    position: relative;
    z-index: 11;
    margin: 0;
    margin-bottom: 1px;
    background: #eee;
}
.content-container .aside-nav a {
    background: transparent;
    transition: all 0.15s ease-in-out;
    border-bottom: none;
    /*font-size: 11px;*/
    padding: 5px 12PX;
    display: block;
    color: #000311;
}

.content-container .aside-nav .has-submenu i {
    float: right;
    position: absolute;
    right: 15px;
    z-index: 22;
    cursor: cell;
}
.angle-right-custom, .content-container .aside-nav .has-submenu .angle-right-custom {
    /*font-size: 14px;*/
    width: 60px;
    text-align: right;
    height: 30px;
    top: 10px;
}
.content-container .content-wrapper {
    padding: 0;
    background-color: #faf9f8;
    margin-left: 190px !important;
    margin-top: 0px;
    height: 100%;
    webkit-transition: 0.3S all;
    transition: 0.3S all;
}

.content-container .content-wrapper.asid-collapsed,
body:not(.sidebar-mini-md) .content-container .content-wrapper.asid-collapsed {
    margin-left: 40px !important;
    -webkit-transition: 0.3S all;
    transition: 0.3S all
}
.content-container .aside-nav h5 {
    /*font-size: 14px;*/
    font-weight: 600;
    padding: 5px;
    padding-bottom: 0;
    position: relative;
    line-height: 34px;
}
.content-container .aside-nav h5  a{
    display: block;
    color: #333333;
}
.content-container .aside-nav h5 a.collapse-pages {
    display: inline-block;
    float: right;
    cursor: pointer;
}
.content-container .aside-nav h5  i{
    color: #999;
    /*font-size: 22px;*/
    position: relative;
    top: -3px;
    left: 5px;
    float: right;
    -webkit-transition: 0.3S all;
    transition: 0.3S all
}

.content-container .aside-nav.collapsed{
    background-color: transparent;
    border: 1px solid transparent;
    min-height: auto;
    transform: translateX(-150px);
    -webkit-transform: translateX(-150px);
    -moz-transform: translateX(-150px);
}
#app.collapsed .content-container .aside-nav.collapsed{
    transform: translateX(-150px);
    -webkit-transform: translateX(-150px);
    -moz-transform: translateX(-150px);
    z-index: 10;
}
#app.nav-collapsed .content-container .content-wrapper.asid-collapsed {
    margin-left: -190px !important;
}
#app.nav-collapsed .content-container {
    padding-left: 45px;
}
#app.collapsed .content-container .content-wrapper.asid-collapsed{
    margin-right: 0px !important;
    margin-left: 40px !important;
}
.content-container .aside-nav.collapsed span,
.content-container .aside-nav.collapsed ul{
    display: none;
}
.content-container .aside-nav.collapsed {
    height: 39px;
    overflow: hidden;
    border-bottom: 1px solid #e1dfdd;;

}
.content-container .aside-nav.collapsed.collapsed h5 i:before {
    position: relative;
    top: 3px;
}
.content-container .aside-nav.collapsed.collapsed h5 i{
    position: relative;
    top: 0;
    background: #f3f2f1;
    margin: 0;
    left: 0;
    display: block;
    width: 44px;
    line-height: 15px;
    height: 31px;
    padding: 0 17px;
    border-bottom: 1px solid #e1dfdd;
}
.content-container .aside-nav.collapsed.collapsed h5 i:before{
    content: "\f101";
}
.content-container .aside-nav.collapsed h5, .content-container .aside-nav.collapsed h5 a {
    background: #f3f2f1;
    margin: 0;
    padding-right: 0;
}
 .content-container .aside-nav h5 a:hover i{
    transition: all .15s ease;
    color: var(--primary);
}
.content-container .content .page-header {
    display: inline-block;
    width: 100%;
    padding: 1rem 1rem;
    /*margin-top: 40px;
    margin-bottom: 10px !important;*/
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color: #faf9f8;
    border-bottom: 0;
    z-index: 4;
}
.content-container .content .form-container.with-padding .page-header {
    padding: 10px 0;
    margin-top: 25px;
}
.content-container .content .page-content .page-header {
    padding: 10px 0;
    margin-top: 30px;
}
.content-container .content .page-header-style{
    padding: 15px;
    margin-top: 40px;
}
.content-container .content .page-header.with-scroll{
    top: 0;
}
.content-container .content .page-header .page-title {
    float: left;
}
.content-container .content .page-header .page-title h1 {
    vertical-align: middle;
    display: inline-block;
    /*line-height: 26px;
    font-size: 16px;*/
    padding: 0;
    text-transform: capitalize;
}
.content-container .content .page-header .page-action {
    float: right;
    margin-bottom: 0;
    position: relative;
}
html:lang(ar) .content-container .content .page-header .page-title {
    float: right;
}
html:lang(ar) .content-container .content .page-header .page-action {
    float: left;
}
.content-container .content .page-header .page-action * {
    display: inline-block;
}
.content-container .content .page-header .page-action * {
    display: inline-block;
}
.content-container .content .page-header .page-action button {
    display: inline-block;
    margin: 0;
}
/*
.content-container .content .page-header .page-action a {
    font-size: 12px;
    margin-bottom: 0px;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding: 4px 20px 3px 20px;
}
.content-container .content .page-header .page-action a {
    margin-left: 10px;
}
*/
.content-container .content .page-header .control {
    width: 100%;
    margin: 0;
}
.content-container .content .page-header .control-group {
    width: 100px;
    display: inline-block;
    margin-bottom: 0;
    margin-left: 5px;
}
.content-container .content .page-content {
    width: 100% !important;
    display: inline-block;
    padding-bottom: 50px !important;
}
.content-container .content > form {
}
.content-container .content > form .page-content {
    padding: 0;
}
.content-container .content .form-container{
    padding: 0;
}
.content-container .content .page-content .form-container {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.content-container .content .page-content .form-container.header-action {
    margin-top: 40px !important;
}
.content-container .content .page-content .form-container.header-action h1 {
    /*font-size: 16px;*/
    padding: 10px 0;
}
.content-container .content .page-header .page-title .back-link:after {
    content: "\f104";
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';
    position: relative;
    top: 0px;
    left: 3px;
    z-index: 22;
}
.content-container .content .page-header .page-title .back-link {
    float: left;
    margin-right: 10px;
    width: auto;
    height: auto;
    cursor: pointer;
    margin-top: 5px;
    background: none;
    margin-top: -1px;
    /*font-size: 14px;*/
}
.content-container .content .page-content .page-header.sub-page-header {
    margin: 0;
    padding-bottom: 0;
}
.content-container .content .page-header .page-title .inner-header{
    /*font-size: 12px;*/
    font-weight: 600;
    padding: 5px 15px;
}
.content-container .content .page-header .page-title .inner-header span{
    font-weight: 400;
}
.content-container .content-wrapper .mce-panel {
    margin-top: 10px;
}
.content-container .content .page-header .page-action span.btn{
    margin-bottom: 0;
}
.content-container .aside-nav>ul>span.active>a:before{
    content: "";
    position: absolute;
    top: 10%;
    height: 80%;
    width: 3px;
    left: 5px;
    background-color: var(--primary);
    -webkit-transition: 0.15S all;
    transition: 0.15S all;
     opacity: 1;
}

.content-container .aside-nav>ul>span.active>a {
    background: #c7e0f4;
    color: var(--primary);
    font-weight: 600;
    position: relative;
}
.content-container .aside-nav.with-multi-level ul li.active-submenu.has-submenu a i {
    transform: rotate(0deg);
}
.content-container .aside-nav.with-multi-level ul li.active ul.close-nav-aside li.with-sub-menu >a> i {
    display: block;
}
.content-container .aside-nav ul.subMenuColor1 >li >a {
    padding: 0.25rem 0.5rem  0.25rem 1.5rem !important;
}
.content-container .aside-nav ul li.with-sub-menu ul.close-nav-aside a:before {
    left: 18px;
}
.with-padding{
    padding: 0.5rem 1rem !important;
}

/**************************************** control-group ***************************************/
.control-group .control[multiple]{
    height:91px
}
.control-group.date:after,.control-group.datetime:after{
    background-image:url(../images/Icon-Calendar.svg);
    width:24px;
    height:24px;
    content:"";
    display:inline-block;
    vertical-align:middle;
    margin-left:-34px;
    pointer-events:none;
    position:absolute;
    left:70%;
    top:50%
}
.control-group .control-info{
    display:block;
    font-size:14px;
    color:#6f6f6f;
    font-style:italic
}
.control-group .control-error{
    display:none;
    color:#ff5656;
    margin-top:5px
}
.control-group.has-error .control{
    border-color:#fc6868
}
.control-group.has-error .control-error{
    display:block
}
.control-group.price .currency-code{
    vertical-align:middle;
    display:inline-block
}
.control-group .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 19px;
    margin-top: 10px;
    margin-bottom: 5px;
}
.control-group .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.control-group .slider {
    position: absolute;
    cursor: pointer;
    top: -2px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8e8e8e;
    transition: .2s;
}
.control-group .slider.round {
    border-radius: 50px;
    top: -4px;
    left: 3px;
}
.control-group .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 3px;
    background-color: #fff;
    transition: .2s;
}
.control-group input:checked+.slider {
    background-color: var(--primary);
}
.control-group input:checked+.slider:before {
    transform: translateX(15px);
}
.control-group .slider.round:before {
    border-radius: 50%;
    left: 3px;
}
.control-group .control:focus,
.form-control:focus{
    border-color: var(--primary);
    outline: none;
    box-shadow: none;
}
.control-group {
    display: block;
    /*margin-bottom: 15px;*/
    margin-bottom: 0.25rem;
    /*font-size: 15px;*/
    color: #333;
    width: 750px;
    max-width: 100%;
    position: relative;
}
.control-group .control {
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    width: 100%;
    /*height: 26px;*/
    display: inline-block;
    vertical-align: middle;
    transition: .2s cubic-bezier(.4,0,.2,1);
    /*padding: 0 10px;*/
    /*font-size: 12px;*/
    font-size: 1rem;
    /*margin-top: 5px;*/
    margin-bottom: 0px;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    
    height: calc(1.5em + var(--y-padding) + 2px);
    line-height: 1.5;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control {
    height: calc(1.5em + var(--y-padding) + 2px);
    line-height: 1.5;
}
.form-group {
    margin-bottom: 0.25rem;
}
.input-group-text, .form-control, .control {
    padding: calc(var(--y-padding) / 2) calc(var(--x-padding) / 2);
}
.btn {
    padding: calc(var(--y-padding) / 2) calc((var(--x-padding) * 2) / 2);
}
.btn-group-lg>.btn, .btn-lg {
    padding: calc((var(--y-padding) * 1.3) / 2) calc((var(--x-padding) * 3) / 2);
}
html:lang(ar) .input-group>.custom-select:not(:last-child),
html:lang(ar) .input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
html:lang(ar) .input-group>.custom-select:not(:first-child),
html:lang(ar) .input-group>.form-control:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
html:lang(ar) .input-group>.input-group-append>.btn,
html:lang(ar) .input-group>.input-group-append>.input-group-text,
html:lang(ar) .input-group>.input-group-prepend:first-child>.btn:not(:first-child),
html:lang(ar) .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
html:lang(ar) .input-group>.input-group-prepend:not(:first-child)>.btn,
html:lang(ar) .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
html:lang(ar) .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
html:lang(ar) .input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
html:lang(ar) .input-group>.input-group-append:not(:last-child)>.btn,
html:lang(ar) .input-group>.input-group-append:not(:last-child)>.input-group-text,
html:lang(ar) .input-group>.input-group-prepend>.btn,
html:lang(ar) .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
html:lang(ar) .input-group-append {
    margin-left: 0;
    margin-right: -1px;
}
html:lang(ar) .input-group-prepend {
    margin-left: -1px;
    margin-right: 0;
}


.control-group input.control,
.control-group select.control{
    background: #fff;
    border: 1px solid #c7c7c7;
}
.control-group label {
    display: block;
    color: #000;
    word-break: break-all;
    margin-bottom: 0;
    /*font-size: 11px;*/
    min-height: 19px;
    width: 100%;
}
.control-group textarea.control {
    background: #fff;
    border: 1px solid #c7c7c7;
    height: auto;
    min-height: 40px;
    padding:10px
}
/***************************************** datagrid *******************************************/
.grid-container {
    display: block;
    width: 100%;
}
.grid-container table {
    overflow: auto;
}
.table .datagrid-pagination {
    margin-bottom: 15px;
}
.filter-row-one {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.filter-row-one .per-page{
    right:250px
}
.filter-row-two{
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:10px
}
.filter-row-two, .search-filter {
    display: flex;
}
.search-filter .icon-wrapper .search-icon {
    margin-top: 3px;
    margin-left: 3px;
}
.filter-row-one .dropdown-filters {
    position: absolute;
    right: 25px;
}
.filter-row-one {
    display: block;
}
.filter-row-one .per-page.per-page-with-style .per-page-label {
    top: 40px;
    float: left;
    margin-right: 10px;
}
.filter-row-one .per-page .per-page-label {
    position: relative;
    right: -5px;
    width: auto;
    top: 2px;
    display: inline-block;
    float: left;
    margin-right: 5px;
}
.filter-row-one .dropdown-filters .dropdown-list.dropdown-container {
    width: 120px;
    top: 25px;
    padding: 5px;
}
.filter-row-one .dropdown-filters .dropdown-list.dropdown-container .control-group {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 5px;
    height: 26px;
    min-width: auto;
}
.filter-row-one .dropdown-filters .dropdown-list.dropdown-container .control {
    width: 110px;
    margin: 0 auto;
    max-width: 100%;
    float: none;
    padding: 0;
}
.filter-row-one .dropdown-filters {
    position: relative;
    right: 0;
    float: right;
    margin-left: 10px;
}
.filter-row-one .dropdown-filters .dropdown-toggle {
    margin: 0;
    cursor: pointer;
    float: right;
}
.filter-row-one#datagrid-filters .per-page {
    right: 0;
    width: 200px;
}
.filter-row-one .dropdown-filters {
    margin: 0;
    margin-right: 10px;
}
.filter-tags {
    display: flex;
    flex-grow: 1;
}
.filter-tag{
    justify-content:space-between;
    margin-right:5px;
    margin-left:5px;
}
.filter-tag, .filter-tag .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*font-size: 11px;*/
    /*height: 28px;*/
    border-radius: 2px;
    justify-content: space-between;
}
.filter-tag .wrapper{
    margin-left:10px;
    padding:5px 10px;
    background:#e7e7e7;
    color:#000311;
    letter-spacing:-.22px
}
.filter-tag .wrapper .icon.cross-icon {
    margin-left: 10px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    color: #fff;
    background: var(--primary);
    text-align: center;
    border-radius: 50%;
    line-height: 14px;
}
.search-filter .control {
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    /*font-size: 12px;*/
    border: 1px solid #c7c7c7;
    /*height: 26px;*/
    width: 160px;
    padding-left: 10px;
    padding-right: 30px;
    -webkit-appearance: none;
}
.search-filter .contorl:focus{
    border-color:var(--primary)
}
.search-filter .icon-wrapper {
    margin-left: -30px;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background: transparent;
    border: 1px solid #c7c7c7;
    /*height: 26px;*/
    width: 30px;
    border-right: 1px solid #c7c7c7;
    border-top-right-radius: 3px;
}
.search-filter .icon-wrapper .search-icon {
    margin-top: 5px;
    margin-left: 6px;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    color: #000;
}
.search-filter .icon-wrapper .search-icon:after{
    content: "\f002";
    font: normal normal normal 14px/1 'Font Awesome 5 Pro';

}
.fields-dropdown-menu {
    font-size: 0.75rem;
    padding-bottom: 0;
}
.fields-dropdown-menu input[type="checkbox"] {
    height: 15px;
}
.fields-dropdown-menu .fields-container {
    max-height: 305px;
    overflow-y: auto;
    padding-top: 0;
}
.fields-dropdown-menu button.btn.btn-primary:focus{
    outline: none;
}
.fields-dropdown-menu .buttons-container {
    padding: 5px;
}
.pagination .page-item {
    background: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 0;
    padding: 0px 6px;
    margin-right: 5px;
    font-size: 11px;
    display: inline-block;
    color: #8e8e8e;
    vertical-align: middle;
    text-decoration: none;
    min-width: 20px;
    height: 20px;
}
.pagination .page-item.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary)
}
.pagination .page-item .icon{
    vertical-align:middle;
    margin-bottom:3px
}
.pagination .page-item.next, .pagination .page-item.previous {
    padding: 1px 6px;
}
.pagination {
    margin-top: 0;
}

/******************* table class ******************/

.table table thead th{
    font-weight:700;
    padding:12px 10px;
    background:#f8f9fa;
    color: var(--dark);
}
.table table tbody tr:last-child td{
    border-bottom:none
}
.table .control-group .control{
    /*width:100%;*/
    margin:0
}

.table table tbody td.actions .action {
    display: inline-flex;
}
.table .control-group {
    width: 100%;
    margin-bottom: 0;
    min-width: 140px;
    /*font-size: 12px;*/
}
.table .no-value{
    display: none;
}
.table .dropdown-filters.per-page .control-group .control {
    width: 120px;
    margin: 0;
    position: relative;
    right: -10px;
    padding: 0;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.table .have-tow-body tbody:last-child>tr>td{
    padding: 15px 0;
}
.table table.vertical-top tbody td {
    vertical-align: top;
}
.table table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    background-color: transparent;
    color: var(--dark);
    border: 1px solid silver;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table table thead tr th {
    font-family: Verdana,Cairo,sans-serif;
    /*font-size: 11px;*/
    padding: 5px;
    border-right: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    color: #000;
    font-weight: 400;
    white-space: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    background-image: -webkit-linear-gradient(#f9f9f9,#e4e4e4);
    background-image: -moz-linear-gradient(#f9f9f9,#e4e4e4);
    background-image: -ms-linear-gradient(#f9f9f9,#e4e4e4);
    background-image: -o-linear-gradient(#f9f9f9,#e4e4e4);
    background-image: linear-gradient(#f9f9f9,#e4e4e4);
    cursor: context-menu;
    white-space: nowrap;
}
.table table thead tr th:first-child{
    border: 1px solid #c5c5c5;
}
.table table td {
    padding: 3px;
    font-family: Verdana,Cairo,sans-serif;
    border-right: 1px solid #d6d5d7;
    cursor: default;
    vertical-align: middle;
}
.table table tbody tr:nth-child(odd) {
    background-color: #fff;
}
.table table tbody tr:nth-child(even) {
    color: inherit;
    background-color: #f3f6fa;
}
.table table tr{
    height: auto !important;
}
.table table tbody tr:hover {
    background-color: #e6f0ff;
}
.table table tbody tr input,.table table tbody tr select {
    background: #fff;
}
.table table tbody td.actions .icon {
    cursor: pointer;
    vertical-align: middle;
}
.table table tbody td.actions .action a:hover,
.table table tbody td.actions .action a:hover .trash-icon,
.table table tbody td.actions .action a:hover .pencil-lg-icon,
.table table tbody td.actions .action a:hover .sortable-icon {
    color: var(--primary);
    text-decoration: none;
}

.table .vertical-top td:not(.actions) {
    /*padding: 0;*/
    /*min-width: 100px;*/
}
.table .vertical-top tbody td:not(:first-child):not(.actions) {
    /*min-width: 100px;*/
    /*min-width: calc(6em + var(--x-padding) + 2px);*/
    min-width: calc(5em + var(--x-padding));
}
.table .vertical-top tbody .input-group {
    /*min-width: 140px;*/
    /*min-width: calc(8em + var(--x-padding) + 2px);*/
    min-width: calc(7em + var(--x-padding));
}
.table .vertical-top td.actions span {
    padding-left: 2px;
    padding-right: 2px;
}
/*
.table .vertical-top td input, 
.table .vertical-top td select,
.table .vertical-top td .form-control {
    font-weight: bold;
    border-width: 0;
}
.table .vertical-top td .input-group .input-group-text,
.table .vertical-top td .select2-container--default .select2-selection--single, 
.table .vertical-top td .select2-container--open .selection .select2-selection, 
.table .vertical-top td .select2-container--focus .selection .select2-selection {
    border-width: 0;
}
.table .vertical-top tbody td .input-group .form-control,
.table .vertical-top tbody td .input-group input,
.table .vertical-top tbody td .input-group select {
    border-right-width: 1px;
}
html:lang(ar) .table .vertical-top tbody td .input-group .form-control,
html:lang(ar) .table .vertical-top tbody td .input-group input,
html:lang(ar) .table .vertical-top tbody td .input-group select {
    border-right-width: 0px;
    border-left-width: 1px;
}
*/
tr.green-light-back td:first-child,
tr.red-light-back td:first-child,
tr.orange-light-back td:first-child {
    position: relative;
    padding-left: 6px!important;
    padding-right: 6px!important;
}
tr.green-light-back td:first-child::before,
tr.red-light-back td:first-child::before ,
tr.orange-light-back td:first-child::before {
    position: absolute;
    content: "";
    width: 4px;
    height: 100%;
    background: #8be48a;
    top: 0;
    bottom: 0;
    left: 0px;
}
tr.red-light-back td:first-child::before {
    background: rgba(239,96,96,.5);
}
tr.orange-light-back td:first-child::before {
    background: rgba(255,165,0,.5);
}
html:lang(ar) tr.green-light-back td:first-child::before,
html:lang(ar) tr.red-light-back td:first-child::before ,
html:lang(ar) tr.orange-light-back td:first-child::before {
    left: auto;
    right: 0px;
}
/*
.keep-auto-width {
    overflow-x: auto !important;
}
*/
:has(>table) {
    overflow-x: auto !important;
}
:has(>table.vertical-top) {
    overflow-y: scroll !important;
    max-height: calc(((1.5em + var(--y-padding) + 2px) * 12) + 10px);
}
:has(>table.vertical-top) thead {
    position: sticky;
    top: -1px;
    z-index: 1;
}
:has(>table.vertical-top) tfoot {
    position: sticky;
    bottom: -1px;
    z-index: 1;
}
/***********************************************************************/
/************************ accordion-style ******************************/
/***********************************************************************/
.accordion-style .card-header .btn.btn-primary {
    padding: 5px 20px;
    font-weight: 400;
    margin: 0 1px !important;
    display: inline-block;
    position: relative;
    top: 2px;
    text-shadow: none;
}
.accordion-style .card-body {
    background-color: #f9f9f9;
    padding: 0.75rem;
}
.accordion-style .card{
    margin-bottom: 10px;
}
.accordion-style .card-header .btn.btn-link {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #8d96a2;
    /*font-size: 13px;*/
    font-weight: 400;
    text-decoration: none;
}
.accordion-style .card-header {
    padding: 5px 2px;
    color: #8d96a2;
    text-shadow: 1px 1px 2px #fdfdfd;
    /*font-size: 12px;*/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image: linear-gradient(to right, #fff , #f3f6fa);
    -webkit-background-image: linear-gradient(to right, #fff , #f3f6fa);
    -moz-background-image: linear-gradient(to right, #fff , #f3f6fa);
    -o-background-image: linear-gradient(to right, #fff , #f3f6fa);
}
.accordion-style .card-header span.icon.trash-icon {
    padding: 0.375rem 0.75rem;
}
/*****************************************************************************/
/******************************* select 2 ************************************/
/*****************************************************************************/
.select2.select2-container{
    width: 100% !important;
}
.select2.select2-container:not(.select2-container--open) .auto-fill-select2{
    background-image: none !important;
    background-color: rgb(232, 240, 254) !important;
    /*font-weight: 600;*/
}
.select2.select2-container--default.select2-container--disabled .select2-selection--single,
.select2.select2-container--focus.select2-container--disabled  .selection .select2-selectio{
    border-color: #CCCCCC !important;
    background-color: #e0e0e0 !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered{
    color: #324CA0;
}
.select2-container .select2-selection--single {
    height: calc(1.5em + var(--y-padding) + 2px);
}
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple {
    min-height: calc(1.5em + var(--y-padding) + 2px);
    line-height: calc(1.5em + var(--y-padding));
}
.select2-container--default .select2-selection__rendered {
    /*
    color: #444;
    height: calc(1.5em + var(--y-padding) + 2px);
    line-height: calc(1.5em + var(--y-padding));
    */
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + var(--y-padding));
}
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0px;
    height: 100%;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border-color: #d9d9d9;
    padding: 0;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.select2-container--default .select2-results__option{
    width: 100% !important;
    white-space: nowrap;
}
.select2-container--default .select2-results__option:nth-child(even) {
}
.select2-container--default .select2-results__option:nth-child(odd) {
    background-color: #f3f6fa;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: transparent;
}
.select2-results__option {
    padding: 2px 5px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option[aria-selected=true]{
    color: inherit;
    background-color: #e6f0ff;
}
.select2-search--dropdown .select2-search__field {
    padding: 2px;
}
.select2-dropdown{
    position: relative;
}
.select2-dropdown:before{content:"";position:absolute;border-color:inherit}
.select2-dropdown:after{content:"";position:absolute;border-color:inherit;bottom:100%;left:4px}
.select2-container--open .select2-dropdown--below:before{
    border-bottom:10px solid #ddd;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
    margin-bottom:-3px;
    bottom: auto;
    top: -10px;
    left: 15px;
}
.select2-container--open .select2-dropdown--below:after{
    border-bottom-color: inherit;
    bottom: auto;
    top: -6px;
    left: 19px;
    margin-bottom: -3px;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid #f8f9fa;
}
.select2-container--open .select2-dropdown--above:before{
    border-top: 10px solid #ddd;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    margin-top: -3px;
    top: auto;
    bottom: -10px;
    left: 15px;
}
.select2-container--open .select2-dropdown--above:after{
    border-top-color: inherit;
    top: auto;
    bottom: -6px;
    margin-top: -3px;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #fff;
    left: 19px;
}
.select2-container--open .select2-dropdown--below {
    top: 8px;
}
.select2-container--open .select2-dropdown--above {
    top: -5px;
}
.select2-container--open .select2-dropdown--above, .select2-container--open .select2-dropdown--below {
    border: 2px solid #ddd;
    /*width: auto!important;*/
    min-width: 320px;
}
.select2-container--open .selection .select2-selection,
.select2-container--focus .selection .select2-selection {
    border: 1px solid var(--primary);
}
span.select2-container.select2-container--with-checkbox .select2-results__option {
    padding-right: 20px;
    vertical-align: middle;
}
span.select2-container.select2-container--with-checkbox .select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 16px;
    width: 16px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 10px;
    vertical-align: middle;
}
span.select2-container.select2-container--with-checkbox .select2-results__option:first-child:before {
    display: none;
}
span.select2-container.select2-container--with-checkbox .select2-results__option[aria-selected=true]:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    color: #fff;
    background-color: #3F51B5;
    border: 0;
    display: inline-block;
    padding-left: 3px;
    /*font-size: 10px;
    line-height: 15px;*/
}
span.select2-container.select2-container--with-checkbox .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}
span.select2.select2-container input.select2-search__field {
    /*margin: 0;
    height: 18px;
    font-size: 12px;
    padding-top: 0px;
    top: 5px;*/
    position: relative;
}
span.select2-container.select2-container--with-checkbox input.select2-search__field {
    top: 0px;
}
span.select2-container.select2-container--with-checkbox .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}
span.select2-container.select2-container--with-checkbox .select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}
span.select2-container  li.select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    margin: 0 15px 0 0;
    margin-top: 2px;
    padding: 0 5px;
    font-size: 12px;
    overflow: hidden;

}
span.select2-selection.select2-selection--multiple {
    background: #fff;
    border: 1px solid #d9d9d9;
}
span.select2-container.select2-container--with-checkbox  span.select2-selection__clear {
    position: absolute;
    margin-right: 5px;
    margin-top: 0;
    right: 0;
}
span.select2-selection__choice__remove {
    color: #000;
    font-weight: 700;
}
span.select2-selection__choice__remove {
    color: #000;
    font-weight: 700;
    left: -2px;
    position: relative;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    width: 100%;
    display: block;
}
span.select2.select2-container.select2-container--with-checkbox.select2-container--below {
    background: #fff;
    border: 1px solid #c7c7c7;
}

.input-group span.select2.select2-container {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    margin-bottom: 0;
    max-width: none;
}
.input-group .select2-container--default .select2-selection--single {
    border-top-right-radius: 0;
}
td .select2-container--default .select2-selection--single .select2-selection__rendered,
td span.select2.select2-container {
    max-width: 225px;
    min-width: 100%;
}
html:lang(ar) .select2-container--default .select2-selection--single .select2-selection__clear {
    float: left;
}
html:lang(ar) .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 20px;
    padding-right: 8px;
}
html:lang(ar) .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}

/*******************************************************************/
/************************* relative-img ****************************/
/*******************************************************************/
.relative-img {
    display: table;
    height: 30px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    font-weight: 600;
    overflow: hidden;
    background-color: #eee;
}
.relative-img span {
    display: table-cell;
    vertical-align: middle;
}
.radius-img-50{
    border-radius: 50% !important;
}
.media-body {
    margin-left: 16px;
}
.media {
    margin: 0.25rem 0;
}
table td .media {
    -ms-flex-align: center;
    align-items: center;
}
table .media img{
    width: 30px;
    height: 30px;
}
table td .media .media-body {
    margin-left: 0.25rem;
}
html:lang(ar) .media-body {
    margin: 0;
    margin-right: 16px;
}
@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.inner-loader {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.inner-loader:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #ccc;
    border-bottom-color: #324da0;
}

/*******************************************************************/
.control-group .control[disabled=disabled],
input:disabled,
.form-control:disabled,
.control:disabled,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--focus.select2-container--disabled  .selection .select2-selectio,
input[type=text]:read-only,
input[type=number]:read-only,
input[type=date]:read-only,
.form-control[readonly],
.control[readonly],
select[readonly],
.as-input{
    border-color: var(--gray-light) !important;
    background-color: var(--light) !important;
    color: var(--blue);
    cursor: not-allowed !important;
    font-weight: 600;
    opacity: 1;
}
/*************************************************************************/
/***************************over write bootstap***************************/
/*************************************************************************/
.btn {
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%), 0 0 8px 0 rgb(0 0 0 / 10%);
    /*border-radius: 3px;*/
    /*border: none;*/
    /*color: #fff;*/
    cursor: pointer;
    transition: .2s cubic-bezier(.4,0,.2,1);
    /*font: inherit;*/
    /*display: inline-block;*/
    /*font-size: 11px;*/
}
.btn:active, .btn:focus, .btn:hover{
    opacity:.75;
    /*border:none*/
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 5px;
    padding-left: 5px;
}
.row{
    margin-left: -5px;
    margin-right: -5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.dropdown-menu.show, .popover.show {
    width: max-content;
}
html:lang(ar) .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}
/*****************over write bootstap variables *********************/
/*color*/
a {
    color: var(--primary);
}
.text-primary {
    color: var(--primary)!important;
}
.text-white, .btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: var(--white);
}
/*background-color*/
.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--primary);
}
.btn-info, .btn-info:hover, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
    background-color: var(--info);
}
/*border-color*/
.btn-primary, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    border-color: var(--primary);
}
.btn-info, .btn-info:hover, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
    border-color: var(--info);
}

/************************************************************************/
/*****************************RTl Style *********************************/
/************************************************************************/
html:lang(ar) * {
    direction: rtl;
    text-align: right;
    /*font-family: 'Cairo', sans-serif;*/
}
html:lang(ar) .text-right {
    text-align: left!important;
}
html:lang(ar) .text-left {
    text-align: right!important;
}
html:lang(ar) .float-right {
    float: left!important;
}
html:lang(ar) .float-left {
    float: right!important;
}
html:lang(ar) .ml-auto, html:lang(ar) .mx-auto {
    margin-right: auto !important;
    margin-left: inherit !important;
}
html:lang(ar) .mr-auto, html:lang(ar) .mx-auto {
    margin-left: auto !important;
    margin-right: inherit !important;
}
html:lang(ar) .fa-angle-double-right::before {
    content: "\f100";
}
html:lang(ar) .fa-angle-double-left::before {
    content: "\f101";
}