main {
    align-items: stretch;
    position: relative;
}

#frontend_content_auth {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    background: url( '../../images/frontend/frontend_bgnd_parchment_1920_1080.png' );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;

    max-height: 100vh;
    overflow-y: auto;
}

#frontend_content_auth #frontend_content_auth_music {
    z-index: 1000;
    position: absolute;
    right: 32px;
    bottom: 32px;
    color: var( --color-primary );
    font-size: 3rem;
    cursor: pointer;
    min-width: 4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#frontend_content_auth #frontend_content_auth_logos {
    margin-top: 2.5%;
    margin-left: 5%;
    margin-right: 5%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    row-gap: 16px;
    column-gap: 32px;

    z-index: 100;
}
#frontend_content_auth #frontend_content_auth_logos #frontend_content_auth_logos_samaras {
    max-height: 64px;
}
#frontend_content_auth #frontend_content_auth_logos #frontend_content_auth_logos_iberia {
    max-height: 64px;
}

#frontend_content_auth #frontend_content_auth_form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#frontend_content_auth #frontend_content_auth_form form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    row-gap: 16px;
    max-width: 50vw;
    overflow-x: hidden;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 4px;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row label {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 600;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row input {
    text-align: center;
    outline: none;
    border: none;
    background-color: white;
    color: #777;
    padding: 0.725rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    width: 100%;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row.frontend_content_auth_form_row_legal label {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 16px;
    font-size: 0.9rem;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row.frontend_content_auth_form_row_legal label a {
    color: inherit;
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row.frontend_content_auth_form_row_legal label input[type="checkbox"] {
    outline: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    margin-right: 10px;    
}
#frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row.frontend_content_auth_form_row_legal label input[type="checkbox"]:checked {
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: var( --color-primary );
    background-image: url( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'><path d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/></svg>" );    
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_message {
    min-height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --color-primary );
    cursor: pointer;
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader {
    width: 200%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_submit {
    position: relative;
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_submit input {
    background-color: transparent;
    color: black;
    border: 5px solid var( --color-primary );
    border-radius: 1000px;
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 4px 32px;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;    
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_submit input:hover {
    background-color: var( --color-primary );
    color: white;
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_submit img {
    max-height: 64px;
    position: absolute;
    top: 0;
    right: 33%;
    transform: translate( 40%, -25% );
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_loader {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;    
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_loader .loader {
    font-size: 6px;
    margin: 0 auto;
}
#frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_legal_subtext {
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: justify;
}

#frontend_content_auth #frontend_content_auth_video {
    background: url( '../../images/frontend/frontend_bgnd_parchment_1920_1080.png' );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#frontend_content_auth #frontend_content_auth_video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    max-height: 100%;
    z-index: 1001;
}
#frontend_content_auth #frontend_content_auth_video #frontend_content_auth_video_autoplay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url( '../../images/frontend/frontend_bgnd_parchment_1920_1080.png' );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 64px;
}
#frontend_content_auth #frontend_content_auth_video #frontend_content_auth_video_autoplay img {
    max-width: 60vw;
    max-height: 90vh;
}
#frontend_content_auth #frontend_content_auth_video #frontend_content_auth_video_autoplay button {
    background-color: transparent;
    color: black;
    border: 5px solid var( --color-primary );
    border-radius: 1000px;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 4px 32px;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;    
}
#frontend_content_auth #frontend_content_auth_video #frontend_content_auth_video_autoplay button:hover {
    background-color: var( --color-primary );
    color: white;
}


@media only screen and (max-width: 600px) {
    #frontend_content_auth #frontend_content_auth_music { top: 16px; right: 16px; bottom: auto; font-size: 2rem; min-width: 3rem; }
    
    #frontend_content_auth #frontend_content_auth_logos #frontend_content_auth_logos_samaras { max-height: 32px; }
    #frontend_content_auth #frontend_content_auth_logos #frontend_content_auth_logos_iberia { max-height: 32px; }
    #frontend_content_auth #frontend_content_auth_logos { flex-direction: column; align-items: center; }

    #frontend_content_auth #frontend_content_auth_form form { max-width: 90vw; }
    #frontend_content_auth #frontend_content_auth_form form .frontend_content_auth_form_row.frontend_content_auth_form_row_legal label { font-size: 0.7rem; }
    #frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_submit_loader #frontend_content_auth_form_submit_loader_submit img { display: none; }
    #frontend_content_auth #frontend_content_auth_form form #frontend_content_auth_form_legal_subtext { font-size: 0.7rem; }

    #frontend_content_auth #frontend_content_auth_video #frontend_content_auth_video_autoplay img { max-width: 80vw; }
}