.mainLed {
    background-color: white;
    padding: 5%;
    margin: auto;
    height: 60%;
    width: 80%;
    position: relative;
    border-radius: 3px;
    box-shadow: 0em 0em 1.5rem -0.5em #000000;
    justify-items: center;
    align-items: center;
    z-index: 10;
}

#error-text {
    margin-top: 0px;
    color: red;
    font-size: 1em;
    text-align: center;
}

#help {
    text-align: center;
    font-size: 1em;
}

.field {
    border: none;
    margin: auto;
    border-bottom: 1px solid gray;
    font-size: 1em;
    padding-left: 10px;
    height: 30px;
    width: 150px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.colorSelection {
    grid-area: LED;
}

.color {
    width: 100%;
    display: flex;
    font-size: 0.8em;
    justify-content: space-around;
    flex-wrap: wrap;
}

.inputGrid label {
    width: 100%;
}

.selectBox input {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 20;
}

.color #otherVolt {
    height: 20%;
    width: 70%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    border: none;
    border-bottom: 1px solid gray;
    margin-bottom: 5%;
    padding-left: 10px;
    font-size: 1em;
    background-color: transparent;
}

.selectBox {
    width: 120px;
    height: 0;
    padding-bottom: 120px;
    position: relative;
    margin: 10px;
    background-color: #f0f0f0;
    border-radius: 10px;
}

.parrelOrSeries {
    width: 100%;
    margin-top: 5%;
    display: flex;
    font-size: 0.8em;
    justify-content: space-evenly;
    flex-wrap: row;
}

.inputs {
    margin-top: 5%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

#selectionContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: baseline;
    align-items: center;
    flex-direction: column;
}

.led svg {
    height: 65px;
}

#green {
    fill: #00ff00;
}

#red {
    fill: #ff0000;
}

#yellow {
    fill: #fbff00;
}

#blue {
    fill: #0084ff;
}

#white {
    fill: #ffffff;
}

#gray {
    fill: #999999;
}

.st1 {
    fill: #828282;
}

.st2 {
    fill: #4e4e4e;
    opacity: 0.3;
}

#selectionContent p {
    position: absolute;
    bottom: 15px;
}

#selectionContent>p.voltage {
    position: absolute;
    font-size: 0.8em;
    bottom: 0px;
}

#selectionContent::before,
#selectionContent::after {
    content: '';
    position: absolute;
    border-radius: 10px;
}

#selectionContent::after {
    width: 100%;
    height: 100%;
    border-width: 10px;
    margin-top: -8%;
    z-index: 0;
}

.selectBox input:checked~#selectionContent::after {
    border-style: solid;
    border-color: rgb(163, 163, 163);
}

.band1 {
    width: 12px;
    height: 69px;
    position: absolute;
    top: 20px;
    left: 92px;
    opacity: 0.9;
}

.band2 {
    width: 12px;
    height: 52px;
    position: absolute;
    top: 29px;
    left: 138px;
    opacity: 0.9;
}

.band3 {
    width: 12px;
    height: 52px;
    position: absolute;
    top: 29px;
    left: 180px;
    opacity: 0.9;
}

.band4 {
    width: 12px;
    height: 52px;
    position: absolute;
    top: 29px;
    left: 198px;
    opacity: 0.9;
}

.color option[value="0"] {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.color option[value="1"] {
    background-color: rgb(128, 96, 0);
    color: rgb(255, 255, 255);
}

.color option[value="2"] {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}

.color option[value="3"] {
    background-color: rgb(251, 151, 66);
    color: rgb(255, 255, 255);
}

.color option[value="4"] {
    background-color: rgb(255, 255, 0);
    color: rgb(0, 0, 0);
}

.color option[value="5"] {
    background-color: rgb(0, 176, 80);
    color: rgb(255, 255, 255);
}

.color option[value="6"] {
    background-color: rgb(0, 112, 192);
    color: rgb(255, 255, 255);
}

.color option[value="7"] {
    background-color: rgb(208, 0, 213);
    color: rgb(255, 255, 255);
}

.color option[value="8"] {
    background-color: rgb(128, 128, 128);
    color: rgb(255, 255, 255);
}

.color option[value="9"] {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.multiplier option[value=""] {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.multiplier option[value="0"] {
    background-color: rgb(128, 96, 0);
    color: rgb(255, 255, 255);
}

.multiplier option[value="00"] {
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}

.multiplier option[value="000"] {
    background-color: rgb(251, 151, 66);
    color: rgb(255, 255, 255);
}

.multiplier option[value="0000"] {
    background-color: rgb(255, 255, 0);
    color: rgb(0, 0, 0);
}

.multiplier option[value="00000"] {
    background-color: rgb(0, 176, 80);
    color: rgb(255, 255, 255);
}

.multiplier option[value="000000"] {
    background-color: rgb(0, 112, 192);
    color: rgb(255, 255, 255);
}

.multiplier option[value="0000000"] {
    background-color: rgb(208, 0, 213);
    color: rgb(255, 255, 255);
}

.multiplier option[value="000000000"] {
    background-color: rgb(128, 128, 128);
    color: rgb(255, 255, 255);
}

.multiplier option[value="0.1"] {
    background-color: rgb(234, 178, 0);
    color: rgb(0, 0, 0);
}

.multiplier option[value="0.01"] {
    background-color: rgb(201, 201, 201);
    color: rgb(0, 0, 0);
}

.tolerance option[value="1"] {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.tolerance option[value="2"] {
    background-color: rgb(128, 96, 0);
    color: rgb(255, 255, 255);
}

.tolerance option[value="0.5"] {
    background-color: rgb(0, 176, 80);
    color: rgb(255, 255, 255);
}

.tolerance option[value="0.25"] {
    background-color: rgb(0, 112, 192);
    color: rgb(255, 255, 255);
}

.tolerance option[value="0.1"] {
    background-color: rgb(208, 0, 213);
    color: rgb(255, 255, 255);
}

.tolerance option[value="0.05"] {
    background-color: rgb(128, 128, 128);
    color: rgb(255, 255, 255);
}

.tolerance option[value="5"] {
    background-color: rgb(234, 178, 0);
    color: rgb(0, 0, 0);
}

.tolerance option[value="10"] {
    background-color: rgb(201, 201, 201);
    color: rgb(0, 0, 0);
}

.output {
    padding-top: 25px;
    display: grid;
    position: relative;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 50% 50%;
    gap: 0px 0px;
    grid-template-areas: "resistor resistor resistor" "outputText outputText outputText";
}

.outputText {
    grid-area: outputText;
    text-align: center;
    margin-top: 20px;
}

.bottom {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.resistor {
    grid-area: resistor;
    position: relative;
    width: 350px;
    margin: auto;
}