@font-face {
    font-family: 'Mohannad';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Mohannad/Mohannad.ttf');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}


/* arabic */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Tajawal-Regular.ttf');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* arabic */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Tajawal-Bold.ttf');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}


@font-face {
    font-family: 'DroidSans';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/DroidSans-webfont.eot');
    src: url('/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DroidSans-webfont.woff') format('woff'), url('/fonts/DroidSans-webfont.ttf') format('truetype'), url('/fonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
}

@font-face {
    font-family: 'DroidSans';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/DroidSans-Bold-webfont.eot');
    src: url('/fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/DroidSans-Bold-webfont.woff') format('woff'), url('/fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('/fonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
}

@font-face {
    font-family: 'NotoNaskhArabicUI-Regular';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/NotoNaskhArabicUI-Regular.eot');
    src: url('/fonts/NotoNaskhArabicUI-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/NotoNaskhArabicUI-Regular.woff') format('woff'), url('/fonts/NotoNaskhArabicUI-Regular.ttf') format('truetype'), url('/fonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    src: url('/fonts/Roboto-Regular.ttf');
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    font-weight: bold;
    src: url('/fonts/Roboto-Bold.ttf');
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__notifications.m-topbar__notifications--img.m-dropdown--arrow .m-dropdown__arrow {
    color: #5499f8;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile.m-topbar__user-profile--img.m-dropdown--arrow .m-dropdown__arrow {
    color: #5499f8;
}

.form-control {
    font-family: 'DroidSans', 'Tajawal';
    height: 40px;
}

.btn {
    font-family: 'DroidSans', 'Tajawal';
}

.invalid-feedback {
    font-size: unset;
}

.m-subheader .m-subheader__breadcrumbs.m-nav > .m-nav__separator {
    padding: 0 10px;
    color: #898b96;
}

.typeahead-item {
    color: black;
    display: flex;
    align-content: center;
    align-items: center;
    vertical-align: middle;
}

.typeahead-img {
    display: inline-block;
    margin: 0 10px;
}

.typeahead-desc {
    display: inline-block;
    vertical-align: middle;
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 20px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 4px;
}

.kt-header .kt-header__topbar .kt-header__topbar-item:hover .kt-header__topbar-text, .kt-header .kt-header__topbar .kt-header__topbar-item.show .kt-header__topbar-text {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background-color: rgba(77, 89, 149, 0.06);
}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-text i {
    font-size: 20px;
    margin: 0px 5px;
}

.lang-link {
    align-items: center;
    display: flex;
}

/*File Component */
[data-form-status="Read"] .custom-file {
    display: none;
}


form:not([data-form-status="Read"]) .no-file {
    display: none;
}

/*Select 2 validation style*/
.form-control.is-invalid + .select2 .select2-selection {
    border-color: #dc3545 !important;
}

.form-control.is-valid + .select2 .select2-selection {
    border-color: #28a745 !important;
}

.select2-container.kt-spinner.kt-spinner--input.kt-spinner--right:before {
    left: auto;
    right: 2.5rem;
}
/* Time picker */
.bootstrap-timepicker-widget table {
    direction: ltr !important;
}

.clickable:hover {
    cursor: pointer;
}


.image-cropper-wrapper {
    height: 364px;
    width: 100%;
    margin-top: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.25);
    background-color: #fcfcfc;
    overflow: hidden;
}

    .image-cropper-wrapper img {
        max-width: 100%;
    }





.kt-avatar .typeahead-avata--holder {
    width: 70px;
    height: 70px;
}

.read-notification {
    background: #f3f4f6;
}

.notification-actions a {
    float: right;
    text-decoration: underline;
    padding: 0 3px;
    font-size: 0.8em;
}

.side-notification .alert {
    border: 1px solid #ddd;
    min-width: 250px;
    box-shadow: 0px 0px 10px 5px #eee;
    opacity: 1 !important;
    background: #ffffff;
}

    .side-notification .alert .alert-icon {
        padding: 0 2.7rem 0 0;
    }

#quick-panel-tab-tasks .kt-notification .kt-notification__item:after {
    content: '';
}

.notifications-badge {
    position: absolute;
    top: 5px;
    left: 4px;
    opacity: 0.9;
}

#unread-tasks-badge {
    margin: 0 2px;
}

.tooltip * {
    font-family: 'DroidSans', 'Tajawal';
}

.operation-list {
    padding: 5px;
    list-style: none;
}

    .operation-list li {
        margin: 5px 40px;
    }

.employee-search-item {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

    .employee-search-item .info {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 1.25rem;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .employee-search-item .avatar {
        height: 50px;
        width: 50px;
    }

    .employee-search-item .title {
        font-weight: 500;
        font-size: 1rem;
        display: inline-block;
    }

    .employee-search-item .subtitle {
        display: inline-block;
        color: #a7abc3;
    }

.default-select2-template .text {
    font-weight: 500;
    font-size: 1.05rem;
    color: #5867dd;
}

.default-select2-template .avatar {
    height: 50px;
    width: 50px;
}

.default-select2-template .avatar-image {
    width: 100%;
}

.default-select2-template {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

    .default-select2-template .meta {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 1.25rem;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

.cog-row {
    padding: 20px;
}

    .cog-row .kt-section .kt-section__title {
        margin: 0 0 1.1rem 0;
        font-size: 1rem;
    }

.cog-list {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

    .cog-list li {
        margin: 3px 0px;
        display: flex;
        padding: 5px;
    }

        .cog-list li a {
            /*color: #959cb6;*/
            font-size: 1rem;
        }

        .cog-list li a {
            color: #959cb6;
            /*font-weight: 500;*/
        }

            .cog-list li a:hover {
                color: #5d78ff;
            }

.memo-alert {
    overflow-y: auto !important;
}

#my-attendance-calendar .fc-content:hover {
    background: #eee;
    cursor: pointer;
}

#my-attendance-calendar .fc-content:before {
    background: none;
}

#my-attendance-calendar .fc-day-grid-event .fc-content {
    white-space: normal !important;
}

#my-attendance-calendar .fc-content {
    padding: 0.55rem 3px 0.55rem 3px;
}

#my-attendance-calendar .fc-title {
    text-align: center;
    width: 100%;
    display: inline-block;
}

#my-attendance-calendar .fc-content i.fa {
    display: block;
    text-align: center;
}

#my-attendance-calendar .fc-event-container {
    padding-left: 0;
    padding-right: 0;
}

#my-attendance-calendar .fc-event, #my-attendance-calendar .fc-event-dot {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}


#my-attendance-calendar .fc-day-grid td:not(.fc-axis) {
    padding: 0.2rem 0.2rem;
}

.kt-notification .kt-notification__item.no-arrow:after {
    content: none;
}

.employee-card-small .slogan {
    width: 40px;
    height: 40px;
}

.employee-card-medium .slogan {
    width: 55px;
    height: 55px;
}

.employee-search-item .slogan {
    width: 70px;
    height: 70px;
}

.search-item.employee-card .slogan {
    height: 70px;
    width: 70px;
}

.employee-search-item .slogan, .employee-card .slogan {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    color: #0abb87;
    font-weight: 700 !important;
    font-size: 1.2em;
}

    .employee-search-item .slogan.male, .employee-card .slogan.male {
        color: #0abb87;
        background-color: rgba(10,187,135,.1);
    }

    .employee-search-item .slogan.female, .employee-card .slogan.female {
        color: #fd397a;
        background-color: rgba(253,57,122,.1);
    }


.file-input-hidden {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0;
}

/*ORG STRUCTURE*/
.node-icon-text-total, .node-icon-text-direct {
    direction: ltr;
}

.node-foreign-object-div {
    font-family: DroidSans,Tajawal;
}


/*.node-rect {
    fill: #5867dd !important;
    stroke: #5867dd !important;
    -webkit-box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.1);
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.1);
}

    .node-rect.company-node {
        fill: #37418e !important;
    }
*/
.org-node-name, .org-node-jobtitle, .org-node-department {
    text-align: center;
}


.org-node-name {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
}

.company-node-template .org-node-name {
    margin-top: 50px;
}

.org-node-jobtitle {
    margin-top: 3px;
    font-size: 16px;
}

.org-node-department {
    margin-top: 3px;
    font-size: 14px;
}

.org-node-company {
    margin-left: 196px;
    margin-top: 15px;
    font-size: 13px;
    position: absolute;
    bottom: 5px;
}

#chart-alert .alert-text {
    max-height: 120px;
    overflow-y: auto;
}
/*ORG STRUCTURE END*/



.display-5 {
    font-size: 3.0rem;
    font-weight: 300;
    line-height: 1.2;
}


.info-item {
}

    .info-item > span:last-child {
        display: block;
        font-size: 1rem;
        font-weight: 400;
        color: #a7abc3;
        margin-bottom: 1rem;
    }

    .info-item > span:first-child {
        color: #6c7293;
        font-size: 1.1rem;
        font-weight: 500;
        display: block;
    }

nfo-item > div:last-child {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #a7abc3;
    margin-bottom: 1rem;
}

.info-item > div:first-child {
    color: #6c7293;
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
}


/*    .table td:last-child{
        min-width:180px;
    }*/


.org-body {
    height: 70%;
}

.org-footer {
    height: 30%;
    padding: 0px 10px;
}

.org-name {
    margin: 0;
    position: relative;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #4682B4;
}


/*================================= time Line*/

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

    ul.bt-timeline:before {
        content: ' ';
        background: #d4d9df;
        display: inline-block;
        position: absolute;
        left: 29px;
        width: 3px;
        height: 100%;
        z-index: 400;
    }

    ul.bt-timeline > li {
        margin: 10px 0;
        padding-left: 10px;
        color: #A7ABC3;
    }

        ul.bt-timeline > li:before {
            content: ' ';
            background: white;
            display: inline-block;
            position: absolute;
            border-radius: 50%;
            border: 3px solid #A7ABC3;
            left: 20px;
            width: 20px;
            height: 20px;
            z-index: 400;
        }

        ul.bt-timeline > li.current {
            color: #5499f8;
        }

            ul.bt-timeline > li.current:before {
                border-radius: 50%;
                border: 10px solid #5499f8;
            }

        ul.bt-timeline > li.approved {
            color: #08976D;
        }

            ul.bt-timeline > li.approved:before {
                border-radius: 50%;
                border: 10px solid #08976D;
            }

        ul.bt-timeline > li.approved {
            color: #08976D;
        }

            ul.bt-timeline > li.approved:before {
                border-radius: 50%;
                border: 10px solid #08976D;
            }


        ul.bt-timeline > li.rejected {
            color: #FD397A;
        }

            ul.bt-timeline > li.rejected:before {
                border-radius: 50%;
                border: 10px solid #FD397A;
            }

        ul.bt-timeline > li.cancelled {
            color: #FBAA00;
        }

            ul.bt-timeline > li.cancelled:before {
                border-radius: 50%;
                border: 10px solid #FBAA00;
            }



.table-stripped-color {
    background-color: #F7F8FA;
}

.pagination {
    margin-bottom: 0px;
}


@keyframes content-placeholder-shimmer {

    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.img-placeholder {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: content-placeholder-shimmer;
    animation-timing-function: linear;
    background: darkgray;
    background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 100px;
    position: relative;
}

.app-logo-container {
    display: flex;
    align-content: center;
    border-radius: 5px;
    border: 1px solid #bfbfbf;
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
}

    .app-logo-container .app-logo {
        display: block;
        width: 60%;
        margin: auto;
    }

.middle-td td {
    vertical-align: middle;
}

.kt-widget17-plain .kt-widget17__stats {
    margin: 0 !important;
    width: 100% !important;
}

.kt-widget17-plain .kt-widget17__item {
    box-shadow: none !important;
    padding: 0.5rem !important;
    text-align: center;
    margin: 0 !important;
}

.kt-widget17-plain .kt-widget17__stats .kt-widget17__items .kt-widget17__item .kt-widget17__subtitle {
    font-size: inherit !important;
}

.auto-hide-header {
    visibility: hidden !important;
}

.kt-portlet:hover .auto-hide-header {
    visibility: visible !important;
}

.middle-td td {
    vertical-align: middle;
}

.eosb {
    margin: 0px;
    padding: 0px;
}

    .eosb li {
        list-style: none;
        border-bottom: 1px solid #e9edef;
    }



.eosb-review {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

    .eosb-review li {
        margin-bottom: 40px;
    }

.list-flex {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

    .list-flex li {
        padding: 15px 0px;
        border-bottom: 1px solid #e9edef;
    }

.eosb-review li {
    margin-bottom: 40px;
}


.kt-widget26.indicator {
    text-align: center;
    height: 100%;
    display: table;
}

    .kt-widget26.indicator .kt-widget26__desc {
        display: inline-block;
    }

.list-flex li:last-child {
    border-bottom: unset;
}



/*============ validation layout ! =============*/

.form-control-lg {
    padding: .65rem 1rem;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

.form-control.is-valid.valid-right, .was-validated .form-control:valid {
    border-color: #0abb87;
    padding-left: unset;
    padding: .65rem 1rem;
    padding-right: calc(1.5em + 1.3rem);
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .325rem);
    background-size: calc(.75em + .65rem) calc(.75em + .65rem);
}

.form-control.is-invalid.valid-right, .was-validated .form-control:invalid {
    border-color: #fd397a;
    padding: .65rem 1rem;
    padding-right: calc(1.5em + 1.3rem);
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .325rem);
    background-size: calc(.75em + .65rem) calc(.75em + .65rem);
}





/*---------------multi select--------------------*/
[data-multi-select-action-bar] {
    display: none;
    width: 100%;
    background: #f5f5f5;
    padding: 10px;
    margin: 10px 0;
}

[data-multi-select-message] {
    margin: 0 5px;
}

[data-multi-select-clear-button] {
    margin: 0 5px;
    margin-inline-end: 50px;
}

[data-multi-select-action] {
    margin: 0 5px;
}
/*---------------multi select END--------------------*/


/*Transition*/
.notification-vue-list {
    margin-top: 15px;
    list-style: none !important;
    margin: 0px;
    padding: 0px 0px;
}

    .notification-vue-list li {
        padding: 15px 15px;
        margin: 0px;
        border-bottom: 1px solid #e9edef;
        transition: all 0.5s;
    }

    .notification-vue-list.item-hover li {
        cursor: pointer;
    }

        .notification-vue-list.item-hover li:hover {
            /*background-color: #b7b7b714;*/
            background-color: #27272714;
        }

    .notification-vue-list li:last-child {
        border-bottom: unset;
    }

.notification-tab-list-enter,
.notification-tab-list-enter-from,
.notification-tab-list-leave-to {
    opacity: 0;
    transform: translateX(-90px);
}
.occasion-vue-list {
    margin-top: 15px;
    list-style: none !important;
    margin: 0px;
    padding: 0px 0px;
}

    .occasion-vue-list li {
        padding: 15px 15px;
        margin: 0px;
        border-bottom: 1px solid #e9edef;
        transition: all 0.5s;
    }

    .occasion-vue-list.item-hover li {
        cursor: pointer;
    }

        .occasion-vue-list.item-hover li:hover {
            /*background-color: #b7b7b714;*/
            background-color: #27272714;
        }

    .occasion-vue-list li:last-child {
        border-bottom: unset;
    }

.occasion-tab-list-enter,
.occasion-tab-list-enter-from,
.occasion-tab-list-leave-to {
    opacity: 0;
    transform: translateX(-90px);
}
.elevate {
    -webkit-box-shadow: 0px 0px 13px 0px rgb(82 63 105 / 10%);
    box-shadow: 0px 0px 13px 0px rgb(82 63 105 / 10%);
}


.pre-line {
    white-space: pre-line;
}

.pre-wrap {
    white-space: pre-wrap;
    word-wrap:break-word;
}

.line-through {
    text-decoration: line-through;
}

.img-border {
    border: solid 1px;
}

.company-logo-holder {
    width: 100%;
    height: auto;
    border: 3px solid #fff;
    border-radius: 5%;
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    object-fit: fill;
}

.company-logo-change {
    position: absolute;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: -10px;
    bottom: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    -webkit-transition: all .3s;
    transition: all .3s;
}

    .company-logo-change input {
        width: 0 !important;
        height: 0 !important;
        overflow: hidden;
        opacity: 0;
    }

    .company-logo-change:hover {
        -webkit-transition: all .3s;
        transition: all .3s;
        background-color: #5d78ff;
        color: white;
    }


.company-logo-cancel {
    position: absolute;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    right: -10px;
    top: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    -webkit-transition: all .3s;
    transition: all .3s;
}



.cropper-preview-palceholder {
    width: 100%;
    height: auto;
    border: solid 1px #a7abc3;
    border-radius: 5px;
}

.company-logo-cancel:hover {
    -webkit-transition: all .3s;
    transition: all .3s;
    background-color: #fd397a;
    color: white;
}


.company-logo-container {
    position: relative;
    width: 100%;
}

.img-signature-holder {
    width: 100%;
    height: auto;
    border: solid 1px #a7abc3;
    border-radius: 5px;
}

.logo-placeholder {
    width: 80%;
    height: auto;
    /*border: solid 1px #a7abc3;
    border-radius: 5px;*/
}

.clean-link {
    color: unset;
}

/*Cropper Modal Config*/
#cropper-modal-container {
    height: 364px;
    width: 100%;
    margin-top: 15px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.25);
    background-color: #fcfcfc;
    overflow: hidden;
}

    #cropper-modal-container img {
        max-width: 100%;
    }


#cropper-img-overlay {
    position: relative; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white; /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


.emp-change-avatar {
    position: absolute;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 5px;
    bottom: -10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.emp-remove-avatar {
    position: absolute;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    right: -10px;
    top: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 10%);
    -webkit-transition: all .3s;
    transition: all .3s;
}

    .emp-remove-avatar:hover {
        -webkit-transition: all .3s;
        transition: all .3s;
        background-color: #fd397a;
        color: white;
    }


/* ===== STRUCTURE CARD */
.circle-image {
    min-width: 90px;
    min-height: 90px;
    max-width: 90px;
    max-height: 90px;
    border-radius: 50% !important;
}

.struct-avatar {
    text-align: center;
    margin-top: 20px;
}

.struct-content {
    text-align: center;
    padding: 10px;
    color: black;
}


.circle-icon {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #e5e5e5;
    border-radius: 50% !important;
}

.circle-icon-w40 {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #e5e5e5;
    border-radius: 50% !important;
}

.circle-icon-w60 {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #e5e5e5;
    border-radius: 50% !important;
}

.circle-icon i {
    font-size: 5rem;
}


.malachite-scroll {
    overflow-y: auto;
}


.kt-wizard-v1 .kt-wizard-v1__wrapper .kt-form .kt-wizard-v1__content {
    border-bottom: unset !important;
}

.quick-access-link {
    display: flex;
    justify-content: center;
    border: solid 1px #bdbdbd;
    border: solid 1px #5d78ff;
    border-radius: 10px;
    height: 100px;
    width: 160px;
    margin: 0 5px;
    /*color: #4f4f4f;*/
    color: #5d78ff;
}

    .quick-access-link:hover {
        background-color: #5d78ff;
        color: white;
    }

    .quick-access-link div {
        margin: auto;
    }

        .quick-access-link div h5 {
            font-size: 1rem;
            font-weight: 500;
        }



.login-company-logo-container {
    display: flex;
    align-content: center;
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
}

    .login-company-logo-container img {
        display: block;
        width: 60%;
        margin: auto;
    }

.breadcrumbs-link {
    padding: 0 0.35rem 0 0;
    font-size: 1rem;
    font-weight: 500;
    color: #959cb6;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .breadcrumbs-link:hover {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        color: #5d78ff;
    }

#letter {
    text-align: initial;
}

.kt-spinner.kt-spinner--xl:before {
    width: 100px;
    height: 100px;
}

.center-div {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hoverable:hover {
    background: #f5f5f5;
}

.sticky-td { /* header cell */

    background-color: #fff;
    position: sticky;
    top: 0;
    right: 0;
}



.sticky-table {
    overflow: auto;
    max-height: 650px;
}


    .sticky-table thead tr {
        background-color: #f4f8f7;
        border: 1px solid #ebedf2;
        position: sticky;
        top: 0;
        z-index: 2;
    }


    .sticky-table thead th:first-child {
        background-color: #f4f8f7;
        position: sticky;
        left: 0;
        vertical-align: middle;
        z-index: 10
    }

    .sticky-table tbody tr th {
        background-color: #f4f8f7;
        position: sticky;
        left: 0;
        vertical-align: middle;
        z-index: 1
    }

.naskh-font {
    font-family: NotoNaskhArabicUI-Regular,Roboto
}


select option:disabled {
    color: #a7abc3;
}


.shift-slider {
    /*min-width: 400px;*/
    /*margin-top:60px;
    margin-bottom:60px;
    margin-left:30px;
    margin-right:30px;*/
    margin-left: 5px;
    margin-right: 5px;
}


.hoverable:hover {
    background: #f5f5f5;
}

.alert-malachite {
    background: rgb(142,125,240);
    background: linear-gradient(0deg, rgba(142,125,240,1) 0%, rgba(50,198,176,1) 88%);
    border: 0;
}

    .alert-malachite .alert-heading, .alert-malachite p {
        color: #ffffff;
    }

    .alert-malachite .btn {
        font-weight: bold;
        color: rgb(142,125,240);
    }


.icon-button {
    background-color: #ffffff;
    border-radius: 8px;
    min-width: 200px;
}

    .icon-button:hover {
        background-color: #eee;
        color: #374aff;
    }

    .icon-button a {
        color: unset;
    }

    .icon-button .icon {
        text-align: center;
        font-size: 36px;
        margin-bottom: 10px;
    }

    .icon-button h5 {
        text-align: center;
    }

    .icon-button .icon-button-content {
        padding: 24px;
    }


.ess-button {
    background-color: #ffffff;
    border-radius: 4px;
    width: 200px;
    height: 130px;
    color: #959cb6;
    border: 1px solid #959cb6;
}

    .ess-button a {
        color: unset;
    }

    .ess-button:hover {
        background-color: #eee;
        color: #374aff;
    }

    .ess-button .ess-button-content {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        transform: translate(-50%, -50%);
    }

    .ess-button .ess-button-container {
        position: relative;
        height: 100%;
    }

    .ess-button .ess-button-content h1 {
        font-size: 16px;
        text-align: center;
    }

    .ess-button .icon {
        text-align: center;
        font-size: 28px;
        margin-bottom: 8px;
    }


.sticky-search-bar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 20px;
    background-color: #f0f1f6;
    padding-top: 20px;
    padding-bottom: 20px;
}

.block-content-overlay {
    position: absolute;
    display: block;
    background: #b20303;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: 0;
    border-radius: 50%;
    transform: translateY(50%);
    transition: all 0.35s;
}


.disable-bg {
}

.widget-content {
    padding: 16px;
}

.radio-box {
}

    .radio-box input[type=radio] {
        display: none;
    }

    .radio-box label {
        border-style: solid;
        border-width: thin;
        margin: 0px;
        padding: 5px;
        min-height: 30px;
        min-width: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .radio-box label:hover {
            background-color: #eeee;
        }

    .radio-box input[type="radio"]:checked + label {
        background-color: #0404ff;
        color: white;
    }

    .radio-box input[type="radio"]:disabled + label {
        background-color: #c1c1c1;
        color: white;
        cursor: default;
    }

    .radio-box input[type="radio"]:disabled:checked + label {
        background-color: #575786;
        color: white;
    }
a.hide-arrow i.kt-menu__ver-arrow.la.la-angle-right {
    display: none !important;
}


.comment-text {
    font-family: 'DroidSans', 'Tajawal';
    font-size:14px;
    white-space:pre-wrap;
}

a.btn.btn-brand.btn-sm.new-btn-poss {
    margin-bottom: 1%;
}

.kt-portlet__head-actions.new-btn-poss {
    text-align: right;
}
.col-lg-12.addone {
    margin: 0% 2% 2% 2%;
}