:root {
    --main-color: #904D98;
    --main-color-hover: #73377a;
    --site-font: Tajawal,'Roboto Condensed', sans-serif, system-ui;
    --arabic-font: Tajawal;
    --sidebar-width: 360px;
    --sidebar-min-width: 75px;
}


.rtl-direction {
    direction: rtl;
}

.layout-normal {
    font-family: var(--site-font);
}

.ltr-direction {
    direction: ltr;
}

.rtl-english-text {
    direction: ltr;
    text-align: left;
}

.rtl-direction .rtl-english-text {
    /*text-align: right;*/
}

.main-page .new-logo {
    height: 70px;
}

.dashboard .new-logo {
    height: 52px;
    margin-top: 2rem;
}

.rtl-direction.dashboard .main-logo .new-logo.arrow {
    order: 1 !important;
}

#layoutSidenav #layoutSidenav_content {
    justify-content: start;
}

    #layoutSidenav #layoutSidenav_content .user-info-area > div {
        overflow-x:clip;
    }

.login-background {
    width: 552px;
    /*height: 522px;*/
}

.btn-login img {
    transform: rotateY(180deg);
}

.rtl-direction .btn-login img {
    transform: rotateY(0deg);
}

.icon-24 {
    width: 24px;
}

.icon-32 {
    width: 32px;
}

.ltr-direction #attendance-view .cls-log-in i::before,
.ltr-direction #attendance-view .cls-log-out i::before {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

input[type="password"] {
    font-size: 20px;
    font-weight: bold;
    font-family: monospace;
}

    input[type="password"]::placeholder {
        font-family: var(--site-font);
        font-size: 18px;
        font-weight: normal;
    }

.form-check-input:checked {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.rtl-direction .form-check .form-check-input[type!='radio'] {
    float: right;
    margin-right: -2em;
}

.form-check .form-check-input[type='radio']
{
    margin-left:unset !important;
}


.log-in a:hover,
.log-out button:hover {
    color: var(--main-color-hover) !important;
}

/*buttons*/
.btn-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

    .btn-primary:hover {
        background-color: var(--main-color-hover) !important;
    }

    .btn-primary > span {
        margin: 0 10px;
        color: #fff;
    }

.card-header .btn-area {
}

.widget .btn-circle {
    position: absolute;
    right: 0.5rem;
    left: auto;
}

.rtl-direction .widget .btn-circle {
    left: 0.5rem;
    right: auto;
}

.badge-primary {
    background-color: var(--main-color) !important;
}

.back-btn {
    border: 0 !important;
}

    .back-btn i {
        position: relative;
        top: 0px;
        left: 0px;
        color: #363434;
        padding: 19px;
        background-color: var(--main-color);
        color: #fff;
        border-radius: 5px 0 0 5px;
    }

/*---Old Design------*/

.layout-admin nav.navbar .layer,
.layout-normal nav.navbar .layer {
    /*background-color: #000000f0;*/
    padding: 0;
    height: 98px;
    z-index: 99;
}
#api-check {
    position: absolute;
    float: right;
    left: auto;
    right: 20px;
    color: #fff;
}

    #api-check.unhealthy {
        color: darkred;
    }

    #api-check.healthy {
        color: green !important;
    }

.bg-main-color {
    background-color: var(--main-color);
    color: var(--main-fill-text-color);
}


body {
    font-size: 15px;
    /*font-family: 'Roboto Condensed', sans-serif;*/
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

.bg-dark {
    background-color: var(--secondary-bg-color) !important;
}

.btn.btn-sidebarToggle {
    border: initial !important;
}

.btn {
    font-weight: 500;
    color: var(--main-color);
    /*border: solid 1px #904D98;*/
    border-radius: 12px;
}

.disabled {
    pointer-events: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: not-allowed;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    cursor: not-allowed !important;
}

    .prevent-select input {
        pointer-events: none;
    }

.btn-outline-primary {
    background-color: #E9DBEA !important;
    border-color: var(--main-color-hover);
    color: var(--main-color-hover);
    text-align: left;
    padding-right: 1rem;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--main-color-hover) !important;
    }

.rtl-direction .formio .btn-outline-primary {
    text-align: right;
}

.btn-secondary {
    color: #fff;
    background-color: var(--main-color) !important;
}

.btn-success {
    color: #fff;
}

.btn-link {
    border: 0 !important;
}

.btn-main {
    /*font-size: 17px;*/
    font-weight: 500;
    color: var(--main-color);
    border: solid 1px #904D98;
    border-radius: 12px;
    padding: 5px;
}

    .btn-main:hover {
        color: #fff;
        background-color: var(--main-color);
        border-color: var(--main-color-hover);
    }

.btn-danger {
    color: #dc3545;
    background-color: #fff;
}

    .btn-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
}

    .btn-circle.btn-sm {
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 10px;
        line-height: 1;
    }

.badge-primary, .btn-primary, .bg-primary {
    color: #fff;
    background-color: var(--main-color) !important;
    border-color: var(--main-color-hover);
}

.over-lay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    background-color: #00000075;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color-hover);
    color: #fff;
}

.page-link:hover {
    background-color: var(--main-color);
    color: #fff;
}

.rtl-direction .remove-badge {
    top: 0.5px;
    left: 8px;
    right: auto;
}

.rtl-direction .section-name {
    right: -10px;
    position: relative;
}
/*.log-in a, .log-out button {
    color: inherit !important;
    text-decoration: none;
}*/
.modal .modal-body, form, table, #procedure-task-view {
    font-family: var(--site-font);
}
/*style custom*/
.sb-sidenav-dark {
    background-color: var(--secondary-bg-color) !important;
}

.navbar-brand {
    font-size: 1.15rem;
    /*padding-bottom: 1rem;*/
    margin-bottom: 1rem;
}

.layout-admin .navbar-brand {
    border-bottom: solid 1px #E6E6E6;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover, .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    color: var(--secondary-text-color);
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

    .sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
        color: rgba(255, 255, 255, 0.3);
    }

.form-group.search-area {
    margin-bottom: 6px;
    position: relative;
    margin-right: 1rem;
    margin-left: 1rem;
}

    .form-group.search-area input.form-control {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-right: 58px;
        padding-left: 10px;
        text-align: left;
    }

.rtl-direction .form-group.search-area input.form-control {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 58px;
    padding-right: 10px;
    text-align: right;
}

.form-group.search-area i.icon-after {
    padding: 15px !important;
}

.rtl-direction .profile-image {
    right: auto;
    left: 60px;
}
/*helpers*/
.top-5 {
    top: 5px !important;
}

.top-10 {
    top: 10px !important;
}

.top-15 {
    top: 15px !important;
}

.top-20 {
    top: 20px !important;
}

.top-25 {
    top: 25px !important;
}

.top-30 {
    top: 30px !important;
}

.top-40 {
    top: 40px !important;
}

.top-45 {
    top: 45px !important;
}

.top-50 {
    top: 50px !important;
}

.top-60 {
    top: 60px !important;
}
/*top-precentge**/
.top-10-pcnt {
    top: 10% !important;
}

.top-15-pcnt {
    top: 15% !important;
}

.top-20-pcnt {
    top: 20% !important;
}

.top-25-pcnt {
    top: 25% !important;
}

.top-30-pcnt {
    top: 30% !important;
}

.top-40-pcnt {
    top: 40% !important;
}

.top-45-pcnt {
    top: 45% !important;
}

.top-50-pcnt {
    top: 50% !important;
}

.top-60-pcnt {
    top: 60% !important;
}

.top-70-pcnt {
    top: 70% !important;
}

.top-75-pcnt {
    top: 75% !important;
}

.top-80-pcnt {
    top: 80% !important;
}

.top-90-pcnt {
    top: 90% !important;
}

.top-95-pcnt {
    top: 95% !important;
}

.w-100 {
    width: 100%;
}

.w-80 {
    width: 80%;
}

.w-75 {
    width: 75%;
}
.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-30 {
    width: 30% !important;
}

.w-25 {
    width: 25%;
}

.w-20 {
    width: 20% !important;
}

.w-10 {
    width: 10% !important;
}

.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-15 {
    font-size: 15px;
}

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

.font-size-17 {
    font-size: 17px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-19 {
    font-size: 19px;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-25 {
    font-size: 25px;
}

.font-size-30 {
    font-size: 30px;
}

.font-size-35 {
    font-size: 35px;
}

.circle {
    border-radius: 100%;
    display: block;
    height: 0.625rem;
    width: 0.725rem;
}

.action-btn {
    cursor: pointer;
}
/* white space*/
.white-space-one-line {
    display: inline-block;
    white-space: nowrap;
}
/*Cards*/
.card {
    margin-bottom: 0.5rem;
    /*--bs-card-border-color: none;*/
    --bs-card-border-color: var(--bs-border-color-translucent);
}

.dashboard-area .card-body {
    overflow-x: auto;
}

.zoomable-container {
    height: 80vh;
    width: 100%;
}

.zoomable {
    height: 100%;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    display: block;
    /*place-items: center;*/
    font: 600 12px system-ui;
    overflow: auto;
}

    .zoomable > li {
        height: max-content;
        top: 50px;
    }

#tree {
    height: 100%;
}

.tree.zoomable {
    display: flex;
    justify-content: space-around !important;
}

.box-shadow-1 {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}

.box-shadow-2 {
    box-shadow: 0 1px 1px -2px #eee;
}

.box-shadow-3 {
    box-shadow: 0 3px 3px -2px #eee;
}

.box-shadow-4 {
    box-shadow: 0 2px 4px -1px #eee;
}

.card-outline {
    /*border-top: 3px solid var(--main-color);*/
}

.rtl-direction .modal-header .btn-close {
    margin: calc(-.5* var(--bs-modal-header-padding-y)) auto calc(-.5* var(--bs-modal-header-padding-y)) calc(-.5* var(--bs-modal-header-padding-x));
}

.rtl-direction .form-control.input {
    direction: rtl;
}

.modal-content.card {
    padding: 0 1px;
}

.card-body {
    min-height: 1px;
    padding: 1.25rem;
}

.card-header:not(.form-builder-group-header) {
    display: flex;
    padding: 12px;
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    color: var(--main-fill-text-color);
    background-color: #fff;
}

.card-header-avatar {
    flex: 0 0 auto;
    margin-inline-end: 16px;
    margin-inline-start: unset;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    margin: 0 auto;
    padding: 2px;
    width: 35px;
    text-align: center;
    margin-right: 16px;
}

.card {
    padding: 0 15px;
    border-radius: 9px;
    border: 0;
}

.avatar {
    display: inline-block;
    flex: 0 0 auto;
    margin-inline-end: 16px;
    margin-inline-start: unset;
    border: 0;
    border-radius: 50%;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
    margin-right: 16px;
}

    .avatar img {
        width: 20px;
    }

    .avatar.avatar-x2 img {
        width: 35px !important;
    }

.card-header .card-header-content {
    flex: 1 1 auto;
}

.profile-username {
    font-size: 21px;
    margin-top: 5px;
}

.profile-user-img {
    border: 3px solid #adb5bd;
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-circle {
    border-radius: 50%;
}

.img-square {
    border-radius: 10%;
}

.list-group {
    margin-top: 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.card label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 700;
}
/* /-> card*/
/*info bx*/
.info-box {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    border-radius: 0.25rem;
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
    min-height: 80px;
    padding: 0.5rem;
    position: relative;
}

    .info-box .info-box-icon {
        border-radius: 0.25rem;
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        font-size: 1.875rem;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        width: 70px;
    }

    .info-box .info-box-content {
        -ms-flex: 1;
        flex: 1;
        padding: 5px 10px;
    }

    .info-box .info-box-text, .info-box .progress-description {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .info-box .info-box-number {
        display: block;
        font-weight: 700;
    }
/*info bx*/
/*hexagon */
.hex-hover:not(.disabled) {
    cursor: pointer;
    transition: all 0.5s;
}

.hex-hover a {
    text-decoration: none;
}

.hex-hover:not(.disabled):hover {
    transform: scale(1.1);
}

.hex-card .hex-card-content, .hex-card .hex-card-content-sub {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    border-radius: 0.25rem;
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
    padding: 0.5rem;
    position: relative;
    border-color: #fff;
}

.hex-card .hex-card-content {
    min-height: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hex-card .hex-card-content-sub, .hex-card .hex-card-content-sub-normal {
    min-height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.9rem;
    color: #fff;
}

.hex-card .hex-card-content-sub-normal {
    border: solid 1px #eee;
    border-radius: 10px;
    width: 60px;
}

.hex-card .hex-card-icon {
    position: absolute;
    left: -20px;
    z-index: 99;
    top: 13px;
    bottom: 16px;
}

.hex-card .hex-card-icon-normal {
    position: absolute;
    left: -32px;
    z-index: 99;
    top: 13px;
    bottom: 32px;
}

.hex-card .hex-card-icon .box-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hex-card-content:after {
    right: -29px;
    border-left: 30px solid;
    border-color: inherit;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

.hex-card-content:before {
    left: -29px;
    border-right: 30px solid;
    border-color: inherit;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

.hex-card-content:after, .hex-card-content:before {
    top: 0;
    content: "";
    width: 0px;
    position: absolute;
}

.hex-card-content-sub:after, .hex-card-content-sub:before {
    top: 0;
    content: "";
    width: 0px;
    position: absolute;
}

.hex-card-content-sub:after {
    right: -15px;
    border-left: 16px solid;
    border-color: #0d86f7;
    border-top: 34px solid transparent !important;
    border-bottom: 36px solid transparent !important;
}

.hex-card-content-sub:before {
    left: -15px;
    border-right: 16px solid;
    border-color: #0d86f7;
    border-top: 34px solid transparent;
    border-bottom: 36px solid transparent;
}

.hex-card-content .info-box-text {
    font-size: 1.75rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.hex-hover.disabled {
    color: #eee;
    pointer-events: none;
    opacity: 0.4;
}

.btn-em {
    padding: 0;
}

    .btn-em::after {
        content: "";
        width: 24px;
        height: 24px;
        display: inline-block;
        position: relative;
        top: 4px;
    }

    .btn-em:hover, .btn-hover:hover {
        transform: scale(1.1);
        transition: all ease-in-out 0.2s;
    }

.btn-edit::after {
    background: url(/assets/icons/btn-edit.png) no-repeat;
}

.btn-trash::after {
    background: url(/assets/icons/btn-trash.png) no-repeat;
}

.btn-trash-restore::after {
    background: url(/assets/icons/btn-trash-restore.png) no-repeat;
}

.btn-lock::after {
    background: url(/assets/icons/lock.png) no-repeat;
}

.btn-section-guid::after {
    background: url(/assets/icons/section-guid.png) no-repeat;
    background-size: 21px;
    top: 5px;
}

.btn-network::after {
    background: url(/assets/icons/network.png) no-repeat;
    background-size: 19px;
}

.btn-eye::after {
    background: url(/assets/icons/eye.png) no-repeat;
    background-size: 20px;
    top: 5px;
}

.btn-config::after {
    background: url(/assets/icons/config.png) no-repeat;
    background-size: 19px;
}

.btn-send::after {
    background: url(/assets/icons/send.png) no-repeat;
    background-size: 20px;
    top: 5px;
}

.btn-details::after {
    background: url(/assets/icons/details.png) no-repeat;
    background-size: 20px;
    top: 7px;
}


.icon-ar::after {
    content: "";
    width: 32px;
    height: 24px;
    background: url(/assets/icons/ar-sa.png) no-repeat;
    background-size: contain;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 0 3px;
}

.icon-en::after {
    content: "";
    width: 32px;
    height: 24px;
    background: url(/assets/icons/en-uk.png) no-repeat;
    background-size: contain;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 0 3px;
}

.alert-dismissible {
    padding-right: 3rem;
    padding-left: 3rem;
}

.rtl-direction .alert-dismissible {
    padding-left: 3rem;
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    left: 0;
    right: unset;
}

.rtl-direction .alert-dismissible .btn-close {
    right: 0;
    left: unset;
}
/*hexagon */
/* matrix*/
.matrix-card {
    padding: 24px;
    margin-right: 30px;
    margin-left: 30px;
    border-radius: 20px;
    border: 0;
    background-color: #fff;
    margin-bottom: 20px;
    width: 256px;
    height: 80px;
    cursor: pointer;
}

    .matrix-card .card-title .vertical-divider {
        display: block;
        margin: 0 5px;
        width: 2px;
        height: 32px;
        background-color: var(--main-color);
    }

    .matrix-card .card-title span.text {
        font-size: 16px;
        width: 100%;
    }

    .matrix-card .card-buttons {
        margin: 0px 3px;
        padding-top: 0px;
    }

    .matrix-card .action-btn {
        margin: 0 1px;
    }

    .matrix-card:hover {
        cursor: default;
        transform: scale(1.03);
        transition: all ease-in-out 0.4s;
    }

        .matrix-card:hover > .card-buttons {
            display: inline-flex !important;
            z-index: 2;
        }
/* matrix*/
/*overwrite bootstrap*/

/*-text color--*/
.text-ellips {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-main-color {
    color: var(--main-color) !important;
}

.text-main-with-bg {
    font-weight: bold;
    background-color: #fad3ff96 !important;
    color: var(--main-color);
    --bs-table-bg-type: #fad3ff96 !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.text-info-secondary {
    color: #17a2b8;
}

.text-primary-secondary {
    color: #1e6fc1;
}

.text-pending {
    font-weight: bold;
    background-color: rgb(253 183 19 / 0.5) !important;
    color: rgb(199 123 6) !important;
    --bs-table-bg-type: none;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.text-approved {
    font-weight: bold;
    background-color: rgb(229 255 242 / 1) !important;
    color: rgb(40 209 124 / 1) !important;
    --bs-table-bg-type: rgb(229 255 242 / 1) !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.text-rejected {
    font-weight: bold;
    background-color: rgb(255 204 211 / 1) !important;
    color: rgb(185 30 40 / 1) !important;
    --bs-table-bg-type: none;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.table-responsive {
    overflow-x: unset !important;
}

.table {
    --bs-table-striped-bg: #f2f7fb !important;
}

.cell-hover:hover {
    color: dodgerblue;
    cursor: default;
}

select option {
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
/*bootstrap-select*/
.rtl-direction .bootstrap-select .dropdown-toggle .filter-option {
    text-align: right !important;
}

.nav-item .dropdown-menu .dropdown-item.active,
.nav-item .dropdown-menu .dropdown-item:active,
.dropdown .dropdown-menu .dropdown-item.active {
    background-color: var(--main-color);
    /*/*  background-color:var(--main-fill-hover-bg);
    color:var(--main-fill-hover-color);*/
}

.procedureList button i {
    display: none;
}

.procedureList .inner ul.dropdown-menu li a:hover .btn-edit {
    display: inline-block !important;
}

div.dataTables_wrapper div.dataTables_length select {
    min-width: 70px;
}

.card .dataTables_wrapper label {
    font-weight: inherit !important;
}

.rtl-direction div.dataTables_wrapper div.dataTables_length select {
    direction: ltr;
}

ul.dropdown-menu li:not(.dropdown-divider) {
    padding: 5px 10px;
    text-align: start;
}

.rtl-direction ul.dropdown-menu li:not(.dropdown-divider) {
    direction: rtl;
}

ul.dropdown-menu li a.dropdown-item:not([role='option']), ul.dropdown-menu li button.dropdown-item:not([role='option']) {
    padding-left: 2px;
}

.rtl-direction ul.dropdown-menu li a.dropdown-item:not([role='option']), .rtl-direction ul.dropdown-menu li button.dropdown-item:not([role='option']) {
    padding-right: 2px;
    padding-left: inherit;
}

.rtl-direction .dropend .dropdown-toggle::after {
    border-right: 0.3em solid !important;
    border-left: 0 !important;
    margin-right: 0.255em;
    margin-left: initial;
}
/*sidebar*/
/*.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    background: #3b1c3f;
}*/
#sidebarToggle {
    margin-top: -5px;
    margin-left: 10px;
    margin-right: 10px;
}
/*#navbarNavAltMarkup {
    position: absolute;
    right:0;
    left:auto;
}
.rtl-direction #navbarNavAltMarkup
{
    right:auto !important;
    left:0 !important;
}*/

#navbarNavAltMarkup .nav-item.dropdown ul.dropdown-menu i {
    color: var(--main-color);
}

.user-info-area {
    background-color: #f2f6fd;
    /*width: calc(100% - var(--sidebar-width));*/
    width: 100%;
    padding-top: 3rem;
    /* position: fixed;
    right: var(--sidebar-width);*/
}

.sb-topnav .navbar-brand {
    width: var(--sidebar-width) !important;
}

#layoutSidenav #layoutSidenav_nav {
    width: var(--sidebar-width);
    flex-basis: var(--sidebar-width);
    transition: all 0.35s ease;
}

    #layoutSidenav #layoutSidenav_nav .navbar-items {
        min-height: calc(100vh - 120px);
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    width: var(--sidebar-min-width);
    flex-basis: var(--sidebar-min-width);
}

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav .navbar-brand .main-logo .text {
        display: none;
    }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav .navbar-brand #api-check {
        bottom: -10px !important;
        right: 10px;
    }

/*      #layoutSidenav #layoutSidenav_nav:hover {
    width: var(--sidebar-width) !important;
    flex-basis: var(--sidebar-width) !important;
}*/
/*      .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav:hover .navbar-brand .new-logo.text {
    display: inline-block !important;
} */
/*      .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav:hover .navbar-brand #api-check {
    right: 55px;
    bottom: 5px !important;
}*/
.sb-sidenav-menu {
    border-top: solid 1px #E6E6E6;
    margin-top: 2rem;
}

.layout-normal:not(.rtl-direction) #layoutSidenav #layoutSidenav_content {
    padding-left: 0;
    margin-left: 0;
    /*transform: translateX(0);*/
    /*top: 56px;*/
    /*padding-right: var(--sidebar-width);*/
}

#layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
    overflow-x: hidden;
    margin-top: 0;
}

.rtl-direction #layoutSidenav #layoutSidenav_content {
    padding-right: calc(var(--sidebar-width)* -1);
    margin-right: var(--sidebar-width);
    /*transform: translateX(0);*/
    padding-left: initial;
    /*top: 56px;*/
}

.rtl-direction #layoutSidenav #layoutSidenav_content {
    margin-right: 1rem;
}

#api-check {
    position: absolute;
    bottom: 5px;
    right: 55px;
    left: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 0px 4px 0px 16px;
    text-decoration: none;
}

    .sidebar-item:hover {
        text-decoration: none;
    }

    .sidebar-item .item-card {
        color: #666666;
        display: flex;
        align-items: center;
        width: 100%;
        cursor: pointer;
        height: 56px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        padding-left: 5px;
        padding-right: 5px;
        margin: 0.2rem 0;
        position: relative;
        background: 0 0;
        border: 0;
        border-radius: 12px;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    }

        .sidebar-item .item-card:hover, .sidebar-item.active .item-card {
            background-color: var(--main-color) !important;
            color: #fff;
        }

    .sidebar-item.menu-item .item-card:hover, .sidebar-item.menu-item.active .item-card {
        /* background-color: #af4dbc !important;
        color: #fff;*/
        background-color: #a45ae054 !important;
    }

    .sidebar-item:not(.menu-item) .item-card:hover .ico, .sidebar-item:not(.menu-item).active .item-card .ico {
        /*filter: invert(100%);*/
        /*filter: grayscale(100%) !important;*/
        filter: brightness(250%) !important;
    }

    .sidebar-item .item-card:hover a {
        text-decoration: none;
    }

    .sidebar-item .item-card .ico {
        width: 32px;
        margin: 0 5px;
    }

    .sidebar-item .item-card .caption {
        font-size: 18px;
        padding: 0 22px;
    }

    .sidebar-item .item-card .sb-sidenav-collapse-arrow {
        position: absolute;
        text-align: center;
        right: 0;
        left: unset;
        transform: rotateY(180deg);
    }

.rtl-direction .sidebar-item .item-card .sb-sidenav-collapse-arrow {
    position: absolute;
    left: 0;
    right: unset;
    transform: rotateY(0deg);
}

.sidebar-item.expanded .item-card .sb-sidenav-collapse-arrow {
    transform: rotate(-90deg);
}

.sidebar-item.expanded + div.collapse {
    display: block;
    visibility: visible;
    transition: all 1s ease-out;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

tr.master-slave.expanded + tr.collapse {
    display: table-row;
}

tr.deleted td {
    color: #dc3545 !important;
}

.master-slave.expanded .show-childs {
    transform: rotate(90deg);
}

.rtl-direction .master-slave.expanded .show-childs {
    transform: rotate(-90deg);
}

.collapse .sb-sidenav-menu-nested {
    padding-left: 1rem;
    padding-right: unset;
}

    .collapse .sb-sidenav-menu-nested .sidebar-item {
        transform: scale(0.9);
    }

.rtl-direction .collapse .sb-sidenav-menu-nested {
    padding-right: 0.5rem;
    padding-left: unset;
}

.sb-sidenav-toggled:not(.rtl-direction) #layoutSidenav_nav .collapse .sb-sidenav-menu-nested {
    padding-left: 1.5rem !important;
    margin-left: -20px !important;
}

.rtl-direction.sb-sidenav-toggled #layoutSidenav_nav .collapse .sb-sidenav-menu-nested {
    padding-right: 1rem !important;
    margin-left: -28px !important;
}
/*btn-close*/
.btn-close:focus {
    box-shadow: none;
}
/*dropdown-sub*/
.dropdown-menu.submenu {
    top: 10px;
    display: block;
    right: 100%;
    left: auto;
    border: solid 1px #dfb611;
}

.rtl-direction .dropdown-menu.submenu {
    display: block;
    left: 100%;
    right: auto;
    border: solid 1px #dfb611;
}
/* Tables*/
.table-row.task-row > * {
    text-align: center;
    vertical-align: sub;
}

.table-row.task-row.rowdisabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#add-task-entry-area > .table-body-cell {
    background-color: #fffbef;
}

.table-row {
    position: relative;
}

.table-body .table-row .floating-area {
    position: absolute;
    top: -10px;
    left: -25px;
    right: unset;
}
.pos-chart-lable {
    font-family: var(--site-font);
}

.rtl-direction .pos-chart-lable {
    font-family: blive !important;
}

.rtl-direction .table-body .table-row .floating-area {
    right: -25px;
    left: unset;
}

.rtl-direction table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
    border-right-width: 1px !important;
}

.table-matrix th, .table-matrix td {
    text-align: center;
}

#add-task-entry-area input, #add-task-entry-area select {
    text-align: center;
    vertical-align: sub;
}

#dataTable-attendance tr th, #dataTable-attendance tr td {
    text-align: center;
}

tr.today {
    box-shadow: 1px 2px 16px 2px #fff;
    border-bottom: 30px;
    border-width: 6px;
    transform: scale(1.05);
    font-weight: bold;
}

.today td {
    --bs-table-bg-type: var(--main-color) !important;
    color: #fff;
}

.free-day td {
    --bs-table-bg-type: #c6e5ff !important;
}

.absent-day td {
    --bs-table-bg-type: #ff8181 !important;
}
.documents-table a{
    text-decoration:none;
}
.documents-table tr td
{
    vertical-align:middle;
}
/*overwrite style*/
ul.dropdown-menu li a.dropdown-item.active:hover {
    color: white !important;
}

button.dropdown-toggle {
    background-color: #eff5fb !important;
}

    button.dropdown-toggle:hover {
        background-color: #e3ecf4 !important;
    }
/*-/.-> overwrite bootstrap*/
/*buttons*/
.nav-link {
    color: var(--main-color);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    /*font-size: 17px;*/
    font-weight: 400;
    background-color: var(--main-color);
    color: rgb(255, 255, 255);
}

.btn-submit {
    font-size: 17px;
    font-weight: 400;
    background-color: var(--main-color);
    color: #fff;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    border-color: transparent !important;
}

.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0 transparent !important;
}

td .btn-primary {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.card-body:not(.show-all) {
    overflow-x: auto;
}

.dependent-record:nth-child(2n+1), .urgent-contact-record:nth-child(2n+1) {
    padding: 8px 0 !important;
    background-color: #f6f6f6;
}
/*Media*/
@media (min-width: 992px) {
    /*.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {*/
    /*transform: translateX( calc(var(--sidebar-width) * -1)) !important;*/
    /*overflow-x:hidden;*/
    /*}*/
    /*.rtl-direction.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {*/
    /*transform: translateX(var(--sidebar-width)) !important;*/
    /*}*/
    /*#layoutSidenav #layoutSidenav_nav {*/
    /*transform: translateX(0);*/
    /*}*/

    .sb-sidenav-toggled:not(.rtl-direction) #layoutSidenav #layoutSidenav_content {
        /*padding-left: var(--sidebar-min-width);*/
        padding-left: 0;
        margin-left: 0;
        /*transform: translateX(0);*/
        /*top: 56px;*/
    }

    .rtl-direction.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
        /*padding-right: var(--sidebar-min-width);*/
        padding-right: 0;
        margin-right: 0;
        /*transform: translateX(0);*/
        margin-left: unset;
        /*top: 56px;*/
    }
}

@media (max-width: 991px) {
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        width: var(--sidebar-width) !important;
        flex-basis: var(--sidebar-width) !important;
        /*      position: absolute;
        z-index: 9999;*/
    }

    #layoutSidenav #layoutSidenav_nav {
        width: var(--sidebar-min-width) !important;
        flex-basis: var(--sidebar-min-width) !important;
    }
        /*.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {*/
        /*transform: translateX(0) !important;*/
        /*}*/
        /* 

    .rtl-direction #layoutSidenav #layoutSidenav_nav {
        transform: translateX(var(--sidebar-width));
    }*/

        #layoutSidenav #layoutSidenav_nav .navbar-brand .main-logo .text {
            display: none;
        }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav .navbar-brand .main-logo .text {
        display: inline-block;
    }

    #layoutSidenav #layoutSidenav_nav .navbar-brand #api-check {
        bottom: -10px !important;
        right: 10px;
    }

    /*  #layoutSidenav #layoutSidenav_nav:hover .navbar-brand .new-logo.text {
            display: inline-block !important;
        }*/

    /*  #layoutSidenav #layoutSidenav_nav:hover .navbar-brand #api-check {
            right: 55px;
            bottom: 5px !important;
        }*/

    .layout-normal:not(.rtl-direction) #layoutSidenav #layoutSidenav_content {
        /*padding-left: var(--sidebar-min-width);*/
        padding-left: 0;
        margin-left: 0;
        /*top: 56px;*/
        /*transform: translateX(0);*/
    }

    .rtl-direction #layoutSidenav #layoutSidenav_content {
        /*padding-right: var(--sidebar-min-width);*/
        padding-right: 0;
        margin-right: 0;
        margin-left: initial;
        padding-left: initial;
        /*top: 56px;*/
        /*transform: translateX(0);*/
    }

    .search-area-section {
        display: none !important;
    }

    .user-info-area {
        /* width: initial;
        margin-top: 2rem !important;*/
    }

    #api-check {
        /* position: absolute;
        bottom: 14px;
        right: auto;
        left: 55px;*/
    }

    .btn {
        line-height: 2.2;
        padding: 5px 12px;
        margin-bottom: 2px;
    }
    .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
        margin-left: -1.5rem !important;
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 16px;
    }

    #api-check {
        /*  position: absolute;
        bottom: 5px;
        right: auto !important;
        left: 61px !important;*/
    }

    #sidebarToggle {
        margin-top: 5px;
        width: 50px;
        position: relative;
    }

    .user-info-area {
        /*  margin-top: 5px;
        width: initial;*/
    }

    /*   .navbar-brand #api-check {
        display: none !important;
    }*/
    /*.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav:hover {*/
    /*  width: var(--sidebar-min-width) !important;
        flex-basis: var(--sidebar-min-width) !important;  */
    /*}*/

    /* .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav:hover {
        position: absolute;
        z-index: 9999;
    }*/
    /*   #layoutSidenav #layoutSidenav_nav {
        width: var(--sidebar-width) !important;
        flex-basis: var(--sidebar-width) !important;
    }*/
}

@media (max-width: 574px) {
    .header-container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .sb-sidenav-toggled.navbar-brand .new-logo.text {
        display: none !important;
    }

    #sidebarToggle {
        margin-top: 5px;
        width: 50px;
        position: relative;
        top: 0;
    }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        width: 0 !important;
        flex-basis: 0 !important;
    }

    .btn-main {
        margin: 0 0 10px 0;
    }

    .card-body {
        padding: 0;
        padding-top: 10px;
    }
}

@media (max-width: 375px) {
    .matrix-card {
        padding: 0 3px;
        margin-right: 0;
        margin-left: 0;
    }
}