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

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

    --borderWidth: clamp(0.12vw, 0.22vh, 0.22vh);

    --inputWidth: clamp(22vw, 44vh, 75vw);

    --checkboxSmaller: 0.65;
}

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

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

    display: flex;
    flex-direction: column;

    scroll-behavior: smooth;

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

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

    display: flex;
    flex-direction: column;

    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

div.container{
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
}

div.logoHome{
    height: calc(var(--menuHeight)*1.25);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(0.75vw, 1.5vh, 1.5vh);
    z-index: 4;
}

div.loginBG{
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
}
div.loginBG img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

div.loginContainer{
    width: clamp(35vw, 70vh, 90vw);
    height: clamp(27vw, 60vh, 60vh);
    border-radius: clamp(1vw, 2vh, 2vh);
    border: solid calc(var(--borderWidth)*0.5) rgba(255, 255, 255, 0.75);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px) brightness(40%);
    backdrop-filter: blur(clamp(0.4vw, 0.8vh, 0.8vh)) brightness(40%);
    -webkit-backdrop-filter: blur(8px) brightness(40%);
    -webkit-backdrop-filter: blur(clamp(0.4vw, 0.8vh, 0.8vh)) brightness(40%);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
}
div.loginContainer.signupContainer{
    height: clamp(28vw, 65vh, 65vh);
}
div.loginContainer.signupContainer2{
    height: auto;
    min-height: clamp(28vw, 70vh, 70vh);
}

div.loginContainer h2{
    margin-bottom: clamp(0.25vw, 0.5vh, 0.5vh);
    font-size: clamp(2.7vw, 5.4vh, 5.4vh);
    color: var(--Text);
    font-weight: 500;
    text-align: center;
    max-width: 80%;
}
div.loginContainer h2.smaller{
    font-size: clamp(2.7vw, 4vh, 5.4vh);
}

div.loginContainer h3{
    margin-bottom: clamp(0.25vw, 0.5vh, 0.5vh);
    font-size: clamp(2.5vw, 4vh, 5vh);
    color: var(--Text);
    font-weight: 500;
    text-align: center;
    max-width: 80%;
}

div.loginContainer div.loginInput{
    margin-top: clamp(2vw, 4vh, 4vh);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--inputWidth);
}
div.loginContainer div.loginInput input{
    display: block;
    width: 100%;
    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    padding-left: clamp(2.5vw, 5vh, 5vh);
    border-radius: clamp(1.5vw, 3vh, 3vh);
    font-size: clamp(1.2vw, 2.2vh, 2.4vh);
    background-color: transparent;
    border: solid calc(var(--borderWidth)*0.5) rgba(255, 255, 255, 0.75);
    transition-property: border;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
div.loginContainer div.loginInput input:focus{
    border: solid calc(var(--borderWidth)*0.5) var(--Primary);
}
div.loginContainer div.loginInput input::placeholder {
    color: #ffffff;/*#6d6d6d*/
    opacity: 1; /* Firefox */
  }
  div.loginContainer div.loginInput input::-ms-input-placeholder { /* Edge 12 -18 */
    color: #ffffff;
}
div.loginContainer div.loginInput img.typeIcon{
    position: absolute;
    left: 0;
    object-fit: contain;
    height: clamp(1vw, 2vh, 2vh);
    margin-left: clamp(1vw, 2vh, 2vh);
}
div.loginContainer div.loginInput img.displayPass{
    position: absolute;
    right: 0;
    object-fit: contain;
    width: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(0.75vw, 1.5vh, 1.5vh);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
div.loginContainer div.loginInput img.displayPass.show{
    opacity: 1;
    pointer-events: auto;
}
div.loginContainer div.loginInput p.errorMes{
    position: absolute;
    bottom: 100%;
    left: 0;
    font-size: clamp(1vw, 1.5vh, 2vh);
    color: var(--Ruda);
    font-weight: 500;
}

div.subsection{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    width: var(--inputWidth);
}
div.subsection .checkbox{
    font-size: clamp(1vw, 1.8vh, 2vh);
    padding-left: calc(clamp(2vw, 4vh, 4vh)*var(--checkboxSmaller));
    margin-left: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}
div.subsection .checkmark {
    height: calc(clamp(1.6vw, 3.2vh, 3.2vh)*var(--checkboxSmaller));
    width: calc(clamp(1.6vw, 3.2vh, 3.2vh)*var(--checkboxSmaller));
    border-radius: clamp(0.2vw, 0.4vh, 0.4vh);
    background-color: var(--Text);
}
div.subsection .checkmark.red{
    background-color: var(--Ruda);
}
div.subsection .checkbox .checkmark:after {
    left: calc(clamp(0.46vw, 0.92vh, 0.92vh)*var(--checkboxSmaller));
    top: calc(clamp(0.12vw, 0.24vh, 0.24vh)*var(--checkboxSmaller));
    width: calc(clamp(0.5vw, 1vh, 1vh)*var(--checkboxSmaller));
    height: calc(clamp(0.95vw, 1.9vh, 1.9vh)*var(--checkboxSmaller));
    border-width: 0 calc(var(--borderWidth)*1.5*var(--checkboxSmaller)) calc(var(--borderWidth)*1.5*var(--checkboxSmaller)) 0;
}

p.loginText{
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    font-weight: 400;
    color: var(--Text);
    margin-top: clamp(1vw, 2vh, 2vh);
    max-width: 80%;
    text-align: center;
}
a.textLink{
    font-size: clamp(1.1vw, 2.2vh, 2.2vh);
    color: var(--Text);
    text-decoration: none;
    font-weight: 400;
    transition-property: color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    margin-top: clamp(1vw, 2vh, 2vh);
}

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


a.loginButton{
    display: block;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    color: var(--Text2);
    background-color: var(--Text);
    text-decoration: none;
    font-weight: 500;
    margin: clamp(1vw, 2vh, 2vh);
    /*margin-top: clamp(1.5vw, 3vh, 3vh);*/
    width: var(--inputWidth);
    text-align: center;
    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    border-radius: clamp(1.5vw, 3vh, 3vh);

    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
a.loginButton.second{
    background-color: transparent;
    color: var(--Text);
    border: solid calc(var(--borderWidth)*0.5) rgba(255, 255, 255, 0.75);

    transition-property: border, color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
@media (min-width: 1200px){
    a.loginButton:hover{
        background-color: var(--Primary);
    }
    a.loginButton.second:hover{
        background-color: transparent;
        color: var(--Primary);
        border: solid calc(var(--borderWidth)*0.5) var(--Primary);
    }
}
a.loginButton:active{
    background-color: var(--Primary);
}
a.loginButton.second:active{
    background-color: transparent;
    color: var(--Primary);
    border: solid calc(var(--borderWidth)*0.5) var(--Primary);
}


div.codeInput{
    margin-top: clamp(2vw, 4vh, 4vh);
    margin-bottom: clamp(0.5vw, 1vh, 1vh);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--inputWidth);

    padding: clamp(0.6vw, 1.2vh, 1.2vh);
    padding-bottom: clamp(1vw, 2vh, 2vh);
    border-radius: clamp(1.5vw, 3vh, 3vh);
    background-color: transparent;
    border: solid calc(var(--borderWidth)*0.5) rgba(255, 255, 255, 0.75);
}
div.codeInput p.errorMes{
    position: absolute;
    bottom: 100%;
    left: 0;
    font-size: clamp(1vw, 2vh, 2vh);
    color: var(--Ruda);
    font-weight: 500;
}

div.codeInput input{
    --otp-digits: 6;
    --otp-ls: 2ch;
    --otp-gap: 1.25;
  
    /* private consts */
    --_otp-bgsz: calc(var(--otp-ls) + 1ch);
    --_otp-digit: 0;
  
    all: unset;
    background: 
    linear-gradient(90deg, 
      var(--otp-bg, var(--Pozadi3)) calc(var(--otp-gap) * var(--otp-ls)),
      transparent 0),
      linear-gradient(90deg, 
      var(--otp-bg, var(--Pozadi4)) calc(var(--otp-gap) * var(--otp-ls)),
      transparent 0
    );
    background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
    background-repeat: no-repeat, repeat-x;
    background-size: var(--_otp-bgsz) 100%;
    caret-color: var(--otp-cc, var(--Text));
    caret-shape: block;
    clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
    font-size: var(--otp-fz, clamp(2vw, 2.9vh, 4vh));
    font-family: ui-monospace, monospace;
    color: var(--Primary);
    inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
    letter-spacing: var(--otp-ls);
    padding-block: var(--otp-pb, 0.75ch);
    padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));

    margin-left: 1ch;
}
  
div.codeInput label span {
    display: block;
    font-size: clamp(1.3vw, 2.6vh, 2.6vh);
    margin-block-end: 1ch;
    text-align: center;
    width: 100%;
}

div.g-recaptcha{
    margin-top: clamp(1vw, 2vh, 2vh);
    overflow: hidden;
    color-scheme: normal !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.g-recaptcha div{
    color-scheme: normal !important;
}
div.g-recaptcha iframe{
    color-scheme: normal !important;
}

div.logoHome{
    z-index: 2;
}