/* Global responsive hardening for the legacy SMS UI.
   This file intentionally changes layout only; no functional selectors or JS hooks are renamed. */

html {
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Unified visual refresh for the legacy SMS UI.
   Kept in the shared responsive file so color polish is broad, while existing views,
   IDs, JS hooks, form names, routes and business behavior remain untouched. */
:root {
    --sms-page-bg: #f4f8fc !important;
    --sms-surface: #ffffff !important;
    --sms-surface-soft: #f8fbff !important;
    --sms-text: #1d2b3a !important;
    --sms-muted: #61758b !important;
    --sms-border: #dce7f3 !important;
    --sms-primary: #1f5fa8 !important;
    --sms-primary-dark: #0d2e63 !important;
    --sms-primary-soft: #eaf3ff !important;
    --sms-teal: #0f9f9a !important;
    --sms-teal-soft: #e8f8f6 !important;
    --sms-amber: #f0a51a !important;
    --sms-amber-soft: #fff5df !important;
    --sms-danger: #d94b4b !important;
    --sms-success: #2b9f68 !important;
    --sms-shadow: 0 14px 34px rgba(27, 54, 93, .10) !important;
    --sms-shadow-soft: 0 8px 20px rgba(27, 54, 93, .08) !important;
    --sms-radius: 10px !important;
    --sms-density-padding: 14px !important;
    --backgroundNav--: #163f77 !important;
    --HoverColorSeconNavbar--: #235f9f !important;
    --backGroundShadow--: 0 10px 24px rgba(31, 95, 168, .20) !important;
    --SecondaryColor--: #dbeaf8 !important;
    --AccentColor--: #0f9f9a !important;
    --BackgroundColor--: #ffffff !important;
    --ButtonColor--: #1f5fa8 !important;
    --ButtonText--: #ffffff !important;
    --LinearBg--: linear-gradient(105deg, #0d2e63 0%, #1f5fa8 52%, #0f9f9a 100%) !important;
    --LinearBg1--: linear-gradient(180deg, #123d76 0%, #1f5fa8 55%, #0d8f94 100%) !important;
    --theme-clr: #1f5fa8 !important;
    --HoverColor--: rgba(15, 159, 154, .18) !important;
}

html[data-sms-theme="royal"] {
    --sms-primary: #4f46e5 !important;
    --sms-primary-dark: #312e81 !important;
    --sms-primary-soft: #eef2ff !important;
    --sms-teal: #06b6d4 !important;
    --sms-teal-soft: #ecfeff !important;
    --sms-amber: #f59e0b !important;
    --backgroundNav--: #312e81 !important;
    --HoverColorSeconNavbar--: #4f46e5 !important;
    --SecondaryColor--: #eef2ff !important;
    --AccentColor--: #06b6d4 !important;
    --ButtonColor--: #4f46e5 !important;
    --LinearBg--: linear-gradient(105deg, #312e81 0%, #4f46e5 55%, #06b6d4 100%) !important;
    --LinearBg1--: linear-gradient(180deg, #312e81 0%, #4338ca 55%, #0891b2 100%) !important;
    --theme-clr: #4f46e5 !important;
    --HoverColor--: rgba(6, 182, 212, .18) !important;
}

html[data-sms-theme="forest"] {
    --sms-primary: #166534 !important;
    --sms-primary-dark: #064e3b !important;
    --sms-primary-soft: #ecfdf5 !important;
    --sms-teal: #0d9488 !important;
    --sms-teal-soft: #f0fdfa !important;
    --sms-amber: #ca8a04 !important;
    --backgroundNav--: #064e3b !important;
    --HoverColorSeconNavbar--: #166534 !important;
    --SecondaryColor--: #ecfdf5 !important;
    --AccentColor--: #0d9488 !important;
    --ButtonColor--: #166534 !important;
    --LinearBg--: linear-gradient(105deg, #064e3b 0%, #166534 55%, #0d9488 100%) !important;
    --LinearBg1--: linear-gradient(180deg, #064e3b 0%, #166534 55%, #0f766e 100%) !important;
    --theme-clr: #166534 !important;
    --HoverColor--: rgba(13, 148, 136, .18) !important;
}

html[data-sms-theme="sunset"] {
    --sms-primary: #b45309 !important;
    --sms-primary-dark: #7c2d12 !important;
    --sms-primary-soft: #fff7ed !important;
    --sms-teal: #db2777 !important;
    --sms-teal-soft: #fdf2f8 !important;
    --sms-amber: #f59e0b !important;
    --backgroundNav--: #7c2d12 !important;
    --HoverColorSeconNavbar--: #b45309 !important;
    --SecondaryColor--: #fff7ed !important;
    --AccentColor--: #db2777 !important;
    --ButtonColor--: #b45309 !important;
    --LinearBg--: linear-gradient(105deg, #7c2d12 0%, #b45309 50%, #db2777 100%) !important;
    --LinearBg1--: linear-gradient(180deg, #7c2d12 0%, #b45309 55%, #be185d 100%) !important;
    --theme-clr: #b45309 !important;
    --HoverColor--: rgba(219, 39, 119, .18) !important;
}

html[data-sms-theme="graphite"] {
    --sms-primary: #334155 !important;
    --sms-primary-dark: #0f172a !important;
    --sms-primary-soft: #f1f5f9 !important;
    --sms-teal: #0284c7 !important;
    --sms-teal-soft: #e0f2fe !important;
    --sms-amber: #eab308 !important;
    --backgroundNav--: #0f172a !important;
    --HoverColorSeconNavbar--: #334155 !important;
    --SecondaryColor--: #f1f5f9 !important;
    --AccentColor--: #0284c7 !important;
    --ButtonColor--: #334155 !important;
    --LinearBg--: linear-gradient(105deg, #0f172a 0%, #334155 58%, #0284c7 100%) !important;
    --LinearBg1--: linear-gradient(180deg, #0f172a 0%, #1e293b 58%, #0369a1 100%) !important;
    --theme-clr: #334155 !important;
    --HoverColor--: rgba(2, 132, 199, .18) !important;
}

html[data-sms-mode="dark"] {
    --sms-page-bg: #0f172a !important;
    --sms-surface: #111c2e !important;
    --sms-surface-soft: #17233a !important;
    --sms-text: #e8eef7 !important;
    --sms-muted: #a9b7ca !important;
    --sms-border: #2a3a55 !important;
    --sms-primary-soft: #162545 !important;
    --sms-teal-soft: #10303a !important;
    --sms-amber-soft: #33270c !important;
    --sms-shadow: 0 16px 36px rgba(0, 0, 0, .34) !important;
    --sms-shadow-soft: 0 10px 24px rgba(0, 0, 0, .28) !important;
    --BackgroundColor--: #111c2e !important;
    --SecondaryColor--: #17233a !important;
}

html[data-sms-density="compact"] {
    --sms-density-padding: 8px !important;
}

html[data-sms-density="comfortable"] {
    --sms-density-padding: 14px !important;
}

html[data-sms-radius="square"] {
    --sms-radius: 4px !important;
}

html[data-sms-radius="soft"] {
    --sms-radius: 10px !important;
}

html[data-sms-font="large"] body {
    font-size: 15.5px;
}

html[data-sms-font="normal"] body {
    font-size: 14px;
}

body {
    background: var(--sms-page-bg);
    color: var(--sms-text);
}

.page-body-wrapper,
.main-panel,
.content-wrapper,
.body-content {
    background: var(--sms-page-bg) !important;
}

.content-wrapper > .p-3,
#MainDiv,
.container-fluid .content-wrapper {
    background: transparent !important;
}

#navbar_Id,
.navbar.default-layout-navbar,
.default-layout-navbar {
    background: var(--LinearBg--) !important;
    border: 0 !important;
    box-shadow: 0 12px 30px rgba(13, 46, 99, .20);
}

.navbar .navbar-brand-wrapper,
.navbar .navbar-menu-wrapper {
    background: transparent !important;
}

.navbar .navbar-brand-wrapper {
    border-right: 1px solid rgba(255, 255, 255, .16);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-link,
.navbar .navbar-menu-wrapper .navbar-nav .nav-link,
.navbar .navbar-menu-wrapper label,
.navbar .navbar-menu-wrapper span,
.navbar .navbar-toggler span,
.navigation .nvbar a,
.navigation .nvbar span,
.navigation a {
    color: rgba(255, 255, 255, .94) !important;
}

.navigation .nvbar a,
.navigation a {
    border-radius: 999px;
    padding: 6px 10px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

    .navigation .nvbar a:hover,
    .navigation a:hover {
        /*background: rgba(255, 255, 255, .15) !important;*/
        background: var(--LinearBg1--) !important;
        color: #fff !important;
        text-decoration: none;
        transform: translateY(-1px);
    }

#SerchBar {
    background: rgba(255, 255, 255, .13) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
}

#SerchBar .input-group-text {
    background: rgba(255, 255, 255, .86) !important;
    color: var(--sms-primary-dark) !important;
}

#searchName_Id,
#searchName_Id::placeholder {
    color: #fff !important;
}

.sidebar,
.sidebar-offcanvas,
.navwidth,
.navwidthm {
    background: var(--LinearBg1--) !important;
    box-shadow: 10px 0 28px rgba(13, 46, 99, .13);
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link,
.sidebar-offcanvas .nav:not(.sub-menu) > .nav-item > .nav-link {
    border-radius: 10px;
    color: rgba(255, 255, 255, .92) !important;
    margin: 3px 8px;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sidebar .nav .nav-item .menu-title,
.sidebar-offcanvas .nav .nav-item .menu-title,
.sidebar .nav .nav-item.nav-link .menu-title {
    color: rgba(255, 255, 255, .92) !important;
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover,
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item:hover > .nav-link,
.sidebar-offcanvas .nav .nav-item:hover > .nav-link {
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 3px 0 0 var(--sms-amber);
    color: #fff !important;
    transform: translateX(2px);
}

.sidebar .nav .nav-item .icon-bg,
.sidebar-offcanvas .nav .nav-item .icon-bg {
    background: rgba(255, 255, 255, .93) !important;
    color: var(--sms-primary-dark) !important;
}

.sidebar .nav .nav-item .icon-bg i,
.sidebar-offcanvas .nav .nav-item .icon-bg i {
    color: var(--sms-primary-dark) !important;
}

.sidebar .nav.sub-menu {
    background: rgba(5, 22, 52, .18);
    border-radius: 10px;
    margin: 3px 12px 8px;
    padding: 6px 0;
}

.sidebar .nav.sub-menu .nav-item .nav-link,
.sidebar .nav.sub-menu .nav-item.nav-link {
    border-radius: 8px;
    color: rgba(255, 255, 255, .84) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item.nav-link:hover,
.sidebar .nav.sub-menu .nav-item.nav-link.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

.card,
.panel,
.box,
.well,
.modal-content,
.smartCard,
.dashboard-card,
.module-panel,
.metric-card {
    background: var(--sms-surface) !important;
    border: 1px solid var(--sms-border) !important;
    border-radius: var(--sms-radius) !important;
    box-shadow: var(--sms-shadow-soft) !important;
}

.card-body,
.panel-body,
.modal-body {
    padding: var(--sms-density-padding, 14px);
}

.card-header,
.panel-heading,
.modal-header,
.table > thead,
table thead {
    background: linear-gradient(90deg, var(--sms-primary-soft), var(--sms-teal-soft)) !important;
    color: var(--sms-text) !important;
}

.modal-header[style],
.card-header[style],
.panel-heading[style] {
    background: linear-gradient(105deg, var(--sms-primary), var(--sms-teal)) !important;
    color: #fff !important;
}

.table,
table {
    color: var(--sms-text);
}

.table thead th,
table thead th {
    background: var(--sms-primary-soft) !important;
    border-color: var(--sms-border) !important;
    color: var(--sms-text) !important;
}

.table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: var(--sms-surface-soft);
}

.table-hover tbody tr:hover,
table.table-hover tbody tr:hover {
    background: var(--sms-teal-soft) !important;
}

.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea,
.select2-container .select2-selection {
    /*background-color: #fff !important;*/
    border-color: #cbd9e8 !important;
    border-radius: 8px !important;
    color: var(--sms-text) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    border-color: var(--sms-teal) !important;
    box-shadow: 0 0 0 .16rem rgba(15, 159, 154, .18) !important;
}

label,
.control-label,
.form-label {
    color: var(--sms-text);
    font-weight: 600;
}

.btn,
button,
input[type="button"],
input[type="submit"],
.dt-button {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary,
.dataTables_wrapper .dt-button,
.dt-buttons .dt-button {
    background: linear-gradient(105deg, var(--sms-primary), #2878c8) !important;
    border-color: var(--sms-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.dataTables_wrapper .dt-button:hover,
.dt-buttons .dt-button:hover {
    background: linear-gradient(105deg, #174b87, var(--sms-teal)) !important;
    border-color: #174b87 !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(105deg, var(--sms-success), var(--sms-teal)) !important;
    border-color: var(--sms-success) !important;
    color: #fff !important;
}

.btn-warning {
    background: linear-gradient(105deg, var(--sms-amber), #f6bd45) !important;
    border-color: var(--sms-amber) !important;
    color: #1f2937 !important;
}

.btn-danger {
    background: linear-gradient(105deg, var(--sms-danger), #ee6b5f) !important;
    border-color: var(--sms-danger) !important;
    color: #fff !important;
}

.btn-info {
    background: linear-gradient(105deg, #168eb3, var(--sms-teal)) !important;
    border-color: #168eb3 !important;
    color: #fff !important;
}

.badge-light,
.alert-light {
    background: var(--sms-surface) !important;
    border-color: var(--sms-border) !important;
    color: var(--sms-text) !important;
}

.dropdown-menu,
.navbar-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--sms-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--sms-shadow) !important;
}

#directordesign,
.navbar-dropdown#directordesign {
    background: linear-gradient(180deg, #123d76, #1f5fa8) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
}

#directordesign a,
#directordesign span,
#directordesign i {
    color: #fff !important;
}

.widget-user.shadow,
.card-widget.widget-user,
.widget-user.card {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--sms-shadow) !important;
    overflow: hidden;
}

.widget-user .widget-user-header {
    background: linear-gradient(135deg, #eef6ff 0%, #ecfbf8 100%) !important;
}

.widget-user .widget-user-desc,
.widget-user .widget-user-username,
.description-header,
.countClass {
    color: var(--sms-primary-dark) !important;
}

.widget-user .card-footer,
.card-footer[style*="background-color"] {
    background: linear-gradient(90deg, var(--sms-primary), var(--sms-teal)) !important;
}

.countClass:hover,
a:hover {
    color: var(--sms-teal) !important;
}

.flatpickr-weekdays,
.ui-datepicker-header {
    background: linear-gradient(90deg, var(--sms-primary), var(--sms-teal)) !important;
}

.flatpickr-day.selectedRed,
.director-calendar-legend div[style*="red"] {
    background: var(--sms-danger) !important;
}

.flatpickr-day.selectedmagenta,
.director-calendar-legend div[style*="lightpink"] {
    background: #f6aac2 !important;
}

.flatpickr-day.selectedarkturquoise,
.director-calendar-legend div[style*="darkturquoise"] {
    background: var(--sms-teal) !important;
}

.highcharts-container text,
.highcharts-root text {
    fill: #31465f;
}

html[data-sms-mode="dark"] .form-control,
html[data-sms-mode="dark"] input[type="text"],
html[data-sms-mode="dark"] input[type="number"],
html[data-sms-mode="dark"] input[type="email"],
html[data-sms-mode="dark"] input[type="password"],
html[data-sms-mode="dark"] input[type="date"],
html[data-sms-mode="dark"] select,
html[data-sms-mode="dark"] textarea,
html[data-sms-mode="dark"] .select2-container .select2-selection {
    background-color: var(--sms-surface-soft) !important;
    border-color: var(--sms-border) !important;
    color: var(--sms-text) !important;
}

html[data-sms-mode="dark"] input::placeholder,
html[data-sms-mode="dark"] textarea::placeholder {
    color: var(--sms-muted) !important;
}

html[data-sms-mode="dark"] .dropdown-menu,
html[data-sms-mode="dark"] .navbar-dropdown,
html[data-sms-mode="dark"] .ui-datepicker,
html[data-sms-mode="dark"] .select2-dropdown {
    background: var(--sms-surface) !important;
    color: var(--sms-text) !important;
    border-color: var(--sms-border) !important;
}

html[data-sms-mode="dark"] .dropdown-menu a,
html[data-sms-mode="dark"] .dropdown-menu .dropdown-item,
html[data-sms-mode="dark"] .navbar-dropdown a,
html[data-sms-mode="dark"] .select2-results__option {
    color: var(--sms-text) !important;
}

html[data-sms-mode="dark"] .dropdown-menu a:hover,
html[data-sms-mode="dark"] .dropdown-menu .dropdown-item:hover,
html[data-sms-mode="dark"] .select2-results__option--highlighted {
    background: var(--sms-primary-soft) !important;
}

html[data-sms-mode="dark"] .table,
html[data-sms-mode="dark"] table {
    background: var(--sms-surface) !important;
    color: var(--sms-text) !important;
}

html[data-sms-mode="dark"] .table td,
html[data-sms-mode="dark"] .table th,
html[data-sms-mode="dark"] table td,
html[data-sms-mode="dark"] table th {
    border-color: var(--sms-border) !important;
}

html[data-sms-mode="dark"] .widget-user .widget-user-header {
    background: linear-gradient(135deg, var(--sms-surface-soft), var(--sms-primary-soft)) !important;
}

html[data-sms-mode="dark"] .highcharts-container text,
html[data-sms-mode="dark"] .highcharts-root text {
    fill: var(--sms-text) !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body,
.content-wrapper,
.main-panel,
.page-body-wrapper,
.body-content,
.container,
.container-fluid {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe,
object,
embed {
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
select,
textarea,
button,
.form-control {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

.container,
.container-fluid,
.content-wrapper,
.main-panel,
.page-body-wrapper,
.body-content,
.row,
.card,
.card-body,
.panel,
.modal-content {
    max-width: 100%;
}

.card,
.card-body,
.panel,
.panel-body,
.modal-body,
.alert,
.breadcrumb,
.dropdown-menu {
    overflow-wrap: anywhere;
    word-break: normal;
}

.table-responsive,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.fixed-table-container,
.grid-view,
.table-scroll,
.responsive-table,
.overflow-auto {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sms-responsive-table-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    clear: both;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.sms-responsive-table-shell > table {
    margin-bottom: 0;
}

.sms-responsive-table-shell > table:not(.dataTable) {
    width: max-content;
    min-width: 100%;
}

.content-wrapper :where(div, section, article, aside, form, fieldset, ul, ol, img, iframe, canvas)[style*="width:"],
.body-content :where(div, section, article, aside, form, fieldset, ul, ol, img, iframe, canvas)[style*="width:"],
.modal-body :where(div, section, article, aside, form, fieldset, ul, ol, img, iframe, canvas)[style*="width:"] {
    max-width: 100%;
}

.content-wrapper :where(img, iframe, canvas, video, object, embed)[style*="height:"],
.body-content :where(img, iframe, canvas, video, object, embed)[style*="height:"],
.modal-body :where(img, iframe, canvas, video, object, embed)[style*="height:"] {
    height: auto;
}

.table,
table {
    max-width: 100%;
}

.table-responsive > .table,
.table-responsive > table {
    margin-bottom: 0;
}

.dataTables_wrapper .row {
    width: auto;
}

.dataTables_wrapper {
    width: 100%;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    max-width: 100%;
}

.dt-buttons,
.dataTables_wrapper .dt-buttons,
.btn-toolbar,
.btn-group {
    max-width: 100%;
    flex-wrap: wrap;
}

.dt-buttons .btn,
.dataTables_wrapper .dt-button,
.btn-toolbar .btn,
.btn-group .btn {
    margin-bottom: 4px;
}

.navbar,
.navbar .navbar-menu-wrapper,
.navbar .navbar-brand-wrapper,
.topbar,
.header,
.main-header {
    max-width: 100%;
}

#navbar_Id,
#mynav {
    max-width: 100%;
}

#navbar_Id .navbar-menu-wrapper {
    /*min-width: 0 !important;*/
}

#nav_id,
#navbar_id2 {
    flex: 0 0 auto;
}

#SerchBar,
#search_Id {
    max-width: 100%;
}

.navigation,
.navigation .menu-main-menu-container,
.navigation .nvbar,
#UlWeb {
    max-width: 100%;
}

.sidebar,
.sidebar-offcanvas,
.navwidth,
.navwidthm {
    max-width: 100vw;
}

.sidebar .nav,
.sidebar-offcanvas .nav {
    max-width: 100%;
}

.content-wrapper .highcharts-container,
.content-wrapper .highcharts-root,
.content-wrapper canvas,
.content-wrapper .chartjs-render-monitor,
.content-wrapper .fc,
.content-wrapper .full-calendar,
.content-wrapper .fc-view-harness {
    max-width: 100% !important;
}

.modal-dialog {
    max-width: calc(100% - 24px);
}

.modal {
    padding-right: 0 !important;
}

.swal-modal,
.sweet-alert {
    max-width: calc(100% - 24px);
}

.select2-container,
.chosen-container,
.multiselect-native-select,
.dropdown-menu {
    max-width: 100%;
}

.nav-tabs,
.nav-pills,
.breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs,
.nav-pills {
    flex-wrap: nowrap;
}

.page-title,
.page-header,
.panel-heading,
.card-header,
.form-section-header,
.filter-section {
    max-width: 100%;
}

.sms-theme-shell {
    color: var(--sms-text);
}

.sms-theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px !important;
    padding: 10px 14px;
    background: linear-gradient(105deg, var(--sms-primary), var(--sms-teal)) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(13, 46, 99, .26) !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.sms-theme-toggle:hover,
.sms-theme-toggle:focus {
    color: #fff !important;
    outline: 2px solid rgba(15, 159, 154, .25);
    transform: translateY(-1px);
}

.sms-theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
}

.sms-theme-panel {
    position: fixed;
    right: 18px;
    bottom: 72px;
    z-index: 2147483000;
    display: none;
    width: min(360px, calc(100vw - 24px));
    overflow: hidden;
    background: var(--sms-surface) !important;
    color: var(--sms-text) !important;
    border: 1px solid var(--sms-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--sms-shadow) !important;
}

.sms-theme-panel.is-open {
    display: block;
}

.sms-theme-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(105deg, var(--sms-primary), var(--sms-teal)) !important;
    color: #fff !important;
}

.sms-theme-panel__header strong {
    color: #fff !important;
    font-size: 15px;
}

.sms-theme-panel__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    line-height: 1;
    cursor: pointer;
}

.sms-theme-panel__body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 14px 16px;
}

.sms-theme-group {
    margin-bottom: 14px;
}

.sms-theme-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--sms-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sms-theme-swatches {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.sms-theme-swatch {
    min-height: 56px;
    padding: 4px;
    border: 1px solid var(--sms-border) !important;
    border-radius: 10px !important;
    background: var(--sms-surface-soft) !important;
    cursor: pointer;
}

.sms-theme-swatch span {
    display: block;
    height: 30px;
    border-radius: 7px;
}

.sms-theme-swatch em {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--sms-text);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-theme-swatch.is-active,
.sms-theme-option.is-active {
    border-color: var(--sms-teal) !important;
    outline: 3px solid rgba(15, 159, 154, .22);
}

.sms-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sms-theme-option {
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid var(--sms-border) !important;
    border-radius: 10px !important;
    background: var(--sms-surface-soft) !important;
    color: var(--sms-text) !important;
    font-weight: 700;
    cursor: pointer;
}

.sms-theme-option.is-active {
    background: var(--sms-primary-soft) !important;
    color: var(--sms-primary-dark) !important;
}

html[data-sms-mode="dark"] .sms-theme-option.is-active {
    color: var(--sms-text) !important;
}

.sms-theme-panel__footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--sms-border);
    background: var(--sms-surface-soft);
}

.sms-theme-panel__footer .btn {
    width: auto !important;
    min-width: 88px;
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    .container {
        max-width: 100%;
    }

    .content-wrapper,
    .main-panel {
        min-width: 0;
    }

    .content-wrapper :where(div, section, article, aside, form, fieldset, ul, ol)[style*="width:"],
    .body-content :where(div, section, article, aside, form, fieldset, ul, ol)[style*="width:"],
    .modal-body :where(div, section, article, aside, form, fieldset, ul, ol)[style*="width:"] {
        max-width: 100% !important;
    }

    .content-wrapper :where(.row, .form-row, .form-inline, .btn-toolbar, .btn-group, .filter-row, .search-row, .button-row),
    .body-content :where(.row, .form-row, .form-inline, .btn-toolbar, .btn-group, .filter-row, .search-row, .button-row) {
        max-width: 100%;
    }

    .content-wrapper :where(.card, .panel, .box, .well, .jumbotron)[style*="margin-left:"],
    .body-content :where(.card, .panel, .box, .well, .jumbotron)[style*="margin-left:"] {
        margin-left: 0 !important;
    }
}

@media (max-width: 991.98px) {
    body {
        font-size: 14px;
    }

    .page-body-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
    }

    .content-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .main-panel {
        width: 100% !important;
    }

    .navbar .navbar-menu-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #navbar_Id {
        height: auto !important;
        min-height: 3rem;
    }

    #nav_id,
    #navbar_id2 {
        margin-top: 0 !important;
    }

    #search_Id {
        flex: 0 1 220px;
        max-width: 42vw;
    }

    #SerchBar {
        width: 100% !important;
        margin-top: 0 !important;
    }

    #SerchBar .input-group-prepend {
        width: 100% !important;
    }

    .navigation {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0.75rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .navigation .nvbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 18px;
        min-width: max-content;
        margin: 0 !important;
        padding-left: 0;
    }

    .navigation .nvbar > li,
    .navigation #navitem,
    .navigation #iconhover {
        flex: 0 0 auto;
    }

    #UlWeb {
        align-items: center;
        margin-top: 0 !important;
        margin-left: auto;
    }

    .sidebar,
    .sidebar-offcanvas {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    #sidebar {
        margin-top: 0 !important;
    }

    .table-responsive table,
    .dataTables_wrapper table,
    table.table,
    table.table-bordered,
    table.table-hover {
        min-width: 720px;
    }

    .dataTables_wrapper table,
    table.table,
    table.table-bordered,
    table.table-hover {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table th,
    .table td,
    table th,
    table td {
        white-space: nowrap;
    }

    .form-inline,
    .inline-action-form,
    .button-row,
    .filter-row,
    .search-row,
    .panel-heading,
    .card-header,
    .modal-footer,
    .dt-buttons,
    .dataTables_wrapper .row {
        flex-wrap: wrap;
    }

    .form-inline .form-group,
    .filter-row .form-group,
    .search-row .form-group {
        margin-bottom: 8px;
    }

    .form-inline .form-control,
    .form-inline select,
    .filter-row .form-control,
    .filter-row select,
    .search-row .form-control,
    .search-row select {
        min-width: 0;
    }

    .content-wrapper :where(.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12)[style*="margin-left:"],
    .body-content :where(.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12)[style*="margin-left:"] {
        margin-left: 0 !important;
    }

    .modal-dialog {
        margin: 12px auto;
        width: calc(100% - 24px);
    }
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .content-wrapper,
    .body-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row > [class*="col-"],
    .form-row > [class*="col-"] {
        flex: 0 0 100% !important;
        float: none !important;
        max-width: 100% !important;
        padding-left: 8px;
        padding-right: 8px;
        width: 100% !important;
    }

    [style*="width:"] {
        max-width: 100% !important;
    }

    [style*="min-width:"] {
        min-width: 0 !important;
    }

    .content-wrapper [style*="margin-left:"],
    .body-content [style*="margin-left:"],
    .modal-body [style*="margin-left:"],
    .samaj-public-layout [style*="margin-left:"] {
        margin-left: 0 !important;
    }

    .content-wrapper [style*="margin-right:"],
    .body-content [style*="margin-right:"],
    .modal-body [style*="margin-right:"],
    .samaj-public-layout [style*="margin-right:"] {
        margin-right: 0 !important;
    }

    [style*="height:"] img,
    img[style*="height:"] {
        height: auto !important;
    }

    h1,
    .h1 {
        font-size: 1.45rem;
        line-height: 1.25;
    }

    h2,
    .h2 {
        font-size: 1.3rem;
        line-height: 1.25;
    }

    h3,
    .h3 {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    .card,
    .panel,
    .module-panel,
    .metric-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .card-body,
    .panel-body {
        padding: 10px !important;
    }

    .form-group,
    .field-row,
    .input-group,
    .custom-selector,
    .select2-container,
    .chosen-container,
    .multiselect-native-select {
        max-width: 100%;
    }

    .form-control,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        width: 100% !important;
    }

    label,
    .control-label {
        white-space: normal;
    }

    .input-group {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .custom-select,
    .input-group > .input-group-prepend,
    .input-group > .input-group-append {
        flex: 1 1 100%;
        margin-bottom: 6px;
    }

    .btn,
    button,
    input[type="button"],
    input[type="submit"] {
        max-width: 100%;
        white-space: normal;
    }

    .btn-group,
    .btn-toolbar {
        flex-wrap: wrap;
    }

    .btn-group > .btn,
    .btn-toolbar > .btn,
    .dt-buttons > .btn,
    .dt-buttons > .dt-button,
    .dataTables_wrapper .dt-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
        width: 100%;
    }

    .table-responsive table,
    .dataTables_wrapper table,
    .sms-responsive-table-shell > table,
    table.table,
    table.table-bordered,
    table.table-hover {
        display: block;
        min-width: 640px;
        overflow-x: auto;
    }

    .table-responsive thead,
    .dataTables_wrapper thead {
        white-space: nowrap;
    }

    .modal-dialog {
        margin: 8px auto;
        width: calc(100% - 16px);
    }

    .modal-content {
        max-height: calc(100vh - 16px);
    }

    .modal-body {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    .modal-footer,
    .modal-header {
        flex-wrap: wrap;
    }

    .modal-title {
        max-width: calc(100% - 36px);
        overflow-wrap: anywhere;
    }

    .modal-footer .btn {
        margin-bottom: 4px;
    }

    .dropdown-menu {
        max-height: 70vh;
        overflow-y: auto;
    }

    .navbar-nav,
    .nav {
        max-width: 100%;
    }

    .navbar-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-brand,
    .brand-logo,
    .logo {
        max-width: 78vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #search_Id {
        flex: 1 1 100%;
        max-width: calc(100vw - 96px);
    }

    .navigation {
        order: 3;
        flex-basis: 100%;
        margin-left: 0 !important;
        margin-top: 4px;
    }

    #UlWeb {
        order: 2;
    }

    .navbar .navbar-menu-wrapper {
        flex-wrap: wrap;
        row-gap: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .page-body-wrapper,
    .main-panel,
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .sms-theme-toggle {
        right: 12px;
        bottom: 12px;
        padding: 9px 12px;
    }

    .sms-theme-panel {
        right: 12px;
        bottom: 62px;
    }

    .sms-theme-swatches {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body {
        font-size: 13px;
    }

    .content-wrapper,
    .container,
    .container-fluid,
    .body-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .table-responsive table,
    .dataTables_wrapper table,
    .sms-responsive-table-shell > table,
    table.table,
    table.table-bordered,
    table.table-hover {
        min-width: 560px;
    }

    .form-control,
    input,
    select,
    textarea {
        font-size: 13px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .pagination > li,
    .page-item {
        margin-bottom: 4px;
    }

    .swal-modal,
    .sweet-alert {
        width: calc(100% - 16px) !important;
    }
}

@media print {
    .sms-theme-toggle,
    .sms-theme-panel {
        display: none !important;
    }

    body {
        overflow: visible;
    }

    .table-responsive,
    .dataTables_wrapper {
        overflow: visible;
    }
}