/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

div.content{
    width: clamp(60vw, 120vh, 90vw);
    min-height: clamp(29vw, 58vh, 58vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
    padding-top: clamp(1vw, 2vh, 2vh);
}

div.options{
    max-width: 90%;
}

div.options div.option h5{
    color: var(--Text);
    font-size: clamp(1.5vw, 2.4vh, 3vh);
    font-weight: 400;
    line-height: 1.2;
}

div.displayUC{
    width: clamp(30vw, 60vh, 77vw);
    border: solid var(--Text2) var(--borderWidth);
    margin-top: clamp(4vw, 8vh, 8vh);
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    background-color: var(--Pozadi2);
}
div.displayUC.show{
    display: flex;
}
div.displayUC div.input{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
div.displayUC input.inputField{
    width: 60%;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    padding: clamp(0.25vw, 0.5vh, 0.5vh);
    display: block;
    text-align: left;
    overflow-x: auto;
    border: none;
    outline: none;
}

div.displayUC div.output{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
div.displayUC p.outputField{
    width: 60%;
    display: block;
    padding: clamp(0.25vw, 0.5vh, 0.5vh);
    padding-top: clamp(0.75vw, 1.5vh, 1.5vh);
    text-align: left;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    color: var(--Primary);
}

div.displayUC p{
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    color: var(--Primary);
}
div.displayUC p.From{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-110%);
    padding-right: clamp(0.5vw, 1vh, 1vh);
    padding-top: clamp(0.5vw, 1vh, 1vh);
    color: var(--Text);
}

div.displayUC p.To{
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    padding-right: clamp(0.5vw, 1vh, 1vh);
    padding-bottom: clamp(0.25vw, 0.5vh, 0.5vh);
}

select{
    font-size: clamp(1vw, 2vh, 2vh);
    padding: clamp(0.1vw, 0.2vh, 0.2vh);
    background-color: var(--Pozadi4);
    border: solid var(--Text) calc(var(--borderWidth)*0.5);
    border-radius: clamp(0.25vw, 0.5vh, 0.5vh) clamp(0.25vw, 0.5vh, 0.5vh) 0 0;
    outline: none;
    cursor: pointer;
}
select.fromUnit{
    color: var(--Text);
}
select.toUnit{
    color: var(--Primary);
    border: solid var(--Primary) calc(var(--borderWidth)*0.5);
}

@media (orientation: portrait){
    div.displayUC{
        margin-left: clamp(2vw, 4vh, 4vh);
    }
    div.displayUC p{
        font-size: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    div.displayUC p.From, div.displayUC p.To{
        padding-right: clamp(0.25vw, 0.5vh, 0.5vh);
    }
    select{
        font-size: clamp(0.7vw, 1.3vh, 1.4vh);
    }
    div.displayUC input.inputField{
        width: 60%;
        font-size: clamp(0.8vw, 1.6vh, 1.6vh)
    }
    div.displayUC p.outputField{
        width: 60%;
        font-size: clamp(0.8vw, 1.6vh, 1.6vh)
    }
}