/* Inter is linked by the layouts (with preconnect) rather than @imported
   here: an @import blocks this whole stylesheet until the font CSS returns. */

body {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading);
    color: var(--color-text);
    background-color: var(--color-bg);
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
} */

.wrapper {
    width: auto;
    position: relative
}

a {
    text-decoration: none;
}

::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 1 !important;
}

.thbutton {
    width: 5% !important;
}

.form-switch .form-check-input {
    margin-left: 0px !important
}

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: none !important;
}

@media only screen and (max-width: 765px) {
    .dataTables_length {
        display: none;
    }
}

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

.show-help-support {
    cursor: pointer;
}

/*
 * The register card. A register is two white surfaces on the gray page — the
 * header (nav strip + filters) and the body (table + pagination) — each with
 * a hairline border, 8px corners and 16px of air between them.
 */
.card.style_table {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.style_table .card-header {
    margin-bottom: var(--space-2-5);
    padding: var(--space-3) var(--space-4) !important;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs);
}

/* Filters sit 10px apart, across a row and between the row and its folded
   second row, the same gap the card keeps from the table below. The
   vertical gutter already puts 10px above every filter, so the folded row
   takes no margin of its own on top of it. */
.style_table .card-header .row.gx-2 {
    --bs-gutter-x: var(--space-2-5);
    --bs-gutter-y: var(--space-2-5);
}

.style_table .card-header .list-filter-bar .extra-filters {
    margin-top: 0 !important;
}

.style_table .card-header .form-control,
.style_table .card-header .form-select {
    height: var(--ui-input-height, var(--control-height)) !important;
}

/* The tab strip sits flush with the top of the card header so the active
   tab's underline runs along the strip's own rule. */
.style_table .card-header:has(> .table_menu) {
    padding-top: 0 !important;
}

.style_table .card-header .table_menu {
    display: flex;
    align-items: flex-end;
    margin: 0 calc(-1 * var(--space-4)) var(--space-3);
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.style_table .card-header .table_menu .NavMenu {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.style_table .card-header .table_menu .NavMenu::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.style_table .card-header .table_menu .NavMenu li {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

.style_table .card-header .table_menu .nav-scroll-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: var(--space-6);
    padding: 0;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}

.style_table .card-header .table_menu .nav-scroll-btn:hover {
    color: var(--color-text);
}

.style_table .card-header .table_menu .nav-scroll-btn i {
    font-size: var(--text-md);
}

.style_table .card-header .table_menu.is-scrollable .nav-scroll-btn {
    display: flex;
}

.style_table .card-header .table_menu .nav-scroll-btn[disabled] {
    opacity: 0.3;
    cursor: default;
}

.style_table .card-header .table_menu .NavMenu li > i {
    padding: 0 var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-md);
    vertical-align: middle;
}

/* Tabs: text, then a 2px accent underline on the one you are on. */
.style_table .card-header .table_menu .NavMenu li a,
.style_table .card-header .table_menu .NavMenu li .btn-link {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--space-1-5);
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-2);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

/* Hovering a tab you are not on borrows the active tab's colour, not its
   underline — the underline stays the one mark of where you are. */
.style_table .card-header .table_menu .NavMenu li:hover a,
.style_table .card-header .table_menu ul li:hover .btn {
    color: var(--color-accent);
}

.style_table .card-header .table_menu .NavMenu li a.active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
}

.style_table .card-header .table_menu .NavMenu li a .nav-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.style_table .card-header .table_menu .NavMenu li a.active .nav-count {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
}

/* Meta Mint's support login is shown modules the customer did not buy; the
   strip tags them so it still reads as the customer's menu. */
.style_table .card-header .table_menu .NavMenu li a.nav-unlicensed,
.table_menu .dropdown-item.nav-unlicensed {
    color: var(--color-text-muted);
}

.table_menu .nav-unlicensed-tag {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-1-5);
    border: 1px dashed currentColor;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    line-height: 16px;
    white-space: nowrap;
}

.style_table .card-header .table_menu .NavMenu li .btn-group {
    position: inherit;
    display: inherit;
}

.style_table .card-header .table_menu .NavMenu .dropend .dropdown-toggle::after {
    display: none;
}

.style_table .card-header .table_menu .NavMenu li .btn i {
    font-size: var(--text-xs);
}

.style_table .card-header .table_menu .NavMenu li .btn:focus {
    box-shadow: none;
}

/* The strip's More menu is an ordinary app menu, whatever class the markup
   still carries. */
.style_table .card-header .table_menu .NavMenu .dropdown-menu {
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.style_table .card-header .table_menu .NavMenu .dropdown-menu li {
    display: block;
}

.style_table .card-header .table_menu .NavMenu .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
    padding: var(--space-1-5) var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
}

.style_table .card-header .table_menu .NavMenu .dropdown-menu .dropdown-item:hover,
.style_table .card-header .table_menu .NavMenu .dropdown-menu .dropdown-item.active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.style_table .card-body {
    padding: 0 0 var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.style_table .card-body nav.row {
    padding: 0 var(--space-4);
}

.style_table .card-body .table {
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
}

/* An icon button in a row is a square box, so print, edit and delete line up.
   A labelled More toggle drops `btn` to escape it (AppDropdownTest). */
.style_table .table tbody > tr > td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0;
    line-height: 1;
}

/* A row action with words on it (Collect, Pay, Create Invoice) keeps the
   square box's height and takes the width its label needs. */
.style_table .table tbody > tr > td .btn.btn-row-label {
    width: auto;
    padding: 0 var(--space-2);
    gap: var(--space-1);
    white-space: nowrap;
}

/* Row actions repeat down every line of a register, so they are soft: a column
   of solid red deletes and green prints was the loudest thing on the page.
   The colour arrives on hover, when the action is the one being chosen. The
   same holds for a small row button in any other list table — an account's
   addresses and banks, a company's documents. */
.style_table .table tbody > tr > td .btn-danger,
.page-content .table > tbody > tr > td .btn-sm.btn-danger {
    --btn-bg: var(--color-danger-soft);
    --btn-border: var(--color-danger-border);
    --btn-color: var(--color-danger-text);
    --btn-hover-bg: var(--color-danger);
    --btn-hover-border: var(--color-danger);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: none;
}

.style_table .table tbody > tr > td .btn-success,
.page-content .table > tbody > tr > td .btn-sm.btn-success {
    --btn-bg: var(--color-success-soft);
    --btn-border: var(--color-success-border);
    --btn-color: var(--color-success-text);
    --btn-hover-bg: var(--color-success);
    --btn-hover-border: var(--color-success);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: none;
}

.style_table .table tbody > tr > td .btn-primary,
.page-content .table > tbody > tr > td .btn-sm.btn-primary {
    --btn-bg: var(--color-accent-soft);
    --btn-border: var(--color-accent-border);
    --btn-color: var(--color-accent);
    --btn-hover-bg: var(--color-accent);
    --btn-hover-border: var(--color-accent);
    --btn-hover-color: var(--color-text-inverse);
    box-shadow: none;
}

.style_table .table tbody > tr > td .btn-danger.text-white,
.style_table .table tbody > tr > td .btn-success.text-white,
.style_table .table tbody > tr > td .btn-primary.text-white,
.page-content .table > tbody > tr > td .btn-sm:is(.btn-danger, .btn-success, .btn-primary).text-white {
    color: var(--btn-color) !important;
}

.style_table .table tbody > tr > td :is(.btn-danger, .btn-success, .btn-primary):is(.text-danger, .text-success, .text-primary):hover,
.style_table .table tbody > tr > td .btn-danger.text-white:hover,
.style_table .table tbody > tr > td .btn-success.text-white:hover,
.style_table .table tbody > tr > td .btn-primary.text-white:hover,
.page-content .table > tbody > tr > td .btn-sm:is(.btn-danger, .btn-success, .btn-primary).text-white:hover {
    color: var(--btn-hover-color) !important;
}

.style_table .table tbody > tr > td .btn-danger .text-white,
.style_table .table tbody > tr > td .btn-success .text-white,
.style_table .table tbody > tr > td .btn-primary .text-white,
.page-content .table > tbody > tr > td .btn-sm:is(.btn-danger, .btn-success, .btn-primary) .text-white {
    color: inherit !important;
}

.style_table .table tbody > tr > td a:not(.btn):not(.dropdown-item):not(.dropdown-toggle) {
    color: var(--color-accent);
    font-weight: var(--weight-medium);
    transition: color var(--duration) var(--ease);
}

.style_table .table tbody > tr > td a:not(.btn):not(.dropdown-item):not(.dropdown-toggle):hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.style_table .pagination {
    padding: 0 !important;
}

.modal-content {
    border: 0px;
}

/* Modal backdrop and close button: see ui-base.css. */

.swal2-title {
    margin: 0 !important;
    font-size: 1.4em !important;
    color: #212529 !important;
}

.swal2-popup {
    width: 24em !important;
}

.swal2-icon {
    margin: 0 auto 1.675em !important;
}

.swal2-actions {
    margin: 0.8em auto 0 !important;
}

.swal2-styled {
    padding: 0.425em 1.1em !important;
}

.swal2-styled.swal2-deny {
    border-color: #e72e2e !important;
    background-color: #e72e2e !important;
}

.swal2-styled.swal2-confirm {
    border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

.swal2-styled.swal2-deny,
.swal2-styled.swal2-confirm {
    font-size: 14px !important;
}

.style_table .dataTables_length {
    position: relative;
}

.style_table .dataTables_length i {
    position: absolute;
    top: 9px;
    left: 15px;
}

/* The page-size select carries an icon inside it; no other select does. */
.style_table .dataTables_length .form-select {
    padding-left: 30px;
}

/* Top bar, sidebar and the content frame: see chrome.css. */


/* Utilities */
.radius-5 {
    border-radius: 5px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-15 {
    border-radius: 15px;
}

.radius-30 {
    border-radius: 30px;
}


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

.font-14 {
    font-size: 14px;
}

.font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-30 {
    font-size: 30px;
}

.font-35 {
    font-size: 35px;
}

.text-justify {
    text-align: justify;
}

/* Table text wraps: a long party name takes a second line rather than
   stretching its column and pushing the register into a sideways scroll.
   See the register cell rules in ui-base.css. */

.fm-menu .list-group a {
    font-size: 16px;
    color: #5f5f5f;
    display: flex;
    align-items: center;
}

.fm-menu .list-group a i {
    font-size: 23px;
}

.fm-menu .list-group a:hover {
    background-color: rgb(52 97 255 / 15%);
    color: var(--color-accent);
    transition: all .2s ease-out
}

.add-post {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
}

.fm-icon-box {
    font-size: 32px;
    background: #fff;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.back-to-top {
    display: none;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    position: fixed;
    border-radius: 50%;
    bottom: 66px;
    right: 26px;
    background-color: var(--color-accent);
    z-index: 5
}

.back-to-top:hover {
    color: #fff;
    background-color: #000;
    transition: all .5s
}


.project-user-groups img {
    margin-right: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer;
}

.project-user-plus {
    width: 33px;
    height: 33px;
    margin-right: 0px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.user-groups img {
    margin-left: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer;
}

.user-plus {
    width: 33px;
    height: 33px;
    margin-left: -14px;
    line-height: 33px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.icon-box {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid #c7c8cb;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-box.small_icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
    margin: 0 auto;
}


.product-box {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    background-color: #ffffff;
}

.best-product-item {
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 10px;
    padding: .5rem;
}

.best-product-item:hover {
    background-color: #f5f5f5;
}

.product-box img {
    width: 100%;
}

.best-product {
    position: relative;
    height: 460px;
}



.chart-container1 {
    position: relative;
    height: 340px;
}

.gmaps,
.gmaps-panaroma {
    height: 400px;
    background: #eee;
    border-radius: 3px;
}

.theme-icons {
    background-color: #fff;
    color: #434547;
}

.cursor-pointer {
    cursor: pointer;
}

.icon-badge {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.product-img-2 {
    width: 45px;
    height: 45px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.error-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important
}


.productlist .product-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: #ffffff;

}

.productlist .product-box img {
    width: 100%
}

.productlist .product-title {

    color: rgb(25, 27, 34);

}


.orderlist .product-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: #ffffff;

}

.orderlist .product-box img {
    width: 100%
}

.orderlist .product-title {

    color: rgb(25, 27, 34);

}

.breadcrumb-title {
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

.breadcrumb-title > .bi:first-child {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

.breadcrumb-title .show-help-support {
    color: var(--color-text-subtle) !important;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}

.breadcrumb-title .show-help-support:hover {
    color: var(--color-accent) !important;
}

.page-breadcrumb {
    min-height: var(--control-height);
    gap: var(--space-3);
}

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    position: relative;
    top: 2px;
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    font-family: 'boxicons';
    content: "\e900";
    font-size: 13px;
}

.page-breadcrumb .breadcrumb li.breadcrumb-item {
    font-size: var(--text-sm);
}

.page-breadcrumb .breadcrumb li.breadcrumb-item a {
    color: var(--color-text-secondary);
}


.iconmenu .ps__rail-x {

    height: 0px;
}

.iconmenu .ps__rail-y {

    width: 0px;

}

.iconmenu .ps__rail-x.ps--clicking .ps__thumb-x,
.iconmenu .ps__rail-x:focus>.ps__thumb-x,
.iconmenu .ps__rail-x:hover>.ps__thumb-x {
    height: 5px
}

.iconmenu .ps__rail-y.ps--clicking .ps__thumb-y,
.iconmenu .ps__rail-y:focus>.ps__thumb-y,
.iconmenu .ps__rail-y:hover>.ps__thumb-y {
    width: 5px
}


.w_chart {
    position: relative;
    display: inline-block;
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    font-size: 1.4em;
}

.w_percent {
    display: inline-block;
    line-height: 80px !important;
    z-index: 2;
    color: #0a0808;
}

.w_percent:after {
    content: '%';
    margin-left: 0.1em;
}

.w_chart canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px !important;
    height: 80px !important;
}


#geographic-map {
    width: 100%;
    height: 400px;
}

.new-customer-list {
    position: relative;
    height: 500px
}

.new-customer-list .customer-list-item {
    padding: 0.5rem;
    border-radius: 10px;
}

.new-customer-list .customer-list-item:hover {
    background-color: #f0f0f0;
}


.top-sellers-list {
    position: relative;
    height: 460px
}

.top-sellers-list .sellers-list-item {
    padding: 0.5rem;
    border-radius: 10px;
}

.top-sellers-list .sellers-list-item:hover {
    background-color: #f0f0f0;
}


.client-message {
    position: relative;
    height: 565px
}

.client-message .client-messages-list {
    padding: 0.5rem;
}

.client-message .client-messages-list:hover {
    background-color: #f0f0f0;
}

/* Widgets */

.widget-icon {
    width: 48px;
    height: 48px;
    background-color: #fafafa;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.widget-icon-large {
    width: 54px;
    height: 54px;
    background-color: #fafafa;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Chips */

.chip {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, .7);
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 16px;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    box-shadow: none;
}

.chip img {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 -12px;
    border-radius: 50%;
}

.profile-cover {
    background-image: linear-gradient(to bottom right, rgb(26 30 33 / 50%), rgb(0 0 0 / 50%)), url(../images/gallery/33.png);
    background-size: cover;
    height: 24rem;
    background-position: center;
    margin: -4.0rem -1.5rem -5.5rem -1.5rem;
    padding: 1.5rem 1.5rem 6.5rem 1.5rem;

}


/* Email */


.email-wrapper {
    width: auto;
    height: 600px;
    overflow: hidden;
    border-radius: .25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}

.email-sidebar {
    width: 250px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.email-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-right: 0 solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    padding: 15px
}

.email-navigation {
    position: relative;
    padding: 0;
    height: 345px;
    border-bottom: 1px solid rgba(0, 0, 0, .125)
}

.email-header {
    position: absolute;
    height: 70px;
    left: 250px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius: .25rem;
    z-index: 1
}

.email-content {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: 70px;
    height: auto;
    margin-left: 250px;
    padding: 0;
    background: #fff;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.email-navigation a.list-group-item {
    color: #404142;
    padding: .35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    transition: all .3s ease-out
}

.email-navigation a.list-group-item:hover {
    background-color: rgb(13 110 253 / .12)
}

.email-navigation a.list-group-item.active {
    color: var(--color-accent-hover);
    font-weight: 600;
    background-color: rgb(13 110 253 / .12)
}

.email-meeting {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.email-meeting a.list-group-item {
    color: #404142;
    padding: .35rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 0%)
}

.email-meeting a.list-group-item:hover {
    background-color: rgb(0 123 255 / 15%);
    transition: all .3s ease-out
}

.email-hangout .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 45px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e
}

.email-toggle-btn {
    width: auto;
    height: auto;
    margin-right: 10px;
    text-align: center;
    font-size: 24px;
    color: #404142;
    border-radius: 0;
    cursor: pointer;
    background-color: #fff;
    border: 0 solid rgb(0 0 0 / 15%)
}

.email-actions {
    width: 230px
}

.email-time {
    font-size: 13px;
    color: #6c757d
}

.email-list div.email-message {
    background: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    color: #383a3c
}

.email-list div.email-message:hover {
    transition: all .2s ease-out;
    background-color: #eceef1
}

.email-list {
    position: relative;
    height: 530px
}

.email-star {
    color: #6c757d
}

.email-read-box {
    position: relative;
    height: 530px
}

.compose-mail-popup {
    width: 42%;
    position: fixed;
    bottom: -30px;
    right: 30px;
    z-index: 15;
    display: none
}

.compose-mail-toggled {
    display: block
}

.compose-mail-title {
    font-size: 16px
}

.compose-mail-close {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgb(255 255 255 / 0%)
}

.compose-mail-close:hover {
    background-color: rgb(255 255 255 / 20%)
}

/* chat box */


.chat-wrapper {
    width: auto;
    height: 600px;
    border-radius: .25rem;
    position: relative;
    background: #fff;
    box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}

.chat-sidebar {
    width: 340px;
    height: 100%;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.chat-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-right: 0 solid rgba(0, 0, 0, .125);
    border-top-left-radius: .25rem;
    padding: 15px
}

.chat-sidebar-content {
    padding: 0
}

.chat-user-online {
    position: relative
}

.chat-sidebar-header .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e
}

.chat-list .chat-user-online:before {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 36px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e
}

.chat-content {
    margin-left: 340px;
    padding: 85px 15px 15px 15px
}

.chat-header {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    top: 0;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius: .25rem;
    z-index: 1
}

.chat-footer {
    position: absolute;
    height: 70px;
    left: 340px;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-bottom-right-radius: .25rem
}

.chat-footer-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%)
}

.chat-tab-menu li a.nav-link {
    padding: .3rem .2rem;
    line-height: 1.2;
    color: #4a4b4c
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show>.nav-link {
    color: var(--color-accent);
    background-color: rgb(0 123 255 / 0%)
}

.chat-title {
    font-size: 14px;
    color: #272b2f
}

.chat-msg {
    font-size: 13px;
    color: #6c757d
}

.chat-time {
    font-size: 13px;
    color: #6c757d
}

.chat-list {
    position: relative;
    height: 300px
}

.chat-list .list-group-item {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: transparent
}

.chat-list .list-group-item:hover {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: rgb(13 110 253 / .12)
}

.chat-list .list-group-item.active {
    background-color: rgb(13 110 253 / .12)
}

.chart-online {
    color: #16e15e
}

.chat-top-header-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%)
}

.chat-content {
    position: relative;
    width: auto;
    height: 520px
}

.chat-content-leftside .chat-left-msg {
    width: fit-content;
    background-color: #eff2f5;
    padding: .8rem;
    border-radius: 12px;
    max-width: 480px;
    text-align: left;
    border-top-left-radius: 0
}

.chat-content-rightside .chat-right-msg {
    width: fit-content;
    background-color: #dcedff;
    padding: .8rem;
    border-radius: 12px;
    float: right;
    max-width: 480px;
    text-align: left;
    border-bottom-right-radius: 0
}

.chat-toggle-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    font-size: 24px;
    color: #6c757d;
    border-radius: 50%;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / 15%)
}


/* Authentication */

.authentication-card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    max-width: 60rem;
    height: 100vh;
}

.login-separater span {
    position: relative;
    top: 26px;
    margin-top: -10px;
    background: #fff;
    padding: 5px;
    font-size: 12px;
    color: #8f8c8c;
    z-index: 1;
}


/* swicther */

/* .btn-switcher {
    position: fixed;
    right: 0px;
    top: 40%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
} */


/* .header-colors-indigators .indigator {
	width: 50px;
    height: 50px;
    background-color: #f7f8fa;
    border-radius: 10px;
    cursor: pointer;
} */


/* Responsive */

@media screen and (max-width:1280px) {
    .email-header {
        height: auto
    }

    .email-content {
        padding: 100px 0 0 0
    }
}



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


    .sidebar-wrapper {

        left: -300px;
    }


    .page-content {

        margin-left: 0px;

    }

    .top-header .navbar {

        left: 0px;
    }

    /* Toggeled */


    .wrapper.toggled .sidebar-wrapper {

        left: 0px;
    }


    .wrapper.toggled .page-content {

        margin-left: 0px;

    }

    .wrapper.toggled .top-header .navbar {

        left: 0px;
    }


    .wrapper.toggled .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: .6;
        z-index: 12;
        display: block;
        cursor: move;
        transition: all .2s ease-out
    }


    .top-header .navbar .full-searchbar {

        position: absolute;
        top: 0%;
        left: 0;
        right: 0%;
        width: 100%;
        height: 60px;
        background-color: #f7f8fa;
        border-bottom: 1px solid rgb(0 0 0 / 0%);
        background-clip: padding-box;
        display: flex !important;
        z-index: 1;
        align-items: center;
        justify-content: start;
        padding: 0 1rem;
        -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
        animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
    }

    .email-header {
        border-top-left-radius: .25rem
    }

    .email-sidebar {
        left: -280px
    }

    .email-content {
        margin-left: 0
    }

    .email-header {
        left: 0
    }

    .email-toggled .email-sidebar {
        left: 0
    }

    .email-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 250px;
        background: #000;
        opacity: .5;
        z-index: 9;
        display: block;
        cursor: move;
        transition: all .3s ease-out
    }

    .compose-mail-popup {
        width: auto;
        position: fixed;
        bottom: -30px;
        right: 0;
        left: 0
    }

    .chat-header {
        border-top-left-radius: .25rem
    }

    .chat-footer {
        border-bottom-left-radius: .25rem
    }

    .chat-sidebar {
        left: -370px
    }

    .chat-content {
        margin-left: 0
    }

    .chat-header {
        left: 0
    }

    .chat-footer {
        left: 0
    }

    .chat-toggled .chat-sidebar {
        left: 0
    }

    .chat-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 340px;
        background: #000;
        opacity: .5;
        z-index: 11;
        display: block;
        cursor: move;
        transition: all .3s ease-out
    }




}


@media screen and (max-width:1024px) {
    .authentication-card {
        padding: 1.5rem 0;
        height: auto;
    }
}


@media screen and (max-width:767px) {
    .top-header .navbar .dropdown-menu::after {
        display: none
    }

    .top-header .navbar .dropdown {
        position: static !important
    }

    .top-header .navbar .dropdown-menu {
        width: 94% !important;
        margin: 0 auto;
        left: 0;
    }

    .top-header .navbar .dropdown-small .dropdown-menu {
        width: 48% !important;
        right: 15px;
        left: auto;
    }

    .page-content {
        padding: 0px;
        margin-top: 70px;
    }

    .card {
        border-radius: 0px;
        margin-bottom: 15px;
        box-shadow: none;
    }

    .card.min-height {
        height: auto !important;
    }

    .top-navbar-right .navbar-nav li:last-child {
        margin-right: 0px;
    }

    .top-header .navbar {
        padding: 0 15px;
    }

    .top-header .navbar .user-name {
        font-size: 13px;
    }

    .authentication-card {
        height: 100vh;
    }

    #sectiontohide,
    #sectiontohide1,
    #sectiontohide2 {
        display: none;
    }

    .footer_nav.mob {
        padding: 5px 0px;
        border-top: 1px solid #EFEFEF;
    }

    .style_table .card-header .table_menu .NavMenu {
        display: flex;
        align-items: center;
        overflow-x: auto;
    }

    .style_table .card-header .table_menu .NavMenu li {
        flex: 0 0 auto;
        width: auto;
        display: inherit;
    }

    .style_table .card-header .table_menu .NavMenu li .btn-link {
        margin-bottom: 7px;
    }

    .style_table .dataTables_length {
        display: block !important;
    }

    .style_table .pagination,
    .style_table .card-header .form-control {
        margin-bottom: 8px;
    }

    .dropdown-menu.show {
        z-index: 999;
    }

}


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

    .chat-footer-menu,
    .chat-top-header-menu {
        display: none
    }
}

.copyright_signup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}

.form-switch .form-check-label,
.form-switch .form-check-input {
    cursor: pointer;
}

.btn,
.form-control {
    border-radius: 3.5px;
}

.form-select {
    cursor: pointer;
    border-radius: 3.5px;
}

.form-control,
.form-select {
    font-size: 13px;
    letter-spacing: .2px;
    font-family: var(--font-sans);
}

.form-textarea {
    font-size: 14px;
    letter-spacing: .4px;
    font-family: var(--font-sans);
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select:focus,
.form-control:focus,
.picker__input.picker__input--active {
    border-color: var(--focus-border);
    box-shadow: var(--focus-ring);
}

/* Buttons, badges, table heads and pagination: see bootstrap-extended.css
   and ui-base.css. */

.btn-group-sm > .btn.btn-icon,
.btn-sm.btn-icon {
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    min-height: 0;
    padding: 0;
    font-size: var(--text-sm);
}

.page-item.disabled .page-link {
    cursor: not-allowed;
}

.form-label {
    margin-bottom: 0.1rem;
}

.input-group-text {
    padding: 0.22rem 0.75rem;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px 0 0 3px;
    border-right: 0px;
}

/* .input-group .form-control {
	border-left: none;
} */
.form-control.datepicker,
.form-control.timepicker {
    cursor: pointer;
}

/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
    list-style: none;
    padding: 0 0 1em;
    margin: 0;
}

/**
 * The times on the clock.
 */
.picker__list-item {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    margin-bottom: -1px;
    position: relative;
    background: #fff;
    padding: .75em 1.25em;
}

.picker__list-item:first-child {
    border-top: none;
}

@media (min-height: 46.75em) {
    .picker__list-item {
        padding: .5em 1em;
    }
}

/* Hovered time */
.picker__list-item:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
    border-color: #0089ec;
    z-index: 10;
}

/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
    border-color: #0089ec;
    z-index: 10;
}

.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
}

/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
    background: #0089ec;
    color: #fff;
    z-index: 10;
}

/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #ddd;
    cursor: default;
    border-color: #ddd;
    z-index: auto;
}

/**
 * The clear button
 */
.picker--time .picker__button--clear {
    display: block;
    width: 40%;
    margin: 1em auto 0;
    padding: 1em 1.25em;
    background: none;
    border: 0;
    font-weight: 500;
    font-size: .67em;
    text-align: center;
    text-transform: uppercase;
    color: #666;
    border-radius: 3px;
    background: #FFF;
    transition: .3s ease-in-out;
}

.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
    color: #000;
    background: #b1dcfb;
    background: #e20;
    border-color: #e20;
    cursor: pointer;
    color: #fff;
    outline: none;
}

.picker--time .picker__button--clear:before {
    top: -0.25em;
    color: #666;
    font-size: 1.25em;
    font-weight: bold;
}

.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
    color: #fff;
    border-color: #fff;
}

/* ==========================================================================
   $CLASSIC-TIME-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should __NOT__ be styled
 * more than what’s here. Style the `.picker__holder` instead.
 */
.picker--time {
    min-width: 150px;
    max-width: 328px;
}

/**
 * The holder is the base of the picker.
 */
.picker--time .picker__holder {
    background: #f2f2f2;
}

@media (min-height: 40.125em) {
    .picker--time .picker__holder {
        font-size: .875em;
    }
}

/**
 * The box contains the list of times.
 */
.picker--time .picker__box {
    padding: 0;
    position: relative;
}

/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
    padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */
.picker__header {
    text-align: center;
    position: relative;
    margin-top: .75em;
}

/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
    font-weight: 500;
    display: inline-block;
    margin-left: .25em;
    margin-right: .25em;
}

.picker__year {
    color: #999;
    font-size: .8em;
    font-style: italic;
}

/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
    border: 1px solid #ced4da;
    height: 2em;
    font-size: 14px;
    padding: 0 5px;
    border-radius: 3px;
    margin-left: .25em;
    margin-right: .25em;
    cursor: pointer;
}

@media (min-width: 24.5em) {

    .picker__select--month,
    .picker__select--year {
        margin-top: -0.5em;
    }
}

.picker__select--month {
    width: 35%;
}

.picker__select--year {
    width: 22.5%;
}

.picker__select--month:focus,
.picker__select--year:focus {
    border-color: #007bff;
}

/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: .5em 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    top: -0.25em;
}

@media (min-width: 24.5em) {

    .picker__nav--prev,
    .picker__nav--next {
        top: -0.33em;
    }
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--prev {
        padding-right: 1.5em;
    }
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--next {
        padding-left: 1.5em;
    }
}

.picker__nav--prev:before,
.picker__nav--next:before {
    content: " ";
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-right: 0.75em solid #000;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: 0.75em solid #000;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: #f5f5f5;
    border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */
.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: .75em;
    margin-bottom: .5em;
}

@media (min-height: 33.875em) {
    .picker__table {
        margin-bottom: .75em;
    }
}

.picker__table td {
    margin: 0;
    padding: 0;
}

/**
 * The weekday labels
 */
.picker__weekday {
    width: 14.285714286%;
    font-size: .75em;
    padding-bottom: .25em;
    color: #999;
    font-weight: 500;
    /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: .5em;
    }
}

/**
 * The days on the calendar
 */
.picker__day {
    padding: .3125em 0;
    font-size: 14px;
    font-weight: 200;
    border: 1px solid transparent;
}

.picker__day--today {
    position: relative;
}

.picker__day--today:before {
    content: " ";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-top: 0.5em solid #0059bc;
    border-left: .5em solid transparent;
}

.picker__day--disabled:before {
    border-top-color: #aaa;
}

.picker__day--outfocus {
    color: #ddd;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
}

.picker__day--highlighted {
    border-color: #007bff;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: #007bff;
    color: #fff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #ddd;
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: #bbb;
}

/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
    text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
    border: 1px solid #fff;
    background: #fff;
    font-size: .8em;
    padding: .66em 0;
    font-weight: bold;
    width: 33%;
    display: inline-block;
    vertical-align: bottom;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
    cursor: pointer;
    color: #000;
    background: #b1dcfb;
    border-bottom-color: #b1dcfb;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
    background: #b1dcfb;
    border-color: #007bff;
    outline: none;
}

.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
    position: relative;
    display: inline-block;
    height: 0;
}

.picker__button--today:before,
.picker__button--clear:before {
    content: " ";
    margin-right: .45em;
}

.picker__button--today:before {
    top: -0.05em;
    width: 0;
    border-top: 0.66em solid #0059bc;
    border-left: .66em solid transparent;
}

.picker__button--clear:before {
    top: -0.25em;
    width: .66em;
    border-top: 3px solid #e20;
}

.picker__button--close:before {
    content: "\D7";
    top: -0.1em;
    vertical-align: top;
    font-size: 1.1em;
    margin-right: .35em;
    color: #777;
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #ddd;
    cursor: default;
}

.picker__button--today[disabled]:before {
    border-top-color: #aaa;
}

/* ==========================================================================
   $CLASSIC-DATE-PICKER
   ========================================================================== */

.singin_card {
    padding: 25px 25px;
}

/* table.dataTable {
    clear: both;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination{
    width:max-content;
    float:right;
} */

.Filter .btn {
    padding: 0.15rem 0.65rem;
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.license-alert {
    padding: 6px 12px;
    border-radius: 3px;
}

.sidebar-wrapper .license-alert {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    margin: 0px 10px 10px;
    color: #293445;
    background-color: #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

/* .license-alert i {
  position: relative;
  top: -1px;
  font-size: 18px;
  line-height: 14px;
  vertical-align: middle;
  color: #687E96;
} */
.top-navbar-right .navbar-nav li {
    margin-right: 8px;
}

.footer_logo {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
}

.footer_logo a {
    flex: 0 0 auto;
    width: 14.8%;
}

.footer_logo a>img {
    /* filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 0.68; */
    transition: .3s ease-in-out;
}

/* .footer_logo a:hover > img {
  opacity: 0.8;
  filter: grayscale(25%);
  -webkit-filter: grayscale(25%);
} */
.footer_social {
    position: relative;
    display: block;
    text-align: center;
    border-color: rgb(0 0 0 / 25%);
}

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

.social_list li a {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 33px;
    font-size: 20px;
    text-align: center;
    border-radius: 50px;
    color: #4c5258;
    border: 1px solid #4c5258;
    transition: .3s ease-in-out;
}

.social_list li:hover a {
    opacity: 0.7;
}

.card.min-height {
    height: auto;
}

.footer_nav.logo img {
    height: 50px;
}

.footer_nav p {
    color: #b0afaf;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.footer_nav p>i {
    float: right;
}

.footer_nav ul li a {
    display: block;
    color: #4c5258;
    font-weight: 500;
    margin-bottom: 3px;
}

.footer_nav ul li:last-child a {
    margin-bottom: 0px;
}

.footer_copyright_list li,
.newsletter_text {
    font-size: 12px;
    line-height: 1.2;
    opacity: 0.75;
}

.fixed_contact_btn {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #FFF;
    padding: 3px 3px;
    z-index: 9999;
    border-radius: 50px;
    box-shadow: rgb(0 0 0 / 35%) 0px 2px 15px 0px;
    transition: .3s ease-in;
}

.fixed_contact_btn button {
    font-size: 14px;
    font-weight: 600;
    display: block;
    outline: none;
    border: none;
    padding: 5px 16px 3px;
    border-radius: 50px;
    color: #FFF;
    background: #25d366;
    transition: .3s ease-in;
}

.fixed_contact_btn button i {
    position: relative;
    font-size: 18px;
    margin-right: 5px;
    vertical-align: middle;
    animation-name: trin;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes trin {
    from {
        transform: rotate3d(0, 0, 1, 0)
    }

    20%,
    32%,
    44%,
    56%,
    68% {
        transform: rotate3d(0, 0, 1, 0)
    }

    23%,
    35%,
    47%,
    59%,
    71% {
        transform: rotate3d(0, 0, 1, 15deg)
    }

    26%,
    38%,
    50%,
    62%,
    74% {
        transform: rotate3d(0, 0, 1, 0)
    }

    29%,
    41%,
    53%,
    65%,
    77% {
        transform: rotate3d(0, 0, 1, -15deg)
    }

    80% {
        transform: rotate3d(0, 0, 1, 0)
    }
}

.fixed_contact_btn:hover button,
.fixed_contact_btn:focus button {
    background: #128c7e;
}

.alert-dismissible .btn-close {
    padding: 0.72rem 1rem;
    opacity: 0.4;
}

.footer-margin {
    margin-top: 15% !important;
}

.with-50 {
    width: 50% !important;
}

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

.select2-container .select2-selection--single {
    height: 40px !important;
    font-size: 14px !important;
    letter-spacing: .4px !important;
    font-family: var(--font-sans) !important;

}

.bi-list::before {
    font-weight: bold !important;
}

.thbutton {
    text-align: center !important;
}

tr td {
    vertical-align: top;
}

.clear {
    clear: both;
    margin-top: 20px;
}

.autocomplete {
    position: relative;
}

.autocomplete .searchResult {
    list-style: none;
    padding: 0px;
    width: 80%;
    position: absolute;
    margin: 0;
    overflow: hidden;
    margin-top: 40px;
    background: #FFF;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: rgba(149, 157, 165, 0.35) 0px 0px 8px;
    z-index: 999;
}

.autocomplete .searchResult li {
    padding: 8px 10px;
    border-bottom: 1px solid #ced4da;
    white-space: break-spaces;
}

.autocomplete .searchResult li:last-child {
    border-bottom: none;
}

.autocomplete .searchResult li:nth-child(even) {
    background: #E5E7E9;
    color: black;
}

.autocomplete .searchResult li:hover {
    cursor: pointer;
    background: #CACFD2;
}

#add_reference i {
    height: 20px;
    width: 20px;
    background: #0d6efd25;
    color: var(--color-accent);
    text-align: center;
    border-radius: 50px;
    line-height: 20px;
}

.add_btn {
    height: 40px;
    width: 40px;
    font-size: 16px;
    border-radius: 0 3.5px 3.5px 0;
    padding: 0;
}

/*
 * Filter rows (statements, reports). The label sits above its field, as on
 * every form — it used to be pinned over the field's top border, which read
 * as a different kind of control from one page to the next.
 */
.custom_grid {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.custom_grid .input-group {
    position: relative;
}

.custom_grid .input-group > .form-label {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: var(--ui-label-gap, var(--space-1));
    padding: 0;
    background: none;
    color: var(--ui-label-color, var(--color-text));
    font-size: var(--ui-label-size, var(--text-sm));
    font-weight: var(--ui-label-weight, var(--weight-medium));
}

/* The label is the group's first child now, so the field after it is the
   group's visual start and takes the left corners back. */
.custom_grid .input-group > .form-label + .form-control,
.custom_grid .input-group > .form-label + .form-select,
.custom_grid .input-group > .form-label + .input-group-text,
.custom_grid .input-group > .form-label + select {
    border-top-left-radius: var(--ui-input-radius, var(--radius-sm)) !important;
    border-bottom-left-radius: var(--ui-input-radius, var(--radius-sm)) !important;
}

.custom_grid .input-group .form-control.br-0 {
    border-radius: 0;
}

/* A button joined to a field meets it square; a free-standing one (Search)
   keeps its own corners. */
.custom_grid .input-group > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select2-container--bootstrap4 .select2-selection {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.discount_group {
    position: relative;
}

.discount_group .style_select {
    width: 80px;
    position: absolute;
    top: 27px;
    right: 7px;
    padding: 0px 15px;
    height: 28px !important;
    color: #FFF;
    background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
    border: none;
    cursor: pointer;
}

.form-control:disabled,
.form-control[readonly] {
    border-color: #F1F1F1;
    background-color: #F1F1F1;
    opacity: 1;
    font-weight: 600;
    cursor: not-allowed;
}

.form-control[aria-readonly] {
    cursor: pointer;
    font-weight: 400;
    border-color: #ced4da;
}

.button-large {
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 0.375rem 0.75rem !important;
}

.hyperlink {
    color: var(--color-accent) !important;
}

.hyperlink:hover {
    color: var(--color-accent) !important;
}

.mt-10 {
    margin-top: 10px;
}

.page_head {
    color: #03828b !important
}

.font-32 {
    font-size: 32px !important;
}

.hover-dark:hover {
    background: #313d4c;
}

.font-weight-bold {
    font-weight: bold
}

/* Skeleton Loader Styles */
.skeleton-loader {
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* Base skeleton element - Light theme (default) */
.skeleton-line,
.skeleton-input,
.skeleton-textarea,
.skeleton-select,
.skeleton-button,
.skeleton-image,
.skeleton-th,
.skeleton-td,
.skeleton-label,
.skeleton-avatar {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Line variations */
.skeleton-line {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-line-sm {
    width: 30%;
}

.skeleton-line-md {
    width: 60%;
}

.skeleton-line-lg {
    width: 40%;
    height: 20px;
}

.skeleton-line-full {
    width: 100%;
}

/* Form elements */
.skeleton-input {
    height: 38px;
    width: 100%;
}

.skeleton-textarea {
    height: 80px;
    width: 100%;
}

.skeleton-select {
    height: 38px;
    width: 100%;
}

.skeleton-label {
    height: 14px;
    width: 25%;
}

/* Button skeleton */
.skeleton-button {
    height: 36px;
    width: 80px;
    display: inline-block;
    border-radius: 6px;
}

/* Image skeleton */
.skeleton-image {
    height: 120px;
    width: 100%;
    border-radius: 8px;
}

/* Avatar skeleton */
.skeleton-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Table skeleton */
.skeleton-table-header,
.skeleton-table-row {
    display: flex;
    gap: 12px;
}

.skeleton-th,
.skeleton-td {
    height: 20px;
    flex: 1;
}

.skeleton-th {
    height: 24px;
    background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
}

/* Card skeleton */
.skeleton-card {
    padding: 16px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #fff;
}

/* List item skeleton */
.skeleton-list-item {
    background-color: #fff;
}

/* Loading text */
.skeleton-loading-text {
    font-size: 14px;
    animation: skeleton-pulse 2s ease-in-out infinite;
}

@keyframes skeleton-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Dark theme support */
[data-bs-theme="dark"] .skeleton-line,
[data-bs-theme="dark"] .skeleton-input,
[data-bs-theme="dark"] .skeleton-textarea,
[data-bs-theme="dark"] .skeleton-select,
[data-bs-theme="dark"] .skeleton-button,
[data-bs-theme="dark"] .skeleton-image,
[data-bs-theme="dark"] .skeleton-th,
[data-bs-theme="dark"] .skeleton-td,
[data-bs-theme="dark"] .skeleton-label,
[data-bs-theme="dark"] .skeleton-avatar {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
}

[data-bs-theme="dark"] .skeleton-th {
    background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
}

[data-bs-theme="dark"] .skeleton-card,
[data-bs-theme="dark"] .skeleton-list-item {
    border-color: #404040;
    background-color: #1a1a1a;
}

/* Alternative dark theme selectors for broader compatibility */
body.dark-mode .skeleton-line,
body.dark-mode .skeleton-input,
body.dark-mode .skeleton-textarea,
body.dark-mode .skeleton-select,
body.dark-mode .skeleton-button,
body.dark-mode .skeleton-image,
body.dark-mode .skeleton-th,
body.dark-mode .skeleton-td,
body.dark-mode .skeleton-label,
body.dark-mode .skeleton-avatar,
.dark .skeleton-line,
.dark .skeleton-input,
.dark .skeleton-textarea,
.dark .skeleton-select,
.dark .skeleton-button,
.dark .skeleton-image,
.dark .skeleton-th,
.dark .skeleton-td,
.dark .skeleton-label,
.dark .skeleton-avatar {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
}

body.dark-mode .skeleton-th,
.dark .skeleton-th {
    background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
}

body.dark-mode .skeleton-card,
body.dark-mode .skeleton-list-item,
.dark .skeleton-card,
.dark .skeleton-list-item {
    border-color: #404040;
    background-color: #1a1a1a;
}

/* Media query fallback for systems that prefer dark color scheme */
@media (prefers-color-scheme: dark) {

    .skeleton-line,
    .skeleton-input,
    .skeleton-textarea,
    .skeleton-select,
    .skeleton-button,
    .skeleton-image,
    .skeleton-th,
    .skeleton-td,
    .skeleton-label,
    .skeleton-avatar {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    }

    .skeleton-th {
        background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
    }

    .skeleton-card,
    .skeleton-list-item {
        border-color: #404040;
        background-color: #1a1a1a;
    }
}

/* Circle Loader - used by list/register pages while data loads */
.circle-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 32px 0;
}

.circle-loader {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: circle-loader-spin 0.7s linear infinite;
}

.circle-loader-sm {
    width: 28px;
    height: 28px;
    border-width: 2px;
}

@keyframes circle-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.circle-loader-text {
    margin-top: 14px;
    font-size: 13px;
    color: #6c757d;
    animation: skeleton-pulse 2s ease-in-out infinite;
}

[data-bs-theme="dark"] .circle-loader,
body.dark-mode .circle-loader,
.dark .circle-loader {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .circle-loader {
        animation-duration: 1.8s;
    }

    .circle-loader-text {
        animation: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .skeleton-table-header,
    .skeleton-table-row {
        flex-direction: column;
        gap: 8px;
    }

    .skeleton-th,
    .skeleton-td {
        width: 100%;
    }

    .skeleton-avatar {
        height: 32px;
        width: 32px;
    }
}

/*Company Details Page*/
.company-avatar {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 4px solid white;
    float: right;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

/* No logo uploaded yet: a blank slot that still opens the upload form. */
.company-avatar-empty {
    width: 200px;
    max-width: 100%;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    cursor: pointer;
}

.info-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0;
}

.section-divider {
    border-left: 3px solid var(--bs-primary);
    padding-left: 1rem;
    margin-left: 0.5rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.table-sm td {
    padding: 0.5rem;
    border-bottom: 1px solid #f8f9fa;
}

.table-sm td:first-child {
    font-weight: 500;
    color: #6c757d;
    /* width: 30%; */
}

/* Pills and the empty state: see bootstrap-extended.css and ui-base.css. */

/* Remove top border from card-footer when it contains pagination-wrapper */
.card-footer:has(.pagination-wrapper) {
    border-top: 0;
}

/* Remove bottom padding from card-body ONLY when card-footer has pagination-wrapper */
.card:has(.card-footer .pagination-wrapper) .card-body {
    padding-bottom: 0;
}

/* Alternative using sibling selector */
.card-body:has(+ .card-footer .pagination-wrapper) {
    padding-bottom: 0;
}


/* jQuery UI autocomplete — the ⌘K palette's result list, under an input.
 * White panel, hairline border, rows with 6px corners; the highlighted row is
 * a soft indigo fill with indigo text, never a solid block with white text. */
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100 !important;
    max-height: 300px;
    margin-top: var(--space-1);
    padding: var(--space-1);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-family: inherit;
    cursor: default;
    animation: ui-autocomplete-in var(--duration) var(--ease);
}

@keyframes ui-autocomplete-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ui-autocomplete::-webkit-scrollbar {
    width: 8px;
}

.ui-autocomplete::-webkit-scrollbar-track {
    background: transparent;
}

.ui-autocomplete::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
}

.ui-autocomplete .ui-menu-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    display: block;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-md);
    color: var(--color-text) !important;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Every text node gets an explicit colour, so a forced dark mode or an
   inherited colour can never leave dark text on the white panel. */
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .autocomplete-item,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper strong,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper b,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper span,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper div,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .autocomplete-item-primary {
    color: var(--color-text) !important;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .text-muted,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .small,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .small *,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .autocomplete-item-secondary {
    color: var(--color-text-muted) !important;
}

/* The typed text, found inside a suggestion. */
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper .text-indigo-900 {
    color: var(--color-accent) !important;
    font-weight: var(--weight-semibold);
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover:not(.ui-state-active) {
    background-color: var(--color-surface-hover) !important;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus {
    background-color: var(--color-accent-soft) !important;
    color: var(--color-accent-text) !important;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active *,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus * {
    color: var(--color-accent-text) !important;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active .text-muted,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active .small,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active .autocomplete-item-secondary,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus .text-muted,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus .small,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus .autocomplete-item-secondary {
    color: var(--indigo-500) !important;
}

.ui-autocomplete .ui-menu-item-no-results {
    padding: var(--space-3) var(--space-4);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.ui-autocomplete .autocomplete-item-primary {
    margin-bottom: var(--space-0-5);
    font-weight: var(--weight-medium);
}

.ui-autocomplete .autocomplete-item-secondary {
    font-size: var(--text-xs);
}

.ui-autocomplete .badge {
    display: inline-block;
    margin-left: var(--space-2);
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
}

.ui-autocomplete .badge-primary {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

@media (max-width: 768px) {
    .ui-autocomplete {
        max-height: 200px;
    }
}

/* Loading State */
.select-wrapper {
    position: relative;
    display: inline-block;
}

/* When inside input-group, use flex instead */
.input-group.select-wrapper {
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
}

.select-wrapper .single-select,
.select-wrapper select {
    width: 100%;
}

.select-wrapper.select-loading::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Flatpickr Custom Styles */
.flatpickr-calendar {
    width: 260px !important;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.flatpickr-calendar .flatpickr-days {
    width: 260px !important;
}

.flatpickr-calendar .dayContainer {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

.flatpickr-calendar .flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px;
}

.flatpickr-calendar .flatpickr-current-month {
    font-size: 115%;
    padding-top: 6px;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 30px;
}

.flatpickr-calendar .flatpickr-weekdays {
    height: 24px;
}

.flatpickr-calendar span.flatpickr-weekday {
    font-size: 85%;
}

/* Time picker styles */
.flatpickr-calendar.noCalendar {
    width: auto !important;
    min-width: 220px;
}

.flatpickr-calendar .flatpickr-time {
    height: 44px;
    max-height: 44px;
    line-height: 44px;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper {
    height: 44px;
    contain: layout style;
}

.flatpickr-calendar .flatpickr-time input {
    font-size: 16px;
    font-weight: 500;
}

.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
    cursor: pointer;
    border-radius: 4px;
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
    contain: layout style;
    isolation: isolate;
}

.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover {
    background: #e6e6e6;
}

/* Make time picker inputs editable */
.flatpickr-calendar .flatpickr-time input.numInput {
    cursor: text;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
    contain: layout style;
}

.flatpickr-calendar .flatpickr-time input.numInput:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Fix Flatpickr z-index for modals */
.flatpickr-calendar {
    z-index: 1060 !important;
}

/* Fix Flatpickr positioning inside modals */
.modal-body .flatpickr-calendar {
    position: fixed !important;
}

/* Fix year picker input interaction */
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    pointer-events: auto !important;
    cursor: text;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    pointer-events: auto !important;
}

/* Year-only picker styles */
.flatpickr-year-only .flatpickr-months {
    display: flex !important;
    justify-content: center;
}

.flatpickr-year-only .flatpickr-month {
    display: block !important;
    width: 100%;
}

.flatpickr-year-only .flatpickr-current-month {
    display: flex !important;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
}

/* Hide month dropdown, show only year */
.flatpickr-year-only .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-year-only .flatpickr-current-month .cur-month {
    display: none !important;
}

.flatpickr-year-only .flatpickr-current-month .numInputWrapper {
    width: 80px !important;
}

.flatpickr-year-only .flatpickr-current-month input.cur-year {
    font-size: 1.2em !important;
    font-weight: 500;
}

/* Hide calendar days and navigation */
.flatpickr-year-only .flatpickr-innerContainer,
.flatpickr-year-only .flatpickr-rContainer {
    display: none !important;
}

.flatpickr-year-only .flatpickr-prev-month,
.flatpickr-year-only .flatpickr-next-month {
    display: none !important;
}


.cursor-pointer {
    cursor: pointer;
}

/* Sticky Footer */
.bk-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 250px;
    right: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e2e8f0;
    padding: .55rem 1.5rem;
    z-index: 1040;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 991px) {
    .bk-sticky-footer {
        left: 0;
    }
}


/*
 * Statement filter bar — bring the inputs up to the buttons.
 *
 * The labels are absolutely positioned onto the border, so a column is exactly
 * as tall as its input. An input took Bootstrap's default for a 13px font,
 * about 34px, while Search and the +/- toggle are 40px — so the buttons stood
 * proud of the inputs they were meant to line up with, and every page that
 * copied the markup copied the gap.
 *
 * Sizing the inputs here rather than shrinking the buttons keeps the touch
 * target, and leaves the buttons' own markup untouched.
 */
.statement-filter-bar .form-control,
.statement-filter-bar .form-select {
    height: 40px;
}