:root{
    --KalkulackaOptionWidthUnit: clamp(6.5vw, 7vh, 13vh);
}
div.Prispevky{
    margin-bottom: clamp(2vw, 2vh, 4vh);
}

div.podMenu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1.KalkulackaNadpis{
    text-align: center;
    color: var(--Secondary);
    font-weight: 500;
    font-size: clamp(2.85vw, 5vh, 5.7vh);
    display: block;
    width: 100%;
    margin-top: clamp(1vw, 2vh, 2vh);
}

p.KalkulackaPopis{
    text-align: center;
    color: var(--Text);
    font-size: clamp(1.25vw, 2vh, 2.5vh);
    display: block;
    width: 100%;
    margin-bottom: clamp(1.7vw, 3.4vh, 3.4vh);
    padding-left: clamp(0.5vw, 1vh, 1vh);
    padding-right: clamp(0.5vw, 0.75vh, 1vh);
}

div.KalkulackaContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
div.KalkulackaContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2vw, 4vh, 4vh);
    margin-bottom: clamp(2vw, 4vh, 4vh);
    width: clamp(70vw, 140vh, 90vw);
    padding: clamp(1vw, 2vh, 2vh);
    padding-bottom: clamp(1.5vw, 3vh, 3vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    box-shadow: 0 0 clamp(1vw, 1.25vh, 2vh) var(--Pozadi2);
}

div.sloupceKalkulacky{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(3vw, 4vh, 6vh);
}
div.sloupecKalkulacky{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(1.5vw, 2vh, 3vh);
    border-radius: clamp(1vw, 2vh, 2vh);
}
div.sloupecKalkulacky h2{
    font-size: clamp(1.6vw, 3.2vh, 3.2vh);
    text-align: center;
    color: var(--Secondary);
    font-weight: 500;
    display: block;
    width: 100%;
}
div.sloupecKalkulacky h2 span{
    color: var(--Text);
}
div.sloupecKalkulacky div.selectKalkulacky{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5vw, 2vh, 3vh);
    width: 100%;
}
div.sloupecKalkulacky div.selectKalkulacky.vertical{
    flex-direction: column;
}

div.sloupecKalkulacky a.pohlaviOption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--Text);
    align-items: center;
    background-color: var(--Pozadi2);
    border-style: solid;
    border-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    cursor: pointer;
    text-decoration: none;
    width: var(--KalkulackaOptionWidthUnit);
    height: var(--KalkulackaOptionWidthUnit);
    border-radius: clamp(0.5vw, 1vh, 1vh);
}

@media (min-width: 1200px) {
    div.sloupecKalkulacky a.pohlaviOption:hover{
        border-color: var(--Text);
        transition-duration: 0.3s;
    }
}
div.sloupecKalkulacky a.pohlaviOption:active{
    border-color: var(--Text);
    transition-duration: 0.1s;
}
div.sloupecKalkulacky a.pohlaviOption.selected{
    border-color: var(--Primary);
}

div.sloupecKalkulacky a.pohlaviOption img{
    height: clamp(2vw, 2vh, 4vh);
    object-fit: contain;
    display: block;
    margin-bottom: clamp(0.5vw, 0.5vh, 1vh);
}

div.sloupecKalkulacky a.pohlaviOption h4{
    font-size: clamp(1.25vw, 2vh, 2.5vh);
    font-weight: 500;
    color: var(--Text);
    text-align: center;
    text-decoration: none;
}

div.sloupecKalkulacky div.inputKalkulacky{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1vw, 1.25vh, 2vh);
    width: calc(var(--KalkulackaOptionWidthUnit) * 2 + clamp(1.5vw, 2vh, 3vh));
    background-color: var(--Pozadi2);
    border-radius: clamp(0.5vw, 1vh, 1vh);
    padding: clamp(1.22vw, 2vh, 2.44vh) clamp(0.75vw, 1vh, 1.5vh);
}

div.sloupecKalkulacky div.inputKalkulacky h4{
    font-size: clamp(1.25vw, 2vh, 2.5vh);
    font-weight: 500;
    color: var(--Text);
    text-align: center;
    text-decoration: none;
}
div.sloupecKalkulacky div.inputKalkulacky h4 span{
    color: var(--Secondary);
}
div.sloupecKalkulacky div.inputKalkulacky input{
    padding: clamp(0.4vw, 0.6vh, 0.8vh);
    background-color: var(--Pozadi);
    border-width: var(--borderWidth);
    border-color: var(--Pozadi);
    border-style: solid;
    color:var(--Secondary);
    font-weight: 400;
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    resize: none;
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    width: clamp(5vw, 5vh, 10vh);
}

div.sloupecKalkulacky div.inputKalkulacky input:focus{
    border-color: var(--Text);
    outline: none !important;
}
div.sloupecKalkulacky div.inputKalkulacky input::-webkit-input-placeholder{
    color: var(--Text);
}
div.sloupecKalkulacky div.inputKalkulacky input::placeholder{
    color: var(--Text);
    opacity: 1; /* Firefox */
}

div.sloupecKalkulacky div.inputKalkulacky input::-webkit-outer-spin-button,
div.sloupecKalkulacky div.inputKalkulacky input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

div.sloupecKalkulacky div.inputKalkulacky input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

div.sloupecKalkulacky a.aktivitaOption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--Text);
    align-items: center;
    background-color: var(--Pozadi2);
    border-style: solid;
    border-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    cursor: pointer;
    text-decoration: none;
    width: clamp(25vw, 45vh, 85vw);
    height: clamp(4vw, 8vh, 8vh);
    border-radius: clamp(0.5vw, 1vh, 1vh);
}

@media (min-width: 1200px) {
    div.sloupecKalkulacky a.aktivitaOption:hover{
        border-color: var(--Text);
        transition-duration: 0.3s;
    }
}
div.sloupecKalkulacky a.aktivitaOption:active{
    border-color: var(--Text);
    transition-duration: 0.1s;
}
div.sloupecKalkulacky a.aktivitaOption.selected{
    border-color: var(--Primary);
}

div.sloupecKalkulacky a.aktivitaOption h3{
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    font-weight: 500;
    color: var(--Secondary);
    text-align: center;
    text-decoration: none;
    margin-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
}
div.sloupecKalkulacky a.aktivitaOption p{
    font-size: clamp(1vw, 1.8vh, 2vh);
    font-weight: 400;
    color: var(--Text);
    text-align: center;
    text-decoration: none;
}

div.sloupecKalkulacky a.cilOption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--Text);
    align-items: center;
    background-color: var(--Pozadi2);
    border-style: solid;
    border-color: var(--Pozadi2);
    border-width: var(--borderWidth);
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    cursor: pointer;
    text-decoration: none;
    width: calc(var(--KalkulackaOptionWidthUnit) * 2 + clamp(1.5vw, 2vh, 3vh));
    height: clamp(7.67vw, 12vh, 15.34vh);
    border-radius: clamp(0.5vw, 1vh, 1vh);
}

@media (min-width: 1200px) {
    div.sloupecKalkulacky a.cilOption:hover{
        border-color: var(--Text);
        transition-duration: 0.3s;
    }
}
div.sloupecKalkulacky a.cilOption:active{
    border-color: var(--Text);
    transition-duration: 0.1s;
}
div.sloupecKalkulacky a.cilOption.selected{
    border-color: var(--Primary);
}

div.sloupecKalkulacky a.cilOption img{
    height: clamp(2vw, 3.5vh, 4vh);
    object-fit: contain;
    display: block;
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}

div.sloupecKalkulacky a.cilOption h3{
    font-size: clamp(1.5vw, 2vh, 3vh);
    font-weight: 600;
    color: var(--Text);
    text-align: center;
    text-decoration: none;
}

div.vysledekKalkulacky{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
}
div.vysledekKalkulacky h2{
    font-size: clamp(1.6vw, 2.3vh, 3.2vh);
    color: var(--Pozadi2);
    font-weight: 600;
    background-color: var(--Text);
    padding: clamp(0.75vw, 1.25vh, 1.5vh) clamp(4vw, 3vh, 8vh);
    border-radius: clamp(1vw, 2vh, 2vh);
}