/* FOOD */

input[name="rating1"] {
    position: absolute;
    opacity: 0;
}

input[name="rating2"] {
    position: absolute;
    opacity: 0;
}

input[name="rating3"] {
    position: absolute;
    opacity: 0;
}

input[name="rating4"] {
    position: absolute;
    opacity: 0;
}

input[name="rating5"] {
    position: absolute;
    opacity: 0;
}

input[name="rating6"] {
    position: absolute;
    opacity: 0;
}

input[type="radio"]+svg {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    
}

input+svg {
    cursor: pointer;
}

input[class="sad1"]:hover+svg,
input[class="sad1"]:checked+svg,
input[class="sad1"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral1"]:hover+svg,
input[class="neutral1"]:checked+svg,
input[class="neutral1"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy1"]:hover+svg,
input[class="happy1"]:checked+svg,
input[class="happy1"]:focus+svg {
    fill: rgb(73, 199, 134);
}

input[class="sad2"]:hover+svg,
input[class="sad2"]:checked+svg,
input[class="sad2"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral2"]:hover+svg,
input[class="neutral2"]:checked+svg,
input[class="neutral2"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy2"]:hover+svg,
input[class="happy2"]:checked+svg,
input[class="happy2"]:focus+svg {
    fill: rgb(73, 199, 134);
}

input[class="sad3"]:hover+svg,
input[class="sad3"]:checked+svg,
input[class="sad3"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral3"]:hover+svg,
input[class="neutral3"]:checked+svg,
input[class="neutral3"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy3"]:hover+svg,
input[class="happy3"]:checked+svg,
input[class="happy3"]:focus+svg {
    fill: rgb(73, 199, 134);
}

input[class="sad4"]:hover+svg,
input[class="sad4"]:checked+svg,
input[class="sad4"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral4"]:hover+svg,
input[class="neutral4"]:checked+svg,
input[class="neutral4"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy4"]:hover+svg,
input[class="happy4"]:checked+svg,
input[class="happy4"]:focus+svg {
    fill: rgb(73, 199, 134);
}

input[class="sad5"]:hover+svg,
input[class="sad5"]:checked+svg,
input[class="sad5"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral5"]:hover+svg,
input[class="neutral5"]:checked+svg,
input[class="neutral5"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy5"]:hover+svg,
input[class="happy5"]:checked+svg,
input[class="happy5"]:focus+svg {
    fill: rgb(73, 199, 134);
}

input[class="sad6"]:hover+svg,
input[class="sad6"]:checked+svg,
input[class="sad6"]:focus+svg {
    fill: rgb(212, 94, 68);
}

input[class="neutral6"]:hover+svg,
input[class="neutral6"]:checked+svg,
input[class="neutral6"]:focus+svg {
    fill: rgb(171, 164, 102);
}

input[class="happy6"]:hover+svg,
input[class="happy6"]:checked+svg,
input[class="happy6"]:focus+svg {
    fill: rgb(73, 199, 134);
}

svg {
    fill: rgba(143, 143, 143, 1);
    height: 3.6rem;
    width: 3.6rem;
    margin: 0.2rem;
}