/* Color variables for consistent theming */
:root {
    /* Primary color scheme */
    --primary-color: #3498db;
    --primary-dark: #2980b9;
    --primary-darker: #1a5276;
    --primary-darker-opacity: rgba(26, 82, 118, 0.15);
    --primary-light: #5dade2;
    --primary-lighter: #d6eaf8;
    
    /* Info color scheme - adding distinct colors for info */
    --info-color: #17a2b8;
    --info-dark: #138496;
    --info-darker: #0f6674;
    --info-darker-opacity: rgba(15, 102, 116, 0.15);
    --info-light: #5bc0de;
    --info-lighter: #d1ecf1;
    
    /* Success color scheme */
    --success-color: #2ecc71;
    --success-dark: #27ae60;
    --success-darker: #1e8449;
    
    /* Danger color scheme */
    --danger-color: #e74c3c;
    --danger-dark: #c0392b;
    --danger-darker: #922b21;
    
    /* Secondary color scheme */
    --secondary-color: #95a5a6;
    --secondary-dark: #7f8c8d;
    --secondary-darker: #626e70;
    
    /* Warning color scheme - adjusted for better gradient consistency */
    --warning-color: #f39c12;
    --warning-dark: #e67e22;  /* Changed from #d35400 */
    --warning-darker: #d35400; /* Changed from #b84b00 */
    
    /* Neutral colors */
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --text-muted: #6c757d;
    --icon-color: #adb5bd;

    /* Btn-Link Color */
    --btn-link-color: #3498db;
    --btn-link-hover-color: #2980b9;
    
    /* Bootstrap override variables for outline buttons */
    --bs-primary: #3498db;
    --bs-primary-rgb: 52, 152, 219;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
    --bs-success: #2ecc71;
    --bs-success-rgb: 46, 204, 113;
    --bs-danger: #e74c3c;
    --bs-danger-rgb: 231, 76, 60;
    --bs-warning: #f39c12;
    --bs-warning-rgb: 243, 156, 18;
    --bs-secondary: #95a5a6;
    --bs-secondary-rgb: 149, 165, 166;
}

.main-content-container {

  --s: 144px !important; /* control the size*/
  --c1: #ffe6c536 !important;
  --c2: #ffffff !important;
  
  --_g: #0000 90deg,var(--c1) 0 !important;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g)),
    var(--c2) !important;
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5) !important;
}

/* Card Styles */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.card-header {
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
    color: white;
    border-radius: 7px 7px 0 0 !important;
    border: none;
}

[dir="rtl"] .card-header {
    background-image: linear-gradient(-135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
}

/* Add Form Styles */
.card .card-header.bg-success {
    background-image: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%);
    color: white;
    border-radius: 7px 7px 0 0 !important;
    border: none;
}

[dir="rtl"] .card .card-header.bg-success {
    background-image: linear-gradient(-135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%);
}

/* Warning Card Header Style */
.card .card-header.bg-warning {
    background-image: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%);
    color: white;
    border-radius: 7px 7px 0 0 !important;
    border: none;
}

[dir="rtl"] .card .card-header.bg-warning {
    background-image: linear-gradient(-135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%);
}

/* Info Card Header Style */
.card .card-header.bg-info {
    background-image: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%);
    color: white;
    border-radius: 7px 7px 0 0 !important;
    border: none;
}

[dir="rtl"] .card .card-header.bg-info {
    background-image: linear-gradient(-135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%);
}

/* Danger Card Header Style */
.card .card-header.bg-danger {
    background-image: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%);
    color: white;
    border-radius: 7px 7px 0 0 !important;
    border: none;
}

[dir="rtl"] .card .card-header.bg-danger {
    background-image: linear-gradient(-135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%);
}



.btn-primary {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
}

.btn-primary:hover {
    background-image: linear-gradient(135deg, var(--primary-dark), var(--primary-darker));
}

.btn-primary:active,
.btn-primary:focus {
    background-image: linear-gradient(135deg, var(--primary-darker), var(--primary-dark));
    box-shadow: 0 0 0 0.1rem rgba(52, 152, 219, 0.5);
}

.btn-danger {
    background-image: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    border: none;
}

.btn-danger:hover {
    background-image: linear-gradient(135deg, var(--danger-dark), var(--danger-darker));
}

.btn-danger:active,
.btn-danger:focus {
    background-image: linear-gradient(135deg, var(--danger-darker), var(--danger-dark));
    box-shadow: 0 0 0 0.1rem rgba(231, 76, 60, 0.5);
}

.btn-success {
    background-image: linear-gradient(135deg, var(--success-color), var(--success-dark));
    border: none;
}

.btn-success:hover {
    background-image: linear-gradient(135deg, var(--success-dark), var(--success-darker));
}

.btn-success:active,
.btn-success:focus {
    background-image: linear-gradient(135deg, var(--success-darker), var(--success-dark));
    box-shadow: 0 0 0 0.1rem rgba(46, 204, 113, 0.5);
}

.btn-secondary {
    background-image: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    border: none;
}

.btn-secondary:hover {
    background-image: linear-gradient(135deg, var(--secondary-dark), var(--secondary-darker));
}

.btn-secondary:active,
.btn-secondary:focus {
    background-image: linear-gradient(135deg, var(--secondary-darker), var(--secondary-dark));
    box-shadow: 0 0 0 0.1rem rgba(149, 165, 166, 0.5);
}

.btn-warning {
    background-image: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
    border: none;
    color: white;
}

.btn-warning:hover {
    background-image: linear-gradient(135deg, var(--warning-dark), var(--warning-darker));
    color: white;
}

.btn-warning:active,
.btn-warning:focus {
    background-image: linear-gradient(135deg, var(--warning-darker), var(--warning-dark));
    color: white;
    box-shadow: 0 0 0 0.1rem rgba(243, 156, 18, 0.5);
}

/* Button styles for info */
.btn-info {
    background-image: linear-gradient(135deg, var(--info-color), var(--info-dark));
    border: none;
    color: white;
}

.btn-info:hover {
    background-image: linear-gradient(135deg, var(--info-dark), var(--info-darker));
    color: white;
}

.btn-info:active,
.btn-info:focus {
    background-image: linear-gradient(135deg, var(--info-darker), var(--info-dark));
    color: white;
    box-shadow: 0 0 0 0.1rem rgba(23, 162, 184, 0.5);
}

/* Button styles for outline */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-color: var(--primary-color);
    color: white;
}
.btn-outline-primary:active,
.btn-outline-primary:focus {
    background-image: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(52, 152, 219, 0.4);
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.btn-outline-danger:hover {
    background-image: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    border-color: var(--danger-color);
    color: white;
}
.btn-outline-danger:active,
.btn-outline-danger:focus {
    background-image: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    border-color: var(--danger-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(231, 76, 60, 0.4);
}

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
}
.btn-outline-success:hover {
    background-image: linear-gradient(135deg, var(--success-color), var(--success-dark));
    border-color: var(--success-color);
    color: white;
}
.btn-outline-success:active,
.btn-outline-success:focus {
    background-image: linear-gradient(135deg, var(--success-color), var(--success-dark));
    border-color: var(--success-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(46, 204, 113, 0.4);
}

.btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-outline-warning:hover {
    background-image: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
    border-color: var(--warning-color);
    color: white;
}
.btn-outline-warning:active,
.btn-outline-warning:focus {
    background-image: linear-gradient(135deg, var(--warning-color), var(--warning-dark));
    border-color: var(--warning-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(243, 156, 18, 0.4);
}

.btn-outline-info {
    color: var(--info-color);
    border-color: var(--info-color);
}
.btn-outline-info:hover {
    background-image: linear-gradient(135deg, var(--info-color), var(--info-dark));
    border-color: var(--info-color);
    color: white;
}
.btn-outline-info:active,
.btn-outline-info:focus {
    background-image: linear-gradient(135deg, var(--info-color), var(--info-dark));
    border-color: var(--info-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(23, 162, 184, 0.4);
}

.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-outline-secondary:hover {
    background-image: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    border-color: var(--secondary-color);
    color: white;
}
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
    background-image: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    border-color: var(--secondary-color);
    color: white;
    box-shadow: 0 0 0 0.12rem rgba(149, 165, 166, 0.4);
}

/* Action Button Groups */
.subject-actions,
.classroom-actions,
.level-actions,
.curriculum-actions,
.table-actions,
.teacher-actions {
    display: flex;
    gap: 5px;
}

.subject-actions .btn,
.classroom-actions .btn,
.level-actions .btn,
.curriculum-actions .btn,
.table-actions .btn,
.teacher-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px;
}

/* List Styling */
.card.subject-list,
.card.classroom-list,
.card.level-list,
.card.curriculum-list,
.card.table-list,
.card.teacher-list,
.card.group-list,
.card.special-place-list-card {
    margin-top: 20px;
}

.card.subject-list table td, .card.subject-list table th,
.card.classroom-list table td, .card.classroom-list table th,
.card.level-list table td, .card.level-list table th,
.card.curriculum-list table td, .card.curriculum-list table th,
.card.table-list table td, .card.table-list table th,
.card.teacher-list table td, .card.teacher-list table th,
.card.group-list table td, .card.group-list table th,
.card.special-place-list-card table td, .card.special-place-list-card table th {
    white-space: nowrap !important;
}

/* Empty State Styling */
.subject-empty-state,
.classroom-empty-state,
.level-empty-state,
.curriculum-empty-state,
.table-empty-state {
    text-align: center;
    padding: 30px;
    background-color: var(--light-bg);
    border-radius: 8px;
    margin: 20px 0;
}

.empty-icon {
    font-size: 48px;
    color: var(--icon-color);
    margin-bottom: 15px;
}

/* Reordering Styles */
.sortable-item {
    cursor: move;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #f1f1f1;
}

.handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 0 8px;
}

.handle:hover {
    color: #343a40;
}

.reorder-notice {
    background-color: #e8f4fd;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border-left: 4px solid var(--primary-color);
    font-size: 0.9rem;
}

/* Section Headers */
.educational-level-header, .teacher-overview-header {
    background-color: var(--light-bg);
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 600;
    border-left: 4px solid var(--primary-color);
}

/* Not Found Message */
.not-found-message {
    text-align: center;
    padding: 30px;
    background-color: #fff3cd;
    border-radius: 8px;
    margin: 20px 0;
    border-left: 4px solid var(--warning-color);
}

.not-found-icon {
    font-size: 48px;
    color: var(--warning-color);
    margin-bottom: 15px;
}

/* Form styling */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1rem rgba(52, 152, 219, 0.25);
}

/* Badge styling */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Flag style badges (use with .badge and a contextual .bg-* class)
   Example: <span class="badge bg-primary badge-flag">Label</span> */
.badge-flag {
    --flag-accent: rgba(0,0,0,0.25);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .55rem .35rem .85rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
    border-radius: 4px 0 0 4px !important;
}

/* Leading accent stripe */
.badge-flag::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--flag-accent) !important;
    border-radius: 4px 0 0 4px !important;
}

/* RTL support */
html[dir="rtl"] .badge-flag {
    padding: .35rem .85rem .35rem .55rem;
    border-radius: 0 4px 4px 0 !important;
}
html[dir="rtl"] .badge-flag::before {
    inset: 0 0 0 auto;
    border-radius: 0 4px 4px 0 !important;
}
html[dir="rtl"] .text-lg-end {
    text-align: left !important;
}

/* Accent colors per variant */
.badge-flag.bg-primary   { --flag-accent: var(--primary-darker); }
.badge-flag.bg-success   { --flag-accent: var(--success-darker); }
.badge-flag.bg-danger    { --flag-accent: var(--danger-darker); }
.badge-flag.bg-warning   { --flag-accent: var(--warning-darker); }
.badge-flag.bg-info      { --flag-accent: var(--info-darker); }
.badge-flag.bg-secondary { --flag-accent: var(--secondary-darker); }

/* Hover emphasis (optional when used as link/button) */
a.badge-flag:hover,
button.badge-flag:hover {
    filter: brightness(1.05);
    text-decoration: none;
}

/* Optional outline style usage: badge badge-flag badge-outline */
.badge-flag.badge-outline {
    background: var(--light-bg);
    color: var(--text-muted);
    box-shadow: 0 0 0 1px var(--border-color) inset;
}

/* Alert styling */
.alert-info {
    border-left: 4px solid var(--info-color);
    background-color: #e7f6f8ed;
}

.alert-warning {
    border-left: 4px solid var(--warning-color);
    background-color: #fff3cded;
}

.alert-danger {
    border-left: 4px solid var(--danger-color);
}

.alert-success {
    border-left: 4px solid var(--success-color);
}

/* Table styling */
.table-hover tbody tr:hover {
    background-color: rgba(52, 152, 219, 0.05);
}

/* Modal styling */
.modal-header {
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
    color: white;
}

[dir="rtl"] .modal-header {
    background-image: linear-gradient(-135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
}

.modal-header .btn-close {
    color: white;
    margin: 0px !important;
    color: var(--icon-color) !important;
    top: 0px !important;
}

/* Delete confirmation styling */
.delete-warning-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 20px;
}

/* Classroom info bar */
.classroom-info {
    border-radius: 5px !important;
}

/* Background Styles */
.bg-warning {
    background-image: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-warning {
    background-image: linear-gradient(-135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%) !important;
}

.bg-info {
    background-image: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-info {
    background-image: linear-gradient(-135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%) !important;
}

.bg-danger {
    background-image: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-danger {
    background-image: linear-gradient(-135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%) !important;
}

.bg-success {
    background-image: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-success {
    background-image: linear-gradient(-135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%) !important;
}

.bg-secondary {
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-secondary {
    background-image: linear-gradient(-135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
}

.bg-primary {
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .bg-primary {
    background-image: linear-gradient(-135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%) !important;
}

/* Text Color Styles */
.text-primary {
    color: var(--primary-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-primary-dark {
    color: var(--primary-dark) !important;
}
.text-info-dark {
    color: var(--info-dark) !important;
}
.text-success-dark {
    color: var(--success-dark) !important;
}
.text-danger-dark {
    color: var(--danger-dark) !important;
}
.text-warning-dark {
    color: var(--warning-dark) !important;
}
.text-secondary-dark {
    color: var(--secondary-dark) !important;
}

.text-primary-darker {
    color: var(--primary-darker) !important;
}
.text-info-darker {
    color: var(--info-darker) !important;
}
.text-success-darker {
    color: var(--success-darker) !important;
}
.text-danger-darker {
    color: var(--danger-darker) !important;
}
.text-warning-darker {
    color: var(--warning-darker) !important;
}
.text-secondary-darker {
    color: var(--secondary-darker) !important;
}


/* Badge Styles */
.badge.bg-success {
    background-image: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-success {
    background-image: linear-gradient(-135deg, var(--success-color) 0%, var(--success-dark) 50%, var(--success-darker) 100%) !important;
}

.badge.bg-warning {
    background-image: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-warning {
    background-image: linear-gradient(-135deg, var(--warning-color) 0%, var(--warning-dark) 50%, var(--warning-darker) 100%) !important;
}

.badge.bg-danger {
    background-image: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-danger {
    background-image: linear-gradient(-135deg, var(--danger-color) 0%, var(--danger-dark) 50%, var(--danger-darker) 100%) !important;
}

.badge.bg-info {
    background-image: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-info {
    background-image: linear-gradient(-135deg, var(--info-color) 0%, var(--info-dark) 50%, var(--info-darker) 100%) !important;
}

.badge.bg-secondary {
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-secondary {
    background-image: linear-gradient(-135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
}

.badge.bg-secondary {
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-secondary {
    background-image: linear-gradient(-135deg, var(--secondary-color) 0%, var(--secondary-dark) 50%, var(--secondary-darker) 100%) !important;
}

.badge.bg-primary {
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%) !important;
    color: white;
}

[dir="rtl"] .badge.bg-primary {
    background-image: linear-gradient(-135deg, var(--primary-color) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%) !important;
}


/* Select2 */
.select2-selection__clear {
    display: none !important;
}

/* Colors */
.select2-selection--single .select2-selection__rendered {
    color: var(--text-muted) !important;
}
.select2-selection--single .select2-selection__arrow {
    color: var(--text-muted) !important;
}
.select2-selection--single {
    border: 1px solid var(--border-color) !important;
    border-radius: 5px !important;
    background-color: var(--light-bg) !important;
    padding: 5px 10px !important;
}

.select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

.select2-selection--multiple .select2-selection__choice {
    background-color: #2ecc71 !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
}

.select2-selection__choice__remove {
    color: rgb(255, 0, 0) !important;
    margin: 0px 5px !important;
}

/* Users Related */
.text-male {
    color: #1596AA !important;
}
.text-female {
    color: #e83e8c !important;
}

/* Line Heights */
.line-height-1 {
    line-height: 1 !important;
}

.line-height-2 {
    line-height: 1.33 !important;
}

.line-height-3 {
    line-height: 1.5 !important;
}
.line-height-4 {
    line-height: 1.66 !important;
}
.line-height-5 {
    line-height: 2 !important;
}

/* .Button groups for bootstrap5 ".btn-group" cuzstomization to support  html[dir="rtl"] */
html[dir="rtl"] .btn-group > .btn:not(:first-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
html[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* First child btn borders */
html[dir="rtl"] .btn-group > .btn:first-child {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Last child btn borders */
html[dir="rtl"] .btn-group > .btn:last-child:not(.dropdown-toggle) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0.25rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ar-text-left */
html[dir="rtl"] .ar-text-left {
    text-align: left !important;
}

/* Custom font sizes */
.fw-9-rem {
    font-size: .9rem !important;
}

/* Icon Stack */

/* Stacked composite icon (adjusted: smaller overlay + slightly lower position) */
.icon-stack { position:relative; width:1.25rem; height:1.05rem; display:inline-flex; align-items:center; justify-content:center; }
.icon-stack .icon-base { font-size:1rem; }

/* Reduced-size circular overlay, moved a bit lower */
.icon-stack .icon-overlay {
    position:absolute;
    bottom:-0.28rem; /* moved slightly down */
    inset-inline-end:-0.28rem;
    font-size:.50rem; /* slightly smaller glyph */
    background:var(--sp-sidebar-bg);
    border-radius:50%;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:.85rem;   /* reduced circle size (less "padding") */
    height:.85rem;
    padding:0;      /* keep internal padding minimal */
    box-shadow: none; /* remove heavy ring to keep overlay visually compact */
}

/* RTL base overlay adjustment */
html[dir="rtl"] .icon-stack .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.28rem; }

/* sizes classes for icon stack (overlay sizes reduced and nudged down) */
.icon-stack.icon-sm { width:1rem; height:.85rem; }
.icon-stack.icon-sm .icon-base { font-size:.8rem; }
.icon-stack.icon-sm .icon-overlay {
    font-size:.40rem;
    width:.7rem;
    height:.7rem;
    padding:0;
    bottom:-0.20rem;         /* a bit lower */
    inset-inline-end:-0.12rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-lg { width:1.5rem; height:1.25rem; }
.icon-stack.icon-lg .icon-base { font-size:1.2rem; }
.icon-stack.icon-lg .icon-overlay {
    font-size:.60rem;
    width:.95rem;
    height:.95rem;
    padding:0;
    bottom:-0.32rem;
    inset-inline-end:-0.32rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-xl { width:1.75rem; height:1.45rem; }
.icon-stack.icon-xl .icon-base { font-size:1.4rem; }
.icon-stack.icon-xl .icon-overlay {
    font-size:.70rem;
    width:1.05rem;
    height:1.05rem;
    padding:0;
    bottom:-0.36rem;
    inset-inline-end:-0.36rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-2xl { width:2rem; height:1.65rem; }
.icon-stack.icon-2xl .icon-base { font-size:1.6rem; }
.icon-stack.icon-2xl .icon-overlay {
    font-size:.85rem;
    width:1.2rem;
    height:1.2rem;
    padding:0;
    bottom:-0.40rem;
    inset-inline-end:-0.40rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-3xl { width:2.25rem; height:1.85rem; }
.icon-stack.icon-3xl .icon-base { font-size:1.8rem; }
.icon-stack.icon-3xl .icon-overlay {
    font-size:1rem;
    width:1.3rem;
    height:1.3rem;
    padding:0;
    bottom:-0.44rem;
    inset-inline-end:-0.44rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-4xl { width:2.5rem; height:2.05rem; }
.icon-stack.icon-4xl .icon-base { font-size:2rem; }
.icon-stack.icon-4xl .icon-overlay {
    font-size:1.15rem;
    width:1.45rem;
    height:1.45rem;
    padding:0;
    bottom:-0.48rem;
    inset-inline-end:-0.48rem;
    display:inline-flex; align-items:center; justify-content:center;
}

.icon-stack.icon-5xl { width:2.75rem; height:2.25rem; }
.icon-stack.icon-5xl .icon-base { font-size:2.2rem; }
.icon-stack.icon-5xl .icon-overlay {
    font-size:1.3rem;
    width:1.6rem;
    height:1.6rem;
    padding:0;
    bottom:-0.52rem;
    inset-inline-end:-0.52rem;
    display:inline-flex; align-items:center; justify-content:center;
}

/* RTL overrides for the size-specific overlay offsets (keeps the same downward nudge) */
html[dir="rtl"] .icon-stack.icon-sm .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.12rem; }
html[dir="rtl"] .icon-stack.icon-lg .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.32rem; }
html[dir="rtl"] .icon-stack.icon-xl .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.36rem; }
html[dir="rtl"] .icon-stack.icon-2xl .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.40rem; }
html[dir="rtl"] .icon-stack.icon-3xl .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.44rem; }
html[dir="rtl"] .icon-stack.icon-4xl .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.48rem; }
html[dir="rtl"] .icon-stack.icon-5xl .icon-overlay { inset-inline-end:auto; inset-inline-start:-0.52rem; }

/* borders */
.border-none {
    border: none !important;
}

.visually-hidden {
    visibility: hidden !important;
}

.btn-smaller {
    padding: .15rem .5rem !important;
    font-size: .875rem !important;
    border-radius: .2rem !important;
}

/* input-group class customization on rtl html */
html[dir="rtl"] .input-group > .form-control:not(:first-child),
html[dir="rtl"] .input-group > .btn:not(:first-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
html[dir="rtl"] .input-group > .form-control:not(:last-child),
html[dir="rtl"] .input-group > .btn:not(:last-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* First child input/button borders */
html[dir="rtl"] .input-group > .form-control:first-child,
html[dir="rtl"] .input-group > .btn:first-child {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Last child input/button borders */
html[dir="rtl"] .input-group > .form-control:last-child,
html[dir="rtl"] .input-group > .btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0.25rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* RTL: margin padding utilities */
/* Swap margin-start (ms-*) and margin-end (me-*) for RTL */
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* Swap padding-start (ps-*) and padding-end (pe-*) for RTL */
html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }


.main-content > .container, .main-content > .container-fluid {
    padding-bottom: 12rem !important;
    max-width: 92vw;
}

@media (max-width: 1365.98px) {
    .main-content > .container, .main-content > .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 95vw !important;
    } 
}

@media (max-width: 767.98px) {
    .main-content > .container, .main-content > .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 95vw !important;
    }
}

@media (max-width: 575.98px) {
    .main-content > .container, .main-content > .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 95vw !important;
    }
}