button.link-style {
    background: none;
    border: none;
    color: #0054a6;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.menu-title {
    padding: 12px 17px !important;
    letter-spacing: 0.08em;
    pointer-events: none;
    cursor: default;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: Inter, sans-serif;
    /* color: #f1f1f1; */
}

#content-area,
#header {
    transition: transform 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
}

#sidebar {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(0);
    opacity: 1;
}

#sidebar.hidden {
    transform: translateX(-100%);
    opacity: 0;
}

/* When sidebar is hidden, shift content area and header */
.sidebar-collapsed #content-area,
.sidebar-collapsed #header {
    margin-left: 0;
}

.form-label {
    text-align: start;
}

:root {
    /* --tblr-spacer-3: 1.5rem; */
    --tblr-body-bg: #eff3f6;
}

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

@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-brand {
        padding: 1.2rem;
        justify-content: start;
    }
}

.dt-scroll-body {
    border: none !important;
}

#datatable td,
#datatable th {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #ddd;
    vertical-align: middle;
}

th {
    background: #f6f8fb !important;
}

.btn-table-action {
    border: none;
    box-shadow: none;
    padding: 0 3px;
}

#dt-length-0:hover,
#dt-search-0:hover {
    border-color: #aaa;
}

.dt-length {
    text-transform: capitalize;
}

@media (max-width: 991.98px) {
    :host,
    :root,
    [data-bs-theme="light"] {
        --tblr-spacer-2: 1rem;
        --tblr-page-padding: var(--tblr-spacer-2);
    }
}

@media screen and (max-width: 480px) {
    .dt-info {
        margin-bottom: 15px;
    }

    .dt-length {
        margin-bottom: 15px;
        text-transform: capitalize;
    }
}

.btn-icon {
    border: none;
    box-shadow: none;
}

@media (min-width: 768px) {
    .btn-md-md {
        padding: 0.5rem 1.25rem;
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
        padding: 0 !important;
    }
}

/* Base Font Sizes */
.font-xs {
    font-size: 0.75rem; /* 12px */
}
.font-sm {
    font-size: 0.875rem; /* 14px */
}
.font-md {
    font-size: 1rem; /* 16px */
}
.font-lg {
    font-size: 1.125rem; /* 18px */
}
.font-xl {
    font-size: 1.25rem; /* 20px */
}
.font-2xl {
    font-size: 1.5rem; /* 24px */
}
.font-3xl {
    font-size: 1.875rem; /* 30px */
}
.font-4xl {
    font-size: 2.25rem; /* 36px */
}
.font-5xl {
    font-size: 3rem; /* 48px */
}
.font-6xl {
    font-size: 3.75rem; /* 60px */
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    .font-xs {
        font-size: 0.625rem; /* 10px */
    }
    .font-sm {
        font-size: 0.75rem; /* 12px */
    }
    .font-md {
        font-size: 0.875rem; /* 14px */
    }
    .font-lg {
        font-size: 1rem; /* 16px */
    }
    .font-xl {
        font-size: 1.125rem; /* 18px */
    }
    .font-2xl {
        font-size: 1.25rem; /* 20px */
    }
    .font-3xl {
        font-size: 1.5rem; /* 24px */
    }
    .font-4xl {
        font-size: 1.875rem; /* 30px */
    }
    .font-5xl {
        font-size: 2.25rem; /* 36px */
    }
    .font-6xl {
        font-size: 3rem; /* 48px */
    }
}

/* Utility Modifiers */
.font-thin {
    font-weight: 300;
}
.font-normal {
    font-weight: 400;
}
.font-bold {
    font-weight: 700;
}
.font-light {
    font-weight: 200;
}
.font-heavy {
    font-weight: 900;
}