@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: #a0abcc !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 {
    max-width: 1300px;
    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;
}
.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-counter {
    box-shadow: 0 0 2px 0 #3e3939;
    margin: 15px 1px;
    /*padding: 10px;*/
    background-color: #ffffff;
    height: 210px;
    min-width: 125px;
    border-radius: 10px;
    transition: .2s linear all;
}


    .card-counter:hover {
        box-shadow: 0 0 5px 0 #f5eaea;
        transition: .2s linear all;
    }

        .card-counter:hover .count-numbers {
            font-size: 18px;
            transition: .2s linear all;
        }



    .card-counter .count-numbers {
        padding-top: 15px;
        text-align: center;
        color: black;
        opacity: 0.75;
        font-size: 17px;
        display: block;
        transition: .2s linear all;
        margin-top: 5px;
        text-wrap: none;
    }
    .card-counter div {
        width: 100%;
        height: 165px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
    }  
.card-counter img {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
    }





.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: #9baeda !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;
}

.dxeListBox_MaterialCompact td.dxeTR {
    width: 100%;
    padding-right: 21px !important;
}
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: #9baeda !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;
}

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