main {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

#audio_start {
    position: absolute;
    bottom: 5%;
    right: 5%;
    max-width: 64px;
    z-index: 1000;
    cursor: pointer;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}
#audio_start img {
    max-width: 100%;
}
#audio_start span {
    font-size: 0.65rem;
    display: block;
    text-align: center;
    color: var( --primary-color );
    line-height: 100%;
}
#audio_start.playing {
    opacity: 0.3;
}

#auth_wrapper {
    width: 720px;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#auth_wrapper #auth_card {
}
#auth_wrapper #auth_card #auth_card_inner {
    overflow-x: hidden;
}
#auth_wrapper #auth_card #auth_card_content_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}
#auth_wrapper #auth_login {
    flex-basis: 100%;
}
#auth_wrapper #auth_card form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#auth_wrapper #auth_card .auth_form_row {
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    column-gap: 20px;
}
#auth_wrapper #auth_card .auth_form_row label {
    color: black;
    font-weight: 400;
    font-size: 0.9rem;
}
#auth_wrapper #auth_card .auth_form_row label[for="agreement"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
#auth_wrapper #auth_card .auth_form_row label[for="agreement"] a {
    color: inherit;
}
#auth_wrapper #auth_card .auth_form_row label[for="conditions"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
#auth_wrapper #auth_card .auth_form_row label[for="conditions"] a {
    color: inherit;
}
#auth_wrapper #auth_card .auth_form_row input {
    outline: none;
    border: 1px solid #777;
    background-color: white;
    color: #777;
    padding: 0.725rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    width: 100%;
}
#auth_wrapper #auth_card .auth_form_row input[type="checkbox"] {
    outline: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    margin-right: 10px;
}
#auth_wrapper #auth_card .auth_form_row input[type="checkbox"]:checked {
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: var( --primary-color );
    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>" );
}
#auth_wrapper #auth_card .auth_message {
    min-height: 40px;
    color: red;
    text-align: center;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#auth_wrapper #auth_card .auth_submit_loader {
    align-self: flex-start;
    width: 200%;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
#auth_wrapper #auth_card .auth_submit_loader .auth_submit {
    flex-basis: 50%;
    text-align: center;
}
#auth_wrapper #auth_card .auth_submit_loader .auth_submit span {
    display: inline-block;
    padding: 10px 48px;
    color: #fff;
    border: none;
    background-color: var( --primary-color );
    font-size: 0.9rem;
    border-radius: 0.25rem;
    cursor: pointer;
    outline: none;
    text-align: center;
    text-transform: uppercase;
}
#auth_wrapper #auth_card .auth_submit_loader .auth_loader {
    order: 1;
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#auth_wrapper #auth_card .auth_submit_loader .auth_loader .loader {
    margin: 0 auto;
    font-size: 6px;
}

#auth_wrapper #auth_card #auth_legal_subtext.auth_form_row {
    width: 100%;
    font-size: 0.6rem;
    line-height: 1.2;
}

@media only screen and ( max-width: 900px ) and ( max-height: 500px ) {
    #audio_start { right: 1.5%; top: 2.5%; }
    #audio_start span { font-size: 0.6rem; }    
    #audio_start img { max-height: 24px; }
    
    #auth_wrapper #auth_card .auth_form_row { flex-direction: row; align-items: center; }
    #auth_wrapper #auth_card .auth_form_row label { font-size: 0.75rem; flex-basis: 200px; }
    #auth_wrapper #auth_card .auth_form_row label[for="agreement"] { flex-grow: 1; }
    #auth_wrapper #auth_card .auth_form_row input { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
    #auth_wrapper #auth_card #auth_legal_subtext.auth_form_row { font-size: 0.5rem; }
    #auth_wrapper #auth_card .auth_message { min-height: 20px; }
    #auth_wrapper #auth_card .auth_submit_loader { margin-bottom: 10px; }
    #auth_wrapper #auth_card .auth_submit_loader .auth_submit span { padding-top: 5px; padding-bottom: 5px; }
}
@media only screen and ( max-width: 600px ) {
    #audio_start { left: 50%; top: 16px; transform: translate(-50%,0); bottom: auto; right: auto; }
    #audio_start span { font-size: 0.6rem; }
    #audio_start img { max-height: 24px; }
    
    #auth_wrapper #auth_card .auth_form_row { width: 100%; }
    #auth_wrapper #auth_card .auth_form_row label { font-size: 0.8rem; }
    #auth_wrapper #auth_card .auth_form_row input { padding: 0.5rem 1rem; }
    #auth_wrapper #auth_card .auth_form_row.auth_form_row_legal label { font-size: 0.7rem; }
    #auth_wrapper #auth_card .auth_form_row.auth_form_row_legal input[type="checkbox"] { width: 1rem; height: 1rem; }
    #auth_wrapper #auth_card .auth_submit_loader { margin-bottom: 20px; }
    #auth_wrapper #auth_card .auth_submit_loader .auth_submit span { padding-top: 8px; padding-bottom: 8px; }
}