#selector {
    position: relative;
    height: 21rem;
    width: 21rem;
}

#outer-circle {
    position: absolute;
    height: 21rem;
    width: 21rem;
    background-color: hsl(216, 98.4%, 52.2%);
    border-radius: 50%;
    top: 0.0%;
    left: 0.0%;
}

#mid-circle {
    position: absolute;
    height: 14rem;
    width: 14rem;
    background-color: hsl(216, 88.4%, 62.2%);
    border-radius: 50%;
    top: 16.666666%;
    left: 16.666666666%;
}

#inner-cirle {
    position: absolute;
    height: 7rem;
    width: 7rem;
    background-color: hsl(216, 78.4%, 72.2%);
    border-radius: 50%;
    top: 33.333333%;
    left: 33.333333%;
}

body {
    background-color: rgb(0, 204, 204, 1);
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
}

h3, h4 {
    color: rgb(0, 204, 204, 1);
    padding: 8px;
    text-align: center;
}

h5 {
    color: rgb(204, 204, 204, 1);
    font-weight: 400;
    text-align: center;
}

li, a {
    color: rgb(255, 255, 255, 1);
}

.greyed-out {
    color: rgb(255, 255, 255, 50%);
}

.selectorButton {
    position: absolute;
    top: calc(50% - 0.6em);
    left: calc(50% - 0.6em);
    margin: 0;
    width: 1.2em;
    height: 1.2em;
}

.after {
    display: none !important;
}

.dev {
    border: 2px solid red;
}

.spanli {
    font-size: 1rem;
}

svg {
    top: -100px;
}

.radio-item {
    position: absolute;
    top: calc(50% - 0.6em);
    left: calc(50% - 0.6em);
    margin: 0;
    width: 1.2em;
    height: 1.2em;
}
.radio-item input[type='radio'] {
    display: none;
}
/*
.radio-item label:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(30, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}*/
.radio-item input[type='radio']:checked + label:after {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: absolute;
    left: 0em;
    background-color: rgba(0, 0, 0, 0);
    border: 0.25rem solid black;
    content: '';
    display: inline-block;
    visibility: visible;
}

/*https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons*/

.radio-item label[for=sba]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(30, 100%, 85%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbb]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(120, 100%, 90%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbc]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(180, 100%, 85%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbd]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(260, 90%, 75%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbe]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(300, 100%, 85%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbf]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(0, 100%, 85%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbg]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(30, 100%,65%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbh]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(120, 100%,70%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbi]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(180, 100%,60%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbj]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(260, 100%,64%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbk]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(300, 100%,70%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbl]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(0, 100%,70%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbm]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(30, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbn]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(120, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbo]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(180, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbp]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(260, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbq]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(300, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbr]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: hsl(0, 100%, 40%);
    content: '';
    display: inline-block;
    visibility: visible;
}

.radio-item label[for=sbs]:before {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    position: relative;
    background-color: yellow;
    content: '';
    display: inline-block;
    visibility: visible;
}