/* Include main */
#togglePassword {
    width: 44px;
    padding: 0;
}

:root {
    --light-bg: #f7f9fc;
    --light-text: #222;
    --light-primary: #007bff;
    --light-accent: #e3e7ee;
    --dark-bg: #0b1a30;
    --dark-text: #e0e6ed;
    --dark-primary: #00aced;
    --dark-accent: #142b47;
}


/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;    
}

html[data-bs-theme=light] body {
    background-color: var(--light-bg);
    color: var(--light-text);
}

html[data-bs-theme=dark] body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}


body > footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}

html[data-bs-theme=light] body > footer {
    background-color: var(--light-accent);

}

html[data-bs-theme=dark] body > footer {
    background-color: var(--dark-accent);
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
    padding: 60px 15px 0;
}

/* Include modules */
ul.pager {
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.g-recaptcha {
    margin-bottom: 1rem;
}

.term-badge > a {
    text-decoration: none;
}

.term-badge .bg-secondary:hover {
    background-color: var(--bs-primary);
}

.taxonomy-tag ul {
    padding-left: 0;
    list-style: none;
}

.widget-container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.widget-image-widget img {
    width: 100%;
}

.widget-align-left {
    text-align: left;
}

.widget-align-center {
    text-align: center;
}

.widget-align-right {
    text-align: right;
}

.widget-align-justify {
    text-align: justify;
}

.widget-size-100, .widget-size-75, .widget .widget-size-75, .widget-size-66, .widget .widget-size-66, .widget-size-50, .widget .widget-size-50, .widget-size-33, .widget .widget-size-33, .widget-size-25, .widget .widget-size-25 {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 576px) {
    .widget-size-25, .widget .widget-size-25 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 768px) {
    .widget .widget-size-25 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 576px) {
    .widget-size-33, .widget .widget-size-33 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

@media (min-width: 768px) {
    .widget .widget-size-33 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

@media (min-width: 576px) {
    .widget-size-50, .widget .widget-size-50 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .widget .widget-size-50 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 576px) {
    .widget-size-66, .widget .widget-size-66 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (min-width: 768px) {
    .widget .widget-size-66 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (min-width: 576px) {
    .widget-size-75, .widget .widget-size-75 {
        flex: 0 0 auto;
        width: 75%;
    }
}

@media (min-width: 768px) {
    .widget .widget-size-75 {
        flex: 0 0 auto;
        width: 75%;
    }
}

/* Include themes */
/* The light theme is also the default theme. */
/* Do not wrap the these classes for the light theme specific. */
.card {
    --bs-card-bg: var(--bs-light);
}

.navbar {
    --bs-navbar-color: rgba(255, 255, 255, 0.55);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    color: #fff !important;
}

html[data-bs-theme=light] .navbar {
    background-color: var(--light-accent);
}

html[data-bs-theme=dark] .navbar {
    background-color: var(--dark-accent);
}

html[data-bs-theme=light] .nav-link, html[data-bs-theme=light] .navbar-brand {
    color: var(--light-text);
}

html[data-bs-theme=dark] .nav-link, html[data-bs-theme=dark] .navbar-brand {
    color: var(--dark-text);
}

/* 🔵 Hover-effect */
.menu-main-menu .nav-link:hover, .navbar .navbar-brand:hover {
    color: var(--light-primary); /* Of var(--dark-primary) bij donker thema */
}	

.bg-theme {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
}

.text-theme {
    color: var(--bs-body-color);
}

.text-bg-theme {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
}

.btn-theme {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-theme:hover {
    color: #000;
    background-color: #f9fafb;
    border-color: #f9fafb;
}

.btn-check:focus + .btn-theme, .btn-theme:focus {
    color: #000;
    background-color: #f9fafb;
    border-color: #f9fafb;
    box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-check:checked + .btn-theme, .btn-check:active + .btn-theme, .btn-theme:active, .btn-theme.active, .show > .btn-theme.dropdown-toggle {
    color: #000;
    background-color: #f9fafb;
    border-color: #f9fafb;
}

.btn-check:checked + .btn-theme:focus, .btn-check:active + .btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .show > .btn-theme.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-theme:disabled, .btn-theme.disabled {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

[data-bs-theme=dark] .card {
    --bs-card-bg: var(--bs-body);
}

[data-bs-theme=dark] .bg-theme {
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
}

[data-bs-theme=dark] .text-theme {
    color: var(--bs-body-color);
}

[data-bs-theme=dark] .text-bg-theme {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
}

[data-bs-theme=dark] .btn-theme {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}

[data-bs-theme=dark] .btn-theme:hover {
    color: #fff;
    background-color: #1c1f23;
    border-color: #1a1e21;
}

[data-bs-theme=dark] .btn-check:focus + .btn-theme, [data-bs-theme=dark] .btn-theme:focus {
    color: #fff;
    background-color: #1c1f23;
    border-color: #1a1e21;
    box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}

[data-bs-theme=dark] .btn-check:checked + .btn-theme, [data-bs-theme=dark] .btn-check:active + .btn-theme, [data-bs-theme=dark] .btn-theme:active, [data-bs-theme=dark] .btn-theme.active, [data-bs-theme=dark] .show > .btn-theme.dropdown-toggle {
    color: #fff;
    background-color: #1a1e21;
    border-color: #191c1f;
}

[data-bs-theme=dark] .btn-check:checked + .btn-theme:focus, [data-bs-theme=dark] .btn-check:active + .btn-theme:focus, [data-bs-theme=dark] .btn-theme:active:focus, [data-bs-theme=dark] .btn-theme.active:focus, [data-bs-theme=dark] .show > .btn-theme.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}

[data-bs-theme=dark] .btn-theme:disabled, [data-bs-theme=dark] .btn-theme.disabled {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}