/*================================================================================
        Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
        Version: 2.0
        Author: PIXINVENT
        Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationRegular.woff2') format('woff2'),
        url('../fonts/SansationRegular.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationBold.woff2') format('woff2'),
        url('../fonts/SansationBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationBoldItalic.woff2') format('woff2'),
        url('../fonts/SansationBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationLight.woff2') format('woff2'),
        url('../fonts/SansationLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationRegular.woff2') format('woff2'),
        url('../fonts/global/fonts/sansation-woff/SansationRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/SansationLightItalic.woff2') format('woff2'),
        url('../fonts/SansationLightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
    background: -webkit-radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
    /* hide "loadings..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.form-control-feedback.error {
    width: 100%;
    margin-top: .5rem;
    font-size: .925rem;
    color: #f1416c;
}

.form-check-input {
    cursor: pointer;
}

div.dataTables_wrapper div.dataTables_processing {
    z-index: 99999;
}

.ck-editor__editable[role="textbox"] {
    /* editing area */
    min-height: 200px;
}

/*label.error {
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    z-index: 1;
    right: 30px;
}
*/
label.error {
    font-size: 12px;
    color: red;
}

.demo-inline-spacing>* {
    margin-top: 0.5rem;
}

.dropzone .dz-message:before {
    width: 50px;
    height: 50px;
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top {
    transform: none;
}

.badge-property-vacant {
    color: #fff;
    background-color: #964B00;
}

.badge-property-rent {
    color: #fff;
    background-color: orange;
}

.badge-error {
    color: #fff;
    background-color: #ee0937;
}

.badge-other {
    color: #fff;
    background-color: green;
}

.badge-property-onmarket {
    color: #fff;
    background-color: navy;
}

.badge-property-vacant {
    color: #fff;
    background-color: #964B00;
}

.badge-property-rent {
    color: #fff;
    background-color: orange;
}

.ck-editor__editable[role="textbox"] {
    min-height: 250px;
    max-height: 250px;
}


.come-from-modal.left .modal-dialog,
.come-from-modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 50%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.come-from-modal.left .modal-content,
.come-from-modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0px;
}

.come-from-modal.left .modal-body,
.come-from-modal.right .modal-body {
    padding: 15px 15px 80px;
}

.come-from-modal.right.fade .modal-dialog {
    right: 0;
}

.come-from-modal.right.fade .modal-dialog {
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.come-from-modal.right.fade.in .modal-dialog {
    right: 0;
}

table.table-bordered.dataTable thead tr:first-child th,
table.table-bordered.dataTable thead tr:first-child td {
    background: #0089ae;
    color: #fff;
    text-align: left;
    font-weight: bold;
    padding: 10px 14px;
}

table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before {
    font-size: 0em;
}

.btn.btn-info {
    background-color: #406576;
}

.btn-check:active+.btn.btn-info,
.btn-check:checked+.btn.btn-info,
.btn.btn-info.active,
.btn.btn-info.show,
.btn.btn-info:active:not(.btn-active),
.btn.btn-info:focus:not(.btn-active),
.btn.btn-info:hover:not(.btn-active),
.show>.btn.btn-info {
    background-color: #0188ad !important;
}


/*backend css*/
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: #253D4E;
}


.flex_basis_form {
    flex-basis: 25%;
}

.menu_row {
    border: 1px solid #000000;
}

/* ====== css added by jyoti ======*/

body {
    font-family: 'sansation';
}

.btn-custom:hover,
.btn-custom:active,
.btn-custom:focus,
.btn:first-child:active,
.sweet-alert button.confirm:hover {
    background: rgb(25 40 50 / 82%) !important;
    color: #fff;
}

.btn-custom,
.sweet-alert button.confirm {
    background: #253d4e !important;
    color: #ffffff;
    font-size: 14px;
}

.btn-custom:hover .plus-icon {
    fill: #fff;
}

.custom-border {
    border: 2px solid #253D4E;
}

.meta_img_label {
    display: block;

}

.dashed_border {
    border: 1px dashed #d9d9d9;
}


/* ====== sidebar css ====== */

.app-sidebar.dashboard_sidebar {
    background-color: #253D4E;
}

.app-sidebar-toggle.dashboard_sidebar_icon {
    background-color: #f2f2f2;
    box-shadow: 1px 1px 15px 0 #cbcbcb !important;
}

.app-sidebar.dashboard_sidebar .menu-title {
    color: #c5c5c5 !important;
    font-size: 14px;
}

.dashboard_sidebar .menu-item .menu-link .menu-arrow {
    width: 12px;
    height: 12px;
}

/* ====== administration table ====== */

.data-table thead tr:first-child th,
.data-table thead tr:first-child td {
    background-color: #253d4e !important;
    color: #ffffff !important;
}

.border {
    border: 1px solid #dfdfdf !important;
}

.movable {
    cursor: all-scroll;
}

#createmenu label.error {
    position: absolute;
}

.dashboard_sidebar~.app-main .dataTables_length label {
    display: flex;
    justify-content: start;
    gap: 10px;
    align-items: center;
}

.sweet-alert h2 {
    font-size: 18px;
}

.sa-button-container button {
    font-size: 14px;
}

.sa-confirm-button-container button {
    font-size: 14px;
}

.sweet-alert .sa-icon.sa-warning.pulseWarning {
    width: 50px;
    height: 50px;
}

.sweet-alert .sa-icon.sa-warning .sa-body {
    height: 20px;
}

.sweet-alert h2 {
    margin-top: 0;
    padding: 0 30px;
    line-height: 30px;
    margin-bottom: 0;
}

.sweet-alert button {
    margin-top: 0;
}

.sweet-alert button.cancel {
    background-color: #d1d1d1;
    color: #666666;
}

.sweet-alert p {
    margin-bottom: 20px;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
    padding-left: 10px;
}

.bi-x::before {
    content: "\f62a";
    font-size: 25px;
    color: #000;
}

table.dataTable>tbody>tr.child span.dtr-title,
table.dataTable>tbody>tr.child span.dtr-data {
    font-weight: 800;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: rgb(255 255 255 / 20%);
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
    padding-left: 10px;
}

div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
    padding-right: 10px;
}

.preview_btn {
    width: 160px;
}


.success-btn-close:before {
    color: #fff;
}

.leftside-list {
    flex: 0 0 270px;
}

.back_button {
    font-size: 14px;
}

/*.select2-results__options{
	border: 1px solid #b4b4c3;
	border-radius: 5px;
}
.select2-container--bootstrap5 .select2-dropdown{
	padding: 0;
}*/
.sweet-alert {
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.galleryPreview {
    /* margin: 10px; */
    padding: 10px;
    border: 1px solid #b3adad;
    border-radius: 10px;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    position: relative;
}

.galleryPreview .btn-delete {
    position: absolute;
    right: 10px
}

#home-feature-product-select-table input[type=checkbox] {
    width: 20px;
    height: 20px;
}

.modal-dialog {
    width: 80% !important;
    max-width: 1200px;
}


@media only screen and (max-width:575px) {
    .dashboard_sidebar~.app-main .dataTables_filter label {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        text-align: center;
    }

    .dashboard_sidebar~.app-main .dataTables_length label {
        justify-content: center;
    }

    .come-from-modal.left .modal-dialog,
    .come-from-modal.right .modal-dialog {
        width: 90%;
    }

    #home-feature-product-select-table input[type=checkbox] {
        margin-top: 10px;
    }

}

@media only screen and (max-width: 505px) {
    .dataTable td a {
        margin: 2px;
    }
}


/**** Added by Ajit ****/
/* Modern Tech Company Admin Interface Design */

/* Right-to-Left Modal Animation System */
.modal.come-from-modal.right {
    display: block;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.modal.come-from-modal.right.show {
    opacity: 1;
}

.modal.come-from-modal.right .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal.come-from-modal.right.show .modal-dialog {
    transform: translateX(0);
}

/* Clean Modal Structure */
.modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    background: #ffffff;
    box-shadow: -2px 0 24px rgba(0, 0, 0, 0.04), -1px 0 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

/* Minimalist Header */
.modal-header {
    /* background: #ffffff; */
    background: linear-gradient(135deg, #253d4e 0%, #253d4e 100%);
    border-radius: 0;
    padding: 1.5rem 2rem;
    border-bottom: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.modal-header i {
    color: white !important;
    font-weight: 700 !important;
}

.modal-header .btn {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    color: #86868b;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header .btn:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

/* Content Area */
.modal-body {
    flex: 1;
    background: #fafafa;
    overflow-y: auto;
    padding: 0;
}

.card {
    border: none;
    border-radius: 0;
    background: #ffffff;
    margin: 0;
    box-shadow: none;
}

.card-body {
    padding: 32px;
}

/* Form Section Styling */
.row {
    margin-bottom: 24px;
}

.mb-5 {
    margin-bottom: 20px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 8px;
    display: block;
}

.form-label.required::after {
    content: "*";
    color: #ff3b30;
    margin-left: 4px;
}

/* Clean Form Controls */
.form-control,
.form-select {
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    background: #ffffff;
    transition: all 0.2s ease;
    min-height: 48px;
    color: #1d1d1f;
}

.form-control:focus,
.form-select:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.form-control[readonly] {
    background: #f5f5f7;
    color: #86868b;
    border-color: #e5e5e7;
}

/* Modern Table Design */
.table-responsive {
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0;
}

#newinput {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #ffffff;
}

#newinput thead {
    background: #f5f5f7;
}

#newinput thead th {
    padding: 16px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    text-align: left;
    border-bottom: 1px solid #e5e5e7;
}

#newinput tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

#newinput tbody tr:hover {
    background: #fafafa;
}

#newinput tbody tr:last-child {
    border-bottom: none;
}

#newinput tbody td {
    padding: 16px 12px;
    vertical-align: middle;
    border: none;
}

/* Table Form Controls */
#newinput .form-control,
#newinput .form-select {
    height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #e5e5e7;
    border-radius: 6px;
    background: #ffffff;
}

#newinput .form-control:focus,
#newinput .form-select:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08);
}

#newinput .form-control[readonly] {
    background: #f5f5f7;
    border-color: #e5e5e7;
    color: #86868b;
}

/* Column Configuration */
#newinput td:nth-child(1) {
    min-width: 160px;
}

#newinput td:nth-child(2) {
    min-width: 140px;
}

#newinput td:nth-child(3) {
    min-width: 100px;
}

#newinput td:nth-child(4) {
    min-width: 120px;
}

#newinput td:nth-child(5) {
    min-width: 100px;
}

#newinput td:nth-child(6) {
    min-width: 100px;
}

#newinput td:nth-child(7) {
    min-width: 110px;
}

#newinput td:nth-child(8) {
    width: 60px;
    text-align: center;
}

/* Number Input Styling */
#newinput input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Clean Action Button */
.btn_remove {
    background: #ff3b30;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: none;
}

.btn_remove:hover {
    background: #d70015;
    transform: scale(1.05);
}

.btn_remove:active {
    transform: scale(0.95);
}

/* Add Button */
#rowAdder {
    background: #34c759;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#rowAdder:hover {
    background: #30d158;
    transform: translateY(-1px);
}

#rowAdder:active {
    transform: translateY(0);
}

/* Section Dividers */
hr {
    border: none;
    height: 1px;
    background: #e5e5e7;
    margin: 32px 0;
}

/* Footer Design */
.card-footer {
    background: #fafafa;
    border-top: 1px solid #e5e5e7;
    padding: 24px 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
}

/* Primary Actions */
.btn-custom {
    background: #007aff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-custom:hover {
    background: #0056cc;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-custom:active {
    transform: translateY(0);
}

/* Secondary Actions */
.btn-outline-secondary {
    background: #ffffff;
    color: #86868b;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-outline-secondary:hover {
    background: #f5f5f7;
    color: #1d1d1f;
    border-color: #86868b;
}

/* Total Amount Display */
#total_amount {
    font-weight: 600;
    background: #f0fff4;
    border: 1px solid #34c759;
    color: #1e7e34;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Status Indicators */
.badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bg-success {
    background: #34c759 !important;
    color: #ffffff !important;
}

.bg-warning {
    background: #ff9500 !important;
    color: #ffffff !important;
}

.bg-danger {
    background: #ff3b30 !important;
    color: #ffffff !important;
}

/* DataTable Integration */
.dataTables_wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 2px;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f5f5f7;
    border-color: #86868b;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #007aff;
    border-color: #007aff;
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .modal.come-from-modal.right .modal-dialog {
        max-width: 100%;
    }

    .card-body {
        padding: 24px;
    }

    .modal-header {
        padding: 16px 24px;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 20px;
    }

    .modal-header {
        padding: 16px 20px;
    }

    #newinput thead th,
    #newinput tbody td {
        padding: 12px 8px;
        font-size: 14px;
    }

    #newinput .form-control,
    #newinput .form-select {
        height: 32px;
        padding: 6px 10px;
        font-size: 14px;
    }

    .btn_remove {
        width: 28px;
        height: 28px;
    }

    #rowAdder {
        padding: 10px 16px;
        font-size: 14px;
    }

    .card-footer {
        padding: 20px;
        flex-direction: column;
    }

    .btn-custom,
    .btn-outline-secondary {
        width: 100%;
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .modal-header h2 {
        font-size: 18px;
    }

    .card-body {
        padding: 16px;
    }

    .table-responsive {
        margin: 16px -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    #newinput thead th,
    #newinput tbody td {
        padding: 8px 6px;
        font-size: 12px;
    }
}

/* Loading State */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid #e5e5e7;
    border-top: 3px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Form Validation */
.is-invalid {
    border-color: #ff3b30;
}

.is-invalid:focus {
    border-color: #ff3b30;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.1);
}

.invalid-feedback {
    color: #ff3b30;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* View Mode Tables */
.table {
    border-collapse: collapse;
    background: #ffffff;
}

.table thead th {
    background: #f5f5f7;
    color: #86868b;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px;
    border-bottom: 1px solid #e5e5e7;
}

.table tbody td {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #1d1d1f;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: #fafafa;
}

.table-bordered {
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    overflow: hidden;
}

.table tfoot th {
    background: #f5f5f7;
    font-weight: 600;
    border-top: 2px solid #e5e5e7;
    color: #1d1d1f;
}

/* Scroll Behavior */
.modal-body {
    scroll-behavior: smooth;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #86868b;
}

.table-responsive {
    overflow: auto !important;
}

/* ========================================
   CHOICES.JS - Custom Theme Styling
   ======================================== */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    background-color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: #253d4e !important;
    box-shadow: 0 0 0 3px rgba(37, 61, 78, 0.1) !important;
}

.choices__list--single {
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.choices__list--dropdown {
    border: 2px solid #253d4e !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    z-index: 10000 !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #253d4e !important;
    color: #fff !important;
}

.choices[data-type*="select-one"] .choices__button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath fill='%2386868b' fill-rule='evenodd' d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath fill='%2386868b' fill-rule='evenodd' d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/svg%3E") !important;
    opacity: 1 !important;
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background-color: transparent !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.choices[data-type*="select-one"] .choices__button:hover {
    opacity: 0.8 !important;
}

.choices__placeholder {
    opacity: 0.5 !important;
}

/* Modal Z-Index Fix */
.modal .choices__list--dropdown {
    z-index: 10050 !important;
}

/* ========================================
   ATTENDANCE MODULE - RESPONSIVE DESIGN
   ======================================== */

/* Base Responsive Table */
.attendance-module .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    width: 100% !important;
}

.attendance-module .data-table {
    min-width: 800px !important;
    white-space: nowrap;
    width: max-content !important;
}

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

/* Force horizontal scroll on mobile */
@media (max-width: 768px) {
    .attendance-module .table-responsive {
        overflow-x: scroll !important;
    }

    .attendance-module #weekly-table,
    .attendance-module #summary-table {
        min-width: 800px !important;
        display: table !important;
    }
}

/* Responsive Filter Cards */
@media (max-width: 1199px) {
    .attendance-module .card-body .row {
        gap: 1rem;
    }

    .attendance-module .col-lg-4,
    .attendance-module .col-lg-3,
    .attendance-module .col-lg-2 {
        min-width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 991px) {

    /* Stack filter fields vertically on tablets */
    .attendance-module .card-body .col-md-2,
    .attendance-module .card-body .col-md-3,
    .attendance-module .card-body .col-md-4,
    .attendance-module .card-body .col-md-5 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Button groups */
    .attendance-module .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .attendance-module .d-flex.gap-2 .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* Summary cards */
    .attendance-module .card-toolbar {
        flex-direction: column;
        gap: 1rem !important;
    }
}

@media (max-width: 768px) {

    /* Mobile view adjustments */
    .attendance-module .app-toolbar {
        padding: 1rem 0 !important;
    }

    .attendance-module .page-heading {
        font-size: 1.5rem !important;
    }

    /* Make tables horizontally scrollable */
    .attendance-module .table-responsive {
        border-radius: 8px;
        margin: 0;
    }

    .attendance-module .data-table {
        font-size: 0.875rem;
    }

    .attendance-module .data-table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }

    .attendance-module .data-table tbody td {
        padding: 0.75rem 0.5rem;
    }

    /* Action buttons in table */
    .attendance-module .data-table .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Stats cards */
    .attendance-module .symbol {
        width: 40px !important;
        height: 40px !important;
    }

    .attendance-module .symbol i {
        font-size: 1.25rem !important;
    }

    .attendance-module .fs-2 {
        font-size: 1.5rem !important;
    }

    /* Filter buttons stack vertically */
    .attendance-module .card-body .d-flex {
        flex-direction: column;
    }

    .attendance-module .card-body .btn,
    .attendance-module .card-body .dropdown {
        width: 100%;
    }

    .attendance-module .dropdown-menu {
        width: 100%;
    }
}

@media (max-width: 576px) {

    /* Extra small devices */
    .attendance-module .card {
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .attendance-module .card-header {
        padding: 1rem;
    }

    .attendance-module .card-body {
        padding: 1rem;
    }

    /* Form inputs full width */
    .attendance-module .form-control,
    .attendance-module .form-select {
        font-size: 1rem;
        padding: 0.75rem;
    }

    /* Choices.js responsive */
    .attendance-module .choices__inner {
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    /* DataTables responsive features */
    .attendance-module .dataTables_wrapper .dataTables_length,
    .attendance-module .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 1rem;
    }

    .attendance-module .dataTables_wrapper .dataTables_info,
    .attendance-module .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 1rem;
    }

    /* Summary table */
    .attendance-module #summary-table {
        font-size: 0.875rem;
    }

    .attendance-module #summary-table td,
    .attendance-module #summary-table th {
        padding: 0.5rem 0.25rem;
    }

    /* Breadcrumb responsive */
    .attendance-module .breadcrumb {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    .attendance-module .breadcrumb-item {
        display: inline-flex;
        align-items: center;
    }
}

/* Attendance Modal Responsive */
@media (max-width: 768px) {
    #kt_modal_add_attendance .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }

    #kt_modal_add_attendance .table-container {
        max-height: 300px;
    }

    #kt_modal_add_attendance #attendance_rows_table {
        font-size: 0.875rem;
    }

    #kt_modal_add_attendance thead th {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }

    #kt_modal_add_attendance tbody td {
        padding: 0.5rem 0.25rem;
    }

    #kt_modal_add_attendance .form-control,
    #kt_modal_add_attendance .form-select {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}

/* Weekly Report Responsive */
@media (max-width: 768px) {
    .attendance-module .card-toolbar .d-flex {
        flex-direction: column;
        gap: 0.5rem !important;
        width: 100%;
    }

    .attendance-module .card-toolbar .text-center {
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .attendance-module .card-toolbar .text-center:last-child {
        border-bottom: none;
    }
}

/* Print responsive */
@media print {

    .attendance-module .no-print,
    .attendance-module .card-toolbar,
    .attendance-module .dataTables_filter,
    .attendance-module .dataTables_length,
    .attendance-module .dataTables_paginate {
        display: none !important;
    }

    .attendance-module .table {
        page-break-inside: avoid;
    }

    .attendance-module .card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* Landscape orientation improvements */
@media (max-width: 992px) and (orientation: landscape) {
    .attendance-module .card-body .row {
        display: flex;
        flex-wrap: wrap;
    }

    .attendance-module .card-body .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .attendance-module .card-body .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}



/* ========================================
   CHOICES.JS - FULL WIDTH FIX
   ======================================== */
.choices {
    width: 100% !important;
}

.choices__inner {
    width: 100% !important;
}


/* ========================================
   DEAL REPORT MODULE - THEME COLORS
   ======================================== */
.btn-custom {
    background: #253d4e;
    color: #ffffff;
    border: none;
}

.btn-custom:hover {
    background: rgb(25 40 50 / 82%);
    color: #ffffff;
}

/* ========================================
   DEAL REPORT MODULE - STATISTICS CARDS
   ======================================== */
.widget-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.widget-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================
   DEAL REPORT MODULE - DEALS TABLE
   ======================================== */
#deals-table thead th {
    font-weight: 600;
    color: #253d4e;
    border-bottom: 2px solid #253d4e;
}

#deals-table tbody tr:hover {
    background-color: #f8f9fa;
}

#deals-table tfoot tr {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #253d4e;
}

#exportLoader p {
    font-size: 1rem;
    color: #253d4e;
}

/* ========================================
   DEAL REPORT MODULE - RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    #deals-table {
        font-size: 0.875rem;
    }

    #deals-table th,
    #deals-table td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .widget-card .card-body {
        padding: 1rem !important;
    }

    .widget-card .fs-1 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .widget-card .card-body {
        padding: 0.75rem !important;
    }
}


/* ========================================
   SELLER BILL REPORT MODULE - TABLE STYLES
   ======================================== */
#seller-table thead th {
    font-weight: 600;
    color: #253d4e;
    border-bottom: 2px solid #253d4e;
}

#seller-table tbody tr:hover {
    background-color: #f8f9fa;
}

#seller-table tfoot tr {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #253d4e;
}

/* ========================================
   SELLER BILL REPORT - RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    #seller-table {
        font-size: 0.875rem;
    }

    #seller-table th,
    #seller-table td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
}


/* ========================================
   PURCHASE BILL REPORT MODULE - TABLE STYLES
   ======================================== */
#purchase-table thead th {
    font-weight: 600;
    color: #253d4e;
    border-bottom: 2px solid #253d4e;
}

#purchase-table tbody tr:hover {
    background-color: #f8f9fa;
}

#purchase-table tfoot tr {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #253d4e;
}

/* ========================================
   PURCHASE BILL REPORT - RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    #purchase-table {
        font-size: 0.875rem;
    }

    #purchase-table th,
    #purchase-table td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
}


/* ========================================
   DEALS MODULE - TABLE STYLES
   ======================================== */
#deals-table thead th {
    font-weight: 600;
    color: #253d4e;
    border-bottom: 2px solid #253d4e;
}

#deals-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* ========================================
   DEALS MODULE - RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    #deals-table {
        font-size: 0.875rem;
    }

    #deals-table th,
    #deals-table td {
        padding: 0.5rem !important;
        white-space: nowrap;
    }
}

/* ========================================
   DEALS MODULE - HORIZONTAL SCROLLBAR
   ======================================== */
.overflow-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-auto::-webkit-scrollbar-track {
    background: #f1f3f8;
    border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
    background: #059669;
}