:root {
    --one-clr: #C0C1C0;
    --two-clr: #E4E2AE;
    --three-clr: #9D803E;
    --four-clr: #E4E2AE;
    --five-clr: #606061;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.left {
    float: left;
    margin: 10px;
}

.right {
    float: left;
    margin: 13px;
    font-weight: bold;
}

/* .radio button start */
.radio {
    width: 20px;
    position: relative;
}
.radio label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 10px;
    box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid #babbbc;
}

.radio label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    border: 6px solid var(--three-clr);
    background: transparent;
    border-radius: 10px;
    opacity: 0;
    transform: rotate(-45deg);
}

.radio label:hover::after {
    opacity: 0.5;
}

.radio input[type=radio] {
    visibility: hidden;
}

.radio input[type=radio]:checked+label:after {
    opacity: 1;
}