:root,
[data-bs-theme=light] {
    --base-color: #78ac2b;
    --background-color: #78ac2b65;

    --primary-color: #78ac2bd0;
    --primary-color-hover: #54879a;
    --primary-text-color: #000;
    --primary-text-color-hover: #fff;

    --secondary-color: transparent;
    --secondary-color-hover: #54879a6b;
    --secondary-text-color: #000;

    --controls-color: #78ac2bd0;
    --controls-color-hover: #54879a;
}

@font-face {
    font-family: Kodchasan;
    src: url('fonts/Kodchasan/Kodchasan-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400; /* Regular */
}

@font-face {
    font-family: Kodchasan-bold;
    src: url('fonts/Kodchasan/Kodchasan-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700; /* Bold */
}

b, strong {
    font-family: 'Kodchasan-bold', sans-serif; /* Fallback to sans-serif */
    font-weight: 700; /* Ensure it's bold */
}

@font-face {
    font-family: Kodchasan-light;
    src: url('fonts/Kodchasan/Kodchasan-ExtraLight.ttf') format('truetype');
    font-style: normal;
    font-weight: 300; /* Extra Light */
}

i, em {
    font-family: 'Kodchasan-light', sans-serif; /* Fallback to sans-serif */
    font-weight: 300; /* Ensure it's light */
}

.abstract {
    max-height: none !important;
    overflow-y: hidden !important;
}

.privacyStatementWrapper {
    display: none !important;
}

.accessibilityStatementWrapper {
    display: none !important;
}

#imprint {
    display: none;
}

.aboutButton .icon {
    font-size: 18px;
    font-weight: 400 !important;
}

.aboutButton .text-left {
    text-align: left !important;
}

.mp-menu-header {
    background-color: var(--base-color) !important;
}

.mp-menu-logo {
    height: 70px !important;
    overflow: hidden; /* Hide any overflow */
    padding: 0 !important;
    margin-top: 0rem !important;
    margin-bottom: 1.5rem !important;
}

.mp-menu-logo img {
    height: 100% !important; /* Set height */
    width: auto; /* Maintain aspect ratio */
    max-height: 100% !important;
    background-color: var(--base-color);
    border: 1px solid #fff; /* Specify border style */
    border-radius: 5px;
}

.mp-menu-logo h1 {
    /* display: none; */
    font-size: 16px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    font-family: Kodchasan, sans-serif;
}

.mp-menu-subHeader a {
    /* background-color: var(--background-color) !important; */
}

.mp-menu-body {
    /* background-color: var(--background-color) !important; */
    font-family: Kodchasan, sans-serif;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
}
.btn-primary:hover {
    background-color: var(--primary-color-hover);
    color: var(--primary-text-color-hover);
}

.btn-light {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    border: none !important;
}
.btn-light:hover {
    background-color: var(--secondary-color-hover);
    color: var(--secondary-text-color);
}

.btn-secondary {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border: none;
}
.btn-secondary:hover {
    background-color: var(--primary-color-hover);
    color: var(--primary-text-color-hover);
}

#search-button {
    background-color: transparent;
    color: var(--primary-text-color);
    border: 1px solid var(--primary-text-color);
}

.menu-toggle-button {
    background-color: var(--controls-color) !important;
}
.menu-toggle-button:hover {
    background-color: var(--controls-color-hover) !important;
}

#secondaryMenu-toggle-button {
    /* display: none; */
}

.btn-group-controls {
    background-color: var(--controls-color) !important;
}

.control-button-controls:hover {
    background-color: var(--controls-color-hover) !important;
}

.resize-handle {
    background-color: var(--secondary-color-hover) !important;
}
.resize-handle:hover {
    background-color: var(--primary-color-hover) !important;
}

.mouseHover {
    background-color: var(--controls-color) !important;
    border-color: #fff !important;
}

.mouseHover p {
    margin-bottom: 0 !important;
}