.bg,.idle,.menu, .menu-overlay, .shoot-block, .flash-block {
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.hide
{
    display: none;
}

.full-clickable
{
    cursor: pointer;
}

.content-block , .content, .overlay
{
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.content
{
    position: absolute;
}

.lock
{
    pointer-events: none;
}

.content.content-fade-in-start
{
    display: none;
    opacity: 0;
}

.content.content-fade-in
{
    opacity: 1;
    display: flex;
    animation-duration: 1s;
    animation-name: content-fade-in-animation;
}

@keyframes content-fade-in-animation
{
    from
    {
        opacity: 0;
        display: none;
    }

    to
    {
        opacity: 1;
        display: flex;
    }
}

.content.content-fade-out-start
{
    display: flex;
    opacity: 1;
}

.content.content-fade-out
{
    opacity: 0;
    display: none;
    animation-duration: 1s;
    animation-name: content-fade-out-animation;
}

@keyframes content-fade-out-animation
{
    from
    {
        opacity: 1;
        display: flex;
    }

    to
    {
        opacity: 0;
        display: none;
    }
}

.buttons-row
{
    position: absolute;
    display: flex;
    width: 100vw;
    justify-content: center;
    z-index: 2;
}

.gender-button
{
    width: 50vw;
    height: 33vh;
    background: #0e00ff00;
    cursor: pointer;
}

.image-button
{
    width: 20vw;
    height: 16vh;
    background: #0e00ff00;
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
}

.preview-button
{
    width: 505px;
    height: 500px;
    background: #0e00ff00;
    cursor: pointer;
    border-radius: 60px;
}

.preview-button.left
{
    margin-left: 3vw;
}

.preview-button.right
{
    margin-right: 3vw;
}

.preview-button .result-preview
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 60px;
}

.preview-button.active .result-preview
{
    border: 15px solid white;
}

.preview-image-select-button
{
    position: absolute;
    width: 95%;
    height: 54%;
    top: 10%;
}

.preview-image-container
{
    position: absolute;
    width: 95%;
    height: 54%;
    top: 10%;
}

.preview-image-container .result-output-photo
{
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.show-result-button
{
    position: absolute;
    background: #ffffff00;
    width: 95%;
    height: 54%;
    top: 10%;
    z-index: 2;
    cursor: pointer;
}

.timer-countdown
{
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bolder;
    text-align: center;
    font-size: 25rem;
    position: absolute;
    width: 100vw;
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    top: 40%;
    z-index: 3;
}

.flash-block
{
    background: white;
    display: flex;
    position: absolute;
}

.flash-block.flash-block-flashing {
    animation: blink 0.5s infinite;
    animation-fill-mode: both;
}

@keyframes blink {
    0% { opacity: 0 }
    50% { opacity: 1 }
    100% { opacity: 0 }
}

.loader
{
    position: absolute;
}

.result-image-container
{
    position: absolute;
    width: 100%;
    height: 100%;
    /* top: 1.5%; */
}

.result-image-container .result-output-photo
{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.result-output-qr
{
    position: absolute;
    width: 270px;
    height: 270px;
    bottom: 17%;
    left: 6%;
    z-index: 3;
}

.timer-block
{
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.timer
{
    color: white;
    font-size: 15vw;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


.shoot-camera
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    object-fit: cover;
}

.result-canvas
{
    position: absolute;
    display: none;
}

.result-block
{
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 2;
}


/* Loader */

.loader-block
{
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.loader-block.show
{
    display: flex;
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.loader-block .loader
{
    /*width: 8vw;
    height: 8vw;
    border: 5px solid;
    border-color: #E80024 transparent;
    border-radius: 50%;*/
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    z-index: 3;
    background: url('/storage/images/7/loader.png') no-repeat;
    text-align: center;
    color: #fff;
    font-size: 8em;
    width: 400px;
    height: 400px;
    top: 37%;
    scale: 0.5;
}

@keyframes rotation
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

/* Loader END */

.return-button
{
    position: absolute;
    display: none;
    color: white;
    /*top: 1.5%;
    right: 5%;*/
    font-size: 7vw;
    background: #ffffff00;
    /*padding: 3vw;*/
    text-align: center;
    cursor: pointer;
    z-index: 10;
}

.return-button.show
{
    display: block;
}

.reload-button
{
    position: absolute;
    display: flex;
    opacity: 0;
    top: 0%;
    left: 0%;
    font-size: 4rem;
    background: #ffffff00;
    padding: 1vw;
    text-align: center;
    cursor: pointer;
    z-index: 10;
}

.dot {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: absolute;
    z-index: 10;
    animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: transparent;
    pointer-events: none;
    transform: scale(0);
}
  
@keyframes sploosh {
    0% {
        box-shadow: 0 0 0 0px rgb(255 255 255 / 50%);
        background: rgb(255 255 255 / 50%);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 50px rgba(66, 166, 223, 0);
        background: rgba(66, 166, 223, 0);
        opacity: 0;
        transform: scale(2);
    }
}