.btn-top-navbar {

    --bs-btn-color: var(--bs-navbar-color);
    --bs-btn-border-color: var(--bs-navbar-color);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
    background-color: var(--color-primary);
    color: var(--btn-text-primary-color);
}

.btn-secondary-color {
    --bs-btn-color: var(--btn-text-secondary-color);
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: #d6d6d6;
    --bs-btn-hover-color: #534c4c;
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-secondary, #000) 80%, #fff 10%);
    --bs-btn-hover-border-color: #bbbbbb;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: var(--color-secondary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--color-secondary);
    --bs-btn-disabled-border-color: var(--color-secondary);
}

html, body {
    /* Use full height of the screen */
    height: 100%;
    font-family: var(--font-family-base, 'Plus Jakarta Sans'), sans-serif;
    background-color: var(--background-default)
}

body {
    /* Classical approach: 1 column website to scroll up & down */
    display: flex;
    flex-direction: column;
}

main {
    width: 100%;
    height: inherit;
    min-height: var(--inner-min-height);
    /*display: flex;*/
    /* Let main take every space that is left, if any vertical space is not used. */
    flex-grow: 1;
    align-items: stretch;
    font-size: 0.9em;
    z-index: 1;
}

#dashboard-content {
    width: 100%;
    height: inherit;
    position: relative;
    min-height: var(--inner-min-height);;
    z-index: 1;
}

.navbar-toggler-icon {
    max-height: var(--nav-height) !important;
}

.navbar {
    height: var(--nav-height);
}
.navbar-nav{
 --bs-nav-link-hover-color: rgba(185,185,185,0.75);
}

.navbar-cd-logo {
    height: calc(0.65 * var(--nav-height));
    width: var(--cd-logo-width, 10rem);
    background-image: var(--cd-logo,);
    background-repeat: no-repeat;
    background-size: contain;
}

.top-navbar {
    background: var(--topbar-background);
    border-bottom: var(--topbar-border-bottom);
}

.bg-main-color {
    background-color: var(--color-primary) !important;
    color: var(--btn-text-primary-color) !important;
}

.dropdown-item {
    color: inherit;
}


#message_alert {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 4em;
    width: 80%;
    z-index: 5;
}

#logo {
    width: 30px;
    height: 24px;
    fill: #ffffff;
}

#translation-symbol {
    width: 30px;
    height: 24px;
    fill: #ffffff;
}

#navbarSupportedContent {
    background-color: inherit;
    font-size: 1.75em;
    z-index: 2;
}

#drop-down-menu {
    left: auto;
    right: 0;
}

#nav-profile-img {
    height: 30px;
    width: 30px;
}


.dropdown-menu {
    position: absolute;
    min-width: 14rem;
    margin: 0;
    min-height: 150px;
    padding: 1.5rem 0.8rem 1.5rem 0.8rem;
    font-size: 1.15rem;
    color: inherit;
}


.dropdown-menu.show {
    display: flex;
    left: auto;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-around;

}


/* HTML: <div class="react-loader"></div> */
.react-loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
    background: var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%
    }
    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%
    }
    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%
    }
    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%
    }
}