    body {
        font-family: 'Varela Round', sans-serif;
    }
    
    .txt-color-blueDark {
        border: none;
        margin-bottom: 0px;
    }
    
    .form-spacer {
        display: flex;
        justify-content: space-between;
    }
    
    .spaced-input {
        margin-right: 19px;
    }
    
    .form-full {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0px;
    }
    
    .form-full input {
        width: 85%;
    }
    /* .form-full label {
    width: 15%;
} */
    
    .form-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .form-header label {
        margin-left: 10px;
    }
    
    .invoice-head {
        width: 40%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .form-custom {
        display: flex;
    }
    
    .first-stage {
        margin: 0 30px !important;
    }
    
    .remove_this_item {
        padding: 9px;
        text-align: cel;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 3px;
    }
    
    ul.select2-result-sub {
        padding-right: 5px !important;
    }
    
    .select2-result-sub li {
        border-right: 4px solid #dadada;
    }
    
    .select2-results li.select2-result-with-children>.select2-result-label {
        font-weight: bold;
        background: #F44336;
        color: white;
    }
    
    .remove_this_payment {
        position: absolute;
        right: 0px;
        margin-top: 10px;
    }
    
    .remove_this_payment:active {
        position: absolute;
        top: auto !important;
        left: auto !important;
        right: 0px !important;
    }
    
    #customer_details .table tr td:empty {
        display: none;
    }
    
    .second_stage_header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    
    .left-section {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .selectorHolder {
        width: 85%;
    }
    
    .test {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    /* Frame styling */
    
    #frameContent {
        width: 100% !important;
        height: 100% !important;
    }
    
    .icon {
        width: 72px;
        height: 72px;
    }
    
    img.icon:hover {
        opacity: 0.8;
        cursor: pointer;
    }
    
    img.icon:active {
        position: relative;
        top: 1px;
        left: 2px;
    }
    
    .window-content {
        padding: 10px;
        width: 100%;
        height: 100%;
        user-select: none;
        color: #666666;
        font-size: 16px
    }
    
    .git-link {
        position: fixed;
        font-size: 16px;
        color: white;
        right: 40px;
        bottom: 110px
    }
    
    .license-link {
        position: fixed;
        font-size: 12px;
        color: white;
        right: 40px;
        bottom: 90px
    }
    
    small,
    .small,
    td:not(#content td) {
        font-size: 13.875em;
    }
    
    .smart-rtl .col-lg-6,
    .smart-form .col-4,
    .col-4,
    .col-6 {
        /* width: 100% !important; */
    }
    
    .iframe_content {
        height: 100%;
        overflow: scroll;
    }
    
    td {
        font-size: 12px !important;
    }
    
    .cron-form {
        width: 30% !important;
        margin-right: 15%;
    }
    
    .cron-form label {
        width: 95% !important;
        user-select: none;
    }
    
    .cron-form input {
        width: 10%;
    }
    
    .task-bar {
        position: relative;
        background-color: white;
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        top: 0px;
        right: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .nav-images {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 35%;
        margin: 0 auto;
    }
    
    .nav-logoImg {
        position: absolute;
        top: 10px;
        right: 20px;
        width: 82px;
        height: 33px;
    }
    
    .nav-logoImg img {
        width: 100%;
        height: 100%;
    }
    
    .task-bar .navImg-holder {
        width: 30px;
        height: 30px;
    }
    
    .navImg-holder img {
        width: 100%;
        height: 100%;
    }
    
    .open-windows {
        width: 70px;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(3px);
        z-index: -20;
    }
    
    .user-info {
        position: absolute;
        width: 100%;
        bottom: 20px;
        left: 0px;
    }
    
    .profile-avatar {
        background-color: white !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-position-y: 100%;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        border-radius: 50%;
    }
    
    .frame-username {
        font-size: 15px;
        text-align: center;
        font-family: 'Varela Round', sans-serif !important;
    }
    
    .header_invoice_wrapper {
        display: flex;
        justify-content: space-between;
        border-radius: 50px;
        backdrop-filter: blur(5px);
        padding: 20px;
        background-color: rgb(255, 255, 255, 20%);
    }
    /* #main {
    position: relative;
} */
    
    .header-bg {
        width: 100%;
        height: 40vh;
        position: absolute;
        top: 0px;
        right: 0px;
        background-position: center !important;
        background-size: cover !important;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        z-index: -1;
    }
    
    .add_invoice_button {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        vertical-align: middle;
        background-color: white;
        border: 2px solid transparent;
        border-radius: 30px;
        padding: 0px 10px;
    }
    
    .new_invoice_btn {
        /* width: 25%; */
        display: flex;
        justify-content: space-evenly;
        align-content: center;
        text-align: center;
        background-color: rgb(255, 255, 255, 49%);
        border-radius: 30px;
    }
    /* Table styling, the use of a theme will take time, and flexibility is limited */
    
    th {
        padding: 5px !important;
        text-align: center !important;
    }
    
    td {
        text-align: center !important;
        border-right: 1px solid rgba(187, 187, 187, 0.1);
        border-left: 1px solid rgba(187, 187, 187, 0.1);
        border-bottom: 2px solid rgba(187, 187, 187, 0.2);
        line-height: 24px;
    }
    
    .excel_exporter {
        display: flex;
        justify-content: center;
        background: white;
        border-radius: 30px;
        padding: 0 10px;
        margin-right: 10px;
        align-items: center;
        border: 2px solid transparent;
    }
    
    .excel_exporter:hover {
        border: 2px solid #34c9dc !important;
        transition: 500ms;
    }
    
    .add_invoice_button:hover {
        border: 2px solid #34c9dc;
        transition: 500ms;
    }
    
    .action_buttons {
        width: 35%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        align-items: center;
    }
    
    .totalOf_invoice {
        font-weight: bold;
        width: 40%;
        height: 15px;
        line-height: 0px;
        margin: auto auto;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 5px;
    }
    
    .ui-widget-content {
        background-color: white;
        padding: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 9px 22px 5px rgba(0, 0, 0, 0.3);
        box-shadow: 2px 9px 22px 5px rgba(0, 0, 0, 0.3);
        color: #666666;
    }
    
    .ui-widget-content td {
        border-right: none;
        border-left: none;
    }
    
    .ui-widget-content td a {
        text-decoration: none;
        color: #666666;
    }
    
    .ui-widget-content td:hover {
        background-color: #e7e7e7;
        transition: 300ms;
    }
    
    .final_info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .final_number {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 50%;
    }
    
    .form-full label {
        font-size: 13px;
    }
    
    .close_modal {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1;
        cursor: pointer;
    }
    
    .items input {
        font-size: 12px;
        text-align: center;
        margin-top: 5px;
    }
    
    .excelTitle {
        font-size: 20px;
        font-weight: bold;
        text-align: right;
        width: 100%;
        margin-bottom: 30px;
    }
    
    .ExcelFilteration {
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    }
    
    .exportChoice_wrapper {
        width: 60%;
    }
    
    .excel-container {
        margin: 0 auto;
    }
    
    #ExcelExportModal .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
        font-size: 12px !important;
    }
    
    #ExcelExportModal .select2-selection__rendered {
        font-size: 12px !important;
    }
    
    #ExcelExportModal .select2-selection.select2-selection--single {
        padding-top: 10px;
        margin-bottom: 7px !important;
    }
    
    .label-excel-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .label-excel-wrapper input[type="checkbox"] {
        margin-left: 5px;
    }
    
    .exportChoice_wrapper input {
        margin-bottom: 7px;
        font-size: 12px !important;
    }
    
    #dt_basic2 {
        /* width: 70% !important; */
    }
    
    #dt_basic2 tbody tr:hover {
        background-color: #dff2ff !important;
        transition: 200ms;
    }
    
    lord-icon {
        width: 40% !important;
    }
    
    .was-validated .form-control:valid,
    .was-validated .dataTable-input:valid,
    .form-control.is-valid,
    .is-valid.dataTable-input {
        background-size: 10px !important;
    }
    
    .form-control.is-invalid,
    .was-validated .form-control:invalid {
        background-size: 12px !important;
    }
    
    .logoBackButton {
        width: 110px;
    }
    
    .logoBackButton img {
        width: 100%;
        height: 100%;
    }
    
    .headerTitle-wrapper {
        display: flex;
    }
    
    @media only screen and (max-width: 1100px) {
        .navbar {
            border-radius: 50px !important;
        }
        #navbarScroll>.btn-group {
            display: none !important;
        }
    }
    
    @media only screen and (max-width: 750px) {
        .header_invoice_wrapper {
            flex-direction: column;
        }
        .new_invoice_btn {
            margin-top: 10px;
            overflow-x: auto;
        }
        .excel_exporter {
            margin: 0px;
        }
    }
    
    .customerFormBg {
        background-color: #ffffff;
        backdrop-filter: blur(5px);
        padding: 20px;
        border-radius: 31px;
    }
    
    .page-title {
        color: white !important;
    }
    /* width */
    
     ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    /* Track */
    
     ::-webkit-scrollbar-track {
        background: #ffffff00;
    }
    /* Handle */
    
     ::-webkit-scrollbar-thumb {
        background: #34c8dc86;
    }
    /* Handle on hover */
    
     ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    li.nav-item a {
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        flex-direction: column;
        text-align: center;
    }