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;
}

.radio-group {
    display: flex; /* Arrange radio options horizontally */
    gap: 10px; /* Space between options */
}

    .radio-group label {
        display: flex;
        flex-direction: column; /* Stack square and label vertically */
        align-items: center; /* Center content horizontally */
        cursor: pointer;
        position: relative; /* For positioning the custom radio */
    }

    .radio-group input[type="radio"] {
        /* Hide the default radio button */
        appearance: none;
        -webkit-appearance: none; /* For Safari */
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
    }

.custom-radio {
    width: 40px; /* Size of the square */
    height: 40px;
    border: 2px solid #ccc; /* Default border color */
    background-color: #f0f0f0; /* Default background color */
    border-radius: 5px; /* Slightly rounded corners for the square */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out; /* Smooth transitions for visual changes */
}

/* Style for the checked state */
.radio-group input[type="radio"]:checked + .custom-radio {
    border-color: #007bff; /* Border color when checked */
    background-color: #e6f2ff; /* Background color when checked */
}

    /* Add a colored indicator inside the square when checked */
    .radio-group input[type="radio"] + .custom-radio::after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 3px; /* Slightly rounded indicator */
        background-color: #007bff; /* Indicator color */
    }

/* Specific color for each radio option */
.radio-group input[type="radio"][value="0"] + .custom-radio::after {
    background-color: black;
}

.chlorine .radio-group input[type="radio"][value="1"] + .custom-radio::after {
    background-color: #c5cbc1;
}

.chlorine .radio-group input[type="radio"][value="2"] + .custom-radio::after {
    background-color: #c1bec7;
}
.chlorine .radio-group input[type="radio"][value="3"] + .custom-radio::after {
    background-color: #c7c0cd;
}
.chlorine .radio-group input[type="radio"][value="4"] + .custom-radio::after {
    background-color: #d2bada;
}
.chlorine .radio-group input[type="radio"][value="5"] + .custom-radio::after {
    background-color: #c29cc5;
}
.chlorine .radio-group input[type="radio"][value="6"] + .custom-radio::after {
    background-color: #b181b3;
}
.alkalinity .radio-group input[type="radio"][value="1"] + .custom-radio::after {
    background-color: #732076;
}

.alkalinity .radio-group input[type="radio"][value="2"] + .custom-radio::after {
    background-color: #676729;
}

.alkalinity .radio-group input[type="radio"][value="3"] + .custom-radio::after {
    background-color: #48c146;
}

.alkalinity .radio-group input[type="radio"][value="4"] + .custom-radio::after {
    background-color: #639498;
}

.alkalinity .radio-group input[type="radio"][value="5"] + .custom-radio::after {
    background-color: #418cac;
}

.alkalinity .radio-group input[type="radio"][value="6"] + .custom-radio::after {
    background-color: #3d81b1;
}

.ph .radio-group input[type="radio"][value="1"] + .custom-radio::after {
    background-color: #d39e68;
}

.ph .radio-group input[type="radio"][value="2"] + .custom-radio::after {
    background-color: #cd9483;
}

.ph .radio-group input[type="radio"][value="3"] + .custom-radio::after {
    background-color: #ce8b93;
}

.ph .radio-group input[type="radio"][value="4"] + .custom-radio::after {
    background-color: #c87c7f;
}

.ph .radio-group input[type="radio"][value="5"] + .custom-radio::after {
    background-color: #ce7684;
}

.ph .radio-group input[type="radio"][value="6"] + .custom-radio::after {
    background-color: #d76584;
}


.hardness .radio-group input[type="radio"][value="1"] + .custom-radio::after {
    background-color: #316980;
}

.hardness .radio-group input[type="radio"][value="2"] + .custom-radio::after {
    background-color: #2b5f86;
}

.hardness .radio-group input[type="radio"][value="3"] + .custom-radio::after {
    background-color: #2a498c;
}

.hardness .radio-group input[type="radio"][value="4"] + .custom-radio::after {
    background-color: #213478;
}

.hardness .radio-group input[type="radio"][value="5"] + .custom-radio::after {
    background-color: #1f3173;
}

.hardness .radio-group input[type="radio"][value="6"] + .custom-radio::after {
    background-color: #2b2370;
}


.radio-label {
    margin-top: 5px; /* Space between square and label */
    font-size: 0.9em;
    color: #333;
}