#login {
    background-image: url(./login_bg_maiora.png);

    color: var(--text-on-dark, #FFF);
}

#login::before {
    background: var(--color-white-100, rgba(255, 255, 255, 0.10));
}

#loginLogo {
    background-image: url(./MyMaiora.svg);
}


#login h2 {
    color: var(--text-on-dark, #FFF);
}

#loginHeader {
    color: var(--text-on-dark, #FFF);
}
#login .input-group-text, #login .form-control {
    color: var(--text-on-dark, #FFF) !important;
}


#navbar-top .nav-btn.active {
    color: var(--text-on-dark, #ffffff);
}

.power-checkbox:checked + .power-switch .power-button {
    color: var(--text-on-dark, #ffffff);
}

#navbar-top > div {
    background: var(--color-white-500, rgba(255, 255, 255, 0.50));
    box-shadow: 0 0 5px 1px #f0f0f0;
}

#infoBoatContainer {
    background-image: url(./maiora-info.png);
}
#infoBoatContainer .card-text {
    color: var(--text-on-dark, #FFF);
}
#infoBoatContainer .card-subtitle {
    color: var(--text-muted-ondark, rgba(255, 255, 255, 0.60));
}

.aiBtn {
    border-radius: 50%;
    color: var(--text-on-dark, #FFF);

    background: radial-gradient(
        circle at 10% 10%,
        #FFFDEE 0%,
        var(--color-teal-1000, #02778E) 100%
        );
}
.active .aiBtn {
    background: radial-gradient(
        circle at 10% 10%,
        var(--color-teal-1000, #02778E) 0%,
        #FFFDEE 100%
        );
}

:root {
    --dark: hsl(280, 12%, 8%);
    --card-bg: linear-gradient(8deg, color-mix(in hsl, hsl(260, 25%, 95%), var(--dark) 2.5%) 75%, hsl(260, 25%, 95%) 75.5%);
    --glow-sens: 30;
    --blend: darken;
    --glow-blend: normal;
    --glow-color: 190deg 95% 42%;
    --line-color: #edf0f0;
    --glow-boost: 25%;
    --glow-r: 1.6;
}


.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2302778E'/%3e%3c/svg%3e");
}