@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Black.ttf) format(truetype);
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-BlackItalic.ttf) format(truetype);
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-ExtraBold.ttf) format(truetype);
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-ExtraBoldItalic.ttf) format(truetype);
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Bold.ttf) format(truetype);
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-BoldItalic.ttf) format(truetype);
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-SemiBold.ttf) format(truetype);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-SemiBoldItalic.ttf) format(truetype);
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Medium.ttf) format(truetype);
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-MediumItalic.ttf) format(truetype);
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Regular.ttf) format(truetype);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Italic.ttf) format(truetype);
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Light.ttf) format(truetype);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-LightItalic.ttf) format(truetype);
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-ExtraLight.ttf) format(truetype);
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-ExtraLightItalic.ttf) format(truetype);
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-Thin.ttf) format(truetype);
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'JostLocal';
    src: url(../font/Jost/Jost-ThinItalic.ttf) format(truetype);
    font-weight: 100;
    font-style: italic;
}

:root{ /*variables*/
    --Pozadi: #091419;/*#050b0e*/
    --Text: #ffffff;
    --Primary: #06ff7a;
    --Secondary: #4bf1e4;
    --Accent: #02fe34;
    --Text2: #000000;
    --Pozadi2: #000000;
    --Pozadi3: #4d4d4d;
    --Pozadi4: #1d1d1d;
    --Text3: #061a00;
    --Ruda: #de0000;
    --Yellow: #f0b000;

    --highlight: #797979;

    --menuHeight: clamp(4.8vw, 9.6vh, 9.6vh);
    

    --borderWidth: clamp(0.12vw, 0.22vh, 0.22vh);
}
@media(max-aspect-ratio: 8/15){
    :root{
        --menuHeight: calc(clamp(4.8vw, 9.6vh, 9.6vh)*2);
    }
}

/*
green
--Pozadi: #091419;
--Text: #ffffff;
--Primary: #06ff7a;
--Secondary: #4bf1e4;
--Accent: #02fe34;
--Text2: #000000;

blue
--Pozadi: #091419;
--Text: #ffffff;
--Primary: #06f6ff;
--Secondary: #06ff7a;
--Accent: #0f84ff;
--Text2: #000000;

violet
--Pozadi: #091419;
--Text: #ffffff;
--Primary: #9c7eff; 
--Secondary: #06ff7a;
--Accent: #753cff;
--Text2: #000000;

pink
--Pozadi: #091419;
--Text: #ffffff;
--Primary: #ff68f0;
--Secondary: #4bf1e4;
--Accent: #ff1eca;
--Text2: #000000;

(orange)
--Pozadi: #091419;
--Text: #ffffff;
--Primary: #ff6f29;
--Secondary: #06ff7a;
--Accent: #ff5300;
--Text2: #000000;
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "JostLocal", Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent;
    /*overscroll-behavior: none !important;*/

    font-weight: 400;
    color-scheme: dark;/**/
}

::-webkit-scrollbar {
    width: clamp(0.6vw, 1.2vh, 1.2vh);
}
/* Track */
::-webkit-scrollbar-track {
    background: var(--Pozadi2); 
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background:  var(--Pozadi3);
    border-radius: clamp(0.25vw, 0.5vh, 0.5vh);
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--Text); 
}
/* Handle on click */
::-webkit-scrollbar-thumb:active {
    background: var(--Primary);
}

html{
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    min-height: 100%;
    width: 100vw;

    display: flex;
    flex-direction: column;

    scroll-behavior: smooth;

    overflow-x: hidden !important;
}
body{
    background-color: var(--Pozadi);
    flex-grow: 1;

    min-height: 100%;
    width: 100vw;

    display: flex;
    flex-direction: column;

    overflow-x: hidden !important;
}


a{
    text-decoration: none;
    color: var(--Text);
    font-weight: 400;
}
a img{
    height: 100%;
    object-fit: contain;
}

.cflx{
    display: flex;
    justify-content: center;
    align-items: center;
}

a.textLink1{
    color: var(--Text);
    text-decoration: underline;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.textLink1:hover{
        color: var(--Primary);
    }
}
a.textLink1:active{
    transition-duration: 0.1s;
    color: var(--Primary);
}
a.textLink1.active{
    color: var(--Primary);
    pointer-events: none;
}

a.textLink2{
    color: var(--Text);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.textLink2:hover{
        color: var(--Primary);
    }
}
a.textLink2:active{
    transition-duration: 0.1s;
    color: var(--Primary);
}
a.textLink2.active{
    color: var(--Primary);
    pointer-events: none;
}


div.menu{
    height: var(--menuHeight);
    width: 100vw;
    background-color: var(--Pozadi2);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    justify-content: space-between;
}

div.menu div.logoPart{
    height: 100%;
}
div.menu div.logoPart a{
    height: 70%;
    margin-left: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
    
}
div.menu div.logoPart a img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Pozadi2));
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.menu div.logoPart a:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Primary));
    }
}
div.menu div.logoPart a:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Primary));
}

div.menu div.contentMenu{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

div.menu div.contentMenu div.left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: clamp(1vw, 2vh, 2vh);
}
div.menu div.contentMenu div.left a{
    font-size: clamp(1.4vw, 2.8vh, 2.8vh);
    margin-left: clamp(1vw, 2vh, 2vh);
    margin-right: clamp(1vw, 2vh, 2vh);

    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.menu div.contentMenu div.left a:hover{
        color: var(--Primary);
    }
}
div.menu div.contentMenu div.left a:active{
    color: var(--Primary);
}
div.menu div.contentMenu div.left a.active{
    color: var(--Primary);
    pointer-events: none;
}

div.menu div.contentMenu div.right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: clamp(1.5vw, 3vh, 3vh);
}
div.menu div.contentMenu div.right a{
    height: clamp(1.4vw, 2.8vh, 2.8vh);
    margin-left: clamp(1vw, 2vh, 2vh);
    margin-right: clamp(1vw, 2vh, 2vh);
    position: relative;
}
div.menu div.contentMenu div.right a img.hvrImg{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.menu div.contentMenu div.right a:hover img.hvrImg{
        opacity: 1;
    }
}
div.menu div.contentMenu div.right a:active img.hvrImg{
    opacity: 1;
}
div.menu div.contentMenu div.right a.active{
    pointer-events: none;
}
div.menu div.contentMenu div.right a.active img.hvrImg{
    opacity: 1;
}

@media(max-aspect-ratio: 8/15){/*480/900*/
    div.menu{
        flex-direction: column;
        justify-content: space-between;
    }
    div.menu div.logoPart{
        height: 50%;
        margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    div.menu div.logoPart a{
        height: 90%;
    }
    div.menu div.contentMenu{
        margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    }
    div.menu div.contentMenu div.left a{
        font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    }
    div.menu div.contentMenu div.right a{
        height: clamp(1.3vw, 2.6vh, 2.6vh);
    }
}

div.logoHome{
    height: var(--menuHeight);
    position: absolute;
    left: clamp(1.5vw, 3vh, 3vh);
    top: clamp(0.75vw, 1.5vh, 1.5vh);
    z-index: 4;
}
div.logoHome a{
    height: 70%;
}
div.logoHome a img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Pozadi2));
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.logoHome a:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Primary));
    }
}
div.logoHome a:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Primary));
}



h1.toolName{
    color: var(--Primary);
    font-size: clamp(2.3vw, 4.6vh, 4.6vh);
    font-weight: 500;
    margin: clamp(2.5vw, 5vh, 5vh);
    text-align: center;
}
h1.toolName.lftside{
    font-size: clamp(3vw, 4.5vh, 6vh);
    margin: clamp(2.5vw, 4vh, 5vh);
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

div.container{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    /*padding-top: clamp(4vw, 8vh, 8vh);*/
}
div.container.lftside{
    padding-top: clamp(2vw, 3.5vh, 4vh);
    padding-left: 8vw;
    padding-right: 3vw;
    align-items: flex-start;
    padding-bottom: clamp(2vw, 3.5vh, 4vh);
    min-height: clamp(25vw, 55vh, 55vh);
}

div.content{
    min-width: clamp(40vw, 80vh, 80vw);
    min-height: clamp(20vw, 40vh, 40vh);
    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);
    /*border: #000000 solid var(--borderWidth);*/
    margin-bottom: clamp(2vw, 4vh, 4vh);
}
div.contentContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

input{
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    border: none;
    outline: none;
    padding: clamp(0.3vw, 0.6vh, 0.6vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    background: var(--Pozadi2);
    color: var(--Text);
}
input::placeholder {
    color: #7d7d7d;/*#6d6d6d*/
    opacity: 1; /* Firefox */
  }
input::-ms-input-placeholder { /* Edge 12 -18 */
    color: #7d7d7d;
}

div.colorInput{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.colorInput div{
    width: clamp(1.8vw, 3.6vh, 3.6vh);
    height: clamp(1.8vw, 3.6vh, 3.6vh);
    border: var(--Pozadi2) solid var(--borderWidth);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.colorInput input{
    font-size: clamp(1vw, 2vh, 2vh);
    padding: clamp(0.2vw, 0.4vh, 0.4vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
    margin-right: clamp(0.5vw, 1vh, 1vh);
    width: clamp(6vw, 12vh, 12vh);
}
div.colorInput a{
    font-size: clamp(0.95vw, 1.9vh, 1.9vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    background-color: var(--Primary);
    color: var(--Text2);
    padding: clamp(0.2vw, 0.4vh, 0.4vh);
    padding-left: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-right: clamp(0.3vw, 0.6vh, 0.6vh);
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.colorInput.mini div{
    width: clamp(1.2vw, 2.4vh, 2.4vh);
    height: clamp(1.2vw, 2.4vh, 2.4vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}
div.colorInput.mini input{
    font-size: clamp(0.8vw, 1.6vh, 1.6vh);
    padding: clamp(0.1vw, 0.2vh, 0.2vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-right: clamp(0.25vw, 0.5vh, 0.5vh);
    width: clamp(4vw, 8vh, 8vh);
}
div.colorInput.mini a{
    font-size: clamp(0.75vw, 1.5vh, 1.5vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    padding: clamp(0.1vw, 0.2vh, 0.2vh);
    padding-left: clamp(0.15vw, 0.3vh, 0.3vh);
    padding-right: clamp(0.15vw, 0.3vh, 0.3vh);
}
@media (min-width: 1200px){
    div.colorInput a:hover{
        background-color: var(--Accent);
    }
}
div.colorInput a:active{
    background-color: var(--Accent);
}

div.smallValueInput{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(1vw, 2vh, 2vh);
}
div.smallValueInput p{
    font-size: clamp(1.5vw, 3vh, 3vh);
    color: var(--Primary);
}
div.smallValueInput input{
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    padding: clamp(0.2vw, 0.4vh, 0.4vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
    width: clamp(6vw, 12vh, 12vh);
}
div.smallValueInput.mini{
    margin: 0;
}
div.smallValueInput.mini p{
    font-size: clamp(0.8vw, 1.6vh, 1.6vh);
    color: var(--Primary);
}
div.smallValueInput.mini input{
    font-size: clamp(0.8vw, 1.6vh, 1.6vh);
    padding: clamp(0.1vw, 0.2vh, 0.2vh);
    padding-left: clamp(0.2vw, 0.4vh, 0.4vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    margin-left: clamp(0.25vw, 0.5vh, 0.5vh);
    width: clamp(4vw, 8vh, 8vh);
}
/* Chrome, Safari, Edge, Opera */
div.smallValueInput input::-webkit-outer-spin-button,
div.smallValueInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

a.textButton{
    color: var(--Primary);
    font-size: clamp(1.5vw, 3vh, 3vh);
    margin-top: clamp(1.5vw, 3vh, 3vh);
    margin-bottom: clamp(1.5vw, 3vh, 3vh);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.textButton img{
    height: clamp(1.5vw, 3vh, 3vh);
    object-fit: contain;
    display: block;
    position: relative;
}
a.textButton img.abs{
    position: absolute;
    opacity: 0;
    height: clamp(1.5vw, 3vh, 3vh);
    object-fit: contain;
    display: block;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    z-index: 1;
}
@media (min-width: 1200px){
    a.textButton:hover{
        color: var(--Accent);
    }
    a.textButton:hover img.abs{
        opacity: 1;
    }
}
a.textButton:active{
    color: var(--Accent);
}
a.textButton:active img.abs{
    opacity: 1;
}


div.optionRow{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: clamp(0.75vw, 1.5vh, 1.5vh);
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
}
div.optionRow h4{
    color: var(--Primary);
    font-size: clamp(1.5vw, 3vh, 3vh);
    font-weight: 500;
    margin-right: clamp(1vw, 2vh, 2vh);
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}

div.optionRow.clean{
    margin-top: 0;
    margin-bottom: 0;
}
div.options{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
div.options div.option{
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
div.optionRow div.option.locked{
    transition-property: box-shadow;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}
.optionBorder{
    padding: clamp(0.5vw, 1vh, 1vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    border: var(--Pozadi2) solid var(--borderWidth);
    cursor: pointer;
    margin-right: clamp(1.5vw, 3vh, 3vh);
    opacity: 0.7;
    transition-property: border, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
.optionBorder.selected{
    border: var(--Primary) solid var(--borderWidth);
    opacity: 1;
}
div.options div.multiRow{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
div.options div.multiRow div.colorInput.mini{
    margin-top: clamp(0.2vw, 0.4vh, 0.4vh);
    margin-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
}
div.options div.multiRow div.smallValueInput.mini{
    margin-top: clamp(0.2vw, 0.4vh, 0.4vh);
    margin-bottom: clamp(0.2vw, 0.4vh, 0.4vh);
}
@media (min-width: 1200px){
    .optionBorder:hover{
        opacity: 1;
    }
    
    div.optionRow div.option.locked:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
        transition-duration: 0.4s;
    }
}
.optionBorder:active{
    opacity: 1;
}

div.optionRow div.option.locked:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
    transition-duration: 0.4s;
}

div.options div.option h5{
    color: var(--Text);
    font-size: clamp(1.5vw, 3vh, 3vh);
    font-weight: 400;
    line-height: 1.2;
}
div.options div.option h5 img{
    height: clamp(1.2vw, 2.4vh, 2.4vh);
    margin-right: clamp(0.4vw, 0.8vh, 0.8vh);
    object-fit: contain;
}

div.options div.imageOption{
    padding: clamp(0.25vw, 0.5vh, 0.5vh);
}
div.options div.imageOption div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(3.5vw, 7vh, 7vh);
    height: clamp(3.5vw, 7vh, 7vh);
}
div.options div.imageOption div img{
    object-fit: cover;
    height: 100%;
    min-width: 100%;
}
div.options div.imageOption div div.theme{
    border: var(--Pozadi2) solid clamp(0.3vw, 0.6vh, 0.6vh);
    background-color: var(--Pozadi);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.options div.imageOption div div.theme div.themeCenter{
    width: clamp(1.25vw, 2.5vh, 2.5vh);
    height: clamp(1.25vw, 2.5vh, 2.5vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
}

div.options div.selectImageOption{
    padding: 0;
}
div.options div.selectImageOption h5{
    padding: clamp(0.5vw, 1vh, 1vh);
    cursor: pointer;
}
div.options div.selectImageOption label img{
    display: none;
}
div.options div.selectImageOption label img.withsrc{
    display: block;
    width: clamp(4vw, 8vh, 8vh);
    height: clamp(4vw, 8vh, 8vh);
    padding: clamp(0.25vw, 0.5vh, 0.5vh);
    object-fit: cover;
    height: 100%;
    min-width: 100%;
    cursor: pointer;
}

a.confirmButton{
    background-color: var(--Secondary);
    color: var(--Text2);
    padding-left: clamp(4vw, 7vh, 8vh);
    padding-right: clamp(4vw, 7vh, 8vh);
    padding-top: clamp(0.5vw, 1vh, 1vh);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
    font-size: clamp(1.8vw, 3.6vh, 3.6vh);
    line-height: 1.4;
    border-radius: clamp(1vw, 2vh, 2vh);
    margin-top: clamp(1.25vw, 2.5vh, 2.5vh);
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    transition-property: background-color, width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.confirmButton.second{
    background-color: var(--Primary);
}
a.downloadButton{
    background-color: var(--Primary);
    color: var(--Text2);
    padding-left: clamp(3.5vw, 6vh, 7vh);
    padding-right: clamp(3.5vw, 6vh, 7vh);
    padding-top: clamp(0.5vw, 1vh, 1vh);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
    font-size: clamp(1.5vw, 3vh, 3vh);
    line-height: 1.4;
    border-radius: clamp(1vw, 2vh, 2vh);
    margin-top: clamp(1.25vw, 2.5vh, 2.5vh);
    margin-bottom: clamp(0.75vw, 1.5vh, 1.5vh);
    transition-property: background-color, width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.confirmButton:hover{
        background-color: var(--Accent);
    }
    a.downloadButton:hover{
        background-color: var(--Accent);
    }
}
a.confirmButton:active{
    background-color: var(--Accent);
}
a.downloadButton:active{
    background-color: var(--Accent);
}


label.ImageSelect{
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-bottom: clamp(3vw, 6vh, 6vh);
    width: clamp(30vw, 60vh, 70vw);
    height: clamp(20vw, 40vh, 40vh);
    background-color: var(--Pozadi2);
    border-radius: clamp(1vw, 2vh, 2vh);
    cursor: pointer !important;
    position: relative;
    border: var(--Primary) dashed var(--borderWidth);
    display: flex;
    justify-content: center;
    align-items: center;
}
label.ImageSelect input{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    cursor: pointer;
}
label.ImageSelect input::file-selector-button{
    cursor: pointer;
}
label.ImageSelect p{
    font-size: clamp(1.3vw, 2.2vh, 2.6vh);
    color: var(--Primary);
    text-align: center;
    padding: clamp(1vw, 2vh, 2vh);
}

p.textInfo{
    margin: clamp(1vw, 2vh, 2vh);
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    color: var(--Primary);
    text-align: center;
}

div.sliderGroup{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: clamp(1vw, 2vh, 2vh);
    width: clamp(8vw, 16vh, 16vh);
}
div.sliderGroup p{
    font-size: clamp(1vw, 2vh, 2vh);
    color: var(--Primary);
}
div.sliderGroup input {
    width: 100%;
    background: linear-gradient(to right, var(--Pozadi2), var(--Primary));
    -webkit-appearance: none;
    width: 100%;
    height: clamp(1vw, 2vh, 2vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    outline: none;
    margin-top: clamp(0.5vw, 0.1vh, 0.1vh);
    padding: 0;
}
div.sliderGroup input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(1.25vw, 2.5vh, 2.5vh);
    height: clamp(1.25vw, 2.5vh, 2.5vh);
    border-radius: 50%;
    background-color: var(--Secondary);
    cursor: pointer;
    /*border: var(--Pozadi2) solid calc(var(--borderWidth)*1);*/
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.sliderGroup input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(1.25vw, 2.5vh, 2.5vh);
    height: clamp(1.25vw, 2.5vh, 2.5vh);
    border-radius: 50%;
    background-color: var(--Secondary);
    cursor: pointer;
    /*border: var(--Pozadi2) solid calc(var(--borderWidth)*1);*/
}
@media (min-width: 1200px){
    div.sliderGroup input::-webkit-slider-thumb:hover {
        background-color: var(--Accent);
    }
    div.sliderGroup input::-moz-range-thumb:hover {
        background-color: var(--Accent);
    }
}
div.sliderGroup input::-webkit-slider-thumb:hover {
    background-color: var(--Accent);
}
div.sliderGroup input::-moz-range-thumb:hover {
    background-color: var(--Accent);
}

a.classicButton{
    display: block;
    color: var(--Pozadi2);
    background-color: var(--Primary);
    text-align: center;
    padding-left: clamp(2vw, 3vh, 4vh);
    padding-right: clamp(2vw, 3vh, 4vh);
    padding-top: clamp(0.4vw, 0.8vh, 0.8vh);
    padding-bottom: clamp(0.4vw, 0.8vh, 0.8vh);
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    line-height: 1.4;
    border-radius: clamp(1vw, 2vh, 2vh);
    margin: clamp(1vw, 2vh, 2vh);
    transition-property: background-color, width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.classicButton img{
    height: clamp(0.8vw, 1.6vh, 1.6vh);
    margin-right: clamp(0.2vw, 0.4vh, 0.4vh);
    object-fit: contain;
}
a.classicButton.smaller{
    font-size: clamp(1vw, 2vh, 2vh);
    padding-left: clamp(1.5vw, 2.5vh, 3vh);
    padding-right: clamp(1.5vw, 2.5vh, 3vh);
}
a.classicButton.second{
    color: var(--Primary);
    background-color: var(--Pozadi4);
}
a.classicButton.third{
    color: var(--Ruda);
    background-color: var(--Pozadi4);
}
a.classicButton.mini{
    font-size: clamp(0.95vw, 1.9vh, 1.9vh);
    border-radius: clamp(0.3vw, 0.6vh, 0.6vh);
    padding: clamp(0.2vw, 0.4vh, 0.4vh);
    padding-left: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-right: clamp(0.3vw, 0.6vh, 0.6vh);
}
@media (min-width: 1200px){
    a.classicButton:hover{
        background-color: var(--Accent);
    }
    a.classicButton.second:hover{
        background-color: var(--Pozadi2);
    }
    a.classicButton.third:hover{
        background-color: var(--Pozadi2);
    }
}
a.classicButton:active{
    background-color: var(--Accent);
}
a.classicButton.second:active{
    background-color: var(--Pozadi2);
}
a.classicButton.third:active{
    background-color: var(--Pozadi2);
}


div.iconButtonsGroup{
    display: flex;
    justify-content: center;
    align-items: center;

    max-width: 90%;
}
div.iconButtonsGroup div{
    height: clamp(1.5vw, 3vh, 3vh);
    width: clamp(1.5vw, 3vh, 3vh);
}
div.iconButtonsGroup a{
    height: clamp(3vw, 6vh, 6vh);
    width: clamp(3vw, 6vh, 6vh);
    padding: clamp(0.3vw, 0.6vh, 0.6vh);
    background-color: var(--Primary);
    margin: clamp(0.5vw, 1vh, 1vh);
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border-radius: clamp(1vw, 2vh, 2vh);
}
div.iconButtonsGroup a img{
    object-fit: contain;
    height: 100%;
    max-width: 100%;
}
@media (min-width: 1200px){
    div.iconButtonsGroup a:hover{
        background-color: var(--Accent);
    }
}
div.iconButtonsGroup a:active{
    background-color: var(--Accent);
}

div.normalImage{
    margin: clamp(1vw, 2vh, 2vh);
    display: flex;
    justify-content: center;
    align-items: center;
}
div.normalImage img{
    object-fit: contain;
    height: clamp(25vw, 50vh, 50vh);
    max-width: clamp(55vw, 110vh, 85vw);
    max-height: 70vh;
}

div.bigImage{
    margin: clamp(1vw, 2vh, 2vh);
    display: flex;
    justify-content: center;
    align-items: center;
}
div.bigImage img{
    object-fit: contain;
    height: clamp(35vw, 70vh, 70vh);
    max-width: clamp(55vw, 110vh, 85vw);
    max-height: 80vh;
}

div.smallImage{
    margin: clamp(1vw, 2vh, 2vh);
    display: flex;
    justify-content: center;
    align-items: center;
}
div.smallImage img{
    object-fit: contain;
    height: clamp(15vw, 30vh, 30vh);
    max-width: clamp(45vw, 90vh, 70vw);
    max-height: 50vh;
}

textarea{
    padding: clamp(0.5vw, 1vh, 1vh);
    background-color: var(--Pozadi2);
    outline: none;
    border: solid var(--Primary) var(--borderWidth);
    color: var(--Primary);
    border-radius: clamp(1vw, 2vh, 2vh) 0 0 clamp(1vw, 2vh, 2vh);
    font-size: clamp(0.9vw, 1.8vh, 1.8vh);
    max-width: 90%;
}
textarea::-webkit-resizer {
    display: none;
}


/* Customize the label (the container) */
.checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: clamp(2vw, 4vh, 4vh);
    margin: clamp(1vw, 2vh, 2vh);
    cursor: pointer;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    color: var(--Text);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    
    left: 0;
    height: clamp(1.6vw, 3.2vh, 3.2vh);
    width: clamp(1.6vw, 3.2vh, 3.2vh);
    background-color: var(--Text);
    border-radius: clamp(0.2vw, 0.4vh, 0.4vh);
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

@media (min-width: 1200px){
    /* On mouse-over, add a grey background color */
    .checkbox:hover input ~ .checkmark {
        background-color: var(--Primary);
    }
}
/* On mouse-over, add a grey background color */
.checkbox:active input ~ .checkmark {
    background-color: var(--Primary);
}


/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
    background-color: var(--Primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
    left: clamp(0.46vw, 0.92vh, 0.92vh);
    top: clamp(0.12vw, 0.24vh, 0.24vh);
    width: clamp(0.5vw, 1vh, 1vh);
    height: clamp(0.95vw, 1.9vh, 1.9vh);
    border: solid var(--Text2);
    border-width: 0 calc(var(--borderWidth)*1.5) calc(var(--borderWidth)*1.5) 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

a.textTopButton{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.6vw, 3vh, 3.2vh);
    color: var(--Text);
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.textTopButton img{
    object-fit: contain;
    margin: clamp(0.5vw, 1vh, 1vh);
    height: clamp(1.6vw, 3vh, 3.2vh);
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.textTopButton img.hvrImg{
    position: absolute;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.textTopButton:hover{
        color: var(--Text2);
    }
    a.textTopButton:hover img{
        opacity: 0;
    }
    a.textTopButton:hover img.hvrImg{
        opacity: 1;
    }
}
a.textTopButton:active{
    color: var(--Text2);
}
a.textTopButton:active img{
    opacity: 0;
}
a.textTopButton:active img.hvrImg{
    opacity: 1;
}

div.absFloatingButtonGroup{
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 2;
}
div.absFloatingButton{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer !important;
    pointer-events: auto !important;
    margin: clamp(0.5vw, 1vh, 1vh);
}
div.absFloatingButton img.absFloatingButton{
    object-fit: contain;
    height: clamp(1.6vw, 3.2vh, 3.2vh);
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

@media (min-width: 1200px){
    div.absFloatingButton:hover img.absFloatingButton{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
    }
    
}
div.absFloatingButton:active img.absFloatingButton{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
}

a.CircleAddButton{
    width: clamp(6vw, 12vh, 12vh);
    height: clamp(6vw, 12vh, 12vh);
    color: var(--Primary);
    background-color: var(--Pozadi);
    font-size: clamp(4.5vw, 9vh, 9vh);
    padding-bottom: clamp(0.7vw, 1.4vh, 1.4vh);
    border-radius: 50%;
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.CircleAddButton:hover{
        background-color: var(--Pozadi2);
    }
}
a.CircleAddButton:active{
    background-color: var(--Pozadi2);
}


div.window{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
div.window.show{
    display: flex;
}
div.window div.winBackground{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
}
div.window div.winContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 85%;
    max-height: 70%;

    width: clamp(35vw, 70vh, 85vw);
    z-index: 6;

    border-radius: clamp(1vw, 2vh, 2vh);
    overflow: hidden;
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);

}

div.window div.winContent div.winTop{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--Pozadi2);
    padding-top: clamp(0.3vw, 0.6vh, 0.6vh);
    padding-bottom: clamp(0.3vw, 0.6vh, 0.6vh);
}
div.window div.winContent div.winTop h1{
    max-width: 75%;
    color: var(--Text);
    font-size: clamp(2.2vw, 3vh, 4.4vh);
    font-weight: 500;
}
div.window div.winContent div.winTop a{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: clamp(0.75vw, 1.5vh, 1.5vh);

    position: absolute;
    right: 0;
}   
div.window div.winContent div.winTop a img{
    object-fit: contain;
    height: clamp(1.8vw, 2.5vh, 3.6vh);
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

div.window div.winContent div.winBottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: clamp(2vw, 4vh, 4vh);
    padding-bottom: clamp(2vw, 4vh, 4vh);
    padding-left: clamp(2vw, 4vh, 4vh);
    padding-right: clamp(2vw, 4vh, 4vh);
    background-color: var(--Pozadi);
    min-height: clamp(5vw, 10vh, 10vh);

    overflow-x: hidden;
    overflow-y: auto;
}

div.window div.winContent div.winBottom a.confirmButton{
    margin-top: clamp(3vw, 6vh, 6vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}

@media (min-width: 1200px){
    div.window div.winContent div.winTop a:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
    }
}
div.window div.winContent div.winTop a:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
}

a.backToTop{
    position: fixed;
    bottom: clamp(0.5vw, 1vh, 1vh);
    right: clamp(0.5vw, 1vh, 1vh);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(0.7vw, 1.4vh, 1.4vh);
    background-color: var(--Pozadi4);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    border-radius: 50%;

    transition-property: background-color, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;

    opacity: 1;
}
a.backToTop.show{
    opacity: 0;
    pointer-events: none;
}
a.backToTop img{
    object-fit: contain;
    height: clamp(1.5vw, 3vh, 3vh);
}

@media (orientation: portrait){
    a.backToTop{
        display: none !important;
    }
}

@media (min-width: 1200px){
    a.backToTop:hover{
        background-color: var(--Pozadi2);
    }
}
a.backToTop:active{
    background-color: var(--Pozadi2);
}

div.infoTextRow{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
div.infoTextRow a{
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}
p.infoText2{
    font-size: clamp(1.5vw, 2.5vh, 3vh);
    color: var(--Text);
    text-align: center;
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
p.infoText2 span{
    color: var(--Primary);
}
div.infoTextRow p.infoText2{
    margin-top: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}

h1.toolPage{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(2.2vw, 4.4vh, 4.4vh);
    font-weight: 500;
    margin: clamp(3.5vw, 7vh, 7vh);
}
a.favToolButton{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 100%;
    width: clamp(2vw, 4vh, 4vh);
    height: clamp(2vw, 4vh, 4vh);
    margin-left: clamp(1vw, 1vh, 2vh);
}
a.favToolButton img{
    position: absolute;
    display: block;
    object-fit: contain;
    width: clamp(2vw, 4vh, 4vh);
    height: clamp(2vw, 4vh, 4vh);
} 
a.favToolButton img.favhvrImg{
    position: absolute;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.favToolButton:hover img.favhvrImg{
        opacity: 1;
    }
}
a.favToolButton:active img.favhvrImg{
    opacity: 1;
}

div.basicToolLock{
    border-radius: inherit;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
div.basicToolLock img{
    object-fit: contain !important;
    height: clamp(3vw, 6vh, 6vh) !important;
    opacity: 0.95 !important;
    max-height: 70% !important;
    max-width: 70% !important;
}

div.panel.editMode div.basicToolLock{
    display: none;
}

h1.docName{
    color: var(--Primary);
    font-size: clamp(2.5vw, 4vh, 5vh);
    font-weight: 500;
    margin: clamp(2.5vw, 5vh, 5vh);
    text-align: left;
}
div.docSection{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: clamp(1vw, 2vh, 2vh);
    width: clamp(60vw, 120vh, 90vw);
}
div.docSection h2{
    color: var(--Primary);
    font-size: clamp(1.8vw, 3vh, 3.6vh);
    font-weight: 500;
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
div.docSection p{
    color: var(--Text);
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
div.docSection ul{
    color: var(--Text);
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    list-style-type: disc;
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
    margin-left: clamp(1.5vw, 3vh, 3vh);
}
div.docSection ul li{
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
div.docSection ul li b{
    font-weight: 500;
}

div.footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--Pozadi2);
    padding-top: clamp(1.5vw, 3vh, 3vh);
    padding-bottom: clamp(2vw, 4vh, 4vh);
    margin-top: clamp(2vw, 3vh, 4vh);
    padding-left: 5vw;
    padding-right: 5vw;
    width: 100%;
}

div.footer div.leftFooter{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: clamp(1.5vw, 3vh, 3vh);
    padding-bottom: clamp(1.5vw, 3vh, 3vh);
    margin-right: 10vw;
}
div.footer div.leftFooter h4{
    color: var(--Primary);
    font-size: clamp(2vw, 4vh, 4vh);
    font-weight: 500;
}
div.footer div.leftFooter p{
    color: var(--Text);
    margin-top: clamp(0.25vw, 0.5vh, 0.5vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
    font-size: clamp(1.2vw, 2.2vh, 2.4vh);
    font-weight: 400;
}
div.footer div.leftFooter span{
    font-weight: 500;
}
div.footer div.leftFooter div.social{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: clamp(1vw, 2vh, 2vh);
    margin-left: clamp(0.5vw, 1vh, 1vh);
}
div.footer div.leftFooter div.social a{
    height: clamp(2vw, 4vh, 4vh);
    width: clamp(2vw, 4vh, 4vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.footer div.leftFooter div.social a img{
    object-fit: contain;
    height: 100%;
    position: absolute;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.footer div.leftFooter div.social a img.hvrImg{
    height: 100%;
    position: absolute;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.footer div.leftFooter div.social a:hover img{
        opacity: 0;
    }
    div.footer div.leftFooter div.social a:hover img.hvrImg{
        opacity: 1;
    }
}
div.footer div.leftFooter div.social a:active img{
    opacity: 0;
}
div.footer div.leftFooter div.social a:active img.hvrImg{
    opacity: 1;
}

div.footer div.rightFooter{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--Text);
}
div.footer div.rightFooter a{
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    margin-bottom: clamp(0.35vw, 0.7vh, 0.7vh);
    margin-top: clamp(0.35vw, 0.7vh, 0.7vh);
}
div.footer div.rightFooter p{
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    margin-top: clamp(0.35vw, 0.7vh, 0.7vh);
    margin-bottom: clamp(0.6vw, 1.2vh, 1.2vh);
}
div.footer div.rightFooter p a{
    margin-bottom: 0;
    margin-top: 0;
}


div.cpri{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--Pozadi2);
    width: 100%;
    margin-top: clamp(1.5vw, 2vh, 3vh);
}
div.cpri.wborder{
    margin-top: 0;
}
div.cpri div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(1vw, 2vh, 2vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
    width: clamp(80vw, 160vh, 90vw);
}
div.cpri.wborder div{
    border-top: var(--Text) solid var(--borderWidth);
}
div.cpri div p{
    color: var(--Text);
    font-size: clamp(1.05vw, 2vh, 2.1vh);
    text-align: center;
}
div.cpri div a{
    color: var(--Primary);
    font-weight: 500;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    div.cpri div a:hover{
        color: var(--Accent);
    }
}
div.cpri div a:active{
    transition-duration: 0.1s;
    color: var(--Accent);
}


div.dotaz{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--Pozadi2);
    width: 100vw;
    position: fixed;
    bottom: 0;
    z-index: 7;
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Primary);
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: clamp(1.5vw, 3vh, 3vh);
    padding-bottom: clamp(2vw, 3vh, 4vh);
}
div.dotaz a.close{
    position: absolute;
    right: 0;
    top: 0;
    margin: clamp(1vw, 2vh, 2vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
}
div.dotaz a.close img{
    object-fit: contain;
    height: clamp(1.25vw, 2vh, 2.5vh);
    transition-property: filter;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.dotaz h1{
    color: var(--Primary);
    font-size: clamp(2.25vw, 4.5vh, 4.5vh);
    font-weight: 500;
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
}
div.dotaz p{
    color: var(--Text);
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
div.dotaz div.buttonsDotaz{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
div.dotaz div.buttonsDotaz a{
    margin: clamp(1vw, 2vh, 2vh);
    padding: clamp(0.5vw, 1vh, 1vh) clamp(1.5vw, 3vh, 3vh);
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    font-weight: 500;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border-radius: clamp(1vw, 2vh, 2vh);
}
div.dotaz div.buttonsDotaz a.allow{
    background-color: var(--Primary);
    color: var(--Pozadi2);
}
div.dotaz div.buttonsDotaz a.reject{
    background-color: var(--Pozadi);
}

@media (min-width: 1200px){
    div.dotaz div.buttonsDotaz a.allow:hover{
        background-color: var(--Accent);
    }
    div.dotaz div.buttonsDotaz a.reject:hover{
        background-color: var(--Pozadi4);
    }
    div.dotaz a.close:hover img{
        filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
    }
}
div.dotaz div.buttonsDotaz a.allow:active{
    background-color: var(--Accent);
}
div.dotaz div.buttonsDotaz a.reject:active{
    background-color: var(--Pozadi4);
}
div.dotaz a.close:active img{
    filter: drop-shadow(0 0 clamp(0.2vw, 0.4vh, 0.4vh) var(--Text));
}


div.brn{
    margin: clamp(1vw, 2vh, 2vh);
    margin-top: clamp(2.5vw, 5vh, 5vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
    display: flex;
    justify-content: center;
    align-items: center;
}
div.brn.lft{
    margin-left: 0;
}
div.brn.tl{
    margin-bottom: calc(-1 * clamp(1.15vw, 2.3vh, 2.3vh));
    margin-top: clamp(2vw, 4vh, 4vh);
}
@media (max-aspect-ratio: 8 / 9) {
    div.brn.pnl {
        margin-top: clamp(5.5vw, 11vh, 11vh);
        margin-bottom: calc(-1 * clamp(1.5vw, 3vh, 3vh));
    }
}
div.brn a{
    color: var(--Text);
    text-align: center;
    background-color: var(--Pozadi4);
    font-size: clamp(1.1vw, 2.1vh, 2.2vh);
    transition-property: background-color, opacity, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 150vw) * 0) var(--Pozadi2);
    padding: clamp(0.5vw, 1vh, 1vh) clamp(2vw, 4vh, 4vh);
    border-radius: clamp(2vw, 4vh, 4vh);
    opacity: 0.9;
}
div.brn.lft a{
    opacity: 1;
}

@media (min-width: 1200px){
    div.brn a:hover{
        background-color: var(--Pozadi2);
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 150vw) * 0.02) var(--Pozadi2);
        opacity: 1;
    }
}
div.brn a:active{
    background-color: var(--Pozadi2);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 150vw) * 0.02) var(--Pozadi2);
    opacity: 1;
    transition-duration: 0.1s;
}