@font-face {
    font-family: "FuturaPT-Bold";
    src: url("fonts/FuturaPT-Bold.ttf");
}


#hiddenCanvas {
    display: none;
}

#sun-image {
    display: none;
}

#logo-image {
    display: none;
}

.hidden {
    display: none;
}

* {
    outline: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    margin: 0;
    padding: 0;
    font-size: 1.667vh;
    font-family: "FuturaPT-Bold";
    color:#231F20;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.page-wrapper {
    width: 100vw;
    height: 100vh;
    /* background-image: url(images/bg.png); */
    background: radial-gradient(#FFFFFF, #FFC81F);;
    background-size: cover;
}

.first-page,
.second-page,
.third-page,
.fourth-page {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    background-size: cover;
    display: none;
}

.first-page img {
    width: 69.63vw;
    height: auto;
    position: absolute;
    top: 24vh;
}

.first-page-button {
    width: 22vw;
    height: 4.5vh;
    position: absolute;
    top: 57.5vh;
    left: 38vw;
}

.second-page .signature-image {
    width: 90vw;
    height: auto;
    position: absolute;
    top: 24vh;
}

.second-page-signature-wrapper {
    width: 90vw;
    height: 30vh;
    position: absolute;
    top: 32vh;
    left: 5vw;
}

.second-page-button,
.third-page-button {
    width: 24.25vw;
    height: 4.6vh;
    position: absolute;
    bottom: 5.5vh;
    left: 38.1vw;
}

.third-page .declaration-wrapper {
    position: absolute;
    top: 6.5vh;
}

.third-page .declaration-wrapper .declaration-footer-wrapper {
    position: absolute;
    width: 60vw;
    height: 15vh;
    top: 62vh;
    left: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.third-page .declaration-wrapper .declaration-footer-wrapper .declaration-footer-date {
    width: 20vw;
}

.third-page .declaration-wrapper .declaration-footer-wrapper .declaration-footer-signature {
    width: 40vw;
    height: 15vh;
    display: flex;
    align-items: center;
}

.third-page .declaration-wrapper .declaration-footer-wrapper .declaration-footer-signature #previewSignature {
    width: 40vw;
    height: auto;
} 

.fourth-page .fourth-page-image{
    position: absolute;
    top: 10vh;
    width: 90vw;
    height: auto;

}

.fourth-page-button-no {
    position: absolute;
    bottom: 15vh;
    left: 35vw;
    width: 14vw;
    height: 4vh;
}

.fourth-page-button-yes {
    position: absolute;
    bottom: 15vh;
    right: 35vw;
    width: 14vw;
    height: 4vh;
}


.qrContainer {
    width: 55vw;
    height: 35vh;
    position: absolute;
    top: 27.5vh;
    left: 22.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qrContainer img {
    width: 55vw;
    height: auto;
}

.close-button-wrapper {
    position: absolute;
    top: 1vh;
    right: 3.5vw;
    z-index: 10;
}

.close-button {
    width: 10vw;
    height: auto;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-image:  radial-gradient(#FFFFFF, #FFC81F);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    width: 80vw;
    height: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
}

#authForm div {
    margin-bottom: 2vh;
}

#password {
    width: 40vw;
    height: 5vh;
    font-size: 3vh;
    border-radius: 5vw;
    padding: 0 2vw;
}

#authForm label {
    display: block;
    margin-bottom: 1vh;
    font-size: 4vw;
}


#authModal button {
    font-size: 4vw;
    width: 44vw;
    height: 5vh;
    border-radius: 5vw;
    padding: 0 2vw;
    background-color: #FFFFFF;
    border: 0.5vw solid orangered;
    font-family: "FuturaPT-Bold";
}

.disable-button {
    pointer-events: none;
}

.declaration-image {
    height: 83vh;
    width: auto;
}

.button-image {
    height: 4.6vh;
    width: auto;
}