/* ==========================================================================
   SharePoint chrome / default UI overrides
   ========================================================================== */
   #contentRow {
    padding-top: 0px !important;
}

#s4-workspace {
    height: 100vh !important;
    width: 100% !important;
}

#notificationArea, #DeltaPageStatusBar, #pageStatusBar {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#s4-titlerow, #titleAreaBox, #titleAreaRow, #DeltaTopNavigation, #DeltaPlaceHolderSearchArea, #DeltaPlaceHolderPageTitleInTitleArea, #DeltaPlaceHolderPageDescription, #DeltaPlaceHolderGroupActionsArea {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Breadcrumb / table leftovers */
.ms-breadcrumb-box, .ms-tableCell, .ms-core-tableNoSpace {
    display: none !important;
}

/* Hide SharePoint default navigation and side panel */
#SearchBox, .ms-srch-sbLarge, #DeltaTopNavigation, #DeltaSiteLogo, #DeltaTopNavigationMenu, #DeltaSuiteLinks, #RibbonContainer, #s4-ribbonrow, #pageTitle, #DeltaSiteName, #titleAreaBox, #siteIcon, #sideNavBox, #topNavBox, #suiteBarDelta {
    display: none !important;
}

#s4-bodyContainer, #contentBox {
    margin-top: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: unset !important;
}

button {
    min-width: auto !important;
}

a {
    color: #161616;
}

a:hover {
    color: inherit;
}

a:focus {
    outline: none;
}

a:focus-visible:not(.btn):not(.nav-link):not(.email-btn) {
    outline: 3px solid #161616;
    outline-offset: 2px;
    border-radius: 0;
}

footer a:focus-visible:not(.btn):not(.nav-link):not(.email-btn) {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

body.dark-theme a:focus-visible:not(.btn):not(.nav-link):not(.email-btn) {
    outline-color: #ffffff;
    color: #ffffff;
}

.custom-rich-editor-render ul {
    list-style-type: disc !important;
}

html, body {
    margin: 0;
    padding: 0;
    text-align: unset !important;
    /* direction: rtl; */
}

/* ==========================================================================
   Site header / top banner
   ========================================================================== */
.header {
    display: block;
    width: 100%;
}

.top-banner {
    width: 100%;
    background-color: #f3f4f6;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    cursor: pointer;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #161616;
    font-weight: 500;
}

.saudi-flag {
    width: 28px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #15803d;
}

.flag-top {
    width: 16px;
    height: 8px;
}

.flag-bottom {
    width: 14px;
    height: 6px;
}

.verify-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #1b8354;
    font-weight: 400;
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.arrow-icon.rotated {
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-panel {
    width: 100%;
    background-color: #f3f4f6;
    padding: 24px 80px 32px;
}

.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.panel-column {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.icon-circle {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #067647;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #067647;
    font-size: 20px;
}

.icon-circle span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: start;
}

.column-title {
    font-weight: 600;
    color: #161616;
    font-size: 18px;
    margin: 0;
}

.highlight {
    color: #067647;
}

.column-desc {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    margin: 0;
}

.registration-box {
    width: 100%;
    background-color: white;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dga-logo {
    width: 32px;
    height: 32px;
}

.registered-text {
    font-size: 14px;
    color: #161616;
    font-weight: 500;
}

.registration-number {
    color: #1b8354;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
}

.top-info-bar {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    border-top: 1px solid #d2d6db;
    background-color: #f3f4f6;
}

.info-left {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    color: #384250;
}

.weather-info, .location-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.weather-icon, .location-icon {
    font-size: 16px;
}

.theme-toggle-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    background: none;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    outline: none;
    padding: 0 !important;
    min-width: unset !important;
}

.theme-toggle-btn:hover {
    border: none;
    background: none;
}

/* .theme-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px #25935f;
    border-color: #25935f;
} */
.theme-icon-svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease-in-out;
}

.theme-toggle-btn:hover .theme-icon-svg {
    transform: scale(1.1);
}

/* ==========================================================================
   Main navbar
   ========================================================================== */
.main-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: white;
    height: 72px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.logo-img {
    width: auto;
    height: 48px;
    object-fit: contain;
}

.logo-img-dark {
    display: none;
}

body.dark-theme .logo-img-light {
    display: none;
}

body.dark-theme .logo-img-dark {
    display: block;
}

.logo-text-container {
    display: flex;
    flex-direction: column;
    margin-inline-start: 8px; gap: 4px;
}

.logo-text {
    color: #161616;
    font-size: 16px;
    line-height: 1.5;
}

.logo-text-sub, .mobile-logo-text-sub {
    color: #161616;
    font-size: 12px;
    line-height: 1.333;
}

.desktop-nav {
    display: none;
    color: #161616;
    font-weight: 500;
    font-size: 16px;
    height: 100%;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.nav-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    width: auto;
    height: 6px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    pointer-events: none;
}

.nav-item:hover:not(.nav-item--selected), .nav-item--open:not(.nav-item--selected), .nav-item:has(.nav-link:focus-visible):not(.nav-item--selected) {
    background-color: #f0f2f5;
}

.nav-item:hover:not(.nav-item--selected)::after, .nav-item--open:not(.nav-item--selected)::after, .nav-item:has(.nav-link:focus-visible):not(.nav-item--selected)::after {
    opacity: 1;
    background-color: #9da4ae;
}

.nav-item:has(.nav-link:focus-visible):not(.nav-item--selected) {
    outline: none !important;
}

.nav-item:has(.nav-link:focus-visible):not(.nav-item--selected)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border: 2px solid var(--color-text-primary);
    border-radius: 4px;
}

.nav-item:has(.nav-link:active):not(.nav-item--selected) {
    background-color: #e5e7eb;
}

.nav-item:has(.nav-link:active):not(.nav-item--selected)::after {
    opacity: 1;
    background-color: #1f2a37;
}

.nav-item--selected {
    background-color: #1b8354;
}

.nav-item--selected::after {
    opacity: 1;
    background-color: #6dd49b;
}

.nav-item--selected:hover {
    background-color: #166a45;
}

.nav-item--selected:hover::after {
    opacity: 1;
    background-color: #6dd49b;
}

.nav-item--selected:has(.nav-link:active) {
    background-color: #0b3b24;
}

.nav-item--selected:has(.nav-link:active)::after {
    opacity: 1;
    background-color: #6dd49b;
}

.nav-item--selected:has(.nav-link:focus-visible) {
    background-color: #1b8354;
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #161616;
}

.nav-item--selected:has(.nav-link:focus-visible)::after {
    opacity: 1;
    background-color: #6dd49b;
}

.nav-item--selected .nav-link, .nav-item--selected .nav-link:visited, .nav-item--selected .nav-link:hover, .nav-item--selected .nav-link:active, .nav-item--selected .nav-link:focus-visible {
    color: #ffffff;
    outline: none;
    background-color: transparent;
}

.nav-link {
    position: relative;
    z-index: 1;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #161616;
    transition: color 0.2s;
    height: 100%;
    width: 100%;
}

.nav-link:focus,
.nav-link:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.nav-item:not(.nav-item--selected) .nav-link:focus::before,
.nav-item:not(.nav-item--selected) .nav-link:focus-visible::before,
.nav-item:not(.nav-item--selected) .nav-link:focus::after,
.nav-item:not(.nav-item--selected) .nav-link:focus-visible::after {
    content: none !important;
    display: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nav-link:visited, .nav-btn:visited, .email-btn:visited {
    color: #161616;
}

.dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08), 0 4px 8px rgba(16, 24, 40, 0.04);
    border: none;
    border-radius: 4px;
    padding: 20px 16px;
    min-width: 260px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
}

.dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #1f2a37;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border-radius: 8px !important;
    transition: background-color 0.2s, color 0.2s, text-decoration-color 0.2s;
}

.dropdown-item:hover:not(:active) {
    background-color: #F3F4F6;
    color: #1f2a37;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.dropdown-item:active {
    background-color: #E5E7EB;
    color: #1f2a37;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.navbar-right {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 100%;
}

.nav-btn, .email-btn, .desktop-lang {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    border-radius: 4px;
    transition: background-color 0.2s;
    color: #161616;
    text-decoration: none;
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.search-btn.is-open {
    background-color: #1b8354;
    color: #ffffff;
}

.search-btn.is-open::after {
    opacity: 1;
    background-color: #6dd49b;
}

.search-btn.is-open:hover,
.search-btn.is-open:focus-visible {
    background-color: #166a45;
    color: #ffffff;
}

.search-btn.is-open svg {
    color: #ffffff;
}

/* Portal search panel (below navbar) */
.portal-search-panel {
    width: 100%;
    background-color: #ffffff;
    padding: 40px 80px;
    border-bottom: 1px solid #d2d6db;
}

.portal-search-panel[hidden] {
    display: none !important;
}

.portal-search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.portal-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.portal-search-input-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #161616;
    border-radius: 0 0 4px 4px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
    pointer-events: none;
    z-index: 1;
}

.portal-search-input-wrap:focus-within::after {
    transform: scaleX(1);
}

.portal-search-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #9da4ae;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: #384250;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.portal-search-input::placeholder {
    color: #6c737f;
    opacity: 1;
}

.portal-search-input:hover:not(:focus):not(:disabled) {
    border-color: #384250;
    color: #161616;
}

.portal-search-input:focus {
    outline: none;
    border-color: #9da4ae;
    color: #384250;
    box-shadow: 0 2px 4px -2px #1018280f, 0 4px 8px -2px #1018281a;
}

.portal-search-input:disabled {
    opacity: 0.5;
    color: #9da4ae;
    border-color: #d2d6db;
    background-color: #ffffff;
    cursor: not-allowed;
}

.portal-search-input-wrap:has(.portal-search-input:disabled)::after {
    display: none;
}

.portal-search-suggestions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.portal-search-suggestions[hidden] {
    display: none !important;
}

.portal-search-suggestions-label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6c737f;
    line-height: 1.5;
}

.portal-search-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.portal-search-suggestion-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background-color: #f3f4f6;
    color: #161616;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-search-suggestion-tab:hover {
    background-color: #e5e7eb;
}

.portal-search-suggestion-tab:focus-visible {
    outline: 2px solid #161616;
    outline-offset: 2px;
}

.portal-search-suggestion-tab:active {
    background-color: #d2d6db;
}

.portal-search-suggestion-text {
    white-space: nowrap;
}

.portal-search-suggestion-arrow {
    flex-shrink: 0;
    color: #6c737f;
}

html[dir="ltr"] .portal-search-suggestion-arrow {
    transform: scaleX(-1);
}

.portal-search-submit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 110px;
    height: 40px;
    padding: 0 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .top-banner,
    .top-info-bar{
        padding: 0 20px;
    }

    .portal-search-panel {
        padding: 12px 16px;
    }

    .portal-search-box {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .portal-search-submit {
        width: 100%;
        justify-content: center;
    }
}

.nav-btn::after, .email-btn::after, .desktop-lang::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    width: auto;
    height: 6px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    pointer-events: none;
}

.nav-btn:hover, .email-btn:hover, .desktop-lang:hover, .nav-btn:focus-visible, .email-btn:focus-visible, .desktop-lang:focus-visible {
    background-color: #f0f2f5;
    outline: none;
}

.nav-btn:hover::after, .email-btn:hover::after, .desktop-lang:hover::after, .nav-btn:focus-visible::after, .email-btn:focus-visible::after, .desktop-lang:focus-visible::after {
    opacity: 1;
    background-color: #9da4ae;
}

.nav-btn:active, .email-btn:active, .desktop-lang:active {
    background-color: #e5e7eb;
}

.nav-btn:active::after, .email-btn:active::after, .desktop-lang:active::after {
    opacity: 1;
    background-color: #1f2a37;
}

.desktop-lang {
    display: none;
}

.lang-switch {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #161616;
    display: flex;
    align-items: center;
    height: 100%;
}

.email-btn {
    color: #161616;
}

.desktop-login {
    display: none;
}

.mobile-menu-btn {
    display: block;
    align-self: center;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.mobile-menu-btn:hover {
    background-color: #f3f4f6;
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 60;
    display: none;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 82%;
    max-width: 350px;
    height: 100%;
    background-color: white;
    z-index: 70;
    padding: 20px;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.open {
    right: 0;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-decoration: none;
}

.mobile-logo-img {
    width: auto;
    height: 48px;
    object-fit: contain;
}

.mobile-logo-text {
    color: #6c737f;
    font-weight: 500;
    font-size: 16px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav-item {
    padding: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #161616;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.mobile-nav-item:hover {
    background-color: #f3f4f6;
}

.mobile-nav a:visited{
    color: inherit !important;
}

.mobile-divider {
    margin: 16px 0;
    border-top: 1px solid #e5e7eb;
}

.mobile-lang {
    padding: 8px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.mobile-lang:hover {
    background-color: #f3f4f6;
}

.mobile-login {
    display: flex;
    width: 100%;
    text-align: right;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.nav-item--open .dropdown-arrow {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .main-navbar {
        padding: 0 80px;
    }

    .logo-text {
        font-size: 16px;
    }

    .desktop-lang {
        display: flex;
    }

    .desktop-login {
        display: flex;
    }

    .navbar-right {
        gap: 8px;
    }
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
    }

    .mobile-menu-btn {
        display: none;
    }
}

/* ==========================================================================
   Footer + Feedback
   Feedback + footer layout. Buttons use buttons.css (DGA); no duplicate .btn rules here.
   ========================================================================== */
:root {
    --color-text-primary: #161616;
    --footer-bg: #074d31;
    --footer-text: #ffffff;
    --footer-border: rgba(255, 255, 255, 0.3);
    --footer-link-hover: rgba(255, 255, 255, 0.8);
    --footer-link-active: rgba(255, 255, 255, 0.6);
    --footer-link-visited: rgba(255, 255, 255, 0.9);
    --footer-max-width: 88rem;
    --fb-bg: #ffffff;
    --fb-border: #d2d6db;
    --fb-text: #161616;
    --fb-text-secondary: #384250;
    --fb-muted: #6c737f;
    --fb-primary: #1b8354;
    --fb-primary-hover: #166a45;
    --fb-primary-active: #104631;
    --fb-success: #067647;
    --fb-link: #1b8354;
    --fb-input-border: #9da4ae;
    --fb-control-border: #6c737f;
    --fb-ripple: #f3f4f6;
    --fb-max-width: 88rem;
    --ctrl-border: #6c737f;
    --ctrl-border-hover: #6c737f;
    --ctrl-pressed-bg: #d2d6db;
    --ctrl-primary: #1b8354;
    --ctrl-primary-hover: #14573a;
    --ctrl-primary-pressed: #104631;
    --ctrl-text: #1f2a37;
    --ctrl-focus: #161616;
    --ctrl-icon: #ffffff;
}

.footer-container {
    width: 100%;
}

/* ---------- Feedback widget ---------- */
.footer-feedback {
    width: 100%;
    margin: 0;
    color: var(--fb-text);
}

.feedback-meta {
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: var(--fb-text-secondary);
}

@media (min-width: 768px) {
    .feedback-meta {
        padding-inline: 5rem;
    }
}

.feedback-meta#lastModifiedDateContainer {
    display: none;
}

.feedback-main {
    display: block;
    width: 100%;
    border-top: 1px solid var(--fb-border);
    background: var(--fb-bg);
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .feedback-main {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 768px) {
    .feedback-main {
        padding-inline: 5rem;
    }
}

.feedback-active-wrap[hidden], .feedback-state[hidden], .feedback-form-body[hidden], .feedback-form-reason-stack[hidden], .feedback-close-btn--bar[hidden], .feedback-stat-no-votes[hidden] {
    display: none !important;
}

.feedback-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--fb-max-width);
}

.feedback-question-group {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.feedback-question {
    color: var(--fb-text);
    font-size: 1rem;
    font-weight: 400;
}

.feedback-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.feedback-form-footer button , .feedback-actions button {
    padding: 8px 12px;
}

.feedback-actions .btn.is-selected,
.feedback-actions .btn.is-selected:hover {
    background-color: #104631 !important;
    color: #ffffff !important;
}

body.dark-theme .feedback-actions .btn.is-selected,
body.dark-theme .feedback-actions .btn.is-selected:hover {
    background-color: #104631 !important;
    color: #ffffff !important;
}

.feedback-close-btn--bar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.feedback-close-icon {
    display: inline-flex;
    color: var(--fb-text);
}

.feedback-close-icon svg {
    display: block;
}

/* Form */
.feedback-form-body {
    width: 100%;
    max-width: var(--fb-max-width);
    margin-inline: auto; padding-top: 1rem;
    margin-top: 0.75rem;
    box-sizing: border-box;
}

.feedback-form-content {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .feedback-form-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.feedback-form-column {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.feedback-form-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 16px;
}

.feedback-form-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fb-text);
}

.feedback-form-subtitle {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--fb-muted);
}

/* ---------- Checkbox + Radio — hover / pressed / checked ---------- */
.feedback-reason-item, .feedback-gender-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ctrl-text);
    user-select: none;
    min-height: 40px;
}

/* Hover halo — 40×40 circle behind checkbox / radio (any state) */
.feedback-reason-item::before, .feedback-gender-option::before {
    content: "";
    position: absolute;
    inset-inline-start: calc((1.5rem - 2.5rem) / 2);
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #f3f4f6;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.15s ease;
}

.feedback-reason-item:hover::before, .feedback-gender-option:hover::before {
    opacity: 1;
}

.feedback-gender-option {
    gap: 24px;
}

.feedback-reasons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 40px;
}

.feedback-gender-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 1rem;
}

.feedback-gender-row > span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ctrl-text);
}

/* CHECKBOX — Size 24×24 · radius 2px */
.feedback-reason-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--ctrl-border);
    border-radius: 2px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem 1rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.feedback-reason-item:hover .feedback-reason-checkbox:not(:checked), .feedback-reason-checkbox:not(:checked):hover {
    border-color: var(--ctrl-border-hover);
}

.feedback-reason-item:active .feedback-reason-checkbox:not(:checked), .feedback-reason-checkbox:not(:checked):active {
    border-color: var(--ctrl-border);
    background-color: var(--ctrl-pressed-bg);
}

.feedback-reason-checkbox:checked {
    border-color: var(--ctrl-primary);
    background-color: var(--ctrl-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.feedback-reason-item:hover .feedback-reason-checkbox:checked, .feedback-reason-checkbox:checked:hover {
    border-color: var(--ctrl-primary-hover);
    background-color: var(--ctrl-primary-hover);
}

.feedback-reason-item:active .feedback-reason-checkbox:checked, .feedback-reason-checkbox:checked:active {
    border-color: var(--ctrl-primary-pressed);
    background-color: var(--ctrl-primary-pressed);
}

.feedback-reason-checkbox:focus {
    outline: none;
}

.feedback-reason-checkbox:focus-visible {
    outline: 2px solid var(--ctrl-focus);
    outline-offset: 2px;
}

.feedback-reason-checkbox:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* RADIO — Size 24×24 circle · inner dot 10×10 */
.feedback-gender-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--ctrl-border);
    border-radius: 9999px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.feedback-gender-option input[type="radio"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--ctrl-primary);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.feedback-gender-option:hover input[type="radio"]:not(:checked), .feedback-gender-option input[type="radio"]:not(:checked):hover {
    border-color: var(--ctrl-border-hover);
}

.feedback-gender-option:active input[type="radio"]:not(:checked), .feedback-gender-option input[type="radio"]:not(:checked):active {
    border-color: var(--ctrl-border);
    background-color: var(--ctrl-pressed-bg);
}

.feedback-gender-option input[type="radio"]:checked {
    border-color: var(--ctrl-primary);
}

.feedback-gender-option input[type="radio"]:checked::after {
    opacity: 1;
    background-color: var(--ctrl-primary);
}

.feedback-gender-option:hover input[type="radio"]:checked, .feedback-gender-option input[type="radio"]:checked:hover {
    border-color: var(--ctrl-primary-hover);
}

.feedback-gender-option:hover input[type="radio"]:checked::after, .feedback-gender-option input[type="radio"]:checked:hover::after {
    background-color: var(--ctrl-primary-hover);
}

.feedback-gender-option:active input[type="radio"]:checked, .feedback-gender-option input[type="radio"]:checked:active {
    border-color: var(--ctrl-primary-pressed);
    background-color: var(--ctrl-primary-pressed);
}

.feedback-gender-option:active input[type="radio"]:checked::after, .feedback-gender-option input[type="radio"]:checked:active::after {
    background-color: var(--ctrl-primary-pressed);
}

.feedback-gender-option input[type="radio"]:focus {
    outline: none;
}

.feedback-gender-option input[type="radio"]:focus-visible {
    outline: 2px solid var(--ctrl-focus);
    outline-offset: 2px;
    border-radius: 9999px;
}

.feedback-gender-option input[type="radio"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.feedback-textarea-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--fb-text);
}

.feedback-textarea {
    width: 100%;
    min-height: 96px;
    height: 96px;
    box-sizing: border-box;
    border: 1px solid var(--fb-input-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    resize: vertical;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fb-text-secondary);
    background: var(--fb-bg);
}

.feedback-textarea::placeholder {
    color: var(--fb-muted);
}

.feedback-textarea:hover:not(:focus):not(:disabled) {
    border-color: #384250;
    color: var(--fb-text);
}

.feedback-textarea:focus {
    outline: none;
    color: #384250;
    box-shadow: 0 2px 4px -2px #1018280f, 0 4px 8px -2px #1018281a;
}

.feedback-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.feedback-legal {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--fb-text-secondary);
}

.feedback-legal-link {
    color: var(--fb-link);
    text-decoration: underline;
}

.feedback-legal-link:hover {
    color: var(--fb-primary-hover);
}

/* Success / result */
.feedback-state-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: var(--fb-max-width);
    margin-inline: auto; min-height: 2.5rem;
}

.feedback-result-primary {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.feedback-result-check {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--fb-success);
}

.feedback-result-check svg {
    display: block;
}

.feedback-result-check svg path {
    fill: var(--fb-success);
}

.feedback-result-message {
    margin: 0;
    color: var(--fb-text);
    font-size: 1rem;
    font-weight: 400;
}

.feedback-stat {
    margin: 0;
    color: var(--fb-text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
    max-width: 60%;
    text-align: end;
}

@media (min-width: 640px) {
    .feedback-stat {
        max-width: none;
    }
}

.feedback-stat-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.15em;
}

.feedback-stat-value {
    font-variant-numeric: tabular-nums;
}

.feedback-stat-phrase {
    white-space: pre-wrap;
}

.feedback-stat-no-votes {
    display: inline;
}

/* ---------- Footer content ---------- */
/* Footer wrapper */
.footer-content {
    width: 100%;
    /* max-width: 1440px; */
    margin-inline: auto; padding: 40px 80px 24px;
    box-sizing: border-box;
    /* direction: rtl; */
    color: #fff;
    background-color: #074d31;
}

/* Top section */
.footer-sections {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0 40px;
}

.footer-section {
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.imamu-footer--themed {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-margin, .imamu-footer__inner {
    max-width: 100%;
    margin-inline: auto; display: flex;
    flex-direction: column;
    gap: 3rem;
}


.footer-sections, .imamu-footer__sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
}

.footer-section, .imamu-footer__section {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .footer-section, .imamu-footer__section {
        width: 48%;
    }
}

@media (min-width: 768px) {
    .footer-section, .imamu-footer__section {
        width: 23%;
    }
}

.section-title, .imamu-footer__title {
    width: 100%;
    margin: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 8px;
    color: var(--footer-text);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--footer-border);
}

.imamu-footer__title--follow {
    margin-bottom: 0.5rem;
}

.section-link, .imamu-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--footer-text);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.15s ease;
}

.section-link:hover, .imamu-footer__link:hover {
    color: var(--footer-link-hover);
    text-decoration: underline;
}

.section-link:active, .imamu-footer__link:active {
    color: var(--footer-link-active);
    text-decoration: underline;
}

.section-link:visited, .imamu-footer__link:visited {
    color: var(--footer-link-visited);
}

.section-link:focus-visible, .imamu-footer__link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 0;
}

.section-link-external {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-link-external-icon, .imamu-footer__external-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

[dir="rtl"] .section-link-external-icon, [dir="rtl"] .imamu-footer__external-icon {
    transform: rotate(270deg);
}

.social-icons, .imamu-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.social-icon, .imamu-footer__social-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--footer-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.social-icon:hover, .imamu-footer__social-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.social-icon:focus-visible, .imamu-footer__social-icon:focus-visible {
    outline: none;
    border: 2px solid #ffffff;
    border-radius: 4px;
}

.social-icon svg, .imamu-footer__social-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
}

.accessibility-title {
    color: var(--footer-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--footer-border);
    width: 100%;
}

.accessibility-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-bottom, .imamu-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem; }

@media (min-width: 640px) {
    .footer-bottom, .imamu-footer__bottom {
        flex-direction: row;
    }
}

.footer-links, .imamu-footer__legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.bottom-links a {
    color: var(--footer-text);
    font-size: 0.875rem;
    text-decoration: underline;
}

.rights-text, .imamu-footer__rights {
    margin: 0;
    color: var(--footer-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.developed-text, .imamu-footer__developed {
    margin: 0;
    color: var(--footer-text);
    font-size: 0.875rem;
    font-weight: 400;
}

.footer-logos, .imamu-footer__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.imamu-footer__logos img:first-child, .footer-logos img.py-1 {
    height: 2.25rem;
    width: 124px;
    flex-shrink: 0;
    object-fit: contain;
}

.imamu-footer__logos a img, .footer-logos a img {
    height: 42px;
    width: 63px;
    flex-shrink: 0;
    object-fit: contain;
}

.footer-logos a {
    display: inline-flex;
    align-items: center;
}

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

.university-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.university-link span {
    color: #6c737f;
    font-size: 1rem;
    font-weight: 500;
}

/* ==========================================================================
   Form.io / e-participation
   ========================================================================== */
.formio-component-container.e-participation-cards-grid {
    padding: 0 !important;
}

.form-group.has-feedback.formio-component.formio-component-customricheditor.formio-component-section1Paragraph, .form-group.has-feedback.formio-component.formio-component-customricheditor.formio-component-section1Title {
    padding: 0 !important
}

.formio-component-container.e-participation-cards-grid>div {
    padding: 0 !important;
    grid-template-columns: repeat(4, 1fr);
    display: grid;
}

.e-participation-cards-grid .formio-component.formio-component-customparticipationcard, .formio-form .formio-component:not(.formio-component-columns):not(.formio-component-panel):not(.formio-component-fieldset):not(.formio-component-tabs):not(.formio-component-customlinkbutton), .formio-component-container.e-participation-cards-grid .formio-component-customparticipationcard, .e-participation-cards-grid>[ref^="nested-"]>.formio-component, .e-participation-cards-grid .formio-component.formio-component-customparticipationcard {
    width: 100% !important;
}

.formio-component-breadcrumb nav ol {
    padding: 0 !important;
}

.formio-component-breadcrumb nav ol li {
    list-style: none !important;
}

.formio-component.formio-component-container.formio-component-eventDetailsContent.event-details-main-content.formio-component-label-hidden {
    padding: 0 !important;
    margin: 0 !important;
}

.formio-component.formio-component-panel.formio-component-eventSidebarCard.event-details-sidebar-card .card-header.bg-default, .formio-component.formio-component-panel.formio-component-galleryPanel.event-details-gallery .card-header.bg-default {
    display: none !important;
}

body.dark-theme .formio-component.formio-component-panel.formio-component-eventSidebarCard.event-details-sidebar-card .card, body.dark-theme .formio-component.formio-component-panel.formio-component-galleryPanel.event-details-gallery .card {
    background-color: transparent !important
}

[class*="formio-component-readAlso"] {
    padding: 0px;
}

/* ==========================================================================
   Rich editor / Swiper / Quill colors
   ========================================================================== */
.swiper-wrapper img {
    width: 100%;
    margin-bottom: 24px;
}

.custom-rich-editor-render {
    line-height: 1.7;
}

.custom-rich-editor-render p, .custom-rich-editor-render span, .custom-rich-editor-render div {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ql-color-red {
    color: #ef4444;
}

.ql-color-blue {
    color: #3b82f6;
}

.ql-color-green {
    color: #22c55e;
}

.ql-color-yellow {
    color: #f59e0b;
}

.ql-color-black {
    color: #000000;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */
body.dark-theme {
    color: #fff;
    --color-text-primary: #ffffff;
}

body.dark-theme .top-banner, body.dark-theme .top-info-bar, body.dark-theme .main-navbar, body.dark-theme .verify-panel, body.dark-theme .dropdown, body.dark-theme #DeltaPlaceHolderMain, body.dark-theme #DeltaPlaceHolderMain .news-details-header, body.dark-theme #DeltaPlaceHolderMain .page-header.panel, body.dark-theme #DeltaPlaceHolderMain .news-details-header.panel {
    background-color: #1f2a37 !important;
}

body.dark-theme #DeltaPlaceHolderMain .page-header, body.dark-theme .formio-form .page-header, body.dark-theme .formio-form .news-details-header, body.dark-theme .formio-form .page-header.panel, body.dark-theme .formio-form .news-details-header.panel {
    background-color: #092a1e !important;
    margin: 0 !important;
}

body.dark-theme .registration-box {
    background-color: #0d121c;
}

body.dark-theme .top-info-bar, body.dark-theme .main-navbar {
    border-top: 1px solid #6c737f;
}

body.dark-theme .main-navbar {
    border-bottom: 1px solid #6c737f;
}

body.dark-theme .banner-content, body.dark-theme .info-left, body.dark-theme .logo-text, body.dark-theme .main-navbar .nav-link, body.dark-theme .lang-switch, body.dark-theme .desktop-login, body.dark-theme .search-btn svg, body.dark-theme .email-btn svg, body.dark-theme .column-title, body.dark-theme .column-desc, body.dark-theme .registered-text, body.dark-theme .dropdown-item, body.dark-theme .university-link span {
    color: white;
}

body.dark-theme .search-btn.is-open {
    background-color: #1b8354;
    color: #ffffff;
}

body.dark-theme .search-btn.is-open svg {
    color: #ffffff;
}

body.dark-theme .portal-search-panel {
    background-color: #161616;
    border-bottom-color: #6c737f;
}

body.dark-theme .portal-search-input {
    background-color: #1f2a37;
    border-color: #6c737f;
    color: #f3f4f6;
}

body.dark-theme .portal-search-input-wrap::after {
    background-color: #ffffff;
}

body.dark-theme .portal-search-input::placeholder {
    color: #9da4ae;
}

body.dark-theme .portal-search-input:hover:not(:focus):not(:disabled) {
    border-color: #9da4ae;
    color: #ffffff;
}

body.dark-theme .portal-search-input:focus {
    border-color: #6c737f;
    color: #f3f4f6;
    box-shadow: 0 2px 4px -2px #00000040, 0 4px 8px -2px #00000059;
}

body.dark-theme .portal-search-input:disabled {
    color: #6c737f;
    border-color: #384250;
}

body.dark-theme .portal-search-suggestions-label {
    color: #9da4ae;
}

body.dark-theme .portal-search-suggestion-tab {
    background-color: #1f2a37;
    color: #f3f4f6;
}

body.dark-theme .portal-search-suggestion-tab:hover {
    background-color: #384250;
}

body.dark-theme .portal-search-suggestion-tab:active {
    background-color: #4d5761;
}

body.dark-theme .portal-search-suggestion-arrow {
    color: #9da4ae;
}

body.dark-theme .email-btn svg path {
    fill: none;
}

body.dark-theme .info-left svg {
    color: #9da4ae;
}

body.dark-theme .nav-link:visited {
    color: white;
}

body.dark-theme .nav-item:hover:not(.nav-item--selected), body.dark-theme .nav-item--open:not(.nav-item--selected), body.dark-theme .nav-item:has(.nav-link:focus-visible):not(.nav-item--selected), body.dark-theme .nav-btn:hover, body.dark-theme .email-btn:hover, body.dark-theme .desktop-lang:hover {
    background-color: #374151;
}

body.dark-theme .nav-item:has(.nav-link:active):not(.nav-item--selected), body.dark-theme .nav-btn:active, body.dark-theme .email-btn:active, body.dark-theme .desktop-lang:active {
    background-color: #4d5761;
}

body.dark-theme .nav-btn:hover::after, body.dark-theme .email-btn:hover::after, body.dark-theme .desktop-lang:hover::after {
    opacity: 1;
    background-color: #ffffff;
}

body.dark-theme .nav-btn:active::after, body.dark-theme .email-btn:active::after, body.dark-theme .desktop-lang:active::after {
    opacity: 1;
    background-color: #ffffff;
}

body.dark-theme .nav-item:hover:not(.nav-item--selected) .nav-link, body.dark-theme .nav-item--open:not(.nav-item--selected) .nav-link, body.dark-theme .nav-item:has(.nav-link:active):not(.nav-item--selected) .nav-link, body.dark-theme .nav-item:has(.nav-link:focus-visible):not(.nav-item--selected) .nav-link {
    color: white;
}

body.dark-theme .nav-item:hover:not(.nav-item--selected)::after, body.dark-theme .nav-item--open:not(.nav-item--selected)::after, body.dark-theme .nav-item:has(.nav-link:focus-visible):not(.nav-item--selected)::after {
    opacity: 1;
    background-color: #ffffff;
}

body.dark-theme .nav-item:has(.nav-link:active):not(.nav-item--selected)::after {
    opacity: 1;
    background-color: #ffffff;
}

body.dark-theme .nav-item--selected {
    background-color: #1b8354;
}

body.dark-theme .nav-item--selected:hover {
    background-color: #166a45;
}

body.dark-theme .nav-item--selected:has(.nav-link:active) {
    background-color: #0b3b24;
}

body.dark-theme .nav-item--selected:has(.nav-link:focus-visible) {
    background-color: #1b8354;
    box-shadow: 0 0 0 2px #0d121c, 0 0 0 4px #ffffff;
}

body.dark-theme .nav-item--selected .nav-link, body.dark-theme .nav-item--selected .nav-link:visited, body.dark-theme .nav-item--selected .nav-link:hover, body.dark-theme .nav-item--selected .nav-link:active, body.dark-theme .nav-item--selected .nav-link:focus-visible {
    color: #ffffff;
}

body.dark-theme .nav-item--selected::after, body.dark-theme .nav-item--selected:hover::after, body.dark-theme .nav-item--selected:has(.nav-link:active)::after, body.dark-theme .nav-item--selected:has(.nav-link:focus-visible)::after {
    opacity: 1;
    background-color: #6dd49b;
}

body.dark-theme .dropdown {
    background-color: #1f2a37 !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.16);
}

body.dark-theme .dropdown-item:hover:not(:active) {
    background-color: #384250;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

body.dark-theme .dropdown-item:active {
    background-color: #4d5761;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

body.dark-theme {
    --footer-bg: #1b8354;
}

body.dark-theme .footer-content, body.dark-theme .imamu-footer {
    background-color: var(--footer-bg);
}

body.dark-theme .formio-cell-text, body.dark-theme .fromio-text, body.dark-theme .formio-component-customlinkbutton a, body.dark-theme .formio-table-header-cell, body.dark-theme .formio-table-header-cell p {
    color: #ffffff !important;
}

body.dark-theme .formio-table-header {
    background-color: #1a232e !important;
    border-color: #1a232e !important;
}

body.dark-theme .formio-table-header-cell {
    border: 0 !important;
}

body.dark-theme .swiper-slide, body.dark-theme [data-name="Tag"], body.dark-theme [data-name="Status Tag"], body.dark-theme [data-name="Column divider"], body.dark-theme .formio-component-customtooltip .formio-custom-tooltip {
    background-color: #1f2a37 !important;
}

body.dark-theme .formio-cell-container {
    border: 0 !important;
}

body.dark-theme .volunteer-link-buttons-panel .formio-component-customlinkbutton a, body.dark-theme .volunteer-link-buttons-panel .formio-component-customlinkbutton a>span, body.dark-theme .formio-component-breadcrumb nav ol li span, body.dark-theme .formio-component-breadcrumb nav ol li a {
    color: #fff !important;
}

body.dark-theme .tree-scroll-canvas, body.dark-theme .tree-scroll-canvas-inner {
    background-color: #1f2a37 !important;
    direction: rtl !important;
}

body.dark-theme .orgchart-builder {
    border-color: #6c737f !important;
    overflow: hidden;
}

body.dark-theme .formio-table-header-cell-filter {
    background-color: transparent !important;
}

body.dark-theme .formio-table-header-cell-filter svg {
    background-color: transparent;
}

body.dark-theme .formio-table-header-cell-filter svg path {
    fill: none !important;
}

body.dark-theme .formio-table-header-cell-filter svg path:last-child {
    fill: #fff !important;
}

body.dark-theme .custom-showcase-tab-nav-title {
    color: #fff !important;
}

body.dark-theme .custom-nav-card {
    background-color: #1f2a37;
    border-color: #6c737f;
}

body.dark-theme .custom-nav-card__glyph, body.dark-theme .custom-nav-card__title {
    color: #fff;
}

body.dark-theme .custom-nav-card__arrow-btn {
    background-color: transparent;
    border: 1px solid #6c737f;
    color: #fff;
}

body.dark-theme .formio-custom-image-grid__card {
    background: #1f2a37 !important;
    border: 1px solid #151c24 !important;
}

body.dark-theme .custom-sidebar-tabs__wrapper {
    background: #1f2a37 !important;
    border: 1px solid #6c737f !important;
    text-align: start;
}

body.dark-theme .custom-sidebar-tabs__title {
    color: #fff;
}

body.dark-theme .custom-sidebar-tabs__button {
    color: #fff;
    justify-content: flex-start;
}

body.dark-theme .custom-sidebar-tabs__button--active {
    color: var(--sidebar-tabs-accent, #1b8354);
}

body.dark-theme .custom-sidebar-tabs__button:hover {
    background: #6c737f;
}

body.dark-theme .faq-template-item {
    padding: 0;
}

body.dark-theme .faq-item-answer, body.dark-theme .faq-template-item span, body.dark-theme .faq-template-item summary {
    color: #fff !important;
}

body.dark-theme details {
    border-bottom-color: #6c737f !important;
}

body.dark-theme .custom-participation-card, body.dark-theme .formio-component-customsharebuttons>div {
    background-color: transparent !important;
    border: 1px solid #6c737f;
}

.formio-component-customsharebuttons {
    border: 0 !important
}

body.dark-theme .custom-participation-card__title, body.dark-theme .custom-participation-card__footer a span {
    color: #fff;
}

body.dark-theme .custom-participation-card__footer a span svg path {
    fill: transparent;
}

body.dark-theme .formio-component-custombanner .relative {
    text-align: right;
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px;
    height: 100%;
}

body.dark-theme .formio-component-custombanner .absolute {
    padding: 0 !important;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

body.dark-theme .feedback-meta {
    color: #fff;
}

body.dark-theme .feedback-question, body.dark-theme .feedback-result-message, body.dark-theme .feedback-form-title, body.dark-theme .feedback-reason-item, body.dark-theme .feedback-gender-row > span, body.dark-theme .feedback-gender-option, body.dark-theme .feedback-textarea-label {
    color: #ffffff !important;
}

body.dark-theme .feedback-form-subtitle, body.dark-theme .feedback-stat, body.dark-theme .feedback-legal {
    color: #d2d6db;
}

body.dark-theme .feedback-main {
    background-color: #0d121c;
    border-color: #6c737f;
}

body.dark-theme .feedback-textarea {
    background-color: #1f2a37;
    border-color: #6c737f;
    color: #f3f4f6;
}

body.dark-theme .feedback-reason-checkbox, body.dark-theme .feedback-gender-option input[type="radio"] {
    border-color: #9da4ae;
}

body.dark-theme .feedback-close-icon {
    color: #ffffff;
}

body.dark-theme .feedback-close-icon svg path {
    fill: #ffffff;
}

body.dark-theme .formio-component-socialFixed .fixed_social {
    background-color: #1f2a37 !important;
    border: 1px solid #6c737f;
    border-inline-end-width: 0; inset-inline-end: 15px;
}

body.dark-theme .custom-rich-editor-render h1, body.dark-theme .custom-rich-editor-render h2, body.dark-theme .custom-rich-editor-render h3, body.dark-theme .custom-rich-editor-render h4, body.dark-theme .custom-rich-editor-render h5, body.dark-theme .custom-rich-editor-render h6, body.dark-theme .custom-rich-editor-render p, body.dark-theme .custom-rich-editor-render span, body.dark-theme .custom-rich-editor-render div, body.dark-theme .custom-rich-editor-render div ul, body.dark-theme .custom-rich-editor-render div li {
    color: #fff !important;
}

/* ==========================================================================
   404 / Error page
   ========================================================================== */
.error-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.error-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* RTL Support */
[dir="rtl"] .error-container {
    direction: rtl;
}

[dir="ltr"] .error-container {
    direction: ltr;
}

/* ==========================================================================
   Fixed social bar
   ========================================================================== */
.formio-component-socialFixed .fixed_social {
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    inset-inline-end: 0;
    height: 260px;
    text-align: center !important;
    border-radius: 0 10px 10px 0 !important;
    overflow: hidden !important;
    width: 67px !important;
    padding: 8px 16px !important;
    z-index: 9999;
}

.custom-social-fixed-col {
    gap: 16px;
}

.formio-component-socialFixed .fixed_social .custom-social-fixed-col button {
    min-height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    max-height: 32px !important;
}

/* ==========================================================================
   Muneer accessibility widget
   ========================================================================== */
.muneer-trigger-button-box button {
    background-color: #1b8354 !important;
    color: #ffffff !important;
    width: 40px;
    height: 40px;
    justify-content: center;
}

.muneer-trigger-button-box button svg {
    fill: #ffffff !important;
}

.muneer-trigger-button-box button:hover, .muneer-trigger-button-box button:focus {
    background-color: #ffffff !important;
    color: #1b8354 !important;
}

.muneer-trigger-button-box button:hover svg, .muneer-trigger-button-box button:focus svg {
    fill: #1b8354 !important;
}

.muneer-trigger-button-box button:focus {
    box-shadow: 0 0 0 3px #1b8354 !important;
}

.muneer-switch-box .switch input:checked+.slider {
    background-color: #1b8354 !important;
}

#muneer-theme-switcher input:checked+label {
    background-color: #1b8354 !important;
    border-color: #1b8354 !important;
}

#muneer-theme-switcher input:checked+label svg {
    fill: #fff !important;
}

.muneer-subheader--trigger {
    background-color: #1b8354 !important;
}

.muneer-action-box {
    background-color: #ffffff !important;
    border-color: #d2d6db !important;
}

#muneer-popup-header--title h3, .muneer-subheader h4, .muneer-subheader h4 span, .muneer-title, .muneer-mode-title, .muneer-mode-short, .muneer-mode-description, .muneer-language-switcher--lang-name {
    color: #161616 !important;
}

.muneer-action-box .muneer-icon {
    background-color: #1b8354 !important;
    color: #1b8354 !important;
}

#muneer-reset-btn {
    background-color: #1b8354 !important;
    color: #fff !important;
}

#muneer-reset-btn svg {
    fill: #fff !important;
}

#muneer-reset-btn span {
    color: #fff !important;
}

#muneer-hide-btn {
    display: none !important;
}

#muneer-keyboard-box {
    direction: ltr !important;
}

#muneer-language-switcher .choices__list.choices__list--single {
    padding: 0px !important;
}

#muneer-language-switcher .choices__item.choices__item--selectable {
    padding: 0px !important;
}

#muneer-theme-switcher-fieldset label {
    margin: 0px !important;
}

.muneer-statement {
    display: none !important;
}

/* html {
  --muneer-color: #1b8354 !important;
  --muneer-color-dark: #166a45 !important;
  --muneer-color-accent: #b8eacb !important;
  --muneer-color-transparent: #1b835433 !important;
  --muneer-text: #161616 !important;
  --muneer-btn-bg: #1b8354 !important;
  --muneer-btn-color-hover: #166a45 !important;
} */
.muneer-theme-dark #muneer-popup #muneer-popup-buttons button, .muneer-theme-dark #muneer-sidebar #muneer-popup-buttons button, .muneer-theme-dark #muneer-voice-nav-popup #muneer-popup-buttons button {
    background: #166a45 !important;
    color: #ffffff !important;
    border-color: #166a45 !important;
}

.muneer-theme-dark .muneer-popup-buttons button:hover, .muneer-theme-dark .muneer-action-box:hover {
    background: #1b8354 !important;
    color: #ffffff !important;
}

.muneer-theme-dark .muneer-multi-toggle-box .muneer-icon, .muneer-theme-dark .muneer-toggle-box .muneer-icon {
    background-color: #166a45 !important;
}

.muneer-theme-dark .muneer-title, .muneer-theme-dark .language-switcher__lang-name, .muneer-theme-dark .muneer-action-box, .muneer-theme-dark .muneer-sidebar-left {
    color: #ffffff !important;
}

.muneer-theme-dark #muneer-popup h1, .muneer-theme-dark #muneer-popup h2, .muneer-theme-dark #muneer-popup h3, .muneer-theme-dark #muneer-popup h4, .muneer-theme-dark #muneer-popup h5, .muneer-theme-dark #muneer-popup h6, .muneer-theme-dark #muneer-sidebar h1, .muneer-theme-dark #muneer-sidebar h2, .muneer-theme-dark #muneer-sidebar h3, .muneer-theme-dark #muneer-sidebar h4, .muneer-theme-dark #muneer-sidebar h5, .muneer-theme-dark #muneer-sidebar h6, .muneer-theme-dark #muneer-voice-nav-popup h1, .muneer-theme-dark #muneer-voice-nav-popup h2, .muneer-theme-dark #muneer-voice-nav-popup h3, .muneer-theme-dark #muneer-voice-nav-popup h4, .muneer-theme-dark #muneer-voice-nav-popup h5, .muneer-theme-dark #muneer-voice-nav-popup h6, .muneer-theme-dark #muneer-popup-header--title h3, .muneer-theme-dark .muneer-subheader h4, .muneer-theme-dark .muneer-subheader h4 span, .muneer-theme-dark .muneer-title, .muneer-theme-dark .muneer-mode-title, .muneer-theme-dark .muneer-mode-short, .muneer-theme-dark .muneer-mode-description, .muneer-theme-dark .muneer-language-switcher--lang-name {
    color: #ffffff !important;
}

/* Brand color override for inline styles */
[style*="#3992A4"], [style*="rgb(57, 146, 164)"] {
    background-color: #1b8354 !important;
}

#formioContainer {
    margin: 0 !important;
}

.form-group.has-feedback.formio-component.formio-component-customricheditor.formio-component-section1Paragraph, .form-group.has-feedback.formio-component.formio-component-customricheditor.formio-component-section1Title {
    padding: 0 80px
}

.formio-component.formio-component-container {
    padding: 24px 80px !important;
    margin-bottom: 0 !important;
}

.formio-component.formio-component-container.formio-component-newsDetailsSocialSidebar.news-details-social-sidebar {
    padding-top: 0 !important
}

.formio-component.formio-component-container.news-details-read-also-item.formio-component-label-hidden {
    padding: 0 !important;
    padding-inline-start: 16px !important; }

.formio-component.formio-component-container.formio-component-readAlsoList.news-details-read-also.formio-component-label-hidden, .formio-component-newsDetailsSocialSidebar.news-details-social-sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media all and (max-width: 767px) {
    .formio-component.formio-component-container {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
}

.formio-component.formio-component-container.formio-component-tableSection {
    padding: 0 !important
}

.formio-form .formio-component.formio-component-customsocialfixed.formio-component-socialFixed {
    margin: 0 !important;
    margin-top: -16px !important;
}

.formio-component.formio-component-container.formio-component-participationCardsGrid.e-participation-cards-grid.formio-component-label-hidden {
    padding: 0 !important
}

.formio-component.formio-component-container.formio-component-pageContentShell.page-content-shell.formio-component-label-hidden {
    /* padding:0 !important; */
}

.link-buttons-row .card-body {
    flex-direction: row !important;
    justify-content: start !important;
    gap: 8px !important;
}

.news-details-read-also-item:before {
    right: auto !important;
    inset-inline-start: 0 !important;
}

body.dark-theme div[style*="direction: rtl;background:#ffffff;padding:16px;"] {
    background: transparent !important;
}

body.dark-theme div[style*="border-top:4px solid #006C35"] {
    border-color: #6c737f !important;
    border-top-color: #006C35 !important;
}

body.dark-theme div[style*="border-top:4px solid #006C35"] h3 {
    color: #1b834b !important;
}

body.dark-theme div[style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr))"], body.dark-theme div[style*="direction: rtl; background:#ffffff; padding:16px;"] {
    background: transparent !important;
}

body.dark-theme div[style*="border: 1px solid #e2e8f0"][style*="box-shadow: 0 1px 3px rgba(0,0,0,0.05)"] {
    background: transparent !important;
    border-color: #6c737f !important;
}

body.dark-theme div[style*="border: 1px solid #e2e8f0"][style*="box-shadow: 0 1px 3px rgba(0,0,0,0.05)"] h3 {
    color: #00b16a !important;
}

body.dark-theme div[style*="direction: rtl; background:#ffffff"] {
    background: transparent !important;
}

body.dark-theme div[style*="direction: rtl; background:#ffffff; padding:16px;"] {
    background: transparent !important;
}

body.dark-theme div[style*="display: grid;grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));gap: 20px"] {
    background-color: transparent !important;
}

body.dark-theme .formio-component-customricheditor>div:not(.custom-richeditor-placeholder) h1 {
    color: #fff !important
}

body.dark-theme .custom-rich-editor-render .news-details-read-also-date-badge {
    background-color: #1f2a37 !important;
    border-color: #384250 !important;
    color: #f3f4f6 !important;
}
.custom-showcase-main.showcase-all-content , 
.formio-component.formio-component-container.formio-component-section2LinkContainer.flex justify-center.formio-component-label-hidden , 
.formio-component.formio-component-container.showcase-tab-section.formio-component-label-hidden{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
.row.formio-component.formio-component-customshowcaselayout.formio-component-showcaseLayout.formio-component-label-hidden {
  display: flex !important;
  flex-direction: row-reverse;
  padding: 24px 80px 0;
}
.formio-component-sidebarContent.custom-showcase-sidebar.showcase-tabs-sidebar{
    position: sticky;
    top: 80px;
}
.facts-container{
    padding: 24px 80px;
}
.formio-component.formio-component-container.multi-cards-fullwidth-grid.formio-component-label-hidden{
    padding: 0 !important;
}