@import url('site.rtl.css');
:root {
    --body-dark: #1a2035;
    --body-color: white;
    --primaryColor: #212121;
    --primary-background-color1: #776bcc;
    --primary-background-color: #6c2247;
    --scrl-bg: #7b1fa2;
    --bgblue: #0b5b82;
    --srl-thumb: white;
    --srclCol: #e91e63;
    --active: #d33987;
    --activeOLD: #713c8e;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--active); 
    }

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 12px;
}

table::-webkit-scrollbar-thumb {
    background: var(--active);
    border-radius: 10px;
}

.tableFixHead::-webkit-scrollbar-thumb {
    background: var(--active);
    border-radius: 10px;
}

    table::-webkit-scrollbar-thumb:hover {
        background: var(--active);
    }


body {
    /*background-color: var(--body-dark);*/
    background-color: #f5f8ff;
    margin: 0;
    font-family: "DroidArabicKufi",BebasNeueRegular, arial, Georgia, serif !important;
    /*font-family: Calibri !important;*/
    /*font-size: 18px;*/
    font-size: calc(0.5em + 1vmin);
    font-weight: 400;
    //var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--body-color);
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: auto !important;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
}

.card-body {
    text-wrap: balance !important;
}

@font-face {
    font-family: "DroidArabicKufi";
    src: url("../Content/assets/fonts/DroidArabicKufi.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

   /* body label, button, input {
        font-family: "Times New Roman" !important;
        font-size: 18px !important;
    }

    body h1, h2, h3, h4, h5, h6 {
        font-family: "Times New Roman" !important;
    }*/

   /* body th, td, select {
        font-family: "Times New Roman" !important;
        font-size: 18px !important;
    }*/

.hilight {
    background-color: #ffff00a8 !important;
    border: 1px solid red !important;
}

.arabic {
    direction: rtl !important;
    text-align: right !important;
}

.english {
    direction: ltr !important;
    text-align: left !important;
}

 
.frow {
    display: flex;
}

.modal-header {
    background-color: var(--active) !important;
    color: white !important;
    border: 0px solid white;
    height: 42px;
    border-radius: 0.5rem 0.5rem 0 0;
}

.form-check {
    cursor: pointer !important;
}

    .btn-close {
    color:white !important;
    margin:0 !important;
}


.form-control:disabled, .form-control[readonly] {
    background-color: #e9e9e9;
    opacity: 1;
}

.form-select {
    text-align: inherit !important;
}

.row--align-v-center {
    align-items: center;
}

.row--align-h-center {
    justify-content: center;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin: auto;
    font-size: inherit;
    color: #dc3545;
    background-color: white;
    border-radius: 5px;
    padding: 0px 8px;
}

.was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acc-name-label {
    margin: 0px 8px;
    border: 1px solid lightgrey;
    padding: 5px 8px;
    width: 100%;
    border-radius: 5px;
}

.grid {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100px 1fr 0px;
    grid-template-areas: "header" "main" "footer";
    height: 100%;
    /* overflow-x: auto;*/
}

.grid--noscroll {
    overflow-y: auto;
    display: grid;
    grid-template-columns: 280px calc(100% - 280px);
    /*grid-template-rows: 50px 1fr 44px;*/
    /*grid-template-rows: 60px 1fr 40px;*/
    grid-template-rows: 100px 1fr 0px;
    grid-template-areas: "sidenav header" "sidenav main" "sidenav footer";
}

.company-log {
    width: inherit;
    height: inherit;
    padding: 15px;
    /* width: 100%;
    height: 125px;*/
}

.header {
    /*height: 50px;*/
    height: 100px;
    position: fixed;
    width: 100%;
    max-width: -webkit-fill-available;
    z-index: 1000;
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background-color: var(--active);*/
    /*background-color: var(--primaryColor);*/
    padding: 0px 15px;
    background-color: #f5f8ff;
    color: black;
    flex-direction: column;
}

.header__menu {
    position: fixed;
    padding: 13px;
    /* left: 12px;*/
    /*background-color: #DADAE3;*/
    border-radius: 50%;
    z-index: 1;
    cursor: pointer !important;
    transform: unset !important;
    height: 50px;
    width: 50px;
    margin-top: -2px;
}

    .header__menu:hover {
        cursor: pointer;
    }

.header__search {
    margin-left: 55px;
    font-size: inherit;
    /* color: #777;*/
    opacity: 0.6;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.header__input {
    border: none;
    background: transparent;
    padding: 12px;
    font-size: inherit;
    color: #777;
}

    .header__input:focus {
        outline: none;
        border: none;
    }

.header__avatar {
    background-image: url('/Content/assets/avatar/avatar1.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    /*  border: 2px solid rgba(255, 255, 255, 0.2);*/
    position: relative;
    margin: 0 15px;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
}

.ui-menu-item {
    background: none;
    font-weight: normal;
    border-color: #2e2e2e;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    outline: none;
    padding: 10px 10px 10px 10px;
    width: 250px;
    padding-right: inherit;
}

    /*.header__avatar:after {
        position: absolute;
        content: "";
        width: 8px;
        height: 8px; 
        background: none;
        border-left: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(-45deg) translateY(-50%);
        top: 50%;*/
        /*right: -18px; */
    /*}*/

.dd-arrow {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: none;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-50%);
    top: 50%;
    right: 43px;
    left: 43px;
}

.header__langauge {
    /* background-image: url("./assets/flags/kuwait.png");*/
    /*border-radius: 50%;*/
    /* border: 2px solid rgba(255, 255, 255, 0.2);*/
    position: relative;
    margin: 0 10px;
/*    margin-right: 8px;
*/    /*width: 35px;*/
    /*height: 35px;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: white;*/
    color: black;
}

    .header__langauge:after {
        /* position: absolute;*/
        display: none;
        content: "";
        width: 8px;
        height: 8px;
        margin: 0px 8px;
        background: none;
        border-left: 2px solid #878787;
        border-bottom: 2px solid #878787;
        transform: rotate(-45deg) translateY(-50%);
        top: 50%;
        right: -18px;
    }

/*.dropdown {
    position: absolute;
    top: 43px;
    right: -16px;
    width: 190px;
    height: auto;
    z-index: 1;
    background-color: #fff;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.dropdown__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.dropdown__list-item {
    padding: 8px 8px;*/
    /*padding: 12px 24px;*/
    /*color: #777;
    text-transform: capitalize;
}

    .dropdown__list-item:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

.dropdown__icon {
    color: #1BBAE1;
}

.dropdown__title {
    margin-left: 10px;
}

.dropdown:before {
    position: absolute;
    content: "";
    top: -6px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #FFF;
}

.dropdown--active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}*/

.sidenav {
    position: fixed;
    grid-area: sidenav;
    height: 100%;
    margin-top: 58px;
    /*    box-shadow: -3px 2px 4px rgba(0, 0, 0, .1) !important;
*/ /*  overflow-y: auto;*/
    /*background-color: var(--primaryColor);*/
    /*background-color: var(--active);*/
    width: 280px;
    transform: translateX(-280px);
    transition: all 0.6s ease-in-out;
    /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);*/
    z-index: 1001;
    background-color: #f5f8ff;
    padding: 0 14px;
    height: Calc(100vh - 55px);
    overflow-y: auto;
}

.sidenav-rtl { 
    transform: translateX(280px); 
}


    .sidenav__brand {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.15);
    }

.sidenav__brand-icon {
    margin-top: 2px;
    font-size: inherit;
    color: rgba(255, 255, 255, 0.5);
}

.sidenav__brand-close {
    position: absolute;
    right: 8px;
    top: 8px;
    visibility: visible;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.sidenav__brand-link {
    font-size: inherit;
    font-weight: bold;
    color: #FFF;
    margin: 0 15px;
    letter-spacing: 1.5px;
}

.sidenav__profile {
    display: flex;
    align-items: center;
    min-height: 90px; 
}

.sidenav__profile-avatar {
    background-image: url("/Content/assets/avatar/avatar1.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    height: 64px;
    width: 64px;
    margin: 0 15px; 
}

.sidenav__profile-title {
    width: 100%;
    text-align: center;
    font-size: inherit;
    letter-spacing: 1px;
}

.sidenav .logo {
    text-align: center;
    margin-top: 42px;
    margin-bottom: -24px;
    display: block;
    position: relative;
    z-index: 4;
    max-width: 212px;
    height: 140px;
    overflow: hidden;
}

.sidenav__arrow {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    top: 50%;
    right: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) rotate(225deg);
}

.sidenav__sublist {
    list-style-type: none;
    margin: 0;
    padding: 10px 0 0;
}
 

.sidenav--active {
    transform: translateX(0);
}

.sidenav .nav-item {
    width: 100%;
    margin: 0px;
    color: inherit;
    max-width: 228px;
}

    .sidenav .nav-item .nav-link {
        color: black;
        width: 100%;
        border-radius: 8px;
        padding: 0.5rem 0.5rem;
        text-decoration: none;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }

.sidenav .submenu .collapse,
.sidenav .submenu .collapsing {
    padding: 0.5rem 0.5rem;
    min-width: 10rem;
    font-size: inherit;
    margin: 0 0 1rem 0;
    font-weight: bolder;
}


.sidenav .nav-item p {
    padding: 0 !important;
    margin: auto 5px !important;
      /*margin:0px !important;*/
}

.sidenav-sub-ul {
    position: relative;
    z-index: 2;
   /* height: calc(100vh - 310px);
    overflow-y: auto;*/
}

  /*  .sidenav .nav-item:hover {
        background-color: var(--active);
    }*/
 

.navList {
    width: 240px;
    padding: 0;
    margin: 0;
    background-color: #394263;
    list-style-type: none;
}

.navList__heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 3px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-size: inherit;
}

.navList__subheading {
    position: relative;
    padding: 10px 30px;
    color: #fff;
    font-size: inherit;
    text-transform: capitalize;
}

.navList__subheading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    color: rgba(255, 255, 255, 0.5);
    width: 12px;
}

.navList__subheading-title {
    margin: 0 15px;
}

.navList__subheading:after {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    top: 17px;
    right: 25px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transform: rotate(225deg);
    transition: all 0.2s;
}

.navList__subheading:hover {
    background-color: #303753;
    cursor: pointer;
}

.navList__subheading--open {
    background-color: #303753;
}

    .navList__subheading--open:after {
        transform: rotate(315deg);
    }

.navList .subList {
    padding: 0;
    margin: 0;
    list-style-type: none;
    background-color: #262c43;
    visibility: visible;
    transition: all 0.4s ease-in-out;
}

.navList .subList__item {
    padding: 8px;
    text-transform: capitalize;
    padding: 8px 30px;
    color: #D3D3D3;
}

    .navList .subList__item a {
        display: flex;
        width: 100%;
        color: white !important;
        /* font-weight: 600;*/
    }

    .navList .subList__item:first-child {
        padding-top: 15px;
    }

    .navList .subList__item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.navList .subList--hidden {
    visibility: hidden;
    max-height: 0;
}

.main {
    grid-area: main;
    /*color: white;*/
    color: black;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgba(0,0,0,.1) !important;
    margin: 0px 10px;
    /*padding: 12px;*/
    height: Calc(100dvh - 112px);
    overflow-y: auto;
}

    .main .main--contents {
        min-height: calc(100vh - 160px);
        padding: 8px 15px;
    }



.submenu .collapse-item::before {
    color: white !important;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 8px;
    margin-right: 8px;
    content: none;
}

.accordion-body {
    /* background-color: var(--active); */
    padding: 0.1rem 0.1rem !important;
    background-color: inherit;
    margin-right: -10px;
    margin-top: 5px;
    border-top: 2px solid #e5e5e5;
    padding-top: 5px !important;
}

    .accordion-body ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin-bottom: 0;
        list-style: none;
        overflow: hidden;
        overflow-wrap: break-word;
        justify-content: flex-end;
    }

.accordion-body ul .nav-link{

}

.accordion a {
    color: inherit;
}

    .accordion a:hover {
        color: inherit;
    }

.accordion-header {
    margin-bottom: 0;
}

.accordion-button {
    /*padding: 0.5rem 0.25rem !important;*/
    padding: 0.7rem 0.25rem !important;
    /*background-color: #222223;*/
    background-color: #f5f8ff;
    text-decoration: none;
    align-items: normal;
}

    .accordion-button a {
        color: black !important;
        background-color: #f5f8ff;
    }

    .accordion-button:hover {
        background-color: #f5f8ff;
    }

    .accordion-button a:hover {
        color: inherit;
    }

    .accordion-button:not(.collapsed) {
        /*        color: white !important;
        background-color: var(--active);
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);*/
        color: inherit !important;
        background-color: #f5f8ff;
        box-shadow: none;
    }

    .accordion-button::after {
        color: black !important;
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        /* margin-left: auto;
    margin-right: initial !important;*/
        content: "";
        background-image: url(assets/arrow-down-short.svg) !important;
        background-repeat: no-repeat;
        background-size: 1.6rem;
        transition: transform 0.2s ease-in-out;
        content: "";
        width: 8px;
        height: 8px;
        margin: 0px 8px;
        background: none;
        border-left: 2px solid #878787;
        border-bottom: 2px solid #878787;
        transform: rotate(315deg) !important;
        top: 17px;
        left: 0;
        position: absolute;
        opacity: 0.5;
    }

.sidenav .submenu {
    display: flex;
    flex-direction: column;
}

    .sidenav .submenu .collapse-item {
        /*  padding: 0.25rem 1.25rem;
        margin: 0.1rem 0.25rem;*/
        padding: 0.45rem 1.25rem;
        margin: 0.0rem 0.25rem;
        display: block;
        color: black;
        text-decoration: none;
        border-radius: 0.35rem;
        white-space: nowrap;
        font-size: inherit;
    }

        .sidenav .submenu .collapse-item:hover {
            background-color: var(--active);
            color: white !important;
        }


        .sidenav .submenu .collapse-item:active {
            background-color: var(--active);
            color: white !important;
        }

    .sidenav .submenu .collapse-item a {
        text-align: center !important;
    }

        .sidenav .submenu .collapse-item::before {
            color: white !important;
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            margin-left: 8px;
            margin-right: 8px;
            content: none;
        }


.sb_menu_l3 {
    display: block;
    text-align: center;
}

.read-only {
    text-align: center !important;
    background-color: #f2e125 !important;
}

    .read-only input {
        text-align: center !important;
        background-color: #f2e125 !important;
    }

.table-container {
    border: 0px solid gray;
    border-radius: 6px;
    margin-top: 8px;
}

.table {
    /*color: var(--body-color);*/
    color: black !important;
}

table thead, table tfoot {
    /*background-color: var(--active) !important;*/
    background-color: #7ea7d5 !important;
    color: white !important;
}

.table > thead > tr > th {
    text-align: center !important;
}

.tableFixHead {
    overflow-y: auto;
    /*min-height: 275px;*/
    min-height: auto;
    margin-bottom: 20px;
}

    .tableFixHead thead {
        /*background-color: darkcyan !important;*/
        /*background-color: var(--active) !important;*/
        background-color: #7ea7d5 !important;
        z-index: 100;
    }

        .tableFixHead thead th {
            /*background-color: darkcyan !important;*/
            /*background-color: var(--active) !important;*/
            background-color: #7ea7d5 !important;
            position: sticky;
            top: -1px;
            z-index: 100;
        }

    .tableFixHead table {
        border-collapse: collapse;
        width: 100%;
    }


    .tableFixHead th,
    .tableFixHead td,
    #tfooter td {
        padding: 4px 8px;
        border: 1px solid #ccc;
        color: inherit;
        font-size: inherit;
        font-weight: 600;
    }


    .tableFixHead th, #tfooter tr {
        /*background-color: var(--active) !important;*/
        background-color: #7ea7d5 !important;
        color: white;
        font-weight: 600;
    }

.pager-container {
    width: 100%;
    display: flex;
    justify-content: center;
    border-top: 1px solid whitesmoke;
    padding-top: 15px;
}

.row-posted {
    background-color: #ffff00a6 !important;
}

    .pager-container .pagination {
        display: flex;
        padding-right: 0;
        padding-left: 0;
        list-style: none;
        border-radius: 0.25rem;
    }

        .pager-container .pagination > li:first-child > a,
        .pager-container.pagination > li:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
            color: white;

        }


        .pager-container .pagination > li > a,
        .pager-container .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.428571429;
            text-decoration: none;
            background-color: #212529;
            border: 1px solid #f8f9fa;
            color: white !important;
        }


        .pager-container .pagination > .active > a,
        .pager-container.pagination > .active > span,
        .pager-container.pagination > .active > a:hover,
        .pager-container.pagination > .active > span:hover,
        .pager-container.pagination > .active > a:focus, .pagination > .active > span:focus {
             
            color: #ffffff;
            cursor: default;
            background-color: #428bca;
            border-color: #428bca;
        }



    .posted {
        background-color: red;
        width: 75px;
        text-align: center;
        padding: 2px 5px;
    }

.unposted {
    background-color: #ffeb3b;
    color: black;
    padding: 2px 5px;
    width: 75px;
    min-width: max-content;
    text-align: center;
}

.btn-post {
    background-color: darkorange !important;
}

.invoice {
    width: 138px !important;
}

.date-time {
    width: 150px !important;
    direction: inherit;
    text-align: inherit;
}

.form-group {
    margin-bottom: 15px !important;
}

.field-validation-error {
    background-color: white;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    /*position: absolute;*/
    border: 1px solid red;
    display: inline-block;
}

.td-invoice-no {
    width: 100px;
}

.btn-sm-icon {
    width: 42px !important;
    height: 37px !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-invoice {
    background-color: yellowgreen !important;
    margin-top: 2px;
    margin-bottom: auto;
}

input, textarea, select {
    background-color: white;
}

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

.navbar-nav {
    display: flex;
    align-items: baseline !important;
}

  

.center-page {
    margin: auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

.material-icons {
    font-size:inherit !important;
}

.page-wrapper {
    width: 100% !important;
    min-height: 65vh;
    background: var(--body-dark);
    font-family: inherit !important;
    font-size: inherit !important;
    padding: 15px 8px 15px 8px;
    /* font-size: 18px !important;*/
    /* padding: 15px 15px;*/
    background: inherit;
    color: black;
}

    /*.page-wrapper i, s, a {
        font-size: 18px !important;
    }*/

.page-header-fixed {
    position: fixed;
    z-index: 500;
    background-color: white;
    width: -webkit-fill-available;
    margin-right: -25px;
    margin-left: 10px;
    margin-top: -24px;
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1) !important;
}

.page--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px 11px 18px;
}

.page--contents {
    /*max-width: 1199px;*/
    max-width: unset !important;
    margin: auto;
    /* padding: 15px 8px;*/
    margin-top: 30px;
    margin-bottom: -30px;
}

    .container .btn.btm.sm,
    .page--header .btn.btn-sm,
    .page--contents .btn.btn-sm {
        font-size: inherit !important;
    }

.site-map {
    margin: 60px 8px 0px 8px;
    padding: 8px 15px;
    font-size: inherit !important;
    background-color: #ffa500d4;
    border-radius: 4px;
}

    .site-map a {
        font-size: inherit !important;
        text-decoration: none !important;
        background-color: #d68d09;
        border-radius: 5px;
        padding: 2px 8px;
    }

        .site-map a:hover {
            background-color: #f7a410;
        }



.font-robo {
    font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}

.has-balance {
    background-color: lightgreen !important;
}

.has-no-balance {
    background-color: lightyellow !important;
}

/*.pop-up-menu {
    left: auto !important;
}*/



.active {
    background-color: var(--active) !important;
    color: white !important;
}

.tab-content> .active {
    background-color: white !important;
    color:black !important;
}

.pop-up-menu li a {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    height: 32px;
    font-size: inherit;
    direction: initial;
}


.starup-page {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-image: url("assets/images/a.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}


    .starup-page .startbutton {
        /* position: fixed;
        top: 40px;
        bottom: auto;
        left: auto;
        right: auto;*/
        width: 230px;
        color: #fff;
        background-color: #ffc800;
        border-color: #ffc800;
    }

        .starup-page .startbutton:hover {
            background-color: #9c27b0;
        }


.div-heaeder {
    background-color: var(--active);
    padding: 1px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    color:white;
}

    .div-heaeder h5 {
        margin:4px !important;
    }

    .action-td {
        text-align: center !important;
        display: flex;
        max-width: 175px;
        /*width: 175px;*/
    }

    .action-td .btn {
        display:flex;
    }

    .action-td-sm {
        text-align: center !important;
        width: 60px;
    }

.action-menue-btn {
    width: 32px !important;
    padding: 2px !important;
}


.table-hover > tbody > tr:hover > * {
 /*   --bs-table-accent-bg: var(--active);
    color: white;*/
}
 
.select2 {
    /* width: 100% !important;*/
    height: 37px !important;
}

.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection--single {
    height: 37px !important;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    line-height: 37px !important;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    text-align: inherit;
}

.select2-dropdown {
    z-index: 10001;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    z-index: 10002;
}

.select2-hidden-accessible,
.select2-hidden-accessible:focus {
    top: auto !important;
    margin: -8px;
}

.select2-container--classic .select2-results > .select2-results__options {
    color: black !important;
}

/* Login */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 98vh;
}

.login-screen {
    background: linear-gradient(90deg, #5d54a4, #7c78b8);
    position: fixed;
    height: 550px;
    width: 360px;
    box-shadow: 0px 0px 24px #5c5696;
}

.screen__content {
    z-index: 1;
    position: relative;
    height: 100%;
}

.screen__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.screen__background__shape {
    transform: rotate(45deg);
    position: absolute;
}

.screen__background__shape1 {
    height: 520px;
    width: 520px;
    background: #fff;
    top: -50px;
    right: 120px;
    border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
    height: 220px;
    width: 220px;
    background: #6c63ac;
    top: -172px;
    right: 0;
    border-radius: 32px;
}

.screen__background__shape3 {
    height: 540px;
    width: 190px;
    background: linear-gradient(270deg, #5d54a4, #6a679e);
    top: -24px;
    right: 0;
    border-radius: 32px;
}

.screen__background__shape4 {
    height: 400px;
    width: 200px;
    background: #7e7bb9;
    top: 420px;
    right: 50px;
    border-radius: 60px;
}

.login {
    width: 320px;
    padding: 30px;
    padding-top: 156px;
}

.login__field {
    display: flex;
    flex-direction: column;
    padding: 8px 0px;
    position: relative;
}

.login__icon {
    color: #7875b5;
}

.login__input {
    border: none;
    border-bottom: 2px solid #d1d1d4;
    background: transparent;
    padding: 6px;
    padding-left: 24px;
    font-size: inherit;
    width: 100%;
    transition: 0.2s;
}


.login__input:active,
.login__input:focus,
.login__input:hover {
    outline: none;
    border-bottom-color: #6a679e;
}



.button__icon {
    font-size: 24px;
    margin-left: auto;
    color: #7875b5;
}

.social-login {
    position: absolute;
    height: 40px;
    width: 100%;
    text-align: center;
    bottom: 0px;
    right: 0px;
    color: #fff;
    /* position: absolute;
    height: 140px;
    width: 160px;
    text-align: center;
    bottom: 0px;
    right: 0px;
    color: #fff;*/
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-login__icon {
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0px 0px 8px #7875b5;
}

 .social-login__icon:hover {
        transform: scale(1.5);
    }

.login-form {
    width: 350px;
    padding: 15px;
    margin: auto;
}

.validation-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 8px 8px;
    margin: 8px;
}

@media only screen and (max-width: 512px) {
    .login-screen {
        width: 92%;
    }

    .login-form {
        width: 90%;
        padding: 15px;
        margin: auto;
    }
}


.quicklink-container {
    font-size: inherit;
    color: white;
    padding: 8px;
    border: 1px solid gray;
    border-radius: 4px;
}

.quicklink-container-title {
    font-size: inherit;
    font-weight: 600;
    color: whitesmoke !important;
    text-align: center;
    padding: 5px;
}

.quicklink {
    margin: 4px 0px;
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    text-decoration: none;
    border-radius: 0.35rem;
    white-space: nowrap;
    font-size: inherit;
}

.quicklink a {
    text-decoration: none !important;
}

.quicklink:hover {
    background-color: white !important;
    color: black !important;
}

.quicklink:hover a {
    color: black !important;
}

.quicklink-title {
    font-size: inherit;
    color: whitesmoke;
    text-align: center;
}


.alert .close {
    right: 4px !important;
    bottom: auto !important;
    height: 22px !important;
    width: 22px !important;
    display: flex;
    justify-content: center;
}

    .alert .close i {
        font-size: larger !important;
    }

.alert span {
    margin-top: 10px !important;
    display: block;
}

.radio-inline input {
    margin: auto 4px !important;
}

.modal-dialog {
    color: black !important;
}



.foter {
    /* grid-area: footer;*/
    /*background-color: var(--primaryColor);*/
    /*background-color: var(--active);*/
    /* display: flex;
    display: -webkit-flex;
    align-items: center;*/

    position: fixed;
    width: 100%;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    background-color: #f5f8ff;
    color: black;
}
}

.foter a {
    color: black !important;
    text-decoration: none;
}

.footer-conent {
    justify-content:end;
}

.site-address-container {
    width: 58vw;
    display: flex;
    justify-content: end;
}

.site-address {
    font-size: inherit;
    font-weight: unset;
    /*max-width: 490px;*/
    text-align: center;
    padding: 0 !important;
    margin-right: auto;
    margin-left: auto;
}



@media only screen and (max-width: 767px) {

    .footer-conent {
/*        justify-content: space-between;
*/    }

    .site-address {
        font-size: inherit;
        font-weight: unset;
        /* max-width: 495px;*/
        text-align: center;
        padding: 0 !important;
        margin: 0;
    }
}
/*.grid {
    display: grid;
    grid-template-columns: 240px calc(100% - 240px);
    grid-template-rows: 50px 1fr 50px;
    grid-template-areas: "sidenav header" "sidenav main" "sidenav footer";
}*/
    @media only screen and (min-width: 890px) {

        .sidenav {
           /* position: relative;*/
            /*transform: translateX(0);*/
        }

        .sidenav__brand-close {
            visibility: hidden;
        }

        .main-header__intro-wrapper {
            padding: 0 30px;
        }

     /*   .header__menu {
            display: none;
        }*/

        .sidenav {
            z-index: 1000;
        }

            .sidenav .logo {
                margin-top: -13px;
            }

        .header__search {
            margin-left: 20px;
        } 
         
    }

.sidenav .logo {
    margin-top: -13px;
}

    @media only screen and (min-width: 65.625em) {
        .main__cards {
            column-count: 2;
        }

        .main-header__intro-wrapper {
            flex-direction: row;
        }

        .main-header__welcome {
            align-items: flex-start;
        }
    }


    @media print {
        .noprint {
            display: none !important;
        }

        .tableFixHead {
            overflow-y: auto;
            height: auto !important;
        }
    }


.header-text {
    margin: 0px !important;
}

.table > :not(:first-child) {
    border-top: 0px solid currentColor;
}

.dropdown-menu {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    border: 1px solid #eee;
}

.adsIcon {
    width: 22px;
    height: 22px;
    float: left;
}

#dropdownMenuProfile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

#CompanyInfo {
    margin-right: 60px !important;
}

@media only screen and (min-width: 890px) {
/*    #CompanyInfo {
        margin-right: 0px !important;
    }*/
}

.ui-menu-item {
    border-width: 1px 1px 0px 1px;
    /*width: 400px !important;*/
}

.ui-menu .ui-menu-item {
    padding: 0.4em;
}

.ui-menu {
   /* width: 400px !important;*/
    max-height: 400px;
    overflow-y: auto;
}

.ui-front {
    z-index: 3000;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    color: black;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: black !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: inherit;
}

.close {
    color: white !important;
    font-size: 20px;
}

.modal-content {
    border-radius: 0.6rem;
}

.table > thead > tr > th {
    vertical-align: middle !important;
    text-align: center;
}

.table > tbody > tr > td {
    white-space: inherit;
    vertical-align: middle !important;
    text-align: center;
}

.form-control-sm {
    padding: 0rem 0.5rem;
    font-size: 16px;
    color: #6a6969;
}

.form-control {
    line-height: 1;
    font-weight: 600;
}

.table-bordered > :not(caption) > * > * {
    border-width: 2px 3px !important;
    padding: 2px 8px;
}

.chosen-container .chosen-results li {
    padding: 4px 6px !important;
    line-height: 22px !important;
}

.ui-widget {
    font-family: Arial, Helvetica, sans-serif;
    font-family: "DroidArabicKufi", BebasNeueRegular, arial, Georgia, serif !important;
    font-weight: bold;
    font-size: 16px;
    max-width: 300px;
}

.ui-menu-item {
    font-weight: bold !important;
    border-color: #d5d5d5 !important;
}

.notification-dropdown {
    width: 300px;
}

.dropdown-menu-media {
    max-height: 240px;
    overflow-y: auto;
}

.media-img span {
    font-size: 18px;
    padding: 10px;
}

.media-body .font-13 {
    font-size: 13px;
}

.notification-header {
    padding: 10px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.customNotification {
    border-radius: 50%;
    opacity: 1;
    text-align: center;
    line-height: 15px;
    padding: 3px;
    min-width: 23px;
    left: 8px;
    height: unset;
    width: unset;
    margin-top: -7px;
    font-size: 12px;
    position: absolute;
}

.customNotIcon {
    border-radius: 50px;
    opacity: 1;
    text-align: center;
    height: 40px;
    width: 41px;
    right: 11px;
    margin-top: -21px;
    position: absolute;
    padding: 9px !important;
    border: 3px solid;
}

.customNotText {
    margin-right: 41px;
    font-size: 15px;
}

.customNotItem {
    min-height: max-content;
    display: flex;
}

.notification-header .form-select {
    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.notification-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.notificationIconCustomEmp {
    margin-right: -3px;
}


/* ################################################# New Inventory Menu */

#menuSearch {
    width: 100%;
    padding: 3px 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.co_sidebar {
    width: 253px;
    color: #1f2937;
    transition: all 0.3s;
    overflow-y: auto; /* co_sidebar is scrollable */
    margin-right: 3px;
}

    .co_sidebar a {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        color: #1f2937;
        text-decoration: none;
        transition: background-color 0.3s;
        border-radius: 8px !important;
    }

        .co_sidebar a:hover i {
            color: var(--active); /* #810338 Change icon color on hover */
        }

        .co_sidebar a:hover {
            background-color: var(--active); /*#f58ce3*/
            color: #fcfbfb; /* Change icon and text color on hover */
            border-radius: 4px;
        }

        .co_sidebar a:hover, .co_sidebar a.co_active {
            color: white;
            background-color: var(--active); /*#810338;*/
        }

.co_submenu {
    display: none;
    padding-right: 20px;
}

    .co_submenu.co_open {
        display: block;
    }

.co_arrow {
    margin-right: auto;
    transition: transform 0.3s;
}

    .co_arrow::before {
        content: '\f053'; /* Font Awesome right co_arrow */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.8rem;
    }

.co_open .co_arrow::before {
    content: '\f078';
}
.submenu-toggle.co_open .co_arrow::before {
    content: "\f078"; /* down arrow */
}
.submenu-toggle .co_arrow::before {
    content: "\f053"; /* down arrow */
}
.co_menu-icon {
    width: 20px; /* Adjusted size */
    height: 20px; /* Adjusted size */
    margin-left: 10px; /* Space between icon and text */
    object-fit: cover; /* Ensures the image covers the entire area without distortion */
    vertical-align: middle;
}

a:hover .co_menu-icon {
    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(750%) hue-rotate(210deg) brightness(90%) contrast(100%);
}

/* ################################################# New Inventory Menu */

/* ######################## Invoice Datatable */

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td, table.dataTable tbody td {
    text-align: center !important;
}

table.dataTable {
    width: 100% !important;
}

#InvoiceDetailTable_filter {
    margin-bottom: 15px;
}

#OrderDetailTable_filter {
    margin-bottom: 15px;
}

#InventoryDetailTable_filter {
    margin-bottom: 15px;
}

#CreditDetailTable_filter {
    margin-bottom: 15px;
}

#dataTable_filter {
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 10px;
    margin-right: 10px;
}

/* ######################## Invoice Datatable */

input[type='number'] {
    text-align: center;
}

table thead,
table tfoot {
    position: sticky;
}

table thead {
    inset-block-start: 0; /* "top" */
}

table tfoot {
    inset-block-end: 0; /* "bottom" */
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
    margin-left: 20px;

    border: none;
    padding: 1px 14px;
    font-size: 22px;
    color: #888888;
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 20px;

    border: none;
    padding: 1px 14px;
    font-size: 22px;
    color: #888888;
}

.field-error {
    border-color: red !important;
}

#alertBox {
    max-height: max-content !important;
}

.customRowBar {
    flex-direction: row-reverse;
}