@charset "UTF-8";

body,
.btn {
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
/* 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;
}


@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-Black.eot");
    src: url("../fonts/ar/Cairo-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-Black.woff2") format("woff2"), url("../fonts/ar/Cairo-Black.woff") format("woff"), url("../fonts/ar/Cairo-Black.ttf") format("truetype"), url("../fonts/ar/Cairo-Black.svg#Cairo-Black") format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-Light.eot");
    src: url("../fonts/ar/Cairo-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-Light.woff2") format("woff2"), url("../fonts/ar/Cairo-Light.woff") format("woff"), url("../fonts/ar/Cairo-Light.ttf") format("truetype"), url("../fonts/ar/Cairo-Light.svg#Cairo-Light") format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-Bold.eot");
    src: url("../fonts/ar/Cairo-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-Bold.woff2") format("woff2"), url("../fonts/ar/Cairo-Bold.woff") format("woff"), url("../fonts/ar/Cairo-Bold.ttf") format("truetype"), url("../fonts/ar/Cairo-Bold.svg#Cairo-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-RegularExtraLight.eot");
    src: url("../fonts/ar/Cairo-RegularExtraLight.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-RegularExtraLight.woff2") format("woff2"), url("../fonts/ar/Cairo-RegularExtraLight.woff") format("woff"), url("../fonts/ar/Cairo-RegularExtraLight.ttf") format("truetype"), url("../fonts/ar/Cairo-RegularExtraLight.svg#Cairo-ExtraLight") format("svg");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-SemiBold.eot");
    src: url("../fonts/ar/Cairo-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-SemiBold.woff2") format("woff2"), url("../fonts/ar/Cairo-SemiBold.woff") format("woff"), url("../fonts/ar/Cairo-SemiBold.ttf") format("truetype"), url("../fonts/ar/Cairo-SemiBold.svg#Cairo-SemiBold") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/ar/Cairo-Regular.eot");
    src: url("../fonts/ar/Cairo-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ar/Cairo-Regular.woff2") format("woff2"), url("../fonts/ar/Cairo-Regular.woff") format("woff"), url("../fonts/ar/Cairo-Regular.ttf") format("truetype"), url("../fonts/ar/Cairo-Regular.svg#Cairo-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body, a, text {
    font-family: "Cairo";
}


@media (max-width: 767.98px) {
    .border-0-sm {
        border: 0px solid #dee2e6 !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .class {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .class {
        display: block;
    }
}

.cursor-default {
    cursor: default;
}

.upload-item-image {
    height: 150px;
    width: 235px;
    vertical-align: top;
    line-height: 150px;
    font-size: 4em;
    color: #777;
    border: 2px dashed #828282;
    text-align: center;
    margin-bottom: 0;
    cursor: pointer;
    float: right;
}

    .upload-item-image input {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }

.top-auto {
    top: auto;
}

.bottom-auto {
    bottom: auto
}

.left-auto {
    left: auto;
}

.right-auto {
    right: auto;
}

.fs-0px {
    font-size: 0px;
}

.fs-1px {
    font-size: 1px;
}

.fs-2px {
    font-size: 2px;
}

.fs-3px {
    font-size: 3px;
}

.fs-4px {
    font-size: 4px;
}

.fs-5px {
    font-size: 5px;
}

.fs-6px {
    font-size: 6px;
}

.fs-7px {
    font-size: 7px;
}

.fs-8px {
    font-size: 8px;
}

.fs-9px {
    font-size: 9px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.fs-36px {
    font-size: 36px;
}

.fs-40px {
    font-size: 40px;
}

.fs-50px {
    font-size: 50px;
}

.fs-60px {
    font-size: 60px;
}

.fs-70px {
    font-size: 70px;
}

.fs-110px {
    font-size: 110px;
}

.fs-120px {
    font-size: 120px;
}

.width-10px {
    width: 10px;
}

.height-10px {
    height: 10px;
}

.width-20px {
    width: 20px;
}

.height-20px {
    height: 20px;
}

.width-30px {
    width: 30px;
}

.w-5 {
    width: 5%;
}

.w-15 {
    width: 15%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.height-30px {
    height: 30px;
}

.width-40px {
    width: 40px;
}

.height-40px {
    height: 40px;
}

.width-50px {
    width: 50px;
}

.height-50px {
    height: 50px;
}

.width-60px {
    width: 60px;
}

.height-60px {
    height: 60px;
}

.width-70px {
    width: 70px;
}

.height-70px {
    height: 70px;
}

.width-80px {
    width: 80px;
}

.height-80px {
    height: 80px;
}

.width-90px {
    width: 90px;
}

.height-90px {
    height: 90px;
}

.width-100px {
    width: 100px;
}

.width-120px {
    width: 120px;
}

.width-150px {
    width: 150px;
}

.width-160px {
    width: 180px;
}

.width-170px {
    width: 170px;
}


.width-215px {
    width: 215px;
}

.width-235px {
    width: 235px;
}

.website-wrapper.animate[dir="rtl"] .width-160px {
    width: 160px;
}


.height-100px {
    height: 100px;
}

.height-140px {
    height: 140px;
}


.height-150px {
    height: 150px;
}

.height-5px {
    height: 5px;
}

.width-10vw {
    width: 10vw;
}

.height-10vh {
    height: 10vh;
}

.width-20vw {
    width: 20vw;
}

.height-20vh {
    height: 20vh;
}

.width-30vw {
    width: 30vw;
}

.height-30vh {
    height: 30vh;
}

.h-60 {
    height: 60%;
}

.width-40vw {
    width: 40vw;
}

.height-40vh {
    height: 40vh;
}

.width-50vw {
    width: 50vw;
}

.height-50vh {
    height: 50vh;
}

.width-60vw {
    width: 60vw;
}

.height-60vh {
    height: 60vh;
}

.width-70vw {
    width: 70vw;
}

.height-70vh {
    height: 70vh;
}

.width-80vw {
    width: 80vw;
}

.height-80vh {
    height: 80vh;
}

.width-90vw {
    width: 90vw;
}

.width-13em {
    width: 13em;
}

.height-90vh {
    height: 90vh;
}

.height-100-50px {
    height: calc(100% - 50px);
}

.height-100-90px {
    height: calc(100% - 90px);
}

.height-max-300px {
    max-height: 300px;
}

.height-max {
    height: 470px;
    overflow-y: auto
}

.top-5px {
    top: 5px;
}

.bottom-5px {
    bottom: 5px;
}

.top-m-5px {
    top: -5px;
}

top-m-2px {
    top: -2px;
}

.bottom-m-5px {
    bottom: -5px;
}

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

.bottom-10px {
    bottom: 10px;
}

.top-m-10px {
    top: -10px;
}

.bottom-m-10px {
    bottom: -10px;
}

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

.bottom-15px {
    bottom: 15px;
}

.top-m-15px {
    top: -15px;
}

.bottom-m-15px {
    bottom: -15px;
}

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

.bottom-20px {
    bottom: 20px;
}

.top-m-20px {
    top: -20px;
}

.bottom-m-20px {
    bottom: -20px;
}

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

.bottom-25px {
    bottom: 25px;
}

.top-m-25px {
    top: -25px;
}

.bottom-m-25px {
    bottom: -25px;
}

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

.bottom-30px {
    bottom: 30px;
}

.top-m-30px {
    top: -30px;
}

.bottom-m-30px {
    bottom: -30px;
}

.top-35px {
    top: 35px;
}

.bottom-35px {
    bottom: 35px;
}

.top-m-35px {
    top: -35px;
}

.bottom-m-35px {
    bottom: -35px;
}

.zindex-1 {
    z-index: 1000;
}

.zindex-2 {
    z-index: 1200;
}

.zindex-3 {
    z-index: 1300;
}

.zindex-4 {
    z-index: 1400;
}

.zindex-5 {
    z-index: 1500;
}

.zindex-6 {
    z-index: 1600;
}

.zindex-7 {
    z-index: 1700;
}

.zindex-8 {
    z-index: 1800;
}

.zindex-9 {
    z-index: 1900;
}

.bg-size-cover {
    background-size: cover;
}


.bg-size-contain {
    background-size: contain;
}

/*# sourceMappingURL=styles.css.map */
.animate {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-fill {
    object-fit: fill;
}

.object-fit-contain {
    object-fit: contain;
}

.pointer {
    cursor: pointer;
}

.popover {
    font-family: Cairo;
}

.body-spe-height {
    height: calc(100vh - 70px);
}

.sidebar .side-bar-inner span {
    transform: translateX(190px);
    transition: all 0.3s ease-in-out;
    display: none;
}

.sidebar:hover .side-bar-inner span {
    transform: translateX(0px);
    display: block;
}

.home-content-ar {
    margin-right: 65px;
}

.home-content-en {
    margin-left: 65px;
}

.width-1px {
    width: 1px;
}

.remaining-height {
    height: calc(100vh - 260px);
}

.min-width-150 {
    min-width: 120px;
}

.min-width-340 {
    min-width: 340px;
}

.max-width-160 {
    max-width: 160px;
}

.max-width-120px {
    max-width: 120px;
}

.bg-dark-gray {
    background: #959595;
}

.grid-template-columns-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-template-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-template-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-template-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-template-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-template-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-template-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-template-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-template-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.d2-calendar button {
    border: 0;
    margin: 3px;
    border-radius: 5px;
    font-size: 10px;
    padding: 0;
    position: relative;
    font-weight: bold;
}

    .d2-calendar button:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .d2-calendar button.d2-cal-other-month {
        opacity: 0.38;
    }

    .d2-calendar button.d2-cal-event {
        background: #96affa;
        color: #fff;
    }

    .d2-calendar button.d2-cal-overtime-event {
        background: #96affa;
        color: #fff;
    }

    .d2-calendar button.d2-cal-leave-event {
        background: #abdfff;
        background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
        background-size: 5px 5px !important;
        /*color: #fff;*/ 
    }

    .d2-calendar button.d2-cal-mission-event {
        background-color: #c2e0ab;
        background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0) !important;
        background-size: 5px 5px !important;
    }

    .d2-calendar button.d2-cal-WorkAssignment-event {
        background: #e0abab;
        /*color: #fff;*/
    }
    .d2-calendar button.d2-cal-PartDayWorkAssignment-event {
        background: #e0abab;
        background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
        background-size: 5px 5px !important;
        /*color: #fff;*/
    }
    .d2-calendar button.d2-cal-Remote-Work-event {
        background: #ddf7ef;
        /*color: #fff;*/
    }

    .d2-calendar button.d2-cal-Training-event {
        background: #ccb5bf;
        /*color: #fff;*/
    }

    .d2-calendar button.d2-cal-current.d2-cal-event {
        border: 2px dashed #785fdc;
    }

    .d2-calendar button time {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
    }

    .d2-calendar button.selected {
        background-color: #6f42c1;
    }

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #dcdcdc;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
    padding-top: 70px;
    padding-left: 65px;
    padding-right: 0px;
}

.website-wrapper.animate[dir="rtl"] .modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
    padding-top: 70px;
    padding-right: 65px;
    padding-left: 0;
}


.modal-fullscreen .modal-body {
    overflow-y: auto;
    padding: 0;
}

.right-width {
    width: 340px;
}

.left-width {
    width: calc(100% - 340px);
}

HTML CSSResult Skip Results Iframe EDIT ON .flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.single-chart {
    width: 33%;
    justify-content: space-around;
}

.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 45%;
    max-height: 200px;
}

.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.percentage {
    fill: #666;
    font-family: sans-serif;
    font-size: 0.5em;
    text-anchor: middle;
}

.timeline {
    list-style: none;
    position: relative;
}

    .timeline:before {
        top: 30px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 2px;
        background-color: #009696;
        left: 26px;
        right: unset
    }

.website-wrapper.animate[dir="rtl"] .timeline:before {
    top: 30px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 2px;
    background-color: #009696;
    right: 26px;
    left: unset
}


.timeline > li {
    margin-bottom: 20px;
    position: relative;
}

    .timeline > li:before,
    .timeline > li:after {
        content: " ";
        display: table;
    }

    .timeline > li:after {
        clear: both;
    }

    .timeline > li:before,
    .timeline > li:after {
        content: " ";
        display: table;
    }

    .timeline > li:after {
        clear: both;
    }

    .timeline > li > .timeline-panel {
        width: auto;
        border: 1px solid #d4d4d4;
        border-radius: 2px;
        padding: 20px;
        position: relative;
        -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
        box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
        background: #fff;
        margin: 0 26px;
    }

        .timeline > li > .timeline-panel:before {
            position: absolute;
            top: 26px;
            left: -15px;
            right: unset;
            display: inline-block;
            border-top: 15px solid transparent;
            border-right: 15px solid #ccc;
            border-left: 0 solid #ccc;
            border-bottom: 15px solid transparent;
            content: " ";
        }

.website-wrapper.animate[dir="rtl"] .timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    left: unset;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
}


.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    left: -14px;
    right: unset;
    display: inline-block;
    border-top: 14px solid transparent;
    border-right: 14px solid #fff;
    border-left: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}



.website-wrapper.animate[dir="rtl"] .timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    left: unset;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}


.timeline > li.next-level-approval > .timeline-panel:after {
    border-right: 14px solid #785fdc;
    top: 17px;
}



.website-wrapper.animate[dir="rtl"] .timeline > li.next-level-approval > .timeline-panel:after {
    border-left: 14px solid #785fdc;
    top: 17px;
}

.timeline > li.next-level-approval > .timeline-panel:before {
    top: 19px;
}

.website-wrapper.animate[dir="rtl"] .timeline > li.next-level-approval > .timeline-panel:before {
    top: 19px;
}


.timeline > li > .timeline-badge {
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 27px;
    left: -20px;
    right: unset;
    background-color: #999999;
    z-index: 100;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    padding: 4px 0;
}

.website-wrapper.animate[dir="rtl"] .timeline > li > .timeline-badge {
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 27px;
    right: -20px;
    left: unset;
    background-color: #999999;
    z-index: 100;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    padding: 4px 0;
}

.timeline > li.next-level-approval > .timeline-badge {
    top: 18px !important;
    border-radius: 100% !important;
    background: #785fdc !important;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.website-wrapper.animate[dir="rtl"] .timeline > li.timeline-inverted > .timeline-panel {
    float: left;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-right-width: 0;
    border-left-width: 15px;
    right: -15px;
    left: auto;
}

.website-wrapper.animate[dir="rtl"] .timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.website-wrapper.animate[dir="rtl"] .timeline > li.timeline-inverted > .timeline-panel:after {
    border-right-width: 0;
    border-left-width: 14px;
    right: -14px;
    left: auto;
}

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

@media (max-width: 767px) {
    ul.timeline:before {
        right: 40px;
        left: unset;
    }

    .website-wrapper.animate[dir="rtl"] ul.timeline:before {
        left: 40px;
        right: unset;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        right: 15px;
        left: unset;
        margin-left: 0;
        top: 16px;
    }

    .website-wrapper.animate[dir="rtl"] ul.timeline > li > .timeline-badge {
        left: 15px;
        right: unset;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: left;
    }

    .website-wrapper.animate[dir="rtl"] ul.timeline > li > .timeline-panel {
        float: right;
    }

    ul.timeline > li > .timeline-panel:before {
        border-right-width: 0;
        border-left-width: 15px;
        right: -15px;
        left: auto;
    }

    .website-wrapper.animate[dir="rtl"] ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-right-width: 0;
        border-left-width: 14px;
        right: -14px;
        left: auto;
    }

    .website-wrapper.animate[dir="rtl"] ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
}

.timeline-spe-height {
    height: calc(100% - 64px);
}

.offcanvas-backdrop {
    z-index: 1801;
}

.offcanvas {
    z-index: 1805;
}

.max-width-250 {
    max-width: 450px;
}

.min-width-250 {
    min-width: 210px;
}

.translate-s-400 {
    transform: translateX(-400px);
    transition: 0.5s;
}

.website-wrapper.animate[dir="rtl"] .translate-s-400 {
    transform: translateX(400px);
    transition: 0.5s;
}

.translate-s-0 {
    transform: translateX(0px);
    transition: 0.5s;
}

.footer-box-s {
    transform: translateY(3000px);
}

    .footer-box-s.open {
        transform: translate(0px, 0px);
        height: 100%;
    }

.d2-calendar-events-empty {
    background-image: url('../../../Styles/images/calendar-events-empty.svg');
    background-size: 36%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

.d2-user-rquest__status {
    width: 150px;
    height: 100%;
    background-color: #F0F0F0;
    padding: 4px;
    text-align: center;
    border-left: 1px solid #E0E0E2;
    border-radius: 0 5px 5px 0;
}

/*****from old style added by nsaloom******/
/*spinner*/

div.c_spinningDots {
    display: inline-block;
    width: 100%;
}

.IE_M7 div.c_spinningDots {
    display: inline;
}

div.c_spinningDots div.c_loadingTrack {
    /*left: 50%;*/
    position: absolute;
    /*top: 50%;*/
    width: 100%;
    /*right: 50%;*/
}

div.c_spinningDots div.c_loadingDot {
    background-color: var(--bs-aqua);
    border-radius: 50px;
    height: 4px;
    width: 4px;
}

.dark div.c_spinningDots div.c_loadingDot {
    background-color: #009696;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack {
    animation: 3.3s cubic-bezier(0.25, 0.6, 0.9, 0.35) 0.1s normal none infinite makedotspin1;
    -webkit-animation: 3.3s cubic-bezier(0.25, 0.6, 0.9, 0.35) 0.1s normal none infinite makedotspin1;
    opacity: 0;
}

.RE_WebKit div.c_spinningDots.c_dotsPlaying div.c_loadingTrack {
    opacity: 1;
    visibility: hidden;
}

@keyframes makedotspin1 {
    0% {
        opacity: 1;
        transform: rotate(-10deg);
    }

    35% {
        transform: rotate(360deg);
    }

    72% {
        opacity: 1;
    }

    73% {
        opacity: 0;
        transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        transform: rotate(750deg);
    }
}

@keyframes makedotspin2 {
    4% {
        opacity: 0;
    }

    5% {
        opacity: 1;
        transform: rotate(-10deg);
    }

    40% {
        transform: rotate(360deg);
    }

    77% {
        opacity: 1;
    }

    78% {
        opacity: 0;
        transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        transform: rotate(750deg);
    }
}

@keyframes makedotspin3 {
    9% {
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: rotate(-10deg);
    }

    45% {
        transform: rotate(360deg);
    }

    82% {
        opacity: 1;
    }

    83% {
        opacity: 0;
        transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        transform: rotate(750deg);
    }
}

@keyframes makedotspin4 {
    14% {
        opacity: 0;
    }

    15% {
        opacity: 1;
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(360deg);
    }

    87% {
        opacity: 1;
    }

    88% {
        opacity: 0;
        transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        transform: rotate(750deg);
    }
}

@keyframes makedotspin5 {
    19% {
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: rotate(-10deg);
    }

    55% {
        transform: rotate(360deg);
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0;
        transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        transform: rotate(750deg);
    }
}

@-webkit-keyframes makedotspin1 {
    0% {
        opacity: 1;
        -webkit-transform: rotate(-10deg);
    }

    35% {
        -webkit-transform: rotate(360deg);
    }

    72% {
        opacity: 1;
    }

    73% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }
}

@-webkit-keyframes makedotspin2 {
    4% {
        opacity: 0;
    }

    5% {
        opacity: 1;
        -webkit-transform: rotate(-10deg);
    }

    40% {
        -webkit-transform: rotate(360deg);
    }

    77% {
        opacity: 1;
    }

    78% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }
}

@-webkit-keyframes makedotspin3 {
    9% {
        opacity: 0;
    }

    10% {
        opacity: 1;
        -webkit-transform: rotate(-10deg);
    }

    45% {
        -webkit-transform: rotate(360deg);
    }

    82% {
        opacity: 1;
    }

    83% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }
}

@-webkit-keyframes makedotspin4 {
    14% {
        opacity: 0;
    }

    15% {
        opacity: 1;
        -webkit-transform: rotate(-10deg);
    }

    50% {
        -webkit-transform: rotate(360deg);
    }

    87% {
        opacity: 1;
    }

    88% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }
}

@-webkit-keyframes makedotspin5 {
    19% {
        opacity: 0;
    }

    20% {
        opacity: 1;
        -webkit-transform: rotate(-10deg);
    }

    55% {
        transform: rotate(360deg);
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(750deg);
    }
}

div.c_spinningDots div.c_loadingTrack0 {
    display: none;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack1 {
    animation-name: makedotspin1;
    -webkit-animation-name: makedotspin1;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack2 {
    animation-name: makedotspin2;
    -webkit-animation-name: makedotspin2;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack3 {
    animation-name: makedotspin3;
    -webkit-animation-name: makedotspin3;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack4 {
    animation-name: makedotspin4;
    -webkit-animation-name: makedotspin4;
}

div.c_spinningDots.c_dotsPlaying div.c_loadingTrack5 {
    animation-name: makedotspin5;
    -webkit-animation-name: makedotspin5;
}

.spinner-cont {
    float: left;
    padding: 7px 0;
    width: 40px;
    margin: 0 3px;
}

.attachment_Pagging {
    padding: 50%;
}

.dropdown-container .data-container-wrapper {
    background: #f6f7f8;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    transition: all 0.3s;
}

.dropdown-container .data-container li:hover {
    background: var(--bs-aqua) !important;
    color: #fff;
}

.dropdown-container .active {
    background: var(--bs-aqua) !important;
    color: #fff;
}

.timepicker__section {
    display: inline-block;
    /*width: 50px;*/
    position: relative;
    float: left;
}

    .timepicker__section.open .data-container-wrapper,
    .dropdown-container input:focus + .data-container-wrapper,
    .data-container-wrapper.open {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

.dropdown-container .data-container {
    list-style-type: none;
    overflow-x: hidden;
    overflow: auto;
}

.bg-container-gray {
    max-width: 13em;
    height: 100%;
    background-color: #F0F0F0;
    padding: 10px;
    text-align: center;
    border-left: 1px solid #E0E0E2;
    border-radius: 0 5px 5px 0;
    min-width: 120px;
}

.req-title-sign::after {
    content: "*";
}

.init-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.init-img {
    display: block;
    margin: 0 auto 80px;
    width: 350px;
}

.cube-folding {
    width: 70px;
    height: 70px;
    display: inline-block;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 0;
}

    .cube-folding span {
        position: relative;
        width: 35px;
        height: 35px;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        display: inline-block;
    }

        .cube-folding span::before {
            content: '';
            background-color: #405c74;
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 35px;
            height: 35px;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            -moz-animation: folding 2.5s infinite linear both;
            -webkit-animation: folding 2.5s infinite linear both;
            animation: folding 2.5s infinite linear both;
        }

    .cube-folding .leaf2 {
        -moz-transform: rotateZ(90deg) scale(1.1);
        -ms-transform: rotateZ(90deg) scale(1.1);
        -webkit-transform: rotateZ(90deg) scale(1.1);
        transform: rotateZ(90deg) scale(1.1);
    }

        .cube-folding .leaf2::before {
            -moz-animation-delay: 0.3s;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            background-color: #3d5f7c;
        }

    .cube-folding .leaf3 {
        -moz-transform: rotateZ(270deg) scale(1.1);
        -ms-transform: rotateZ(270deg) scale(1.1);
        -webkit-transform: rotateZ(270deg) scale(1.1);
        transform: rotateZ(270deg) scale(1.1);
    }

        .cube-folding .leaf3::before {
            -moz-animation-delay: 0.9s;
            -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
            background-color: #4b6882;
        }

    .cube-folding .leaf4 {
        -moz-transform: rotateZ(180deg) scale(1.1);
        -ms-transform: rotateZ(180deg) scale(1.1);
        -webkit-transform: rotateZ(180deg) scale(1.1);
        transform: rotateZ(180deg) scale(1.1);
    }

        .cube-folding .leaf4::before {
            -moz-animation-delay: 0.6s;
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
            background-color: #48637a;
        }

@-moz-keyframes folding {
    0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@-webkit-keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes folding {
    0%, 10% {
        -moz-transform: perspective(140px) rotateX(-180deg);
        -ms-transform: perspective(140px) rotateX(-180deg);
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -moz-transform: perspective(140px) rotateX(0deg);
        -ms-transform: perspective(140px) rotateX(0deg);
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -moz-transform: perspective(140px) rotateY(180deg);
        -ms-transform: perspective(140px) rotateY(180deg);
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

.cube-wrapper {
    position: relative;
    margin: 0 auto 60px;
    width: 170px;
    height: 170px;
    text-align: center;
}
/*============================================
    Whats new page (added by Omar)
============================================*/
.AddReleaseWhatsNew .modal-dialog {
    min-width: 70% !important;
}

.AddReleaseWhatsNew .row {
    margin-bottom: 25px;
    margin-top: 12px;
    font-size: 22px;
}

.ReleaseWhatsNewModal .modal-dialog {
    min-width: 63% !important;
    margin-top: 40px !important;
}

.ReleaseWhatsNewModal .modal-body {
    height: 500px;
}

.whats-new-modal__image {
    position: relative;
    width: 50%;
    background: #eee;
    padding: 20px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .whats-new-modal__image img {
        max-width: 100%;
        height: auto;
        max-height: 100%;
        display: block;
    }

.whats-new-modal__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.whats-new-modal__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ADADAF;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}

    .whats-new-modal__dot.active {
        background: #3FA9F5 !important;
    }

.whats-new-modal__info {
    width: 50%;
    padding: 50px 20px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.whats-new-modal__info-steps {
    color: #CBA183;
    font-size: 18px;
    direction: rtl;
}

.whats-new-modal__info-title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 30px;
    color: #785fdc;
    font-weight: bold;
}

.whats-new-modal__info-desc {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7;
    max-width: 660px;
    margin: 10px 0;
    color: #737373;
    height: 72%;
}

.whats-new-modal__btns {
    width: 120%;
    margin-top: auto;
}

    .whats-new-modal__btns button {
        width: 120px;
    }

.whats-new-popover {
    width: 400px;
    background: #fff;
}

.whats-new-popover__top {
    padding: 25px;
    color: #fff;
    background: #009696;
}

.whats-new-popover__item {
    padding: 25px;
    border-bottom: 1px solid #ddd;
}

.whats-new-popover {
    width: 400px;
    background: #fff;
    position: fixed;
    bottom: 72px;
    right: 80px;
    max-height: calc(100vh - 90px);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.whats-new-popover__item {
    padding: 20px 25px 20px 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.whats-new-popover__item-version {
    color: #785fdc;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.whats-new-popover__item-badge {
    display: inline-block;
    color: #fff;
    background: #009696;
    padding: 0px 12px 3px;
    margin-right: 30px;
    vertical-align: middle;
}

.whats-new-popover__bottom {
    height: 466px;
    overflow-y: auto;
}

.WhatsNew-Btn {
    background-color: #009696;
    border: none;
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    font-size: 18px;
}

.ss-hide {
    transform: translateY(-20px);
    opacity: 0;
    transition: 0.3s all;
}

.ss-show {
    transform: translateY(0px);
    opacity: 1;
}

.hide {
    display: none;
}

.show {
    display: inline;
}

.show-block {
    display: block;
}

.hide-1 {
    display: none !important;
}



.website-wrapper.animate[dir="rtl"] .open {
    transform: translateY(0);
}

.website-wrapper.animate[dir="ltr"] .open {
    transform: translateY(0);
}
/*quickActions*/
.quick-actions {
    height: 100%;
    width: 100%;
}


.quick-actions__title {
    font-size: 16px;
    color: #2C2C2C;
    padding: 0 6px;
    margin-left: 20px;
    border-left: 1px solid rgba(112, 112, 112, 0.17);
}

.quick-actions__icon {
    color: #707C8C;
    padding-right: 10px;
}

.quick-actions__request-number {
    color: var(--primary_new);
    font-weight: bold;
    font-size: 12px;
}

.quick-actions__person {
    margin: 30px 0;
}

.quick-action__avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 3px 6px #00000029;
    padding: 4px;
    margin-left: 24px;
}

    .quick-action__avatar > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: transparent;
    }

.quick-actions__name {
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.quick-actions__desc .alabel,
.quick-actions__notes .alabel {
    color: #63666A;
    font-size: 20px;
}

.quick-actions__desc textarea,
.quick-actions__notes textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e2 !important;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #E0E0E2;
    border-radius: 11px;
    resize: none;
}


.quick-actions__footer {
    height: 83px;
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px #00000014;
}

    .quick-actions__footer .quick-actions__btn {
        width: 178px;
        height: 48px;
        border-radius: 12px;
        font-size: 18px;
        cursor: pointer;
        margin-left: 30px;
    }

        .quick-actions__footer .quick-actions__btn:last-child {
            margin-left: 0;
        }

        .quick-actions__footer .quick-actions__btn:nth-child(3) {
            border-right: 1px solid #EAEDF2;
        }

    .quick-actions__footer .btn-primary.quick-actions__btn {
        background: var(--primary_new);
        border: #32d2a0;
    }

    .quick-actions__footer .btn-secondary.quick-actions__btn {
        background: #ffffff 0% 0% no-repeat padding-box;
        border: 2px solid #ff6868;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 2px solid #FF6868;
        color: #FF6868;
    }

    .quick-actions__footer .btn-edit.quick-actions__btn {
        border: none;
        border-right: 1px solid #EAEDF2;
        color: #fff;
        background: var(--secondary);
    }

.quick-actions__sub-title {
    font-size: 0.7em;
    margin-right: 7px;
}

.employees-list__search {
    width: 100%;
    padding: 30px;
}

.employees-list__info.open {
    position: absolute;
    top: 0;
    background-color: #fff;
    height: calc(100vh - 166px);
    overflow-y: scroll;
}

.employees-list__search-adv {
    display: none;
    max-height: 0;
}

    .employees-list__search-adv.show {
        overflow: hidden;
        max-height: 40vh;
        padding: 0 14px;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        height: auto;
    }

.height-full {
    height: 100%;
}
/***********************/
.evaluation-tbl {
    text-align: right;
    background: #e4e9f6;
    color: #586381;
    border: 1px solid;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .evaluation-tbl:not(:first-child) {
        border-top: 0;
    }

    .evaluation-tbl .item {
        padding: 3px;
        font-weight: bold;
        color: var(--bs-dark-green) !important;
        font-size: 13px;
    }

        .evaluation-tbl .item:not(:last-child) {
            border-left: 1px solid;
        }

/***********************/

.relativePos {
    position: relative;
}
/* Attachment window */

.attachement-data__inner {
    background: #fff;
    width: 96%;
    max-width: 600px;
    padding: 30px;
}


/* Attachments */

.attachment {
    position: relative;
    background: #eee;
    padding: 15px;
    display: inline-block;
    text-align: center;
    margin-left: 17px;
    margin-bottom: 15px;
    width: 130px;
    vertical-align: top;
    border: 1px solid #ccc;
}

    .attachment:last-child {
        margin-left: 0;
    }

.attachment__img {
    width: 80px;
}

.attachment__name {
    font-size: 1.1em;
    margin-top: 20px;
    max-width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment__remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #ccc;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
}

    .attachment__remove:hover {
        background: #969696;
        color: #fff;
    }

.upload-attach {
    height: 150px;
    width: 120px;
    vertical-align: top;
    line-height: 150px;
    font-size: 4em;
    color: #777;
    border: 2px dashed #828282;
    text-align: center;
    margin-bottom: 0;
    cursor: pointer;
    float: right;
}

    .upload-attach input {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }

.sidebar-lst-spnr {
    height: 70px;
    margin-bottom: -10px;
}

.sidebar-lst-spnr-1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-biz-sign {
    position: absolute;
    top: 2px;
    right: 3px;
}

.item-biz {
    height: 5px;
    width: 60px;
    float: right;
    margin-left: 5px;
}

.item-biz-exceed-limit {
    background-color: #ff0700;
    border-color: #d43f3a;
}

.item-biz-withdrawal {
    background-color: #ffc800;
    border-color: #ffc800;
}

/*Actions*/
.actions-header {
    padding: 0 10px;
    height: 84px;
    background-color: #fff;
    color: #292929;
    box-shadow: 0 0 10px 0px #aaa;
    position: relative;
    z-index: 1;
}



.main-content-wrapper {
    height: calc(100% - 94px);
    padding: 1.5%;
    overflow: auto;
}

.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 12;
    background-color: rgba(0,0,0,0.4);
    display: none;
    pointer-events: auto;
}

.inline {
    display: inline;
}

.loading span {
    color: #fff;
    position: absolute;
    top: calc(50% - 15px);
    right: calc(50% - 40px);
    font-size: 1.2em;
}

.validation-err input,
.validation-err textarea {
    border: 1px solid #FF5B5B !important;
    border-right: 3px solid #FF5B5B !important;
    margin-bottom: 0;
}

.validation-err-div div {
    border: 1px solid #FF5B5B !important;
    border-right: 3px solid #FF5B5B !important;
    margin-bottom: 0;
}

.err {
    border: 1px solid #FF5B5B !important;
    border-right-width: 3px !important;
}

.err-msg {
    font-style: italic;
    color: red;
    display: block;
    font-size: 11px;
}

.tr-error {
    border: 2px solid #FF5B5B !important;
}


.td-error {
    border: 2px solid #FF5B5B !important;
    border-right-width: 3px !important;
}

.err-msg-1 {
    font-style: normal;
    color: red;
    font-size: 1.2em;
}

.err-msg:before {
    display: none !important;
}

.err-msg.light {
    color: #ffadad;
}

/* switch css */
.schedule {
    margin-top: 15px;
}

.switch-box {
    display: inline-block;
    margin: 0 10px;
    position: relative;
    vertical-align: middle;
}

    .switch-box input[type="checkbox"] {
        height: 24px;
        margin-top: 0;
        position: absolute;
        visibility: hidden;
        width: 39px;
        z-index: 1;
    }

    .switch-box label {
        bottom: 0;
        cursor: pointer;
        display: block;
        height: 24px;
        margin: 0 auto;
        position: absolute;
        top: 0;
        width: 39px;
        z-index: 9999;
    }

    .switch-box .switch {
        background: #389bd3;
        border-bottom: 1px solid #3e9cd1;
        border-radius: 5px;
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.09) inset;
        height: 24px;
        margin: 0 auto;
        position: relative;
        width: 39px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .switch-box .switch-circle {
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 25px;
        height: 15px;
        width: 39px;
    }

        .switch-box .switch-circle.switched {
            background: #389bd3;
            border: 1px solid #389bd3;
        }

    .switch-box .switch .button {
        background: #fff none repeat scroll 0 0;
        border: 2px solid #fff;
        border-radius: 3px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
        display: block;
        height: 20px;
        left: 21px;
        position: absolute;
        right: auto;
        top: 2px;
        transition: left 0.25s ease-in-out 0s;
        width: 16px;
    }

    .switch-box .switch-circle .button {
        border: 1px solid #eee;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 3px 0 #000000;
        box-shadow: 0 0 3px 0 #000000;
        height: 20px;
        top: -3px;
        width: 20px;
    }

    .switch-box .switch-circle.filter {
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 25px;
        height: 15px;
        width: 195px;
    }

        .switch-box .switch-circle.filter.switched {
            background: #389bd3;
            border: 1px solid #389bd3;
        }

    .switch-box .switch.switch-circle.filter .button {
        background: #fff none repeat scroll 0 0;
        border: 2px solid #fff;
        border-radius: 3px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
        display: block;
        height: 20px;
        left: 182px;
        position: absolute;
        right: auto;
        top: 2px;
        transition: left 0.25s ease-in-out 0s;
        width: 16px;
    }

    .switch-box .switch.switch-circle.filter .button {
        border: 1px solid #eee;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 3px 0 #000000;
        box-shadow: 0 0 3px 0 #000000;
        height: 20px;
        top: -3px;
        width: 20px;
    }

    .switch-box .switch-circle.filter.switched .button {
        left: -2px;
    }

    .switch-box .switch-circle.switched .button {
        left: -2px;
    }

.switch.switched .button {
    left: 2px;
}

.switch-box input[type="checkbox"]:checked ~ .switch .button {
    left: 21px;
}

.switch-box .switch-reverse {
    background: #eee;
    border: 1px solid #ccc;
}

    .switch-box .switch-reverse.switched {
        background: #389bd3;
        border-color: #389bd3;
    }

    .switch-box .switch-reverse .button {
        top: 1px;
    }

/* switch css */
.approval-chain-next-phase {
    width: calc(100% - 76px);
    height: 40px;
    background-color: #3c7373;
    margin: 0 0 15px 76px;
    color: #fff;
    padding: 0 15px;
    display: flex;
    align-items: center;
}
/* Start Autocomplete CSS */
.auto-container {
    width: 100%;
    position: relative;
    padding: 0px;
}

.auto-control {
    width: 100%;
    outline: none;
    height: 40px;
    border-radius: 0px;
}

.auto-loading {
    position: absolute;
    top: 13px;
    left: 15px;
}

.auto-input-container {
    width: 100%;
    z-index: 0;
    position: relative;
}

    .auto-input-container input:focus {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

.auto-toggle-list {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 25px;
    text-align: center;
    font-weight: bold;
    height: 43px;
    font-size: 12px;
    color: #000;
    padding-top: 4px;
    cursor: pointer;
    line-height: 35px;
}

.auto-data-container {
    width: 100%;
    background: #f6f6f6;
    position: absolute;
    color: #434343;
    padding: 0px;
    z-index: 100000;
    max-height: 200px;
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid #d2d2d2;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0px 4px 4px #cacaca;
}

    .auto-data-container.invert {
        box-shadow: 0px -4px 4px #cacaca;
    }

.auto-data-item {
    padding: 10px;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 2px 1px 0px rgba(255, 255, 255, 0.23);
    box-shadow: 2px 1px 0px rgba(255, 255, 255, 0.23);
}

    .auto-data-item div {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .auto-data-item:hover {
        background-color: #ddd;
    }

    .auto-data-item.selected {
        background-color: rgba(0,0,0,0.5);
    }


@keyframes dot-frames {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    50% {
        transform: translateX(50%);
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.dot {
    width: 4px;
    height: 4px;
    background-color: #009696;
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
}

.dot-loading {
    width: 100%;
    position: absolute;
    top: 3px;
    right: 3px;
    opacity: 0;
    animation-name: dot-frames;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}
/* End Autocomplete CSS */

.bi-004 {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #000;
    float: right;
    font-size: 1.4em;
    line-height: 0;
    background: #fff;
}

.website-wrapper[dir='ltr'] .bi-004 {
    float: left;
}

.bi-095 {
    padding: 0px;
    height: 100%;
    width: calc(100% - 400px);
    float: right;
    background-color: rgb(230,230,230);
    position: relative
}

.action-disable {
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.40;
    cursor: not-allowed !important;
}

.employee-info .days {
    margin-bottom: 0;
    line-height: 1;
    font-size: 50px;
}

.employee-info__box {
    background: #555;
    padding: 10px;
    display: block;
    margin-bottom: 4px;
}

    .employee-info__box p:first-child:after {
        content: "";
        display: block;
        width: 30px;
        height: 1px;
        margin: 16px auto 0px;
        background: #afafaf;
    }

    .employee-info__box p:last-child {
        margin-bottom: 0;
    }

.employee-info-box .days {
    font-size: 35px;
    margin-bottom: 0;
}

.employee-info-box .daysSmall {
    font-size: 16px;
    margin-bottom: 0;
}


.employee-vacation-info__item {
    background: #006060;
    padding: 10px;
    height: 90px;
    overflow: hidden;
    margin: 2px;
}

    .employee-vacation-info__item.selected {
        background-color: #c7b68c;
    }

.employee-mission-info__item {
    background: #006060;
    padding: 10px;
    min-height: 90px;
    overflow: hidden;
    margin: 2px;
}

    .employee-mission-info__item.selected {
        background-color: #c7b68c;
    }

.year {
    text-align: center;
    font-size: 1.4em;
    background: #006060;
    color: #fff;
    padding: 5px;
    height: 37px;
}

.color-gold {
    color: gold;
}

.inactive {
    color: #b9b9b9 !important;
    background-color: rgb(238, 238, 238);
    cursor: default;
}

.spe-height-50 {
    height: calc(100% - 50px);
}

.min-width-0 {
    min-width: 0
}


.search-accordion .accordion-button::after {
    content: "\f1c8";
    font-family: "selfservices";
    color: #fff;
    font-size: 20px;
    text-align: center;
    width: 30px;
    height: 38px;
    background: #009696;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
    transform: unset;
}


.spe-height-vh-100 {
    height: calc(100vh - 100px);
}

.side-bar-inner .open {
    background: #2d2d2d;
    color: #96affa;
}

.max-height-915px {
    max-height: 915px;
}

.datepicker-container {
    /*width: 300px;*/
    position: relative;
    padding: 0px;
}

.tempDatePicker {
    background: #fff;
}

    .tempDatePicker .datepicker-container {
        width: auto !important;
    }
/* to be removed */

.datepicker-control {
    width: 100%;
    padding-left: 25px;
    outline: none;
}

.datepicker-loading {
    position: absolute;
    top: 13px;
    left: 15px;
}

.datepicker-input-container {
    width: 100%;
    z-index: 0;
    position: relative;
}

.datepicker-toggle-list {
}

.datepicker-data-container {
    width: 100%;
    max-width: initial;
    left: 0;
    background: #fff;
    position: absolute;
    color: #fff;
    padding: 0px;
    z-index: 1;
    height: 210px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-top: 0px;
    top: 74px;
    z-index: 888888;
}

.datepicker-header {
    float: right;
    width: 100%;
    height: 27px;
    background-color: rgb(50 210 160);
}

.datepicker-day-title {
    float: right;
    width: 14.28%;
    text-align: center;
    padding: 4px 2px;
    /*font-size: 0.75em;
    color: #6f6f6f;*/
    font-size: 0.9em;
    color: #ffffff;
    font-weight: bold;
}

.datepicker-body-header-container {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.datepicker-body {
    float: right;
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /*padding-left: 17px;*/
    box-sizing: content-box;
}

.datepicker-year-rpt-container {
    width: 0;
    height: 0;
    transition: 0.5s opacity cubic-bezier(0.4, 0, 1, 1);
    opacity: 0;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    overflow: auto;
    overflow-x: hidden;
    padding-left: 17px;
    box-sizing: content-box;
}

    .datepicker-year-rpt-container.show {
        opacity: 1;
        width: 100%;
        height: 100%;
    }

.datepicker-year {
    float: right;
    width: 24%;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    color: #000;
    margin: 4px 0 0px 4px;
    font-weight: bold;
    font-size: 1.1em;
    position: relative;
}

    .datepicker-year:hover,
    .datepicker-year.selected {
        background-color: rgba(49, 75, 100, 0.97);
        color: #fff;
        border-radius: 2px;
    }

.datepicker-year-rpt-name {
}

.datepicker-day {
    float: right;
    width: calc(14.28% - 1px);
    text-align: center;
    padding: 6px 2px;
    font-size: 1em;
    color: #1d1d1d;
    position: relative;
    font-weight: bold;
    margin: 1px 0px 0px 1px;
    background: #e9ecef;
    min-height: 30px;
}

    .datepicker-day:not(.empty):hover,
    .datepicker-day.selected:not(.empty) {
        background-color: #009696;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

        .datepicker-day:not(.empty):hover span,
        .datepicker-day.selected:not(.empty) span {
            color: #fff;
        }

.datepicker-month {
    float: right;
    width: 100%;
    padding: 0px;
    color: #656565;
}

.datepicker-month-name {
    float: right;
    font-weight: bold;
    font-size: 1.2em;
    position: relative;
    color: #545454;
    padding: 5px 10px;
}

.datepicker-year-name {
    float: left;
    padding: 5px 10px;
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
    position: relative;
    margin: 1px 0 0 1px;
    color: #009696;
}

    .datepicker-year-name:hover {
        background-color: #009696;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

.datepicker-month-secondary {
    font-size: 0.65em;
    position: absolute;
    top: -10px;
    right: 20px;
    color: #656565;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.datepicker-day-secondary {
    font-size: 0.75em;
    position: absolute;
    top: 1px;
    left: 2px;
    color: #656565;
}

.datepicker-settings {
    position: absolute;
    height: auto;
    overflow: hidden;
    top: 38px;
    background-color: #009696;
    z-index: 1;
    left: 0;
    display: flex;
    max-width: initial;
}

    .datepicker-settings.invert {
        box-shadow: 0px 10px 5px #d0cccc, 0px -3px 5px #acaaaa;
    }

.datepicker-settings-option {
    color: #fff;
    text-align: center;
    /* width: 100%;*/
}

    .datepicker-settings-option:hover {
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
    }

    .datepicker-settings-option.selected {
        background-color: rgba(255, 255, 255, 0.3);
    }

.notification-container {
    height: 300px;
    overflow: auto;
}
/* End Datepicker CSS */
.notify-msg {
    position: fixed;
    width: 316px;
    color: #fff;
    z-index: 88888888;
    left: 0;
    text-align: center;
    font-size: 1.2em;
    transition: all .2s;
    transform: translateX(-110%);
    border-radius: 0;
    background-color: rgb(35, 43, 62);
    box-shadow: 2px 5px 8px 3px #656565;
    height: 100px;
    overflow: hidden;
}

div.website-wrapper[dir="ltr"] .notify-msg {
    position: fixed;
    width: 316px;
    color: #fff;
    z-index: 88888888;
    right: 0;
    left: auto;
    text-align: center;
    font-size: 1.2em;
    transition: all .2s;
    transform: translateX(110%);
    border-radius: 0;
    background-color: rgb(35, 43, 62);
    box-shadow: 2px 5px 8px 3px #656565;
    height: 100px;
    overflow: hidden;
}

.notify-msg-0 {
    top: 160px;
}

.notify-msg-1 {
    top: 275px;
}

.notify-msg-2 {
    top: 390px;
}

.notify-msg-3 {
    top: 505px;
}

.notify-msg-4 {
    top: 620px;
}

.scaleUp-fade {
    transform: translateX(0) scale(1) !important;
}

.remove-icon {
    top: 0;
    position: absolute;
    left: 0;
    padding: 4px 8px;
    font-size: 1.25em;
}

.warning-notify {
    float: right;
    width: 50px;
    text-align: center;
    font-size: 2.5em;
    padding: 20px 0px;
    background-color: rgba(240, 253, 0, 0.43);
    color: #fff;
    height: 100%;
}

.info-notify {
    float: right;
    width: 50px;
    text-align: center;
    font-size: 2.5em;
    padding: 20px 0px;
    background-color: rgba(255, 255, 255, 0.43);
    color: #fff;
    height: 100%;
}



#chaincollIcon {
    display: none
}

.rotate-text-selseleh {
    display: none
}

.success-notify {
    float: right;
    width: 50px;
    text-align: center;
    font-size: 2.5em;
    padding: 20px 0px;
    background-color: var(--primary_new);
    color: #fff;
    height: 100%;
}

.danger-notify {
    float: right;
    width: 50px;
    text-align: center;
    font-size: 2.5em;
    padding: 20px 0px;
    background-color: rgba(202, 55, 55, 0.47);
    color: #fff;
    height: 100%;
}

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

.disabled {
    pointer-events: none;
    opacity: 0.7;
    font-weight: bold;
}

.btn-primary.disabled {
    cursor: not-allowed;
    background-color: #5f6972;
    border: white;
}

.after-action {
    background-color: rgb(195 202 213) !important;
    cursor: no-drop !important;
    outline: 3px solid #405870;
}



    .after-action::after {
        content: "تم اتخاذ إجراء";
        position: absolute;
        z-index: 2;
        width: 81px;
        font-size: 16px;
        font-weight: 700;
        color: rgb(255 255 255);
        opacity: 0.9;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        right: 0;
        left: auto;
        height: 100%;
        top: auto;
        white-space: normal;
        background: #a1b7f7;
        font-family: 'Cairo';
        line-height: 26px;
        box-shadow: 0 0 16px rgb(0 0 0 / 43%);
        text-align: center
    }


    .after-action:before {
        background: rgb(206 219 255 / 80%);
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        right: 0;
        top: 0;
        height: 100%;
    }


div.website-wrapper[dir="ltr"] .after-action::after {
    content: "Action Taken";
    position: absolute;
    z-index: 2;
    width: 81px;
    font-size: 16px;
    font-weight: 700;
    color: rgb(255 255 255);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    left: 0;
    right: auto;
    height: 100%;
    top: auto;
    white-space: normal;
    background: #a1b7f7;
    font-family: 'Cairo';
    line-height: 26px;
    box-shadow: 0 0 16px rgb(0 0 0 / 43%);
}




div.website-wrapper[dir="ltr"] .after-action:before {
    background: rgb(206 219 255 / 80%);
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    right: auto;
    left: 0;
    top: 0;
    height: 100%;
}


.rpv-097 {
    float: right;
    width: calc(100% - 75px);
    padding: 15px 10px;
    height: 100%;
    text-align: right;
}

div.website-wrapper[dir="ltr"] .rpv-097 {
    text-align: left;
}

.login-box-Img-1 {
    background-image: url(../images/login-Img-1.png);
}

.login-box-Img-2 {
    background-image: url(../images/login-Img-2.png);
}

.login-box-Img-3 {
    background-image: url(../images/login-Img-3.png);
}

.login-box-Img-4 {
    background-image: url(../images/login-Img-4.png);
}

.bg-whatermark {
    background-image: url(../images/mtwhite.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: left -70px;
}

.btn-primary.disabled {
    cursor: not-allowed;
    background-color: #5f6972;
    border: white;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}


.rounded-4 {
    border-radius: 0.6rem !important;
}

@media (max-width: 1350px) {
    img.height-150px {
        height: 70px;
        width: 70px;
    }

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

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

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

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

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

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

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

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

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

    .evaluation-tbl .item {
        font-size: 11px;
    }

    #chaincollIcon {
        display: block;
    }

    .chain-container-coll {
        position: fixed;
        box-shadow: 8px 2px 20px 4px #0000002b;
        transition: 0.5s;
    }

    .chain-container-exp {
        position: fixed !important;
        box-shadow: 8px 2px 20px 4px #0000002b;
        transition: 0.5s;
    }


    .trans-x-293 {
        transform: translateX(123px);
        transition: 0.5s;
        min-width: 164px !important;
        position: absolute !important;
    }

    .content-beside-chain {
        margin-left: 50px;
        margin-right: 0px;
    }

    .website-wrapper.animate[dir="ltr"] .content-beside-chain {
        margin-left: 0px;
        margin-right: 50px;
    }

    .website-wrapper.animate[dir="rtl"] .trans-x-293 {
        transform: translateX(-250px);
        transition: 0.5s;
        position: absolute !important;
        min-width: 300px !important;
    }


    .rotate-text-selseleh {
        transform: rotate( -90deg);
        position: absolute;
        left: -34px;
        right: unset;
        top: 115px;
        font-size: 17px;
    }

    .website-wrapper.animate[dir="rtl"] .rotate-text-selseleh {
        transform: rotate( -90deg);
        position: absolute;
        right: -41px;
        left: unset;
        top: 115px;
        font-size: 17px;
    }

    .chain-container-exp .rotate-text-selseleh {
        display: none
    }

    .chain-container-coll .rotate-text-selseleh {
        display: block
    }

    .chain-container-exp .timeline-spe-height {
        height: calc(100% - 200px );
    }
}


@media (max-height: 957px) {
    .fs-3 {
        font-size: 1.3rem !important;
    }

    .fs-2 {
        font-size: 1.2rem !important;
    }

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

    .fs-120px {
        font-size: 80px;
    }

    .home-content .circular-chart {
        margin: 4px auto;
        max-height: 60px;
        font-size: 16px;
    }

    img.height-150px {
        height: 60px;
        width: 60px;
    }

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

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

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

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

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

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

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

    .animate[dir="rtl"] .me-4-small-res {
        margin-left: 1.5rem !important;
        margin-right: auto;
    }

    .animate[dir="ltr"] .me-4-small-res {
        margin-right: 1.5rem !important;
        margin-left: auto;
    }
}

@media (max-height: 750px) {
    .fs-10px-750 {
        font-size: 10px !important;
    }

    .home-content .hide-750 {
        display: none !important
    }

    .home-content .p-3-750 {
        padding: 0.2rem !important;
    }

    .home-content .p-1-750 {
        padding: 0rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .home-content .p-2-750 {
        padding: 0rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .home-content .py-0-750 {
        padding: 0rem !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    .home-content .my-1-750 {
        margin-top: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }

    .home-content .fs-3-750 {
        font-size: 0.8rem !important;
    }

    .home-content .fs-11px-750 {
        font-size: 11px !important;
    }
}


@media (max-width: 1000px) {
    .under-1000 {
        position: fixed;
        z-index: 8888888888888;
        height: 100%;
        width: 100%;
        background: #fff;
        color: #333;
        display: block !important;
    }
}


/*for testing*/


.striped-item:nth-child(odd) {
    background: #F9F9F9;
}

.striped-item:nth-child(even) {
    background: #EFEFEF;
}

.striped-item-rev:nth-child(even) {
    background: #F9F9F9;
}

.striped-item-rev:nth-child(odd) {
    background: #EFEFEF;
}

.striped-item-for-children:nth-child(odd) > * {
    background: #F9F9F9;
}

.striped-item-for-children:nth-child(even) > * {
    background: #EFEFEF;
}

shared-departmentsTree shared-departmentsTree {
    display: block;
    padding-right: 20px;
    background: inherit;
}

    shared-departmentsTree shared-departmentsTree .striped-item {
        background: transparent !important;
    }

.checkbox-comp {
    position: relative;
    text-align: right;
    clear: both;
}

    .checkbox-comp:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        font-family: 'eventa-icons' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-align: center;
        font-size: 15px;
        width: 16px;
        height: 16px;
        color: #fff;
        line-height: 16px;
        background: #b8b8b8;
        border-radius: 3px;
        margin-left: 10px;
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.28);
    }

    .checkbox-comp.checked:before {
        content: '\e930';
        background: #389bd3 !important;
        border: 0 !important;
    }

    .checkbox-comp span {
        font-size: 16px;
    }

.checkbox-white:before {
    background: #fff;
    border: 1px solid #c5c5c5;
}

.fcsrc {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.frcs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.frcc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.frss {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.frsrs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    justify-content: flex-start;
}

.fcsrs {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.fwrap {
    flex-wrap: wrap;
}

.frce {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.main-item-title-icon {
    font-size: 2.5em;
}

.main-item-title {
    font-size: 1.5em;
}

.main-item-title-roleDescription {
    font-size: 12px;
    display: block;
    padding: 0px 5px
}

.main-item-title-requestNumber {
    font-size: 1.5em;
    padding: 0 5px;
}

.main-item-action {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    padding: 16px 0;
}

    .main-item-action .action {
        padding: 0px 15px;
        font-size: 2.1em;
        float: left;
        line-height: 0;
        cursor: pointer;
        text-align: center;
        height: 100%;
    }

    .main-item-action .action-seperator {
        border-right: 2px solid #5f5f5f;
    }


.main-item-action2 {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    background: rgba(202, 202, 202, 0.53);
}

    .main-item-action2 .action2 {
        padding: 17px 15px;
        font-size: 2.1em;
        float: left;
        line-height: 1.2;
        cursor: pointer;
        text-align: center;
        height: 100%;
        min-width: 80px;
    }

        .main-item-action2 .action2.primary {
            background-color: #E6E6E6;
        }

            .main-item-action2 .action2.primary:hover {
                background-color: #eee;
            }

        .main-item-action2 .action2:hover {
            background-color: rgb(244 239 239 / 53%);
        }

    .main-item-action2 .action-close {
        padding: 17px 0px 17px 15px;
        background-color: #a8a8a8;
    }

    .main-item-action2 .action-seperator {
        border-right: 2px solid #737373;
    }

    .main-item-action2 .action2.approve {
        background: #E6E6E6;
    }

        .main-item-action2 .action2.approve:hover {
            background-color: #eee;
        }

    .main-item-action2 .action2.edit {
        background-color: #E6E6E6;
    }

        .main-item-action2 .action2.edit:hover {
            background-color: #eee;
        }

    .main-item-action2 .action2.reject {
        background-color: #E6E6E6;
    }

        .main-item-action2 .action2.reject:hover {
            background-color: #eee;
        }

    .main-item-action2 .action2.draft {
        background-color: #D2B4DE;
    }

        .main-item-action2 .action2.draft:hover {
            background-color: #E8DAEF;
        }

    .main-item-action2 .action2.withdraw {
        background-color: #ffc800;
    }

        .main-item-action2 .action2.withdraw:hover {
            background-color: #ffd84c;
        }

    .main-item-action2 .action2.delete {
        background-color: #ff6666;
    }

        .main-item-action2 .action2.delete:hover {
            background-color: #ff7f7f;
        }

    .main-item-action2 .action2.print {
        background-color: #E9967A;
    }

        .main-item-action2 .action2.print:hover {
            background-color: #FFA07A;
        }

    .main-item-action2 .action2.process {
        background-color: #f2c4b4;
    }

        .main-item-action2 .action2.process:hover {
            background-color: #f6d5c9;
        }

    .main-item-action2 .action2.process2 {
        background-color: #f8dfd7;
    }

        .main-item-action2 .action2.process2:hover {
            background-color: #faeae4;
        }

.fg1 {
    flex-grow: 1;
}
/*************/
.mb-content {
    overflow: auto;
    height: 100%;
    width: auto;
    box-sizing: content-box;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

[hidden] {
    display: none !important;
}

select.arrow {
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-y: 5px;
    border: 1px solid #dfdfdf;
    padding-right: 2rem;
}

.border-bottom-black {
    border-bottom: 1px solid #000 !important;
}

.border-aqua {
    border: 1px solid var(--bs-aqua);
}

.border-gray {
    border: 1px solid #ced4da
}

.not-found-section {
    padding: 15px 18px;
    font-size: 12px;
    /*    background-color: #fff;
*/
}

.text-direction_rtl {
    direction: rtl;
}

.text-direction_ltr {
    direction: ltr;
    text-align: end;
    padding: 0 15px
}

.money-input {
    font-size: 0.92rem;
}



@-moz-document url-prefix() {

    .left-width {
        height: 100%;
    }
}

.margin-top-minus-1 {
    margin-top: -1em;
}






.tree {
    margin: 1em;
}

    .tree ul {
        padding: 0
    }

    .tree li input {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    .tree li div input {
        position: relative;
        clip: auto
    }

    .tree input ~ ul {
        display: none;
    }

    .tree li > input:checked ~ ul {
        display: block;
    }

    /* ————————————————————–
  Tree rows
*/
    .tree li {
        line-height: 1.2;
        position: relative;
        padding: 0 1em 1em 0;
        list-style: none;
    }

    .tree ul li {
        padding: 1em 1em 0 0;
    }

    .tree li:last-child {
        padding-bottom: 0;
    }

/* ————————————————————–
  Tree labels
*/
.tree_label {
    position: relative;
    display: inline-block;
    list-style: none;
}

.tree_label {
    cursor: pointer;
    line-height: 22px;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
}

label.tree_label:hover {
    color: #666;
}

/* ————————————————————–
  Tree expanded icon
*/
label.tree_label:before {
    background: #009696;
    color: #fff;
    position: relative;
    z-index: 1;
    float: right;
    margin: 0 -33px 0 23px;
    width: 15px;
    height: 15px;
    border-radius: 1em;
    content: '+';
    text-align: center;
    line-height: 14px;
    font-size: 15px;
    font-weight: bold;
}

:checked ~ label.tree_label:before {
    content: '–';
}

/* ————————————————————–
  Tree branches
*/
.tree li:before {
    position: absolute;
    top: -8px;
    bottom: 0;
    right: -0.59em;
    display: block;
    width: 0;
    border-right: 1px solid #afafaf;
    content: "";
}

.tree_label:after {
    position: absolute;
    top: 0px;
    right: -1.45em;
    display: block;
    height: 14px;
    width: 1em;
    border-bottom: 1px solid #afafaf;
    border-right: 1px solid #afafaf;
    border-radius: 0 0 0.3em 0;
    content: '';
}

label.tree_label:after {
    border-bottom: 0;
    top: 10px
}

:checked ~ label.tree_label:after {
    border-radius: 0.3em 0 0 0;
    border-top: 1px solid #afafaf;
    border-left: 1px solid #afafaf;
    border-bottom: 0;
    border-right: 0;
    bottom: 0;
    top: 1.5em;
    height: auto;
    padding: 6px;
    right: -1.58em;
}

ul.tree > li:first-child:before {
    top: 11px !important;
}

.tree li:last-child:before {
    height: 2.8em;
    bottom: auto;
}

.tree > li:last-child:before {
    display: none;
}

.tree_custom {
    display: block;
    background: #eee;
    padding: 1em;
    border-radius: 0.3em;
}

.tree_level1 {
    margin: 0px 0px
}

.tree_level2 {
    margin: 0px 10px
}

.tree_level3 {
    margin: 0px 20px
}

.tree_level4 {
    margin: 0px 30px
}

.tree_level5 {
    margin: 0px 40px
}

.rounded-pill_badge {
    width: 26px;
    height: 26px;
}

.left-1px {
    left: 1px;
}

.attendance-line {
    height: 1px;
    background-color: #afafaf !important;
    z-index: 1;
}

.attendance-hourly-leave-line {
    position: absolute;
    top: 0;
    z-index: 1;
    background-image: linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 50%, #d0d0d0 50%, #d0d0d0 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
    height: 100%;
}

.attendance-hourly-leave-line-bg {
    background-image: linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 50%, #d0d0d0 50%, #d0d0d0 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}

.popup-attendance-hourly-leave {
    position: absolute;
    background: #fff;
    width: auto;
    z-index: 888888;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    top: 40px;
    right: 0;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
    white-space: nowrap
}

.attendance-hourly-leave-show-popup:hover .popup-attendance-hourly-leave {
    display: flex;
}

.popup-attendance-Monthly-Percentage {
    position: absolute;
    background: #fff;
    width: auto;
    z-index: 888888;
    padding: 8px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
    white-space: nowrap;
    top: auto !important;
    height: 35px;
}

.attendance-monthly-percentage-show-popup:hover .popup-attendance-Monthly-Percentage {
    display: flex;
}

.left-0 {
    left: 0;
}

.left-12 {
    left: 12%;
}

.left-20 {
    left: 20%;
}

.left-40 {
    left: 40%;
}

.left-60 {
    left: 60%;
}

.left-65 {
    left: 65%;
}

.left-80 {
    left: 80%;
}

.left-100 {
    left: 100%;
}

.width-0 {
    width: 0;
}

.width-10 {
    width: 10%;
}

.width-12 {
    width: 12%;
}

.width-20 {
    width: 20%;
}

.width-30 {
    width: 30%;
}

.width-40 {
    width: 40%;
}

.width-50 {
    width: 50%;
}

.width-60 {
    width: 60%;
}

.width-70 {
    width: 70%;
}

.width-80 {
    width: 80%;
}

.width-90 {
    width: 90%;
}

.width-95 {
    width: 95%;
}

.width-100 {
    width: 100%;
}

.attendance-start {
    float: right;
    width: 5px;
    height: 18px;
    z-index: 1;
}

.attendance-end {
    float: left;
    width: 5px;
    height: 18px;
    z-index: 1;
}

.hour {
    display: inline-block;
    width: 30%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    background-color: #4CAF6E;
    margin-right: 1%;
    padding: 5px;
}

.td-align-height {
    vertical-align: middle;
    height: 50px;
    position: relative;
}



.attendance-start:after {
    height: 1px;
    display: block;
    background: #afafaf !important;
    width: 100%;
    position: absolute;
    left: 0;
    content: ' ';
    top: 49%;
}


.attendance-end:after {
    height: 1px;
    display: block;
    background: #afafaf !important;
    width: 100%;
    position: absolute;
    left: 0;
    content: ' ';
    top: 49%;
}

.attendance-scroller {
    height: 50%;
    overflow-y: scroll
}

.right-20 {
    right: 20%
}

.right-40 {
    right: 40%
}

.right-60 {
    right: 60%
}

.right-65 {
    right: 65%
}


.right-80 {
    right: 80%
}

.right-100 {
    right: 100%
}

.website-wrapper[dir='ltr'] .right-20 {
    left: 20%
}

.website-wrapper[dir='ltr'] .right-40 {
    left: 40%
}

.website-wrapper[dir='ltr'] .right-60 {
    left: 60%
}

.website-wrapper[dir='ltr'] .right-65 {
    left: 65%
}

.website-wrapper[dir='ltr'] .right-80 {
    left: 80%
}

.website-wrapper[dir='ltr'] .right-100 {
    left: 100%
}

.self-checkin.right-20 ~ .attendance-start:after {
    width: calc(100% - 27%);
}

.self-checkin.right-40 ~ .attendance-start:after {
    width: calc(100% - 47%);
}

.self-checkin.right-60 ~ .attendance-start:after {
    width: calc(100% - 67%);
}

.self-checkin.right-65 ~ .attendance-start:after {
    width: calc(100% - 77%);
}

.self-checkin.right-80 ~ .attendance-start:after {
    width: calc(100% - 87%);
}

.self-checkin.right-100 ~ .attendance-start:after {
    width: calc(100% - 100%);
}

.self-checkout ~ .attendance-end:after {
    position: absolute;
    right: 0;
}


.self-checkout.right-20 ~ .attendance-end:after {
    width: calc(100% - 80%);
}

.self-checkout.right-40 ~ .attendance-end:after {
    width: calc(100% - 60%);
}

.self-checkout.right-60 ~ .attendance-end:after {
    width: calc(100% - 40%);
}

.self-checkout.right-65 ~ .attendance-end:after {
    width: calc(100% - 35%);
}

.self-checkout.right-80 ~ .attendance-end:after {
    width: calc(100% - 20%);
}

.self-checkout.right-0 ~ .attendance-end:after {
    width: calc(100% - 100%);
}


.attendance-start-end .attendance-start, .attendance-start-end .attendance-end {
    display: none !important;
}


.attendance-start-end-line {
    display: none;
}

.attendance-start-end .attendance-start-end-line {
    height: 1px;
    display: block;
    background: #afafaf !important;
    width: 0%;
    position: absolute;
    right: 0%;
    content: ' ';
    top: 49%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-0 ~ .attendance-start-end-line {
    width: 0%;
    right: 7%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-20 ~ .attendance-start-end-line {
    width: 20%;
    right: 7%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-40 ~ .attendance-start-end-line {
    width: 40%;
    right: 7%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-60 ~ .attendance-start-end-line {
    width: 60%;
    right: 7%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-65 ~ .attendance-start-end-line {
    width: 65%;
    right: 7%;
}

.attendance-start-end .self-checkin.right-0 ~ .self-checkout.right-80 ~ .attendance-start-end-line {
    width: 80%;
    right: 7%;
}









.attendance-start-end .self-checkin.right-20 ~ .self-checkout.right-40 ~ .attendance-start-end-line {
    width: 20%;
    right: 27%;
}

.attendance-start-end .self-checkin.right-20 ~ .self-checkout.right-60 ~ .attendance-start-end-line {
    width: 40%;
    right: 27%;
}

.attendance-start-end .self-checkin.right-20 ~ .self-checkout.right-65 ~ .attendance-start-end-line {
    width: 45%;
    right: 27%;
}

.attendance-start-end .self-checkin.right-20 ~ .self-checkout.right-80 ~ .attendance-start-end-line {
    width: 60%;
    right: 27%;
}








.attendance-start-end .self-checkin.right-40 ~ .self-checkout.right-60 ~ .attendance-start-end-line {
    width: 20%;
    right: 47%;
}


.attendance-start-end .self-checkin.right-40 ~ .self-checkout.right-65 ~ .attendance-start-end-line {
    width: 25%;
    right: 47%;
}

.attendance-start-end .self-checkin.right-40 ~ .self-checkout.right-80 ~ .attendance-start-end-line {
    width: 40%;
    right: 47%;
}






.attendance-start-end .self-checkin.right-60 ~ .self-checkout.right-65 ~ .attendance-start-end-line {
    width: 5%;
    right: 67%;
}

.attendance-start-end .self-checkin.right-60 ~ .self-checkout.right-80 ~ .attendance-start-end-line {
    width: 20%;
    right: 67%;
}




.attendance-start-end .self-checkin.right-65 ~ .self-checkout.right-80 ~ .attendance-start-end-line {
    width: 15%;
    right: 72%;
}





.dot ~ .attendance-end:after {
    position: absolute;
    right: 0;
}


.dot.right-20 ~ .attendance-end:after {
    width: calc(100% - 80%);
}

.dot.right-40 ~ .attendance-end:after {
    width: calc(100% - 60%);
}

.dot.right-60 ~ .attendance-end:after {
    width: calc(100% - 40%);
}

.dot.right-80 ~ .attendance-end:after {
    width: calc(100% - 20%);
}

.dot.right-0 ~ .attendance-end:after {
    width: calc(100% - 100%);
}


.popup-attendance {
    position: absolute;
    background: #fff;
    width: 240px;
    z-index: 888888;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    top: 10px;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
}

.Attendance-CheckIn-Icon:hover .popup-attendance {
    display: block
}

.Attendance-CheckOut-Icon:hover .popup-attendance {
    display: block
}

.Day-CheckInOut:hover .popup-attendance {
    display: block
}

.popup-CheckIn-attendance {
    position: absolute;
    background: #fff;
    width: 240px;
    z-index: 888888;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    top: 10px;
    right: 10px;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
}

.Attendance-CheckIn-Icon:hover .popup-CheckIn-attendance {
    display: block
}


.popup-CheckOut-attendance {
    position: absolute;
    background: #fff;
    width: 240px;
    z-index: 888888;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    top: 10px;
    right: 10px;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
}

.Attendance-CheckOut-Icon:hover .popup-CheckOut-attendance {
    display: block
}

td:nth-last-child(-n+3) .popup-CheckIn-attendance, .popup-CheckOut-attendance {
    left: 10px;
    right: unset;
}

.attendace-tabel td, .attendace-tabel th, .attendace-tabel tr {
    border: 0;
}

.attendace-tabel {
    border: 1px solid #ccc
}


.bg-strip-light-blue {
    background-color: #c3e8ff !important;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}


.bg-strip-light-green {
    background-color: #c2e0ab !important;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}


.bg-strip-light-red {
    background-color: #e0abab !important;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}

.bg-strip-light-yellow {
    background-color: #fffd8d !important;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}

.bg-strip-light-orange {
    background-color: #e1c28b !important;
    background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, #fff0);
    background-size: 5px 5px;
}

.accordionMPP .accordion-body > .accordion {
    margin-right: 20px
}

.accordionMPP .accordionMPP-button:before {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAsMCwyNTUuOTkxOTcsMjU1Ljk5MTk3IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiM2ZTZlNmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NS45OTY1NCwyODcuOTk1OTkpIHJvdGF0ZSgxODApIHNjYWxlKDEwLjY2NjY3LDEwLjY2NjY3KSI+PHBhdGggZD0iTTIyLjc3Nyw0Ljk4M2MtMC4zMzQsLTAuNjA2IC0wLjk4NiwtMC45ODMgLTEuNzAzLC0wLjk4M2gtMTguMTQ4Yy0wLjcxNywwIC0xLjM2OSwwLjM3NyAtMS43MDMsMC45ODNjLTAuMzE4LDAuNTc4IC0wLjI5NiwxLjI1NyAwLjA1OCwxLjgxNWw5LjA3NCwxNC4zMTVjMC4zNTEsMC41NTYgMC45NjYsMC44ODcgMS42NDUsMC44ODdjMC42NzksMCAxLjI5NCwtMC4zMzEgMS42NDYsLTAuODg2bDkuMDc0LC0xNC4zMTVjMC4zNTMsLTAuNTU5IDAuMzc1LC0xLjIzOCAwLjA1NywtMS44MTZ6Ij48L3BhdGg+PC9nPjwvZz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-size: 1.25rem;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    background-size: 13px;
    background-position: top;
}

.accordionMPP .has-no-children .accordionMPP-button:before {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAsMCwyNTUuOTkxOTcsMjU1Ljk5MTk3IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiM2ZTZlNmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NS45OTY1NCwyODcuOTk1OTkpIHJvdGF0ZSgxODApIHNjYWxlKDEwLjY2NjY3LDEwLjY2NjY3KSI+PHBhdGggZD0iTTIyLjc3Nyw0Ljk4M2MtMC4zMzQsLTAuNjA2IC0wLjk4NiwtMC45ODMgLTEuNzAzLC0wLjk4M2gtMTguMTQ4Yy0wLjcxNywwIC0xLjM2OSwwLjM3NyAtMS43MDMsMC45ODNjLTAuMzE4LDAuNTc4IC0wLjI5NiwxLjI1NyAwLjA1OCwxLjgxNWw5LjA3NCwxNC4zMTVjMC4zNTEsMC41NTYgMC45NjYsMC44ODcgMS42NDUsMC44ODdjMC42NzksMCAxLjI5NCwtMC4zMzEgMS42NDYsLTAuODg2bDkuMDc0LC0xNC4zMTVjMC4zNTMsLTAuNTU5IDAuMzc1LC0xLjIzOCAwLjA1NywtMS44MTZ6Ij48L3BhdGg+PC9nPjwvZz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-size: 1.25rem;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    background-size: 13px;
    background-position: top;
    display: none
}

.accordionMPP .accordionMPP-button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 0rem 0rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: rgba(255, 255, 255, 0);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, border-radius 0.15s ease, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, border-radius 0.15s ease, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease, -webkit-box-shadow 0.15s ease-in-out;
}

.accordionMPP .accordion-item:last-of-type .accordionMPP-button.collapsed {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}


.accordionMPP .accordionMPP-button:focus {
    z-index: 3;
    border-color: rgba(255, 255, 255, 0);
    outline: 0;
    -webkit-box-shadow: 0 0 0 rgb(255 255 255 / 0%);
    box-shadow: 0 0 0 rgb(255 255 255 / 0%);
}

.accordionMPP .accordion-item:first-of-type .accordionMPP-button {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}


.accordionMPP .accordionMPP-button:not(.collapsed) {
    color: black;
    background-color: transparent;
    -webkit-box-shadow: inset 0 0 0 rgb(0 0 0 / 13%);
    box-shadow: inset 0 0 0 rgb(0 0 0 / 13%);
}




.accordionMPP .accordionMPP-button:not(.collapsed) {
    color: black;
    background-color: transparent;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.125);
}

    .accordionMPP .accordionMPP-button:not(.collapsed):before {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAsMCwyNTUuOTkxOTcsMjU1Ljk5MTk3IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiMwMDk2OTYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NS45OTY1NCwyODcuOTk1OTkpIHJvdGF0ZSgxODApIHNjYWxlKDEwLjY2NjY3LDEwLjY2NjY3KSI+PHBhdGggZD0iTTIyLjc3Nyw0Ljk4M2MtMC4zMzQsLTAuNjA2IC0wLjk4NiwtMC45ODMgLTEuNzAzLC0wLjk4M2gtMTguMTQ4Yy0wLjcxNywwIC0xLjM2OSwwLjM3NyAtMS43MDMsMC45ODNjLTAuMzE4LDAuNTc4IC0wLjI5NiwxLjI1NyAwLjA1OCwxLjgxNWw5LjA3NCwxNC4zMTVjMC4zNTEsMC41NTYgMC45NjYsMC44ODcgMS42NDUsMC44ODdjMC42NzksMCAxLjI5NCwtMC4zMzEgMS42NDYsLTAuODg2bDkuMDc0LC0xNC4zMTVjMC4zNTMsLTAuNTU5IDAuMzc1LC0xLjIzOCAwLjA1NywtMS44MTZ6Ij48L3BhdGg+PC9nPjwvZz4KPC9zdmc+');
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

.accordionMPP-box {
    height: 20px;
    width: 20px;
    margin-bottom: 15px;
    clear: both;
}

.accordionMPP-box-vertical {
    height: 10px;
    width: 20px;
    margin-bottom: 1px;
    clear: both;
}


@media (prefers-reduced-motion: reduce) {
    .accordionMPP .accordionMPP-button:before {
        -webkit-transition: none;
        transition: none;
    }
}

.accordionMPP .accordion-button:hover {
    z-index: 2;
}

.accordionMPP .accordionMPP-button:focus {
    z-index: 3;
    border-color: rgba(255, 255, 255, 0);
    outline: 0;
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}


.accordionMPP .accordion-header {
    padding: 10px;
    border: 1px solid #bdbdbd;
    margin-bottom: 10px;
    border-radius: 7px;
}

.progress.progressMPP {
    height: 8px;
}

.progressbarsSection > div {
    margin-bottom: 5px;
}

    .progressbarsSection > div:last-child {
        margin-bottom: 0;
    }



.progressCircle {
    background: #fff;
    box-shadow: 0 0 18px #0000002b;
    margin-bottom: 17px;
    padding: 10px;
    border-radius: 20px;
}

.graphSection h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #6c6c6c;
}

.progressCircle h4 {
    font-size: 14px;
    font-weight: 500;
}

.progressCircle div svg {
    background: #ffffff;
    border-radius: 100%;
    padding: 4px;
    border: 3px solid #e7e7e7;
}

.circle-progress {
    border: 4px solid #dee2e6;
    border-radius: 5em;
    padding: 3px;
}

.progressCircle .circle-progress-value {
    stroke-width: 13px;
    stroke: #a5baf7;
    stroke-dasharray: 6 2;
}

.progressCircle .circle-progress-circle {
    stroke-width: 6px;
    stroke: #eee;
}

.progressCircle .circle-progress-text {
    font-weight: bold;
    font-size: 20px;
    fill: hsl(0deg 0% 0%);
}

.progressCircle .circle-progress-text-danger {
    font-weight: bold;
    font-size: 20px;
    fill: var(--bs-danger) !important;
}

.bg-gray-imp {
    --tw-bg-opacity: 1;
    background-color: var(--bs-gray-400) !important;
}

.dot {
    height: 15px;
    width: 15px;
    background-color: green;
    border-radius: 50%;
    top: 35%;
    z-index: 100;
}

.website-wrapper[dir='ltr'] .rotate-180 {
    transform: rotate(180deg);
}

.added-punch {
}

.deleted-punch {
}

.top-margin-5px {
    margin-top: 5px;
}

.left-margin-5px {
    margin-left: 5px;
}

.website-wrapper[dir='ltr'] .left-margin-5px {
    margin-right: 5px;
}

.top-32 {
    top: 32%;
}

.attendance-start-end {
}

.self-time-in-out, .self-checkin, .self-checkout {
    z-index: 9;
}


.row-cols-7 > * {
    flex: 0 0 auto;
    width: 14.285555%;
}

.AchivmentCertifcate_Percantage_info_Popup {
    position: absolute;
    background: #fff;
    width: auto;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    top: 30px;
    right: 10px;
    box-shadow: 5px 5px 12px #cecece;
    display: none;
    transition: 0.2s;
}

.tooltip-custom:hover ~ .AchivmentCertifcate_Percantage_info_Popup {
    display: block;
}

.arabic-text {
    direction: rtl;
    /*font-family: Arial, sans-serif;*/ /* Use appropriate Arabic font */
    white-space: pre-line;
}


.table-no-cell-borders > tbody > tr > td {
    border: 0 !important
}


.custom-table-attachment .attachment-title {
    display: none;
}

.custom-table-attachment .attachment-data {
    height: auto;
    width: auto;
    padding: 5px !important;
    border-radius: 5px;
    border: 1px solid #a0a0a0;
    margin-bottom: 4px !important;
}

    .custom-table-attachment .attachment-data .attachment__img {
        width: 30px;
    }

.custom-table-attachment .upload-attach {
    height: 40px !important;
    width: 40px !important;
    line-height: unset !important;
    padding: 7px !important;
    font-size: 23px !important;
    border-radius: 100%;
}

.custom-table-attachment .attachment-add-new {
    flex-direction: column !important;
    justify-content: center !important;
    float: none !important;
    align-items: flex-end !important;
    margin-left: 12px;
}

.custom-table-attachment .attachment-container > div > div {
    padding: 0 !important;
}

.custom-table-attachment .attachment-container > div {
    margin-top: 0 !important;
}

.custom-table-attachment .attachment-container .container-fluid {
    padding: 0;
}
}


.curve-table-title {
    text-align: center;
    padding: 0 20%;
}

.curve-table {
    direction: ltr;
}

    .curve-table tbody tr th {
        width: 20%;
        text-align: center;
        align-items: center !important;
        font-weight: bold;
    }

div .curve-table {
    width: 80%;
    margin: 10px 10%;
}

.curve-table tbody tr td {
    text-align: center;
    align-items: center !important;
    font-weight: bold;
}

.curve-table-purple {
    color: #fff;
    background-color: #59359a !important;
}

.curve-table-orange {
    background-color: #FFC000 !important;
}

.curve-table-light-orange {
    background-color: #FFE699 !important;
}

.curve-table-yellow {
    background-color: #FFFF00 !important;
}

.curve-table-silver {
    background-color: #D9D9D9 !important;
}

.curve-table-green {
    background-color: #00B050 !important;
}

.border-curve-table {
    border: 1px solid black;
}

.border-curve-table-none {
    border: 1px solid white !important;
}

.border-ShukranLogo {
    border-left: 2px solid #009BA0;
}

.HideOnHoverAttendancePercentage, .HideDayRemainingOnHover, .HideAttendancePercentageMonthOnHover {
    display: flex;
}

.ShowOnHoverAttendancePercentage, .ShowDayRemainingOnHover, .ShowAttendancePercentageMonthOnHover {
    display: none;
}

.AttendancePercentage:hover .ShowOnHoverAttendancePercentage {
    display: flex
}

.AttendancePercentage:hover .HideOnHoverAttendancePercentage {
    display: none
}


.DayRemaining:hover .ShowDayRemainingOnHover {
    display: flex
}

.DayRemaining:hover .HideDayRemainingOnHover {
    display: none
}

.AttendancePercentageMonth:hover .ShowAttendancePercentageMonthOnHover {
    display: flex
}

.AttendancePercentageMonth:hover .HideAttendancePercentageMonthOnHover {
    display: none
}

.employeeInfo-overlay {
    bottom: 0;
    left: 0;
    width: 100%;
    color: black;
    text-align: center;
    box-sizing: border-box;
}

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

.employeeInfo-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire container */
}

.employeeInfo-More-Details {
    position: relative;
}

    .employeeInfo-More-Details:hover .employeeInfo-TooltipBox {
        opacity: 1;
    }

.employeeInfo-TooltipBox {
    background: #fff;
    width: 200px;
    z-index: 99999999999;
    padding: 10px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    position: absolute;
    top: 25px;
    right: 0px;
    box-shadow: 5px 5px 12px #cecece;
    opacity: 0;
    transition: 0.2s;
}

.employeeInfo-col-md-3 {
    flex: 0 0 auto;
    width: 20%;
}


.attendance-employee-data {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between rows */
    width: 100%;
}

.attendance-row-layout {
    display: flex;
    justify-content: space-between; /* Even spacing */
    align-items: center;
    width: 100%;
    gap: 15px;
}

    .attendance-row-layout .attendance-emp-name {
        flex: 3;
        text-align: start;
    }

    .attendance-row-layout .attendance-emp-time {
        flex: 1;
        text-align: center;
    }

    .attendance-row-layout .attendance-emp-late-time {
        flex: 1;
        text-align: end;
        color: red;
    }

.settings-title-multiline {
    white-space: pre-line;
    font-size: 11px;
}

.waiver-msg {
    white-space: pre-line;
}

.iban {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}