html, body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "slnt" 0;
    -webkit-tap-highlight-color: transparent; /* Preventing the blue highlighting of each click in Android */
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.radio {
    display: grid;  
}

.radio.modal {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    border-radius: 8px;

    label {
        width: auto;
    }
}

.radio.modal.invalid {
    border: 2px solid var(--invalid) !important;
}


.radio.inline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: auto;
    gap: 24px;
}

.radio label {
    position: relative;
    margin: 0;
    padding: 6px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: gainsboro;
    cursor: pointer;
    text-align: center;
    height: 24px;

    v-icon {
        position: absolute !important;
        left: 16px !important;
        width: 16px !important;
    }
}

.radio label.success {
    background: mediumseagreen !important;
}

.radio input[type="radio"] {
    display: none;
}
.radio input[type="radio"]:checked + label {
    background-color: var(--main-bg-light);
    color: white;
} 

.balloon {
    background: var(--meco-red);
    border-radius: 50%;
    color: white;
    align-content: center;
    text-align: center;
    width: 26px;
    height: 26px;
    padding-right: 3px;
    position: absolute;
    right: 26px;
    font-size: 0.7em;
}