:root{
    --scaleValue: 0.8;
    --scaleValue2: 0.5;
}
@media (max-aspect-ratio: 8/9){
    :root{
        --scaleValue: 1;
        --scaleValue2: 1;
    }
}

div.container{
    position: relative;
}
div.panel{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: clamp(85vw, 170vh, 95vw);
    min-height: clamp(20vw, 40vh, 40vh);
}
div.panelColumn{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
    margin-left: clamp(2vw, 4vh, 4vh);
    margin-right: clamp(2vw, 4vh, 4vh);
    min-width: clamp(38.5vw, 77vh, 86vw);
}
div.panelItemContainer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.panelItem{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: clamp(1vw, 2vh, 2vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    background-color: var(--Pozadi);
    width: clamp(38.5vw, 77vh, 86vw);
    min-height: clamp(5vw, 10vh, 10vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(3vw, 6vh, 6vh);
    position: relative;
    filter: brightness(100%);
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.panel.editMode div.panelItem{
    filter: brightness(50%);
    pointer-events: none;
}
div.panelItem h2{
    font-weight: 500;
    color: var(--Primary);
    font-size: clamp(1.75vw, 3.5vh, 3.5vh);
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
    margin-right: clamp(0.5vw, 1vh, 1vh);
    text-align: center;
    display: block;
    max-width: 75%;
}
div.panelItem div.content{
    min-width: 100%;
    width: calc(100% / var(--scaleValue));
    min-height: clamp(5vw, 10vh, 10vh);
    box-shadow: none;
    padding: clamp(1vw, 2vh, 2vh);
    padding-top: 0;
    padding-bottom: 0;
    transform: scale(var(--scaleValue));
    margin-bottom: calc(calc(var(--scaleValue) - 1) / 2 * 100%);
    margin-top: calc(calc(var(--scaleValue) - 1) / 2 * 100%);
}
div.panelItem div.content.lockedTool{
    height: clamp(15vw, 15vh, 30vh);
}
div.panelItem div.content.noZoom{
    width: 100%;
    transform: none;
    margin-bottom: 0;
    margin-top: 0;
}
div.panelItem div.content.spaceAround{
    margin-bottom: 0;
    margin-top: 0;
}
div.panelItem div.content.littleSpaceAround{
    padding-top: clamp(2vw, 4vh, 4vh);
}
div.panelItem div.content.littleSpaceBott{
    padding-bottom: clamp(2vw, 4vh, 4vh);
}

div.panelItem a.panelOpen{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
div.panelItem a.panelOpen img{
    object-fit: contain;
    margin: clamp(1vw, 1vh, 2vh);
    height: clamp(2vw, 3vh, 4vh);
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.panelItem a.panelOpen img.hvrImg{
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.panelItem a.panelOpen:hover img{
        opacity: 0;
    }
    div.panelItem a.panelOpen:hover img.hvrImg{
        opacity: 1;
    }
}
div.panelItem a.panelOpen:active img{
    opacity: 0;
}
div.panelItem a.panelOpen:active img.hvrImg{
    opacity: 1;
}

div.panel.editMode div.panelItem a.panelOpen img{
    opacity: 0;
}
div.panel.editMode div.panelItem a.panelOpen img.hvrImg{
    opacity: 0;
}


div.panelGroup{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: clamp(38.5vw, 77vh, 86vw);
    min-height: clamp(5vw, 10vh, 10vh);
}
a.panelSmall{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: clamp(1vw, 2vh, 2vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    background-color: var(--Pozadi);
    padding: clamp(1vw, 2vh, 2vh);
    width: clamp(10.8vw, 21.6vh, 21.6vh);
    height: clamp(10.8vw, 21.6vh, 21.6vh);
    margin-bottom: clamp(3vw, 6vh, 6vh);
    margin-top: 0;
    filter: brightness(100%);
    transition-property: box-shadow, filter;
    transition-duration: 0.5s, 0.3s;
    transition-timing-function: ease-out;
}
div.panel.editMode a.panelSmall{
    filter: brightness(50%);
    pointer-events: none;
}
a.panelSmall img{
    object-fit: contain;
    height: 40%;
}
a.panelSmall h3{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    min-height: 55%;
    line-height: normal;
    color: var(--Primary);
    font-weight: 500;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}
div.panelGroupAdd{
    padding: clamp(1vw, 2vh, 2vh);
    width: clamp(8vw, 16vh, 16vh);
    height: clamp(10.8vw, 21.6vh, 21.6vh);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(3vw, 6vh, 6vh);
    margin-right: clamp(2.8vw, 5.6vh, 5.6vh);
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}


div.panel.editMode div.panelGroupAdd{
    opacity: 1;
}
@media (min-width: 1200px){
    div.panelGroupAdd{
        opacity: 0;
    }
    div.panelGroupAdd:hover{
        opacity: 1;
    }
}


a.panelBig{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: clamp(38.5vw, 77vh, 86vw);
    min-height: clamp(5vw, 10vh, 10vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    background-color: var(--Pozadi);
    padding: clamp(2vw, 4vh, 4vh);
    margin-bottom: clamp(3vw, 6vh, 6vh);
    filter: brightness(100%);
    transition-property: box-shadow, filter;
    transition-duration: 0.5s, 0.3s;
    transition-timing-function: ease-out;
}
div.panel.editMode a.panelBig{
    filter: brightness(50%);
    pointer-events: none;
}
a.panelBig img{
    object-fit: contain;
    height: clamp(5.8vw, 11.6vh, 11.6vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
a.panelBig h3{
    font-size: clamp(1.75vw, 3.5vh, 3.5vh);
    color: var(--Primary);
    text-decoration: none;
    font-weight: 500;
    margin: clamp(1.5vw, 3vh, 3vh);
    text-align: center;
}


@media (min-width: 1200px){
    a.panelSmall:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
        transition-duration: 0.4s;
    }
    a.panelBig:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
        transition-duration: 0.4s;
    }
    a.panelSmall.locked:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
        transition-duration: 0.4s;
    }
    a.panelBig.locked:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
        transition-duration: 0.4s;
    }
}
a.panelSmall:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
    transition-duration: 0.4s;
}
a.panelBig:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
    transition-duration: 0.4s;
}
a.panelSmall.locked:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
    transition-duration: 0.4s;
}
a.panelBig.locked:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
    transition-duration: 0.4s;
}




#colorjoeCP{
    transform: scale(calc(1 / var(--scaleValue)));
    margin: calc(clamp(2.5vw, 5vh, 7.5vw) / var(--scaleValue));
    margin-top: calc(clamp(1vw, 2vh, 3vw) / var(--scaleValue));
}

div.displayCalc{
    margin-top: calc(clamp(1vw, 2vh, 2vh) / var(--scaleValue));
}

#currentTime{
    font-size: clamp(6.5vw, 5.5vh, 13vh);
    margin-top: clamp(2.5vw, 5vh, 5vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
    margin-right: clamp(0.5vw, 1vh, 1vh);
    width: clamp(27.5vw, 23.1vh, 80vw);
}
#currentTime.ampm{
    font-size: clamp(6.5vw, 4vh, 13vh);
    width: clamp(39vw, 24vh, 85vw);
}

label.checkbox.ampm{
    margin-top: clamp(4vw, 8vh, 8vh);
    margin-bottom: clamp(2vw, 4vh, 4vh);
}

#clocksTZ{
    width: 100%;
    margin-bottom: 0;
    min-height: 0;
}
div.timezone-container{
    transform: scale(var(--scaleValue2));
    margin-bottom: calc(calc(var(--scaleValue) - 1) / 2 * 90%);
    margin-top: calc(calc(var(--scaleValue) - 1) / 2 * 90%);

    margin-left: calc(calc(var(--scaleValue) - 1) / 2 * 125%);
    margin-right: calc(calc(var(--scaleValue) - 1) / 2 * 125%);
}
div.addClock{
    transform: scale(var(--scaleValue2));
    margin-bottom: calc(calc(var(--scaleValue) - 1) / 2 * 100%);
    margin-top: calc(calc(var(--scaleValue) - 1) / 2 * 100%);

    margin-left: calc(calc(var(--scaleValue) - 1) / 2 * 125%);
    margin-right: calc(calc(var(--scaleValue) - 1) / 2 * 125%);
}

@media (max-aspect-ratio: 8/9){
    div.panelColumn{
        margin-left: clamp(1vw, 2vh, 2vh);
        margin-right: clamp(1vw, 2vh, 2vh);
    }
    div.panelItem{
        width: clamp(38.5vw, 77vh, 90vw);
    }
    div.panelItem div.content{
        padding-left: 0;
        padding-right: 0;
    }

    #colorjoeCP{
        transform: scale(calc(1 / var(--scaleValue)));
        margin: calc(clamp(0.5vw, 1vh, vw) / var(--scaleValue));
    }

}

a.textTopButton{
    top: clamp(2vw, 4vh, 4vh);
    right: clamp(3vw, 6vh, 6vh);
}

@media (max-aspect-ratio: 8/9){
    h1.toolName{
        margin-top: clamp(4vw, 8vh, 8vh);
    }
    a.textTopButton{
        top: clamp(1vw, 2vh, 2vh);
        right: clamp(1.5vw, 3vh, 3vh);
    }
}

div.absFloatingButtonGroup{
    z-index: -1;
    transition-property: z-index;
    transition-duration: 0s;
    transition-delay: 0.3s;
    transition-timing-function: ease-out;
}
div.panel.editMode div.absFloatingButtonGroup{
    transition-delay: 0s;
    z-index: 2;
}
div.absFloatingButton{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.panel.editMode div.absFloatingButton{
    opacity: 1;
}

div.panelDeleteItem{
    top: clamp(0.5vw, 1vh, 1vh);
    right: clamp(0.5vw, 1vh, 1vh);
}
div.panelMoveArrows{
    top: clamp(0.5vw, 1vh, 1vh);
    left: clamp(0.5vw, 1vh, 1vh);
    flex-direction: column;
}
div.absFloatingButton.bigRedFloatingButton img.absFloatingButton{
    height: clamp(2vw, 4vh, 4vh);
}
@media (min-width: 1200px){
    div.panelDeleteItem div.absFloatingButton:hover img.absFloatingButton{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Ruda));
    }
    div.absFloatingButton.bigRedFloatingButton:hover img.absFloatingButton{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Ruda));
    }
}
div.panelDeleteItem div.absFloatingButton:active img.absFloatingButton{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Ruda));
}
div.absFloatingButton.bigRedFloatingButton:active img.absFloatingButton{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Ruda));
}


div.panelAdd{
    background-color: var(--Pozadi);
    border-radius: clamp(4vw, 8vh, 8vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    margin-bottom: clamp(4vw, 8vh, 8vh);
    margin-top: clamp(1vw, 2vh, 2vh);
    transition-property: width, height, background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;

    max-width: clamp(38.5vw, 77vh, 86vw);
    
}

div.panelAdd div.plusButton{
    width: clamp(8vw, 16vh, 16vh);
    height: clamp(8vw, 16vh, 16vh);
    color: var(--Primary);
    font-size: clamp(5vw, 10vh, 10vh);
    padding-bottom: clamp(0.95vw, 1.9vh, 1.9vh);
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

div.panelAdd div.contentPanelAdd{
    padding-top: clamp(0.75vw, 1.5vh, 1.5vh);
    padding-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    overflow: hidden;
    height: clamp(8vw, 16vh, 16vh);
    width: 0;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    transition-property: width, height, margin-left, margin-right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.panelAdd div.contentPanelAdd a{
    color: var(--Text);
    text-decoration: none;
    font-size: clamp(1.25vw, 2.5vh, 2.5vh);
    text-align: left;
    display: block;
    opacity: 0;
    transition-property: opacity, color;
    transition-duration: 0.1s, 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease-out;
    width: clamp(15vw, 30vh, 70vw);
}

div.panelAdd:hover{
    width: calc(clamp(8vw, 16vh, 16vh)+clamp(15vw, 30vh, 70vw));
    background-color: var(--Pozadi2);
}
div.panelAdd:hover div.contentPanelAdd{
    height: clamp(8vw, 16vh, 16vh);
    width: clamp(12vw, 24vh, 65vw);
    margin-left: clamp(1.5vw, 2vh, 3vh);
    margin-right: clamp(1.5vw, 2vh, 3vh);
}
div.panelAdd:hover div.contentPanelAdd a{
    opacity: 1;
    transition-duration: 0.3s;
    transition-delay: 0.2s, 0s;
}


@media (min-width: 1200px){
    div.panelAdd div.contentPanelAdd a:hover{
        color: var(--Primary);
    }
}
div.panelAdd div.contentPanelAdd a:active{
    color: var(--Primary);
}

select.toolSelect{
   font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}


#imageImgClr{
    height: clamp(25vw, 50vh, 50vh);
    max-width: clamp(35vw, 70vh, 70vw);
    max-height: 50vh;
    object-fit: contain;
}
@media (orientation: portrait){
    #imageImgClr{
        height: clamp(20vw, 40vh, 40vh);
        max-width: clamp(35vw, 70vh, 70vw);
        max-height: 40vh;
    }
}