/**
 * Wagtail Admin Theme Customization
 *
 * This file contains all the CSS variables used by Wagtail for theming.
 * You can customize the admin interface by overriding these variables.
 *
 * - The `:root` section defines the default (light) theme.
 * - The `[data-theme="dark"]` section defines the dark theme.
 * - The `Static Colors` are used across both themes.
 */

/* Define the custom font using a local file */
@font-face {
    font-family: 'Neue Haas Unica';
    src: url('../fonts/NeueHaasUnica-Normal.ttf') format('truetype'); /* IMPORTANT: Adjust filename if needed */
    font-weight: 400; /* Corresponds to 'Normal' */
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Unica';
    src: url('../fonts/NeueHaasUnica-ExtraBold.ttf') format('truetype'); /* IMPORTANT: Adjust filename if needed */
    font-weight: 800; /* Corresponds to 'ExtraBold' */
    font-style: normal;
}

:root {
    /* --- Fonts --- */
    --w-font-sans: 'Neue Haas Unica', sans-serif;

    /* --- Static Colors (used in both light and dark themes) --- */
    --w-color-primary: #f1f2f4;           /* Main brand color for headers and buttons */
    --w-color-primary-200: #f1f2f4;       /* Darker shade for hover/active states */
    --w-color-secondary: #2c3e50;
    --w-color-info-100: #1d7792;
    --w-color-positive-100: #295447;
    --w-color-warning-100: #faa500;
    --w-color-critical-100: #fd5765;
    --w-color-critical-200: #ca3b3b;
    --w-color-white: #ffffff;
    --w-color-black: #000000;

    /* --- Light Theme Variables --- */

    /* Surface Colors */
    --w-color-surface-page: #E2E6EA;
    --w-color-surface-field: #f1f2f4;
    --w-color-surface-field-inactive: #e9ecef;
    --w-color-surface-header: #F1F2F4;
    --w-color-surface-menus: #F1F2F4;
    --w-color-surface-menu-item-active: rgba(63, 130, 132, 0.25);
    --w-color-surface-tooltip: #fefefe;
    --w-color-surface-button-default: #f8f9fa;
    --w-color-surface-button-hover: #e9ecef;
    --w-color-surface-button-inactive: #f8f9fa;
    --w-color-surface-button-outline-hover: #e9ecef;
    --w-color-surface-button-critical-hover: #ca3b3b;
    --w-color-surface-status-label: #e9ecef;
    --w-color-surface-info-panel: #e9ecef;
    --w-color-surface-dashboard-panel: rgba(0, 0, 0, 0.03);;

    /* Text Colors */
    --w-color-text-button: #212529;
    --w-color-text-label-menus-default: #525252;
    --w-color-text-label-menus-active: #212529;
    --w-color-text-label: #212529;
    --w-color-text-context: #525252;
    --w-color-text-meta: #525252;
    --w-color-text-placeholder: #525252;
    --w-color-text-link-default: #FFA333;
    --w-color-text-link-hover: #F8D347;
    --w-color-text-button-outline-default: #212529;
    --w-color-text-button-outline-hover: #212529;
    --w-color-text-highlight: #007d7e;
    --w-color-text-error: #ca3b3b;
    --w-color-text-button-critical-outline-hover: #ca3b3b;
    --w-color-text-status-label: #212529;
    --w-color-text-link-info: #1d7792;

    /* Icon Colors */
    --w-color-icon-primary: #525252;
    --w-color-icon-primary-hover: #212529;
    --w-color-icon-secondary: #adb5bd;
    --w-color-icon-secondary-hover: #525252;

    /* Border Colors */
    --w-color-border-furniture: rgba(0, 0, 0, 0.2);
    --w-color-border-button-small-outline-default: #adb5bd;
    --w-color-border-field-default: #000000;
    --w-color-border-field-inactive: rgba(0, 0, 0, 0.2);
    --w-color-border-field-hover: rgba(0, 0, 0, 0.2);
    --w-color-border-button-outline-default: #adb5bd;
    --w-color-border-button-outline-hover: #212529;
    --w-color-border-interactive-more-contrast: #525252;
    --w-color-border-interactive-more-contrast-hover: #212529;
    --w-color-border-interactive-more-contrast-dark-bg: #adb5bd;
    --w-color-border-interactive-more-contrast-dark-bg-hover: #f8f9fa;
    --w-color-border-furniture-more-contrast: #525252;

    /* Other */
    --w-color-focus: #cccccc;
    --w-color-box-shadow-md: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    /* --- Dark Theme Overrides --- */

    /* Surface Colors */
    --w-color-surface-page: #1c2125;
    --w-color-surface-field: #212529;
    --w-color-surface-field-inactive: #343a40;
    --w-color-surface-header: #212529;
    --w-color-surface-menus: #212529;
    --w-color-surface-menu-item-active: #343a40;
    --w-color-surface-tooltip: #f8f9fa;
    --w-color-surface-button-default: #343a40;
    --w-color-surface-button-hover: #495057;
    --w-color-surface-button-inactive: #343a40;
    --w-color-surface-button-outline-hover: #495057;
    --w-color-surface-button-critical-hover: #ca3b3b;
    --w-color-surface-status-label: #287ccf;
    --w-color-surface-info-panel: #5087be;
    --w-color-surface-dashboard-panel: #212529;

    /* Text Colors */
    --w-color-text-button: #f8f9fa;
    --w-color-text-label-menus-default: #adb5bd;
    --w-color-text-label-menus-active: #f8f9fa;
    --w-color-text-label: #f8f9fa;
    --w-color-text-context: #adb5bd;
    --w-color-text-meta: #adb5bd;
    --w-color-text-placeholder: #adb5bd;
    --w-color-text-link-default: #00b0b1;
    --w-color-text-link-hover: #80d7d8;
    --w-color-text-button-outline-default: #f8f9fa;
    --w-color-text-button-outline-hover: #f8f9fa;
    --w-color-text-highlight: #00b0b1;
    --w-color-text-error: #fd5765;
    --w-color-text-button-critical-outline-hover: #fd5765;
    --w-color-text-status-label: #f8f9fa;
    --w-color-text-link-info: #80b6c7;

    /* Icon Colors */
    --w-color-icon-primary: #adb5bd;
    --w-color-icon-primary-hover: #f8f9fa;
    --w-color-icon-secondary: #495057;
    --w-color-icon-secondary-hover: #adb5bd;
	
    /* Border Colors */
    --w-color-border-furniture: #343a40;
    --w-color-border-button-small-outline-default: #495057;
    --w-color-border-field-default: #495057;
    --w-color-border-field-inactive: #343a40;
    --w-color-border-field-hover: #adb5bd;
    --w-color-border-button-outline-default: #495057;
    --w-color-border-button-outline-hover: #f8f9fa;
    --w-color-border-interactive-more-contrast: #adb5bd;
    --w-color-border-interactive-more-contrast-hover: #f8f9fa;
    --w-color-border-interactive-more-contrast-dark-bg: #495057;
    --w-color-border-interactive-more-contrast-dark-bg-hover: #212529;
    --w-color-border-furniture-more-contrast: #adb5bd;

    /* Other */
    --w-color-focus: #00b0b1;
    --w-color-box-shadow-md: rgba(0, 0, 0, 0.3);
}

/* --- Custom Overrides --- */

/* Remove the 'doubled text' effect from all elements */
* {
    text-shadow: none !important;
}

/* --- Hide Default Logo --- */
.w-logo,
.w-header__logo,
.w-header .w-logo,
.header .w-logo,
.login .w-logo,
.login-form .w-logo,
a[href="/admin/"] .w-logo,
.branding .w-logo,
.sidebar-wagtail-branding {
    display: none !important;
}

/* Custom Logo Container at Top of Sidebar */
.sidebar-main-menu::before {
    content: '';
    display: block;
    width: 100%;
    height: 60px;
    background-image: url('../images/lyra%20cms%20logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 20px 0;
    padding: 0 20px;
    box-sizing: border-box;
}


.sidebar-wagtail-branding__icon-wrapper {
    background-color: transparent !important;
}

.sidebar-menu-item {
    margin: 6px;
}

.sidebar-menu-item--active {
    border-radius: 12px;
}


.sidebar-sub-menu-panel {
    background-color: var(--w-color-surface-page);
    box-shadow: -2px 0px 5px 2px var(--w-color-box-shadow-md);
}

/* Hide custom logo when sidebar is minimized */
.sidebar--slim .sidebar-wagtail-branding {
    display: none !important;
}


.w-field--wagtail_image_field {
    background: none !important;
}

.w-dashboard .w-list-none li:last-of-type {
    display: none;
}

form[role="search"] {
    display: none;
}

.icon--menuitem {
    width: 0.75rem !important;
    height: 0.75rem !important;
}

.sidebar-main-menu {
    height: 100%;
}

.sidebar-main-menu__list {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-main-menu > .sidebar-main-menu__list > li:last-child {
    margin-top: auto;
    
}

.sidebar-main-menu > .sidebar-main-menu__list > li:last-child > a {
    color: var(--w-color-primary) !important;
    font-weight: 800 !important;  
    background-color: var(--w-color-positive-100);
    border-radius: 12px !important;
}

.sidebar-main-menu > .sidebar-main-menu__list > li:last-child > a svg {
    display: block;
}

.sidebar-main-menu > .sidebar-main-menu__list > li:last-child > a {
    display: flex;
    flex-direction: row-reverse;
}

.sidebar-menu-item__link  {
    padding-right: 34px !important;
}

.menuitem-label {
    margin-inline-start: 6px !important;
}

.sidebar-footer {
    background-color: var(--w-color-surface-page) !important;
    padding-left: 22px;
}

.sidebar-footer button {
    background-color: var(--w-color-surface-page) !important;
    letter-spacing: .5px;
    padding-right: 40px; 

}

.sidebar-footer ul {
    letter-spacing: .5px;
}

.sidebar-footer ul a svg {
    display: none;
}

.sidebar-footer ul a {
    padding-left: 48px;
}

.sidebar-footer ul form {
    padding-left: 14px;
}

input {
    font-size: 0.875rem !important;
    color: var(--w-color-text-label) !important;
}

select {
    font-size: 14px;
}

textarea {
    font-size: 14px;
    padding: 6px 20px !important;
    min-height: 60px;
}

.w-field__comment-button {
    display: none !important;
}

.c-page-explorer__item__link:hover, .c-page-explorer__item__action:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.button.serious:hover {
    color: var(--w-color-primary) !important;
}


.login-logo  .icon-wagtail {
    display: none !important;
}


.login-logo::before {
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    background-image: url('../images/lyra%20cms%20logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 20px 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.login .content-wrapper h1 {
    display: none !important;
}


.login .content-wrapper::before {
    content: "Sign in to Lyra CMS";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-family: var(--w-font-family);
    font-weight: 800;
    color: var(--w-color-text-button);
}

.login .wrapper {
    background-color: var(--w-color-surface-page);
}


.page-status-tag {
    display: none;
}


#listing-results .children svg {
    width: 1.5rem !important;
    margin-bottom: 4px;
}

.custom-preview-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none !important;
    font-weight: 600;
    background-color: var(--w-color-positive-100) !important;
    color: var(--w-color-primary) !important;
    padding-top: 2px !important;
    border-radius: 6px !important;
}

.custom-preview-button svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 4px;
    margin-bottom: 2px;
}


/* Hide buttons that contain glasses icon */
.w-slim-header button:has(.icon-glasses) {
    display: none !important;
}

/* Hide buttons that contain comment icon */
.w-slim-header button:has(.icon-comment) {
    display: none !important;
}

/* Menu Item Block - Display fields in a row */
.fields-in-row {
    display: flex;
    flex-direction: row;
}

.fields-in-row > div {
    padding-right: 1rem;
}

.fields-in-row div[data-contentpath="item_description"] textarea {
   min-height: 42px !important;
   max-height: 42px !important;
   height: 42px !important;
   resize: vertical;
   padding-top: 10px !important;
}

/* Items Menu Section Fields - Flex layout with wrapping */
.items-menu-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + eyebrow + primary_headline - 33% width each */
.items-menu-section-fields > div:nth-child(1),
.items-menu-section-fields > div:nth-child(2),
.items-menu-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: secondary_headline - 100% width */
.items-menu-section-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: text field - 100% width */
.items-menu-section-fields > div:nth-child(5) {
    flex: 0 0 100%;
}

/* Row 4: price_suffix + reverse_colors - 50% width each */
.items-menu-section-fields > div:nth-child(6),
.items-menu-section-fields > div:nth-child(7) {
    flex: 0 0 calc(50% - 0.5rem);
}

/* Menu items repeater: 100% width */
.items-menu-section-fields > div:nth-child(8) {
    flex: 0 0 100%;
}

/* Footer text: 100% width */
.items-menu-section-fields > div:nth-child(9) {
    flex: 0 0 100%;
}

/* Hero Section Fields - Flex layout with wrapping */
.hero-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + eyebrow + heading - 33% width each */
.hero-section-fields > div:nth-child(1),
.hero-section-fields > div:nth-child(2),
.hero-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: text - 100% width */
.hero-section-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: content_align + reverse_colors + background_type - 33% width each */
.hero-section-fields > div:nth-child(5),
.hero-section-fields > div:nth-child(6),
.hero-section-fields > div:nth-child(7) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Background images, background video, buttons - 100% width each */
.hero-section-fields > div:nth-child(8),
.hero-section-fields > div:nth-child(9),
.hero-section-fields > div:nth-child(10) {
    flex: 0 0 100%;
}

/* Animated Hero Card Fields - Flex layout with wrapping */
.animated-hero-card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: background_image + eyebrow + headline - 33% width each */
.animated-hero-card-fields > div:nth-child(1),
.animated-hero-card-fields > div:nth-child(2),
.animated-hero-card-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: text - 100% width */
.animated-hero-card-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Buttons - 100% width */
.animated-hero-card-fields > div:nth-child(5) {
    flex: 0 0 100%;
}

/* Text Section Fields - Flex layout with wrapping */
.text-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + reverse_colors + eyebrow - 33% width each */
.text-section-fields > div:nth-child(1),
.text-section-fields > div:nth-child(2),
.text-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: display_headline - 100% width */
.text-section-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: primary_headline + secondary_headline - 50% width each */
.text-section-fields > div:nth-child(5),
.text-section-fields > div:nth-child(6) {
    flex: 0 0 calc(50% - 0.5rem);
}

/* Row 4: text - 100% width */
.text-section-fields > div:nth-child(7) {
    flex: 0 0 100%;
}

/* Buttons - 100% width */
.text-section-fields > div:nth-child(8) {
    flex: 0 0 100%;
}

/* Text Image Section Fields - Flex layout with wrapping */
.text-image-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + eyebrow + headline - 33% width each */
.text-image-section-fields > div:nth-child(1),
.text-image-section-fields > div:nth-child(2),
.text-image-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: content - 100% width */
.text-image-section-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: reverse_order + reverse_colors + slider - 33% width each */
.text-image-section-fields > div:nth-child(5),
.text-image-section-fields > div:nth-child(6),
.text-image-section-fields > div:nth-child(7) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Images and buttons - 100% width each */
.text-image-section-fields > div:nth-child(8),
.text-image-section-fields > div:nth-child(9) {
    flex: 0 0 100%;
}

/* Cards Section Fields - Flex layout with wrapping */
.cards-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + eyebrow + headline - 33% width each */
.cards-section-fields > div:nth-child(1),
.cards-section-fields > div:nth-child(2),
.cards-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: text - 100% width */
.cards-section-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: reverse_colors + cards_per_row + slider - 33% width each */
.cards-section-fields > div:nth-child(5),
.cards-section-fields > div:nth-child(6),
.cards-section-fields > div:nth-child(7) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Cards repeater - 100% width */
.cards-section-fields > div:nth-child(8) {
    flex: 0 0 100%;
}

/* Card Fields - Flex layout with wrapping */
.card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Images - 100% width */
.card-fields > div:nth-child(1) {
    flex: 0 0 100%;
}

/* Row 1: eyebrow + heading - 50% width each */
.card-fields > div:nth-child(2),
.card-fields > div:nth-child(3) {
    flex: 0 0 calc(50% - 0.5rem);
}

/* Row 2: text - 100% width */
.card-fields > div:nth-child(4) {
    flex: 0 0 100%;
}

/* Row 3: link_text + link - 50% width each */
.card-fields > div:nth-child(5),
.card-fields > div:nth-child(6) {
    flex: 0 0 calc(50% - 0.5rem);
}

/* Google Map Fields - Flex layout with wrapping */
.google-map-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id - 100% width */
.google-map-fields > div:nth-child(1) {
    flex: 0 0 100%;
}

/* Row 2: embed_url - 100% width */
.google-map-fields > div:nth-child(2) {
    flex: 0 0 100%;
}

/* Row 3: reverse_colors + height - 50% width each */
.google-map-fields > div:nth-child(3),
.google-map-fields > div:nth-child(4) {
    flex: 0 0 calc(50% - 0.5rem);
}

/* Image Video Section Fields - Flex layout with wrapping */
.image-video-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + media_type + reverse_colors - 33% width each */
.image-video-section-fields > div:nth-child(1),
.image-video-section-fields > div:nth-child(2),
.image-video-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Images and video - 100% width each */
.image-video-section-fields > div:nth-child(4),
.image-video-section-fields > div:nth-child(5) {
    flex: 0 0 100%;
}


button.c-sf-add-button {
    width: 100% !important;
    display: flex;
    justify-content: flex-start !important;
    margin: 12px 0px;
    padding: 24px !important;
    color: var(--w-color-text-field-default) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px !important;
    border: 1px dashed var(--w-color-border-field-default) !important;  
    border-radius: 16px;
}

.c-sf-add-button:hover {
    border-color:var(--w-color-border-button-outline-hover) !important;  
}

.c-sf-add-button:hover::after {
    color:var(--w-color-text-button-outline-hover) !important;
}

.c-sf-add-button svg {
    margin-bottom: 0px;
    margin-right: 8px;
}

.c-sf-add-button::after {
    margin-top: 2px;
}

/* StreamField Add Button Labels */
/* Top-level content sections */
#content-root > [data-streamfield-stream-container] > div > .c-sf-add-button::after {
    content: "Add section";
    margin-left: 0.25rem;
}

/* Cards within CardSection */
[data-contentpath*="cards"] [data-streamfield-list-container] button[data-streamfield-list-add]:not([aria-hidden="true"])::after {
    content: "Add card";
    margin-left: 0.25rem;
}

/* Images within any block (must come after cards to override) */
[data-contentpath*="images"] [data-streamfield-list-container] button[data-streamfield-list-add]:not([aria-hidden="true"])::after {
    content: "Add image";
    margin-left: 0.25rem;
}

/* Buttons within any block */
[data-contentpath*="buttons"] [data-streamfield-list-container] button[data-streamfield-list-add]:not([aria-hidden="true"])::after {
    content: "Add button";
    margin-left: 0.25rem;
}

/* Menu items */
[data-contentpath*="menu_items"] [data-streamfield-list-container] button[data-streamfield-list-add]:not([aria-hidden="true"])::after {
    content: "Add menu item";
    margin-left: 0.25rem;
}

/* Contact links */
[data-contentpath*="contact_links"] [data-streamfield-list-container] button[data-streamfield-list-add]:not([aria-hidden="true"])::after {
    content: "Add contact link";
    margin-left: 0.25rem;
}

/* Contact Section Fields - Flex layout with wrapping */
.contact-section-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Row 1: element_id + reverse_colors + formspree_endpoint - 33% width each */
.contact-section-fields > div:nth-child(1),
.contact-section-fields > div:nth-child(2),
.contact-section-fields > div:nth-child(3) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 2: eyebrow + primary_headline + secondary_headline - 33% width each */
.contact-section-fields > div:nth-child(4),
.contact-section-fields > div:nth-child(5),
.contact-section-fields > div:nth-child(6) {
    flex: 0 0 calc(33.333% - 0.67rem);
}

/* Row 3: text - 100% width */
.contact-section-fields > div:nth-child(7) {
    flex: 0 0 100%;
}

/* Contact links repeater - 100% width */
.contact-section-fields > div:nth-child(8) {
    flex: 0 0 100%;
}

/* Social media fields - 50% width each (2 per row) */
.contact-section-fields > div:nth-child(9),
.contact-section-fields > div:nth-child(10) {
    flex: 0 0 calc(50% - 0.5rem);
}

.contact-section-fields > div:nth-child(11),
.contact-section-fields > div:nth-child(12) {
    flex: 0 0 calc(50% - 0.5rem);
}




.content > .w-z-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 1000;
    background-color: var(--w-color-surface-page);
}

.content > .w-z-header >  .w-z-header {
    margin-top: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-left: 176px;
    background-color: var(--w-color-black);
    color: var(--w-color-primary);
    border-radius: 16px;
}

header {
    height: 60px !important;
    display: flex;
}

header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    min-width: 100%;
}

header a, header li {
    font-size: 14px !important;
}

header::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 16px;
    background-image: url("../images/lyra_cms_logo_white.svg") !important;
    background-size: contain;
    background-repeat: no-repeat;
    width: 140px;
    height: 60px;
}

.language-badge::before {
    content: 'Page language:';
    min-width: 120px;
    font-weight: 600;
    font-size: 12px;
}

.language-badge {
    margin: 0px;
    font-size: 12px;
    background-color: transparent !important;
    color: var(--w-color-primary) !important;
    font-weight: 200;
    font-family: 'Neue Haas Unica';
}

.modal-content header::before {
    display: none;
}

.content > .w-z-header a {
    color: var(--w-color-primary) !important;
}


button[aria-label="Toggle sidebar"]  {
    display: none;
}

.sidebar-main-menu {
    padding-top: 100px;
}

.sidebar-main-menu__list .icon--menuitem {
    display: none;
}

.sidebar-main-menu__list button, .sidebar-main-menu__list a {
    font-weight: 500;
    letter-spacing: .5px;
}


.sidebar {
    background-color: var(--w-color-surface-page);
    width: 232px;
}

.sidebar__inner {
    background-color: var(--w-color-surface-page);
}

.sidebar-main-menu {
    padding-left: 2rem;
    background-color: var(--w-color-surface-page);
}

.sidebar-panel--visible {
    box-shadow: -2px 0px 5px 2px var(--w-color-box-shadow-md);
}

.sidebar-panel .c-page-explorer {
    background-color: var(--w-color-surface-page);
}

.c-page-explorer__drawer {
    padding-top: 55px;
    padding-left: 2rem;
}

.sidebar-sub-menu-panel {
    padding-top: 55px;
    padding-left: 2rem;
    min-width: 232px;
}

.c-page-explorer__item__link {
    padding: 18px;
}

.c-page-explorer__item__link .c-page-explorer__item__title {
    font-size: 14px !important;
}

body > .wrapper {
    padding-inline-start: 248px;
}

.sidebar-main-menu::before {
    display: none;
}

.content-wrapper {
    padding-top: 110px;
}

.messages {
    position: fixed;
    top: 32px;
    right: 48px;
    width: 360px;
    z-index: 1001;
    background-color: transparent;
}

.messages li {
    border-radius: 14px !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.messages li svg {
    margin-bottom: 4px;
}

.messages li .buttons {
    display: none;
}

#page-edit-form {
    background: var(--w-color-primary);
    border-radius: 16px;
    padding-bottom: 2rem;
}

main.content-wrapper {
    padding-right: 2rem;
}

.w-minimap {
    display: none;
}

.modal {
    z-index: 1003;;
}

.modal .w-tabs {
    background-color: var(--w-color-primary);
}

.image-chooser .chooser__choose-button {
    border: 1px dashed var(--w-color-border-field-default) !important;
    padding: 19px !important;
    padding-top: 21px !important;
    color: var(--w-color-text-field-default) !important;
    background-color: var(--w-color-surface-page) !important;
    border-radius: 12px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}


.image-chooser button .icon-image {
    display: none;
}

.image-chooser .chooser__title {
    font-size: 12px;
}

button[aria-label="Toggle preview"] {
    display: none;
}

aside[data-minimap-container] button {
    padding: 20px !important;
    top: 106px;
    right: 8px;
    border-radius: 12px;
    background-color: var(--w-color-primary) !important;
}

.tippy-content div[data-w-dropdown-target="content"] {
    padding: 0px;
}

.tippy-content div[data-w-dropdown-target="content"] a, .tippy-content div[data-w-dropdown-target="content"] svg{
    color: var(--w-color-text-field-default) !important;
}

#w-slim-header-buttons a[data-w-tooltip-content-value="Add child page"]:hover {
    background-color: transparent;
    border: none !important;
}

#w-slim-header-buttons a[data-w-tooltip-content-value="Add child page"]:hover svg{
    background-color: var(--w-color-text-link-hover) !important;
    color: var(--w-color-black) !important;
}

.w-pl-slim-header svg {
    color: white;
}

button[aria-label="Toggle status"] {
    color: var(--w-color-primary) !important;
}



.checkbox-wrapper {
    padding-top: 12px;
}

.checkbox-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

.checkbox-wrapper .toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
  }
.checkbox-wrapper .toggle:before {
    content: "";
    position: relative;
    top: 1px;
    left: 1px;
    width: 40px;
    height: 22px;
    display: block;
    background: var(--w-color-surface-page);
    border-radius: 12px;
    transition: background 0.2s ease;
  }
.checkbox-wrapper .toggle span {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(154,153,153,0.75);
    transition: all 0.2s ease;
  }
.checkbox-wrapper .toggle span svg {
    margin: 7px;
    fill: none;
  }
.checkbox-wrapper .toggle span svg path {
    stroke: #c8ccd4;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: all 0.5s linear;
  }
.checkbox-wrapper input[type="checkbox"]:checked + .toggle:before {
    background: #295447;
  }
.checkbox-wrapper input[type="checkbox"]:checked + .toggle span {
    transform: translateX(18px);
  }
.checkbox-wrapper input[type="checkbox"]:checked + .toggle span path {
    stroke: #295447;
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
  }




  :root {
    --arrow-bg: rgba(255, 255, 255, 0.3);
    --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
    --option-bg: white;
    --select-bg: rgba(255, 255, 255, 0.2);
  }

  /* <select> styles */
  select {
    /* Reset */
    appearance: none;
    border: 1px solid var(--w-color-border-field-default);
    outline: 0;
    font: inherit;
    color: var(--w-color-text-field-default);
    cursor: pointer;
    /* Remove IE arrow */
    &::-ms-expand {
      display: none;
    }
    /* Remove focus outline */
    &:focus {
      outline: none;
    }
    /* <option> colors */
    option {
      color: inherit;
      background-color: var(--option-bg);
    }
  }