body {
    font-family: Tajawal;
}


@font-face {
    font-family: 'Tajawal';
    src: url('../Fnts/Tajawal-Bold.ttf') format('truetype');
}

.arabicfont {
    font-family: Tajawal;
}

.k-widget .k-icon.k-i-collapse,
.k-widget .k-icon.k-i-expand {
    margin: 3px;
}

.k-rtl .k-pager-refresh,
[dir=rtl] .k-pager-refresh {
    color: black;
}

.k-button {
    color: white !important;
}

textarea {
    border: #e1e3e1;
    border-width: 2px;
    border-style: groove;
    height: 90px;
}

.k-toolbar {
    border-color: rgba(0, 0, 0, .08);
    /* color: #292b2c;
    background-color: #0d6efdc9;*/
    /*     color: black;
*/
    background-color: white;
    color: white !important;
}

.form-group {
    padding: 5px;
}

.k-toolbar {
    margin: 0;
    padding: 8px 8px;
    /*  border-width: 1px;
    border-style: solid;
    box-sizing: border-box;*/
    outline: 0;
    font-family: Tajawal;
    font-size: 14px;
    line-height: 1.4285714286;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /*    border-radius: 15px;
*/
}

.sidebar-wrapper .metismenu a {
    font-family: Tajawal;
}

.mb-1,
.mb-0 {
    font-family: Tajawal;
}

.k-grid {
    /* border-color: rgba(0,0,0,.08); */
    /*  color: #187be0;
    background-color: #187be0;
    border-color: #187be0;*/
}

.k-grid {
    /*    border-width: 3px;
    border-style: solid;
*/
    box-sizing: border-box;
    outline: 0;
    font-family: tajwal;
    font-size: 14px;
    line
}

.h5,
h5 {
    font-size: 12px;
}

.k-button,
.k-button-secondary {
    border-color: rgba(0, 0, 0, .08);
    color: limegreen;
    background-color: #d6e5e9;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .02));
}

.k-grid .k-grid-search {
    margin-right: auto;
    margin-left: 0;
}

.k-button {
    border-radius: 8px;
    padding: 4px 8px;
    box-sizing: border-box;
    border-width: 1px;
    /*    border-style: solid;
*/
    font-size: 12px;
    line-height: 1.4285714286;
    font-family: Tajawal;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    position: relative;
}




.k-filter-row th,
.k-grid-header th.k-header {
    text-align: center;
    font-family: Tajawal;
    font-weight: 400;
    /*        color: white;
*/
    color: white !important;
}

.k-rtl .k-grid-header .k-header {
    text-align: right;
}

rtl .k-grid thead {
    text-align: center;
}

.k-grid-header {
    /*    background-color: #13264905 !important;
*/
    background-color: #13264921 !important;
    /*    background-color: #003366;
*/
}



.k-grid td,
.k-grid th {
    font-size: 13px;
    font-weight: 400;
    font-family: 'tajawal';
    text-align: right;
}


.k-button {
    color: #FFFFFF;
    background-color: #187DE4;
    border-color: #187DE4;
}

.k-button:hover,
.buttons-excel:hover,
.k-grid-createNew:hover,
.k-grid-delete:hover,
.k-grid a :hover {
    color: #FFFFFF;
    background-color: #187DE4;
    border-color: #187DE4;
}

.buttons-excel,
.k-grid-createNew {
    color: white;
    background-color: #187DE4;
    border-color: #187DE4;
}

/*.k-grid a {
    color: #FFFFFF;
}*/

.k-icon k-i-edit {
    color: #FFFFFF;
    background-color: red;
    border-color: #187DE4;
}

.card {
    box-shadow: rgb(72 72 79 / 19%) 0px 0px 2px 0px, rgb(58 58 75 / 20%) 0px 12px 24px -4px
}

.k-pager-numbers .k-link.k-state-selected {
    color: #003366;
    background-color: rgba(231, 96, 123, .2);
}

.k-pager-numbers .k-link {
    color: #003366;
}

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
    /*    color: #fff;
*/
    /*    background-color: #003366;
*/
}

.k-list .k-item.k-state-hover.k-state-selected,
.k-list .k-item:hover.k-state-selected,
.k-list-optionlabel.k-state-hover.k-state-selected,
.k-list-optionlabel:hover.k-state-selected {
    /*    color: #fff;
*/
    /*    background-color: #003366;
*/
}



.k-toolbar {
    /* border-color: rgba(0,0,0,.08);
    color: #003366;
    background-color: #187DE4;*/
}

/*.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;*/
/* padding-left: calc(var(--bs-gutter-x) * .5); */
/* padding-right: calc(var(--bs-gutter-x) * .5); */
/*margin-top: var(--bs-gutter-y);
}*/

.k-button-primary,
.k-button.k-primary {
    border-color: #003366;
    color: #fff;
    background-color: #003366;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
    margin-left: 10px;
}


.k-button-primary,
.k-button.k-danger {
    border-color: #f62f2f;
    color: #fff;
    background-color: #f62f2f;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
}

.k-button-dark,
.k-button.k-dark {
    border-color: #003366;
    color: #fff;
    background-color: #000000;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
}


.k-grid-delete {
    border-color: red;
    color: #fff;
    background-color: red;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
}

.k-window-titlebar {
    border-color: inherit;
    color: white;
    background-color: #0ab583;
}

k-button-icontext k-grid-cancel {
    color: red;
    background-color: red;
}


.k-window {
    border-radius: 15px;
    padding: 0;
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.25;
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    z-index: 10002;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.k-window-titlebar {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 12px 16px;
    border-width: 0 0 1px;
    border-style: solid;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
}

.k-button-secondary {
    border-color: rgba(0, 0, 0, .08);
    /* color: limegreen; */
    background-color: red;
    /* background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.02)); */
}

.k-button k-button-icontext k-grid-delete {
    color: #FFFFFF;
    /* background-color: #187DE4; */
    /* border-color: #187DE4; */
}

/*.k-pager-wrap {
    border-color: rgba(0,0,0,.08);
    color: black;
    background-color: white;
}*/
.k-pager-wrap {
    padding: 0px;
    border-width: 1px;
    border-style: unset;
    box-sizing: border-box;
    outline: 0;
    font-family: 'tajawal';
    font-size: 14px;
    line-height: 1.4285714286;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    flex: 0 0 auto;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.k-grid-header {
    height: 30px;
}

.k-button-primary.k-state-active,
.k-button-primary:active,
.k-button.k-primary:active,
.k-state-active.k-button.k-primary {
    border-color: #003366;
    background-color: #003366;
}

.k-button-primary.k-state-hover,
.k-button-primary:hover,
.k-button.k-primary:hover,
.k-state-hover.k-button.k-primary {
    border-color: #003366;
    background-color: #003366;
}

/*.k-button:hover, .buttons-excel:hover, .k-grid-createNew:hover, .k-grid-delete:hover, .k-grid a :hover {
    color: white;
    background-color: red;
    border-color: red;
}*/
.k-grid-edit {
    color: #3699FF !important;
    background-color: #E1F0FF !important;
    border-color: transparent !important;
    padding: 8px !important;
}

.k-grid-delete {
    color: #F64E60 !important;
    background-color: #FFE2E5 !important;
    border-color: transparent !important;
    padding: 8px !important;
}

body {
    font-size: 14px;
    color: black;
    letter-spacing: .5px;
    background-color: white;
}

.k-grid-search {
    width: 60%;
}

.k-textbox {
    border-color: #003366;
    color: #292b2c;
    border-bottom: 1px solid #e2e3e4;
    background-clip: padding-box;
    height: 30px;
    z-index: 10;
   /* padding: 0 1.5rem;*/
    transition: all .2s;
}

.mobile-toggle-icon,
.search-toggle-icon,
.projects,
.notifications,
.messages {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    color: #5e636b;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0%);
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}

/*@media (min-width: 345px){

} .d-xl-none {
    display: none!important;
}

@media (min-width: 345px) {
    .float-xl-start {
        float: right !important
    }
}*/

.card-title {
    margin-bottom: var(--vz-card-title-spacer-y);
    color: white;
}

.k-pager-wrap {
    padding: 0px;
    border-width: 1px;
    border-style: unset;
    box-sizing: border-box;
    outline: 0;
    font-family: 'tajawal';
    font-size: 14px;
    line-height: 1.4285714286;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    flex: 0 0 auto;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /*   background-color: #003366;
*/
    /*color: white;*/
}

.k-rtl .k-pager-refresh,
[dir=rtl] .k-pager-refresh {
    COLOR: white;
}

.k-pager-nav.k-link:hover,
.k-pager-refresh:hover,
.k-state-hover.k-pager-nav.k-link,
.k-state-hover.k-pager-refresh {
    color: white;
    background-color: #003366;
}

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
    color: #fff;
    background-color: #003366;
}

.k-list .k-item.k-state-hover.k-state-selected,
.k-list .k-item:hover.k-state-selected,
.k-list-optionlabel.k-state-hover.k-state-selected,
.k-list-optionlabel:hover.k-state-selected {
    color: #fff;
    background-color: #003366;
}

.k-grid-header {
    padding-right: 0 !important;
}

.k-input {
    width: 100%;
    padding: .5rem .9rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--vz-body-color);
    /*    background-color: var(--vz-input-bg-custom);
*/
    background-clip: padding-box;
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--vz-border-radius);
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

/*.navbar-menu .navbar-nav .nav-link {
    color: black !important;
    padding: 0.75rem 1.5rem;
}*/
.navbar-menu .navbar-nav .nav-link {
    font-size: 14px;
    font-family: 'Tajawal';
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 0.55rem 1.5rem !important;
    color: var(--vz-vertical-menu-sub-item-color);
    white-space: none;
    position: relative;
    font-size: 14px !important;
    font-family: Tajawal;
}

.navbar-menu .navbar-nav .nav-link {
    color: black !important;
    padding: 0.75rem 1.5rem;
}

/*.navbar-menu  .navbar-nav .nav-link  {
    color: black !important;
    padding: 0.75rem 1.5rem;
}*/
.k-switch-on .k-switch-container {
    color: #fff;
    background-color: #003366 !important;
}

.card-header {
    border-bottom: 4px solid var(--vz-border-color);
    /*    background-color: #976fd4;
*/
    color: white !important;
    background-color: #003366;
}

.k-button k-button-icontext k-grid-add {
    color: white !important;
}


.k-button,
.buttons-excel,
.k-grid-createNew,
.k-grid-delete {
    color: #FFFFFF;
    /*    background-color: #187DE4;
    border-color: #187DE4;
*/
}

/*.k-grid a {
     color: white !important; 
    text-decoration: none;
}*/
/*.k-grid-createNew
{
    color:white !important;
}*/
.auth-bg-cover {
    background: linear-gradient(45deg, #695eef 50%, #1a1b1b);
}

.auth-one-bg {
    background-image: url('images/bg-auth.jpg') !important;
    background-position: center;
    background-size: cover;
}

.auth-one-bg .bg-overlay {
    /* background: -webkit-gradient(linear,right top,left top,from(#4f42ec),to(#695eef)); */
    background: linear-gradient(to left, #4f42ec00, #695eef00);
    opacity: .9;
}

.k-treeview .k-content,
.k-treeview .k-item>.k-group,
.k-treeview>.k-group {
    margin: 0;
    /*    padding: 0;
*/
    background: 0 0;
    list-style: none;
    position: relative;
}

.k-treeview .k-item {
    outline-style: none;
    margin: 0;
    padding: 0px 30px 0px 16px !important;
    border-width: 0;
    display: block;
}

.k-treeview .k-bot,
.k-treeview .k-mid,
.k-treeview .k-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    padding-right: 100px;
}

.k-item {
    cursor: initial;
}

/* ============================================
   CARD HEADER & DASHBOARD STYLING
   ============================================ */
.card-header {
    background: linear-gradient(135deg, #6f5ae0 0%, #5a47c4 100%);
    color: #FFFFFF !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 20px;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.card-header .card-title,
.card-header h5,
.card-header h6,
.card-header span {
    color: #FFFFFF !important;
    font-weight: 600;
}

.card {
    border-radius: 12px;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /*   background-color: #003366;
*/
    /*color: white;*/
}

.k-rtl .k-pager-refresh,
[dir=rtl] .k-pager-refresh {
    COLOR: white;
}

.k-pager-nav.k-link:hover,
.k-pager-refresh:hover,
.k-state-hover.k-pager-nav.k-link,
.k-state-hover.k-pager-refresh {
    color: white;
    background-color: #003366;
}

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
    color: #fff;
    background-color: #003366;
}

.k-list .k-item.k-state-hover.k-state-selected,
.k-list .k-item:hover.k-state-selected,
.k-list-optionlabel.k-state-hover.k-state-selected,
.k-list-optionlabel:hover.k-state-selected {
    color: #fff;
    background-color: #003366;
}

.k-grid-header {
    padding-right: 0 !important;
}

.k-input {
    width: 100%;
    padding: .5rem .9rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--vz-body-color);
    /*    background-color: var(--vz-input-bg-custom);
*/
    background-clip: padding-box;
    border: var(--vz-border-width) solid var(--vz-input-border-custom);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--vz-border-radius);
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

/*.navbar-menu .navbar-nav .nav-link {
    color: black !important;
    padding: 0.75rem 1.5rem;
}*/
.navbar-menu .navbar-nav .nav-link {
    font-size: 14px;
    font-family: 'Tajawal';
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 0.55rem 1.5rem !important;
    color: var(--vz-vertical-menu-sub-item-color);
    white-space: none;
    position: relative;
    font-size: 14px !important;
    font-family: Tajawal;
}

.navbar-menu .navbar-nav .nav-link {
    color: black !important;
    padding: 0.75rem 1.5rem;
}

/*.navbar-menu  .navbar-nav .nav-link  {
    color: black !important;
    padding: 0.75rem 1.5rem;
}*/
.k-switch-on .k-switch-container {
    color: #fff;
    background-color: #003366 !important;
}

.card-header {
    border-bottom: 4px solid var(--vz-border-color);
    /*    background-color: #976fd4;
*/
    color: white !important;
    background-color: #003366;
}

.k-button k-button-icontext k-grid-add {
    color: white !important;
}


.k-button,
.buttons-excel,
.k-grid-createNew,
.k-grid-delete {
    color: #FFFFFF;
    /*    background-color: #187DE4;
    border-color: #187DE4;
*/
}

/*.k-grid a {
     color: white !important; 
    text-decoration: none;
}*/
/*.k-grid-createNew
{
    color:white !important;
}*/
.auth-bg-cover {
    background: linear-gradient(45deg, #695eef 50%, #1a1b1b);
}

.auth-one-bg {
    background-image: url('images/bg-auth.jpg') !important;
    background-position: center;
    background-size: cover;
}

.auth-one-bg .bg-overlay {
    /* background: -webkit-gradient(linear,right top,left top,from(#4f42ec),to(#695eef)); */
    background: linear-gradient(to left, #4f42ec00, #695eef00);
    opacity: .9;
}

.k-treeview .k-content,
.k-treeview .k-item>.k-group,
.k-treeview>.k-group {
    margin: 0;
    /*    padding: 0;
*/
    background: 0 0;
    list-style: none;
    position: relative;
}

.k-treeview .k-item {
    outline-style: none;
    margin: 0;
    padding: 0px 30px 0px 16px !important;
    border-width: 0;
    display: block;
}

.k-treeview .k-bot,
.k-treeview .k-mid,
.k-treeview .k-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    padding-right: 100px;
}

.k-item {
    cursor: initial;
}

/* ============================================
   CARD HEADER & DASHBOARD STYLING
   ============================================ */
.card-header {
    background: linear-gradient(135deg, #6f5ae0 0%, #5a47c4 100%);
    color: #FFFFFF !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 20px;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.card-header .card-title,
.card-header h5,
.card-header h6,
.card-header span {
    color: #FFFFFF !important;
    font-weight: 600;
}

.card {
    border-radius: 12px;
    border: 1px solid #e5e7ef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-title {
    color: #FFFFFF;
    font-weight: 700;
    margin: 0;
}

/* ============================================
   SOFT BUTTONS (Dashboard Quick Actions)
   ============================================ */
.btn-soft-primary {
    background-color: rgba(111, 90, 224, 0.12);
    color: #6f5ae0;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-soft-primary:hover {
    background-color: #6f5ae0;
    color: #fff;
    transform: translateX(-5px);
}

.btn-soft-success {
    background-color: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-soft-success:hover {
    background-color: #10B981;
    color: #fff;
    transform: translateX(-5px);
}

.btn-soft-info {
    background-color: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-soft-info:hover {
    background-color: #3B82F6;
    color: #fff;
    transform: translateX(-5px);
}

.btn-soft-warning {
    background-color: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-soft-warning:hover {
    background-color: #F59E0B;
    color: #fff;
    transform: translateX(-5px);
}