/* ------------------------------
   Theme variables
   ------------------------------ */
:root {
   /* Header */
   --header-bg: #f1f5f9;
   --header-text: #1f2937;
   --header-border: #e2e8f0;
   --header-btn-text: #1f2937;
   --header-btn-border: #d1d5db;
   --header-btn-border-hover: #94a3b8;
   --header-btn-hover-bg: #e2e8f0;

   /* Notifications */
   --notif-bg: #f1f5f9;
   --notif-text: #111827;
   --notif-border: #e5e7eb;
   --notif-hover-bg: #e5e7eb;

   /* Opt out of auto theme switching */
   color-scheme: light;

   --search-max: 600px;
   --home-content-max: 1500px;
}









/* ------------------------------
   Basics / utilities
   ------------------------------ */
.mainProjButton {
   display: inline-block;
   width: 250px;
}

.goback {
   margin: 5px;
   padding: 3px;
   background-color: rgb(162, 200, 216);
}

.header-img {
   max-width: 30% !important;
   height: auto !important;
   margin-bottom: 20px !important;
}

.row .roww {
   /* .roww utile?? */
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.green-border {
   border: 2px solid #3D7256 !important;
}

/* Accessibility helpers */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}









/* ------------------------------
   Components
   ------------------------------ */

/* Projects' cards */
.card {
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 20px;
}

.card-title,
.card-title-home {
   font-size: 1.5rem;
   margin-bottom: 10px;
}

.card-title:hover {
   color: #00b4cc;
}

.badge {
   font-size: 1rem;
   padding: 10px;
}

/* Discussions and topics */
.code-bg {
   background-color: #C5C6D0 !important;
}

.add-comm-disc-bg {
   background-color: #e5e5e5 !important;
}

.img-fluid.my-2 {
   display: block;
   margin: 12px 0;
}

.comment-thread {
   width: 100%;
   margin-bottom: 1rem;
}

.reply-form-container {
   width: 100%;
}

/* Project list thumbnail */
.project-thumb {
   width: 120px;
   height: 120px;
   overflow: hidden;
   flex: 0 0 120px;
   border: 0;
   background: transparent;
}

.project-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}









/* ------------------------------
   Header
   ------------------------------ */
.brand-logo {
   height: 55px;
   width: auto;
   display: block;
}

.header-actions {
   gap: .5rem;
}

/* Header button style */
.btn-header {
   color: var(--header-btn-text) !important;
   border-color: var(--header-btn-border) !important;
   background: transparent !important;
   font-size: 1rem !important;
   padding: .55rem .9rem !important;
   line-height: 1.25 !important;
   border-width: 1px !important;
   border-radius: .5rem !important;
}

.btn-header:hover,
.btn-header:focus {
   background: var(--header-btn-hover-bg) !important;
   color: var(--header-btn-text) !important;
   border-color: var(--header-btn-border-hover) !important;
}

.app-header {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 1040;
   /* above content, below dropdown (1050) */
   background-color: var(--header-bg) !important;
   color: var(--header-text) !important;
   border-bottom: 1px solid var(--header-border);
}

.app-header .navbar-text {
   font-size: 1.05rem;
   font-weight: 500;
}

.app-header .navbar-text,
.app-header a,
.app-header i {
   color: var(--header-text) !important;
}

.app-header :is(.btn, .btn-header, .btn-outline-secondary, .btn-primary) {
   transition: transform .08s ease, box-shadow .16s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
   will-change: transform, box-shadow;
}

.app-header :is(.btn, .btn-header, .btn-outline-secondary, .btn-primary):hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 22px rgba(2, 6, 23, .12);
}

.app-header :is(.btn, .btn-header, .btn-outline-secondary, .btn-primary):active {
   transform: translateY(0);
   box-shadow: 0 4px 10px rgba(2, 6, 23, .12);
}









/* ------------------------------
   Notifications
   ------------------------------ */
.notification-container {
   position: relative;
}

.notification-dropdown {
   position: absolute;
   top: calc(100% + .5rem);
   right: 0;
   display: none;
   width: 360px;
   /* final chosen width */
   max-height: 70vh;
   /* final chosen height */
   overflow: hidden;
   /* wrapper controls overflow */
   z-index: 1050;
   background-color: var(--notif-bg);
   color: var(--notif-text);
   border: 1px solid var(--notif-border);
   border-radius: .5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   padding: .5rem;
}

.notification-dropdown a {
   color: var(--notif-text) !important;
}

.notification-list-container {
   overflow-y: auto;
   padding-right: .25rem;
   max-height: 360px;
}

.notification-link {
   padding: .5rem .65rem;
   border-radius: .5rem;
   color: #111827;
}

.notification-link:hover {
   background: #f8fafc;
}

.notification-link:active {
   background: #eef2ff;
}

.notification-item {
   color: var(--notif-text);
   text-decoration: none;
   display: block;
   padding: 5px;
   border-bottom: 1px solid var(--notif-border);
   padding-bottom: 8px;
   margin-bottom: 8px;
}

.notification-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
}

.notification-item a:hover {
   background-color: var(--notif-hover-bg);
   border-radius: 4px;
}

.notification-container .notification-item-block {
   margin-bottom: 10px;
}

.notif-icon i {
   font-size: 1rem;
   line-height: 1;
}

.notif-comment {
   background: #e7f0ff;
}

/* blue-tinted */
.notif-new {
   background: #eaf7ee;
}

/* green-tinted */
.notif-user {
   background: #fff3e6;
}

/* orange-tinted */
.notif-discussion {
   background: #f1eafe;
}

/* purple-tinted */
.notif-generic {
   background: #f3f4f6;
}

.notification-empty {
   color: #6b7280;
}









/* ------------------------------
   Home page (home.php only)
   ------------------------------ */
.home-hero {
   max-width: var(--home-content-max);
   width: auto;
   margin: 0 auto;
   background:
      radial-gradient(900px 360px at 95% -10%, rgba(0, 4, 250, 0.06), transparent 60%),
      linear-gradient(180deg, #f8fafc 0%, #ffffff 70%);
   border: 1px solid rgba(2, 6, 23, .08);
   border-radius: 1px;
   padding: 16px 18px 12px;
   box-shadow: 0 12px 30px rgba(2, 6, 23, .06);
   border-radius: 14px;
}

.home-main {
   display: flex;
   justify-content: center;
}

.home-main>.row {
   width: 100%;
   max-width: var(--home-content-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: clamp(1rem, 3vw, 2rem);
   padding-right: clamp(1rem, 3vw, 2rem);
}

.home-main-section {
   width: 100%;
   max-width: var(--home-content-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: 0;
   padding-right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.home-projects-wrapper {
   width: 100%;
   margin-left: 0;
   margin-right: 0;
}

.home-projects-row {
   justify-content: center;
   width: 100%;
   max-width: var(--home-content-max);
   margin-left: auto;
   margin-right: auto;
}

.home-project-card-col {
   width: 100%;
   max-width: var(--home-content-max);
   margin-left: auto;
   margin-right: auto;
}

.home-title {
   letter-spacing: .1px;
   margin-bottom: .25rem !important;
}

.home-title+p span {
   display: inline-flex;
   align-items: center;
   padding: .2rem .6rem;
   border-radius: 999px;
   background: #eef2f7;
   color: #475569;
   font-weight: 500;
}

.home-controls {
   background: #ffffff60;
   border: 1px solid var(--header-border);
   border-radius: 12px;
   padding: .5rem .75rem;
}

.home-card {
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
   transition: box-shadow .2s ease, transform .1s ease;
}

.home-card:hover {
   box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
   transform: translateY(-1px);
}

.search-panel {
   background: transparent;
   padding: 12px;
   border-radius: 16px;
   box-shadow: 0 8px 24px rgba(2, 6, 23, .05);
   backdrop-filter: saturate(1.05) blur(2px);
   max-width: var(--search-panel-max);
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.search-form {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: .75rem;
}

@media (min-width: 768px) {
   .search-form {
      grid-template-columns: minmax(420px, var(--search-max)) auto;
   }
}

.search-form>.d-flex {
   justify-self: end;
}

@media (max-width: 767.98px) {
   .home-hero {
      padding: 10px 8px 4px;
      border-radius: 10px;
   }
}

.search-input-wrap {
   display: flex;
   align-items: center;
   gap: .5rem;
   border: 1px solid #d1d5db;
   border-radius: 999px;
   padding: .25rem .25rem .1rem .3rem;
   background: #fff;
   transition: border-color .15s ease, box-shadow .15s ease;
   box-shadow: 0 2px 8px rgba(2, 6, 23, .04);
   left: 1cm;
}

.search-input-wrap:focus-within {
   border-color: #94a3b8;
   box-shadow: 0 0 0 4px rgba(148, 163, 184, .25);
}

.search-input-wrap:hover {
   box-shadow: 0 4px 14px rgba(2, 6, 23, .08);
}

.search-icon {
   font-size: 1.1rem;
   opacity: .65;
}

.search-input {
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   background: transparent !important;
   width: 100%;
   font-size: .95rem;
}

.search-input::placeholder {
   color: #6b7280;
}

.search-submit {
   border-radius: 999px;
   padding: .5rem 1rem;
   background-color: #3D7256 !important;
   border-color: #3D7256 !important;
   color: #fff !important;
}

.search-submit:hover {
   filter: brightness(1.05);
}

.search-submit:focus {
   outline: 3px solid rgba(61, 114, 86, .35);
   outline-offset: 2px;
}

.select-pill {
   border-radius: 999px;
   padding: .45rem .75rem;
}

.search-btn-icon {
   background: none;
   border: none;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   color: inherit;
   font-size: 1rem;
   margin-left: 0.5rem;
}

.search-btn-icon:focus {
   outline: 3px solid rgba(100, 150, 255, 0.6);
   outline-offset: 2px;
   border-radius: 4px;
}

#sort_by.select-pill {
   min-width: 8rem;
}

/* ------------------------------
   Project stat badges (homepage)
   ------------------------------ */
.project-stat-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
   padding: 0.25rem 0.6rem;
   border-radius: 999px;
   font-size: 0.8rem;
   font-weight: 500;
   color: #6b7280;
   background: #f3f4f6;
   border: 1px solid #e5e7eb;
   transition: all 0.2s ease;
}

.project-stat-badge i {
   font-size: 0.75rem;
}

.project-stat-badge:hover {
   background: #e5e7eb;
}

.project-like-badge i {
   transition: color 0.2s ease, transform 0.2s ease;
}

.project-like-badge:hover i {
   transform: scale(1.1);
}

/* ------------------------------
   Project category links (left column)
   ------------------------------ */
.project-categories-col {
   min-width: 130px;
   gap: 0.5rem;
}

.project-category-link {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.4rem 0.75rem;
   border-radius: 8px;
   font-size: 0.85rem;
   font-weight: 500;
   color: #4b5563;
   background: #f9fafb;
   border: 1px solid #e5e7eb;
   text-decoration: none;
   transition: all 0.2s ease;
}

.project-category-link:hover {
   background: #eff6ff;
   border-color: #3b82f6;
   color: #2563eb;
   text-decoration: none;
   transform: translateX(2px);
}

.project-category-link i {
   font-size: 0.9rem;
   color: #6b7280;
   transition: color 0.2s ease;
}

.project-category-link:hover i {
   color: #3b82f6;
}

.project-category-count {
   font-weight: 700;
   color: #1f2937;
   min-width: 1rem;
   text-align: center;
}

/* ------------------------------
   Project meta (author, date)
   ------------------------------ */
.project-meta {
   font-size: 0.875rem;
   color: #6b7280;
}

.project-meta i {
   color: #9ca3af;
}

/* ------------------------------
   Project action buttons
   ------------------------------ */
.project-action-btn {
   padding: 0.35rem 0.75rem;
   font-size: 0.8rem;
   border-radius: 6px;
   font-weight: 500;
   transition: all 0.2s ease;
}

.project-action-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ------------------------------
   Scroll-to-top FAB
   ------------------------------ */
.scroll-top {
   position: fixed;
   left: 15px;
   bottom: 20px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #0d6efd;
   color: #fff;
   border: none;
   box-shadow: 0 12px 28px rgba(13, 110, 253, .35);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
   z-index: 1030;
}

.scroll-top:hover {
   filter: brightness(1.05);
   transform: translateY(6px);
}

.scroll-top:focus {
   outline: 3px solid rgba(13, 110, 253, .35);
   outline-offset: 2px;
}

.scroll-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}









/* ------------------------------
   Authentication pages
   ------------------------------ */
.auth-layout {
   min-height: 100vh;
   background: linear-gradient(160deg, #f8fafc 0%, #eef5ff 45%, #fdf2f8 100%);
}

.auth-wrapper {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem 1.5rem;
}

.auth-card {
   position: relative;
   width: 100%;
   max-width: 490px;
   border: 1px solid #dce6f6;
   border-radius: 20px;
   box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16);
   overflow: hidden;
   background: #ffffff;
}

.auth-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 8px;
   background: linear-gradient(90deg, #0d6efd 0%, #1f7a9b 45%, #3D7256 100%);
   pointer-events: none;
}

.auth-card .card-body {
   padding: 3rem 2.5rem !important;
}

.auth-brand-mark {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   margin: 0 auto 1.25rem;
   font-size: 1.65rem;
   font-weight: 700;
   letter-spacing: .08em;
   color: #0f172a;
   background: linear-gradient(145deg, rgba(13, 110, 253, .12), rgba(61, 114, 86, .85));
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.auth-subtitle {
   color: #64748b !important;
}

.auth-card header {
   color: #0f172a;
}

.auth-card .form-label {
   font-weight: 600;
   color: #1f2937;
}

.auth-form {
   max-width: 320px;
   margin-left: auto;
   margin-right: auto;
}

.auth-form .form-control {
   border-radius: .75rem;
   border-color: #cbd5f5;
   padding: .7rem .95rem;
   box-shadow: none;
}

.auth-form .form-control:focus {
   border-color: #0d6efd;
   box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.15);
}


label .required-indicator {
   color: #dc2626;
   margin-left: .25rem;
   font-weight: 600;
}

.password-field {
   position: relative;
   display: flex;
   align-items: center;
}

.password-field .form-control {
   padding-right: 3.25rem;
}

.password-toggle-btn {
   position: absolute;
   right: 1.4rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2rem;
   height: 2rem;
   border: none;
   background: transparent;
   color: #64748b;
   cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
   color: #0d6efd;
}

.password-toggle-btn svg {
   width: 1.2rem;
   height: 1.2rem;
}

.password-toggle-btn[aria-pressed="true"] {
   color: #0d6efd;
}

.form-required-note {
   display: inline-flex;
   align-items: baseline;
   gap: .35rem;
   margin: 1.25rem 0 0;
   font-size: .875rem;
   color: #475569;
}

.form-required-note .required-indicator {
   font-size: .9rem;
   color: #dc2626;
}

.form-required-note em {
   font-style: italic;
}

.auth-card .btn-primary {
   border-radius: .75rem;
   padding: .75rem 1rem;
   font-weight: 600;
   box-shadow: 0 10px 18px rgba(13, 110, 253, 0.18);
}

.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus {
   box-shadow: 0 14px 24px rgba(13, 110, 253, 0.22);
}

.auth-note {
   color: #5b6b7a;
   line-height: 1.5;
}

.auth-note a {
   color: #0d6efd;
}

@media (min-width: 768px) {
   .auth-card .card-body {
      padding: 3.25rem 3rem !important;
   }
}











/* ------------------------------
   Settings page
   ------------------------------ */
.settings-body {
   background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
   min-height: 100vh;
}

.settings-page {
   max-width: 1100px;
}

.settings-header {
   border-bottom: 1px solid #e2e8f0;
   padding-bottom: 1.25rem;
}

.settings-title {
   font-size: 2.125rem;
   font-weight: 700;
   color: #1f2937;
}

.settings-back-link {
   font-weight: 600;
   color: #2563eb;
}

.settings-back-link:hover,
.settings-back-link:focus {
   color: #1d4ed8;
   text-decoration: none;
}

.settings-meta {
   color: #475569;
   font-size: .95rem;
}

.settings-meta-item strong {
   color: #1f2937;
}

.settings-nav {
   background: #fff;
   border-radius: 1.2rem;
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
   position: sticky;
   top: 1.5rem;
}

.settings-nav .card-body {
   padding: 1.75rem 1.5rem;
}

.settings-nav-title {
   letter-spacing: .08em;
   font-weight: 700;
}

.settings-nav-caption {
   font-size: .9rem;
   color: #64748b;
}

.settings-sidebar {
   display: flex;
   flex-direction: column;
   align-items: stretch;
}

.settings-sidebar>*+* {
   margin-top: 1.5rem;
}

.settings-nav-actions {
   margin-top: 1.75rem;
   padding-top: 1.25rem;
   border-top: 1px solid #e2e8f0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.settings-nav-actions-text {
   font-size: .9rem;
   color: #475569;
}

.settings-nav-buttons {
   display: flex;
   align-items: center;
   gap: .75rem;
}

.settings-nav-buttons .btn {
   flex: 1 1 auto;
}


.settings-toggle-group {
   display: inline-flex;
   gap: .5rem;
   padding: .35rem;
   border-radius: 999px;
   background-color: #e2e8f0;
   position: relative;
}

.settings-toggle-option {
   border: none;
   border-radius: 999px;
   padding: .4rem 1.2rem;
   background-color: transparent;
   color: #1f2937;
   font-weight: 600;
   transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
   cursor: pointer;
}

.settings-toggle-option:hover {
   background-color: rgba(255, 255, 255, 0.7);
}

.settings-toggle-option.is-active {
   background-color: #fff;
   color: #2563eb;
   box-shadow: 0 10px 16px rgba(37, 99, 235, 0.22);
}

.settings-toggle-option:focus-visible {
   outline: 3px solid rgba(37, 99, 235, 0.4);
   outline-offset: 2px;
}
.settings-toggle-note {
   margin-top: .75rem;
   font-size: .85rem;
   color: #64748b;
}

.settings-tabs {
   display: flex;
   flex-direction: column;
   gap: .75rem;
}

.settings-tab {
   position: relative;
   border-radius: 1rem;
   padding: .85rem 1.1rem .85rem 3.25rem;
   border: 1px solid #e2e8f0;
   background: #f8fafc;
   color: #1f2937;
   font-weight: 600;
   transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.settings-tab::before {
   content: '';
   position: absolute;
   inset-inline-start: 1.25rem;
   top: 50%;
   width: .65rem;
   height: .65rem;
   border-radius: 50%;
   background: #cbd5f5;
   transform: translateY(-50%);
   transition: background-color .2s ease;
}

.settings-tab.is-active {
   background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
   color: #fff;
   border-color: transparent;
   box-shadow: 0 18px 36px rgba(37, 99, 235, 0.35);
}

.settings-tab.is-active::before {
   background: #fff;
}

.settings-tab:hover {
   background: #e8f1ff;
   border-color: #bfdbfe;
   transform: translateY(-1px);
}

.settings-tab:focus-visible {
   outline: 3px solid rgba(37, 99, 235, .45);
   outline-offset: 2px;
}

.settings-tab-label {
   display: flex;
   align-items: center;
   gap: .35rem;
}

.settings-panels .card {
   border: none;
   border-radius: 1.4rem;
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
   margin-bottom: 1.5rem;
   overflow: hidden;
   transition: transform .2s ease;
}

.settings-panel .card-body {
   padding: 2.25rem 2.2rem;
}

.settings-panel.is-active .card-body,
.settings-panel:not(.is-active):hover .card-body {
   background: #fff;
}

.settings-form {
   padding-bottom: 7rem;
}

.settings-error-summary {
   border-radius: 1rem;
   font-weight: 600;
   box-shadow: 0 16px 36px rgba(220, 38, 38, 0.18);
   margin-bottom: 1.5rem;
}

.settings-field-error {
   font-size: .875rem;
   position: relative;
   padding-left: 1.5rem;
   display: none;
}

.settings-field-error.d-block {
   display: block;
}

.settings-field-error::before {
   content: "!";
   position: absolute;
   inset-inline-start: 0;
   top: .05rem;
   width: 1.1rem;
   height: 1.1rem;
   border-radius: 50%;
   background-color: #dc2626;
   color: #fff;
   font-size: .75rem;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.settings-field-error.d-block::before {
   animation: settings-error-pop .18s ease-out;
}

@keyframes settings-error-pop {
   0% {
      transform: scale(.6);
      opacity: .4;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

@media (max-width: 991.98px) {
   .settings-layout>.col-12:first-child {
      order: 2;
   }

   .settings-layout>.col-12:last-child {
      order: 1;
   }

   .settings-nav .card-body {
      padding: 1.25rem;
   }

   .settings-tabs {
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: .5rem;
      padding-bottom: .5rem;
   }

   .settings-tab {
      flex: 1 0 auto;
      min-width: 170px;
      padding-inline-start: 2.75rem;
   }
}

@media (max-width: 767.98px) {
   .settings-panel .card-body {
      padding: 1.75rem;
   }

   .settings-sticky-inner {
      padding: 1rem;
      flex-direction: column;
      align-items: stretch;
   }

   .settings-sticky-actions {
      width: 100%;
      justify-content: flex-end;
   }
}

@media (max-width: 575.98px) {
   .settings-form {
      padding-bottom: 9rem;
   }

   .settings-nav-buttons {
      flex-direction: column;
      gap: .5rem;
   }

   .settings-nav-buttons .btn {
      width: 100%;
   }
}





.settings-toggle-enhanced select {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

[data-toggle-root]:not(.settings-toggle-enhanced) .settings-toggle-group {
   display: none;
}

[data-toggle-root]:not(.settings-toggle-enhanced) select {
   display: block;
}