:root {
    --scales-blue: #2194d0;
    --scales-green: #21d094;
    --scales-purple: #9421d0;
    --scales-light-green: #94d021;
    --scales-pink: #d02194;
    --scales-orange: #d09421;
    --scales-theme: var(--scales-blue);
}

.scale-bg-light-green {
    background-color: var(--scales-light-green);
}

.scale-light-green {
    color: var(--scales-light-green);
}

.scale-bg-pink {
    background-color: var(--scales-pink);
}

.scale-pink {
    color: var(--scales-pink);
}

.scale-bg-orange {
    background-color: var(--scales-orange);
}

.scale-orange {
    color: var(--scales-orange);
}

.scale-bg-purple {
    background-color: var(--scales-purple);
}

.scale-purple {
    color: var(--scales-purple);
}

.scale-bg-blue {
    background-color: var(--scales-blue);
}

.scale-blue {
    color: var(--scales-blue);
}

.scale-bg-green {
    background-color: var(--scales-green);
}

.scale-green {
    color: var(--scales-green);
}

body {
    font-family: "Josefin Sans", sans-serif;
    background-color: #f0f0f0;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    text-decoration: none;
    color: #fffb;
}

.header {
    background-color: var(--scales-theme);
    color: #ffff;
    min-height: 128px;
    padding: 10px 0 20px 20px;
    text-align: center !important;
}

.banner {
    height: 0 !important;
}

.banner ul.dropdown-menu {
    --bs-dropdown-min-width: 24px !important;
}

.banner ul.dropdown-menu li {
    padding-bottom: 1px;
}

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

.bg-theme {
    background-color: var(--scales-theme);
}

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

.text-indent-32 {
    text-indent: 32px;
}

.footer {
    text-align: center;
    background-color: var(--scales-theme);
    color: #fff;
}

.main {
    background-color: var(--scales-theme);
    padding: 20px;
    margin: 20px 0;
    color: #ffff;
}

.main h2 {
    text-align: center;
}

.main h4, .main label, .main .input-group-text, .main button, .main .card-footer {
    color: var(--scales-theme);
}

#scale_1_intervals .col, #scale_2_intervals .col {
    margin: 0 !important;
    padding: 0 !important;
}

#scale_1_intervals .col label, #scale_2_intervals .col label {
    text-align: center;
    display: inline-block;
    width: 100%;
}

#scale_1_frequencies .input-group label, #scale_2_frequencies .input-group label {
    min-width: 30%;
    max-width: 30%;
    text-align: right;
    display: inline-block;
}

.opacity-11 {
    opacity: 0.36 !important;
}

.opacity-22 {
    opacity: 0.44 !important;
}

.opacity-33 {
    opacity: 0.52 !important;
}

.opacity-44 {
    opacity: 0.60 !important;
}

.opacity-55 {
    opacity: 0.68 !important;
}

.opacity-66 {
    opacity: 0.76 !important;
}

.opacity-77 {
    opacity: 0.84 !important;
}

.opacity-88 {
    opacity: 0.92 !important;
}

.opacity-99 {
    opacity: 1 !important;
}

button.opacity-11:hover,
button.opacity-22:hover,
button.opacity-33:hover,
button.opacity-44:hover,
button.opacity-55:hover,
button.opacity-66:hover,
button.opacity-77:hover,
button.opacity-88:hover,
button.opacity-99:hover {
    opacity: 1 !important;
}

.modal button.bg-theme:hover {
    background-color: white !important;
    color: var(--scales-theme) !important;
}