html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.bg-babyblue {
    background-color: #42a8bd;
    color: white;
}

.btn-outline-babyblue {
    color: #42a8bd;
    border: 1px solid #42a8bd;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-babyblue:hover,
    .btn-outline-babyblue:focus,
    .btn-outline-babyblue:active {
        color: white;
        background-color: #42a8bd;
        border-color: #42a8bd;
        text-decoration: none;
    }

.bg-darkgreen {
    background-color: #2D3B1D;
    color: white;
}

.btn-outline-darkgreen {
    color: #2D3B1D;
    border: 1px solid #2D3B1D;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-darkgreen:hover,
    .btn-outline-darkgreen:focus,
    .btn-outline-darkgreen:active {
        color: white;
        background-color: #2D3B1D;
        border-color: #2D3B1D;
        text-decoration: none;
    }


.bg-altblue {
    background-color: #225465;
    color: white;
}

.btn-outline-altblue {
    color: #225465;
    border: 1px solid #225465;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-altblue:hover,
    .btn-outline-altblue:focus,
    .btn-outline-altblue:active {
        color: white;
        background-color: #225465;
        border-color: #225465;
        text-decoration: none;
    }


.bg-pink {
    background-color: #BA0030;
    color: white;
}

.btn-outline-pink {
    color: #BA0030;
    border: 1px solid #BA0030;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-pink:hover,
    .btn-outline-pink:focus,
    .btn-outline-pink:active {
        color: white;
        background-color: #BA0030;
        border-color: #BA0030;
        text-decoration: none;
    }

.bg-purple {
    background-color: #725daf;
    color: white;
}

.btn-outline-purple {
    color: #725daf;
    border: 1px solid #725daf;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-purple:hover,
    .btn-outline-purple:focus,
    .btn-outline-purple:active {
        color: white;
        background-color: #725daf;
        border-color: #725daf;
        text-decoration: none;
    }

.bg-olive {
    background-color: #9aaf5d;
    color: white
}

.btn-outline-olive {
    color: #9aaf5d;
    border: 1px solid #9aaf5d;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-olive:hover,
    .btn-outline-olive:focus,
    .btn-outline-olive:active {
        color: white;
        background-color: #9aaf5d;
        border-color: #9aaf5d;
        text-decoration: none;
    }


.styled-checkbox {
    width: 24px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    border: 2px solid #2ae796;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .styled-checkbox:checked {
        background-color: #2ae796;
        border-color: #2ae796;
    }

        .styled-checkbox:checked::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 8px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.fade-toggle {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

    .fade-toggle.visible {
        opacity: 1;
        pointer-events: auto;
    }

/*.styled-checkbox {
    width: 24px;
    height: 24px;
    accent-color: #2ae796;
    cursor: pointer;
    transform: scale(1.3);
}*/