@import url("include.css");

.output {
    font-size: 18pt;
    text-align: left;
}

.input {
    font-size: 20pt;
    height: 100%;
    display: inline-table;
    font-family: 'Exo 2';
}

input[type="checkbox"] {
    font-size: 22;
    width: 20px;
    height: 20px;
}

input:hover {
    opacity: 0.7;
  }

  select:hover {
    opacity: 0.7;
  }

.labelMeterCheck {
    text-align: center;
    font-size: 20pt;
    height: 100%;
    display: inline-table;
    font-family: 'Exo 2';
}

.inputMeterCheck {
    text-align: center;
    max-width: 150px;
    width: 30vw;
    font-size: 22pt;
    display: inline-table;
    font-family: 'Exo 2';
}

.inputErr {
    text-align: center;
    font-size: 22pt;
    height: 100%;
    width: 200px;
    display: inline-block;
    font-family: 'Exo 2';
    margin: 5px;
}

.inputModelDecoding {
    font-size: 20pt;
    padding: 0%;
    margin: 0%;
    text-align: center;
}

.inputRadio {
    font-size: 20pt;
}

@media (max-width: 480px) {
    .output {
        font-size: clamp(1rem, 4vw, 1.15rem);
    }

    .input,
    .labelMeterCheck,
    .inputMeterCheck,
    .inputErr,
    .inputModelDecoding,
    .inputRadio {
        font-size: clamp(0.95rem, 4.5vw, 1.1rem);
    }

    .inputMeterCheck {
        width: 65vw;
        max-width: 180px;
    }

    /* Keeps checkbox blocks from dominating small screens. */
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
}