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

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

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

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

@font-face {
    font-family: 'Amiri-BoldItalic';
    src: url('../fonts/Amiri/Amiri-BoldItalic.ttf') format('truetype');
}

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

body {
    background-color: #D2E0FB !important;
    background-position: top center !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
    overflow-x: -moz-hidden-unscrollable;
}

* {
    font-size: 14px;
    /*font-weight: bold;*/
    font-family: 'Almarai-Bold';
}

html, body {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.dxpnl-edge.t.headerPane.bar .templateTitle {
    margin: 0;
}

/* Header */
.headerPane {
    background-image: -webkit-linear-gradient(left, #233b83, #233b83);
    background-image: -moz-linear-gradient(left,#233b83, #233b83);
    background-image: -ms-linear-gradient(left, #233b83, #233b83);
    background-image: -o-linear-gradient(left, #233b83, #233b83);
    background-image: linear-gradient(left, #233b83, #233b83);
    background-position: left top;
    background-repeat: no-repeat;
    font-family: serif;
}

    .headerPane .headerTop {
        height: 55px;
    }

.templateTitle {
    float: left;
    margin-left: 15px;
    /*margin-top: 11px;*/
}

    .templateTitle a {
        text-decoration: none;
        font-size: x-large;
        color: black;
    }

.loginControl {
    float: right;
    margin-top: 17px;
    margin-right: 25px;
}

    .loginControl a {
        color: white;
        text-decoration: none;
        /*border-bottom: dashed 1px blue;*/
        display: inline-block;
    }

.LoginName {
    color: white;
    font-size: 18px
}

    .LoginName span {
        font-size: 18px
    }

    .LoginName a {
        font-size: 16px
    }

        .LoginName a:hover {
            color: #f9a8a8;
            text-decoration: none;
        }


.headerMenu {
    margin-top: 11px;
}

/* Footer */
.footerPane {
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.14) !important;
    margin-bottom: 0px !important;
    background-color: #f4f4f4 !important;
    border-bottom: 1px solid #DFDFDF !important;
    height: 44px;
}

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    float: left;
    margin-left: 15px;
    margin-top: 5px;
}

.content {
    padding: 5px;
}



/*----------------------------My Styles-----------------------*/
.contentPane {
    margin: 5px;
}

/*.TreeViewSelectedStyle {
    background-color: #0072ce !important;
    color: white !important;
}

.TreeViewSHoverStyle {
    background-color: #F2F2F2 !important;
    color: black !important;
}*/


.leftPanel {
    padding: 0 !important;
    padding-right: 1px !important;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.14) !important;
    border-right-color: #EAE9E9 !important;
    background-color: #e7f5ff !important;
    bottom: 43px !important;
    overflow: auto;
    direction: ltr;
}



/*.leftPanel {
    padding: 0 !important;
    padding-right: 1px !important;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.14) !important;
    border-right-color: #EAE9E9 !important;
    background-color: white !important;
    bottom: 0px !important;
}*/
.loginComboStyle {
    right: 5px;
    margin-top: -8px !important;
    position: absolute;
}

#style-10::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-10::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb {
    background-color: #AAA;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)
}

.formLogin {
    max-width: 400px;
    margin: auto;
    position: relative;
    margin: 100px auto 100px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px 4px rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    background: white;
}

.formChangePassword {
    max-width: 400px;
    margin: auto;
    position: relative;
    margin: 100px auto 100px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px 4px rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
}

.ButtonYes {
    margin-left: 12px;
}

.homeItemBox {
    box-shadow: -1px 2px 5px 0px #a2a2a2;
    margin-right: 10px;
    transition: ease 0.2s;
}

    .homeItemBox:hover {
        box-shadow: -1px 2px 18px 2px #a2a2a2;
        transition: ease 0.2s;
        margin-right: 10px;
    }

#notifyCmb .dxic {
    display: none !important;
}

.notifyCmbButtonStyle {
    color: #e8e8e8;
    background-image: -webkit-linear-gradient(left, #394d89, #394d89);
}

#notifyCmb {
    border: none !important;
}

.notifyItemBg {
    background-color: white;
}

    .notifyItemBg:hover {
        background-color: #EEE;
    }

#notifyCmb_DDD_L_H table {
    display: none;
}

#notifyCmb_DDD_L_D {
    height: auto !important;
    max-height: 300px !important;
}

::-webkit-scrollbar {
    width: 0.25em;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #233b83;
    outline: 1px solid #233b83;
}


.fontBold {
    color: black !important;
    font-size: 18px;
/*    font-weight: bold;*/
}



.fontBoldUnset {
    font-weight: unset !important;
}

.texttransform {
    text-transform: none !important;
}

.formLayoutWithShadow {
    width: 100%;
    margin: auto;
    border-radius: 17px;
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.09);
    padding: 1px;
    margin-bottom: 45px;
    background-color: #f6f6f6;
}

/* For screens larger than 768px (tablets and up) */
@media (min-width: 768px) {
    .formLayoutWithShadow {
        max-width: 1300px; /* Apply max-width for larger screens */
    }
}

/* For mobile screens */
@media (max-width: 768px) {
    .formLayoutWithShadow {
        padding: 10px; /* Add more padding for mobile */
        box-shadow: none; /* Optionally reduce shadow for mobile */
    }
}


.formLayoutWithResponsive {
    width: 50% !important;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .formLayoutWithResponsive {
        width: 100% !important;
    }
}

.formLayoutWithResponsive2 {
    width: 100% !important;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .formLayoutWithResponsive2 {
        width: 50% !important;
    }
}

.card-container {
    gap: 10px;
}

.card-counter,
.card-counter2 {
    margin: 7px 1px;
    background-color: #ffffff;
    border-radius: 10px;
    transition: 0.2s linear all;
    position: relative;
    overflow: hidden;
}

.card-counter {
 
    height: 178px;
    min-width: 125px;
}

.card-counter2 {
    height: 56px;
    width: 100%;
    min-width: 204px;
}

    .card-counter::before,
    .card-counter2::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, #263D86 0%, #263D86 100%);
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: 1;
    }

.card-counter:hover::before {
    width: 220%;
    height: 220%;
    opacity: 0.4;
}

.card-counter2:hover::before {
    width: 220%;
    height: 220%;
    opacity: 0.4;
}


.card-container:hover .card-counter::before {
    width: 320%;
    height: 320%;
    opacity: 1;
}

.card-container:hover .card-counter2::before {
    width: 320%;
    height: 320%;
    opacity: 1;
}


.card-counter > *,
.card-counter2 > * {
    position: relative;
    z-index: 2;
}

.card-counter2 .count-numbers {
    padding-top: 14px;
    text-align: center;
    color: black;
    opacity: 0.75;
    font-size: 17px;
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    transition: color 0.3s ease, font-size 0.3s ease, opacity 0.3s ease;
}

.card-container:hover .card-counter2 .count-numbers {
    color: #fff;
    font-size: 18px;
    opacity: 1;
}



.card-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 175px;
}

    .card-counter div {
        width: 100%;
        height: 80%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-counter img {
        max-width: 30%;
        max-height: 30%;
        transform: scale(1);
    }




/*start of main page cards */

#BookTransMainIndex, #BookTransReportsSvg, #DispatchSvg, #AttendanceSvg,
#EmployeeInformationSvg, #DepartmentPhrasesSvg, #BookTransAddSvg,
#BookTransReportAddSvg, #DispatchAddSvg, #AttendanceEmployeeShiftSvg,
#DepartmentCarsSvg, #EmployeeReportSvg, #EmployeeReportRejectedSvg,
#EmployeeLeaveBalanceSvg, #RequestLeaveSvg, #RequestTrackSvg
#EmployeeTimeLineReportSvg {
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease-in-out;
}

/* Hover styles */
.card-container:hover #BookTransMainIndex {
    background-image: url('/Content/Images/Home/BookTransW.png');
}

.card-container:hover #BookTransReportsSvg {
    background-image: url('/Content/Images/Home/ReportsW.png');
}

.card-container:hover #DispatchSvg {
    background-image: url('/Content/Images/Home/DispatchW.png');
}

.card-container:hover #AttendanceSvg {
    background-image: url('/Content/Images/Home/AttendanceW.png');
}

.card-container:hover #EmployeeInformationSvg {
    background-image: url('/Content/Images/Home/EmployeeInformationW.png');
}

.card-container:hover #DepartmentPhrasesSvg {
    background-image: url('/Content/Images/Home/DepartmentPhrasesW.png');
}

.card-container:hover #BookTransAddSvg {
    background-image: url('/Content/Images/Home/BookTransAddW.png');
}

.card-container:hover #BookTransReportAddSvg {
    background-image: url('/Content/Images/Home/BookTransReportAddW.png');
}

.card-container:hover #DispatchAddSvg {
    background-image: url('/Content/Images/Home/DispatchAddW.png');
}

.card-container:hover #AttendanceEmployeeShiftSvg {
    background-image: url('/Content/Images/Home/AttendanceEmployeeShiftW.png');
}

.card-container:hover #DepartmentCarsSvg {
    background-image: url('/Content/Images/Home/DepartmentCarsW.png');
}

.card-container:hover #EmployeeReportSvg {
    background-image: url('/Content/Images/Home/EmployeeReportW.png');
}

.card-container:hover #EmployeeReportRejectedSvg {
    background-image: url('/Content/Images/Home/EmployeeReportRejectedW.png');
}

.card-container:hover #EmployeeTimeLineReportSvg {
    background-image: url('/Content/Images/Home/EmployeeTimeLineReportW.png');
}
.card-container:hover #EmployeeLeaveBalanceSvg {
    background-image: url('/Content/Images/Home/employeebalancesW.png');
}
.card-container:hover #RequestLeaveSvg {
    background-image: url('/Content/Images/Home/RequestLeaveW.png');
}
.card-container:hover #RequestTrackSvg {
    background-image: url('/Content/Images/Home/RequestTrackW.png');
}

/* Default background images */
#BookTransMainIndex {
    background-image: url('/Content/Images/Home/BookTrans.png');
}

#BookTransReportsSvg {
    background-image: url('/Content/Images/Home/Reports.png');
}

#DispatchSvg {
    background-image: url('/Content/Images/Home/Dispatch.png');
}

#AttendanceSvg {
    background-image: url('/Content/Images/Home/Attendance.png');
}

#EmployeeInformationSvg {
    background-image: url('/Content/Images/Home/EmployeeInformation.png');
}

#DepartmentPhrasesSvg {
    background-image: url('/Content/Images/Home/DepartmentPhrases.png');
}

#BookTransAddSvg {
    background-image: url('/Content/Images/Home/BookTransAdd.png');
}

#BookTransReportAddSvg {
    background-image: url('/Content/Images/Home/BookTransReportAdd.png');
}

#DispatchAddSvg {
    background-image: url('/Content/Images/Home/DispatchAdd.png');
}

#AttendanceEmployeeShiftSvg {
    background-image: url('/Content/Images/Home/AttendanceEmployeeShift.png');
}

#DepartmentCarsSvg {
    background-image: url('/Content/Images/Home/DepartmentCars.png');
}

#EmployeeReportSvg {
    background-image: url('/Content/Images/Home/EmployeeReport.png');
}

#EmployeeReportRejectedSvg {
    background-image: url('/Content/Images/Home/EmployeeReportRejected.png');
}

#EmployeeTimeLineReportSvg {
    background-image: url('/Content/Images/Home/EmployeeTimeLineReport.png');
}

#EmployeeLeaveBalanceSvg {
    background-image: url('/Content/Images/Home/employeebalances.png');
}
#RequestTrackSvg {
    background-image: url('/Content/Images/Home/RequestTrack.png');
}
#RequestLeaveSvg {
    background-image: url('/Content/Images/Home/RequestLeave.png');
}

/*end of main page cards */





.dxnbLite_MaterialCompact .dxnb-header {
    background-color: #233b83;
    border: 1px solid #dfddd4;
    border-bottom: 1px solid #dfddd4;
    color: #ffffff !important;
}

.dxnbLite_MaterialCompact {
    background-color: #233b83;
}

    .dxnbLite_MaterialCompact .dxnb-content {
        background-color: #ffffff;
    }

.navBarIconsColor {
    color: #5e5e5e;
}



.dxnb-ghtext.dx-vam {
    font-size: 16px !important;
}

.dxnbLite_MaterialCompact div.dxnb-headerCollapsed {
    background-color: #233b83;
    color: #ffffff;
}

.dxnbLite_MaterialCompact .dxnb-itemSelected, .dxnbLite_MaterialCompact .dxnb-itemSelected a {
    background-color: #D2E0FB !important;
    color: #313131;
}

.dxnb-last {
    /*background: #a0abcc;
    height: 15px;
    border: none;
    margin: 0;
    padding: 0;*/
}

    .dxnb-last:hover {
        /*background: #a0abcc;
    height: 15px;
    border: none;
    margin: 0;
    padding: 0;*/
    }

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #fff;
}

.mailbox-attachments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mailbox-attachment-icon {
    text-align: center;
    font-size: 20px;
    color: #666;
    padding: 5px;
}

.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size {
    display: block;
}


.mailbox-attachment-info {
    padding: 5px;
    background: #f4f4f4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.mailbox-attachment-name {
    font-weight: bold;
    color: #666;
    position: absolute;
    top: 25px;
    right: 15px;
}


.BookTransNotifyCount {
    margin-right: 7px;
    border-radius: 50%;
    padding: 4px 3px !important;
    color: black;
    box-shadow: 0 0 3px 0 black;
}

.BookTransReportNotifyCount {
    font-size: 14px;
    color: black;
    margin-right: 15px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding: 5px 4px !important;
    box-shadow: 0 0 3px 1px #ff4930;
    position: relative;
}

.TabHeight {
    height: 45px !important;
    max-height: 45px !important;
}

.dir-ltr {
    direction: ltr !important;
}

.UpdateAttendancesBtnCss {
    padding: 3px;
    border-radius: 3px;
}

.PrintAttendancesBtnCss {
    padding: 3px;
    color: burlywood;
    border-radius: 3px;
}

.text-success-icon {
    color: #799933;
}

.text-warning-icon {
    color: #d1ab30;
}

.text-info-icon {
    color: #54a1ca;
}
td .dx-wrap dx-ac {
    text-align: center !important;
}

element.style {
    text-align: center !important;
}

.dxmLite_MaterialCompact .dxm-popup .dxm-content {
    padding: 7px 0px 6px 12px;
}

.swal2-confirm-button-custom {
    background-color: #233B83 !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    margin: 5px;
}

.swal2-cancel-button-custom {
    background-color: #6c757d !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
}

.swal2-confirm-button-custom:hover {
    transform: scale(1.05) !important;
}

.swal2-cancel-button-custom:hover {
    transform: scale(1.05) !important;
}



/*.dxrpControl_MaterialCompact td.dxrpHeader_MaterialCompact {
    background-color: #ffdf6de0 !important;
    border-left-color: #ffdf6de0 !important;
    border-top-color: #ffdf6de0 !important;
    border-right-color: #ffdf6de0 !important;
}
.dxvgCategoryRow_MaterialCompact.dxvgER .dxvgCategory_MaterialCompact, .dxvgCategoryRow_MaterialCompact.dxvgCR .dxvgCategory_MaterialCompact {
    background-color: #ffdf6de0 !important;
    border-left-color: #ffdf6de0 !important;
    border-top-color: #ffdf6de0 !important;
    border-right-color: #ffdf6de0 !important;
}*/
.dxrpControl_MaterialCompact > tbody > tr.dxrpCR > .dxrpcontent > .dxrpAW > .dxrpCW, .dxrpControl_MaterialCompact > tbody > tr.dxrpCR > .dxrpcontent > .dxrpCW {
    background-color: #D2E0FB !important;
}
/*.dxpcLite_MaterialCompact.dxRtl .dxpc-header, .dxdpLite_MaterialCompact.dxRtl .dxpc-header {
    background-color: #ffdf6de0 !important;
}
.card-header:first-child {
    background-color: #ffdf6de0 !important;
}*/

.modern-show-all {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #394d89;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
    text-decoration: none;
}

    .modern-show-all:hover {
        color: white;
        background-color: #263D86;
        text-decoration: none;
    }

.print-report-btn:hover {
    background-color: #EEE !important;
    color: #484848 !important;
}

.print-report-btn:active {
    background-color: #EEE !important;
    color: #484848 !important;
}

.dxbButton_MaterialCompact.dxb-outline.dxbButtonHover_MaterialCompact, .dxbButton_MaterialCompact.dxb-outline.dxbButtonPressed_MaterialCompact {
    background: #EEE !important;
    color: #484848 !important;
    border-color: #dfdfdf !important;
}

.dropdown-toggle::after {
    display: none !important;
}

/*gridLookupOverlay*/

.grid-lookup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

    .grid-lookup-overlay.active {
        opacity: 1;
    }


.dxgvPopupEditForm_DefaultTheme {
    z-index: 10000 !important;
}

@media (max-width: 768px) {
    .grid-lookup-overlay {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .dxgvPopupEditForm_DefaultTheme {
        max-width: 90vw !important;
        margin: auto;
    }
}


/*burger*/
.burger {
    position: relative;
    width: 30px;
    height: 20px;
    background: transparent;
    cursor: pointer;
    display: block;
    margin: 5px;
}

    .burger input {
        display: none;
    }

    .burger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 88%;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: 0.25s ease-in-out;
    }

        .burger span:nth-of-type(1) {
            top: 0px;
            transform-origin: left center;
        }

        .burger span:nth-of-type(2) {
            top: 50%;
            transform: translateY(-40%);
            transform-origin: left center;
        }

        .burger span:nth-of-type(3) {
            top: 100%;
            transform: translateY(-100%);
            transform-origin: left center;
        }

    .burger input:checked ~ span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 0px;
    }

    .burger input:checked ~ span:nth-of-type(2) {
        opacity: 0;
    }

    .burger input:checked ~ span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: 18px;
    }


@media (max-width: 1366px) {
    .custom-size {
        padding-bottom: 25px !important;
    }
}

@media (max-width: 768px) {
    #menuIcon {
        display: none !important;
    }
}

[dir="rtl"] .dxgvControl_MaterialCompact.dxgv.dxgvAdD .dxeListBoxItem_MaterialCompact.dxeTR {
    padding-inline-start: 21px !important;
}