* {
    box-sizing: border-box;
}
html {
    min-height: 100%;
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    /* height: 100%; */
    /* height: 100vh; */
    /* height: calc(var(--vh, 1vh) * 100); */
    padding: 7.5vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-image: url( '/images/frontend/formagame_colors_frontend_clouds_1920_1080.png' );

    font-family: Arial;
}

body main #frontend_leads_create {
    max-width: 400px;
    padding: 20px 8px 40px 8px;

    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 20px 0 rgba( 0, 0, 0, 0.19 );
    background-color: rgba( 255, 255, 255, 0.3 );
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
body main #frontend_leads_create #frontend_leads_create_logo {
    text-align: center;
    padding: 24px 0;
}
body main #frontend_leads_create #frontend_leads_create_logo img {
    max-width: 50%;
}
body main #frontend_leads_create #frontend_leads_create_form form {
    padding: 16px 16px;
    padding-bottom: 32px;
    border-radius: 1rem;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 20px 0 rgba( 0, 0, 0, 0.19 );

    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 16px;
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_form_title {
    margin-bottom: 12px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    color: #427979;
    text-transform: uppercase;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row label {
    color: #2f6863;
    font-size: 0.9rem;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row input[type="text"] {
    padding: 8px 8px;
    border-radius: 0.475rem;
    border: 1px solid #c8d7d7;
    background-color: #e6f5f5;
    outline: none;
    appearance: none;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row input[type="email"] {
    padding: 8px 8px;
    border-radius: 0.475rem;
    border: 1px solid #c8d7d7;
    background-color: #e6f5f5;
    outline: none;
    appearance: none;
}

body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_input {
    display: flex;
    flex-direction: row;
    align-items: center;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_input input[type="checkbox"] {
    margin: 0;
    margin-right: 8px;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #2f6863;
    border-radius: 0;
    outline: none;
    appearance: none;
    background-color: white;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_input input[type="checkbox"]:checked {
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: white;
    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='%232f6863'/></svg>");
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_input label {
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_input label a {
    font-weight: 900;
    color: inherit;
}
body main #frontend_leads_create #frontend_leads_create_form form .frontend_leads_create_form_row .frontend_leads_create_form_row_col .frontend_leads_create_form_legal_text p {
    color: #2f6863;
    font-size: 0.7rem;
    line-height: 1.1;
}

body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_message {
    min-height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_submit_loader {
    width: 200%;
    display: flex;
    align-items: stretch;
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_submit_loader #frontend_leads_create_submit_loader_submit {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_submit_loader #frontend_leads_create_submit_loader_submit input[type="submit"] {
    width: 90%;
    text-transform: uppercase;
    color: white;
    padding: 12px;
    border-radius: 1000px;
    border: 1px solid white;
    font-size: 1.25rem;
    background:linear-gradient( to bottom, #4cc4b9 5%, #06606a 100%);
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_submit_loader #frontend_leads_create_submit_loader_loader {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
body main #frontend_leads_create #frontend_leads_create_form form #frontend_leads_create_submit_loader #frontend_leads_create_submit_loader_loader .loader {
    font-size: 6px;
    margin: 0 auto;
}

body main #frontend_leads_success {
    max-width: 400px;
    padding: 20px 8px 40px 8px;

    border-radius: 1rem;
    box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 20px 0 rgba( 0, 0, 0, 0.19 );
    background-color: rgba( 255, 255, 255, 0.3 );
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
body main #frontend_leads_success #frontend_leads_success_logo {
    text-align: center;
    padding: 24px 0;
}
body main #frontend_leads_success #frontend_leads_success_logo img {
    max-width: 50%;
}
body main #frontend_leads_success #frontend_leads_success_main {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

body main #frontend_leads_success #frontend_leads_success_main #frontend_leads_success_main_firstname {
    color: #2f6863;
    text-align: center;
    font-family: 'Arial';
}

body main #frontend_leads_success #frontend_leads_success_main #frontend_leads_success_main_success {
    display: flex;
    align-items: center;
    justify-content: center;
}
body main #frontend_leads_success #frontend_leads_success_main #frontend_leads_success_main_success img {
    max-width: 50%;
}

body main #frontend_leads_success #frontend_leads_success_main #frontend_leads_success_main_exit {
    margin-top: 32px;
    text-align: center;
}
body main #frontend_leads_success #frontend_leads_success_main #frontend_leads_success_main_exit a {
    padding: 12px 32px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    border-radius: 1000px;
    border: 1px solid white;
    font-size: 1.25rem;
    background:linear-gradient( to bottom, #4cc4b9 5%, #06606a 100%);
}


@media only screen and ( max-width: 600px ) {
    body main #frontend_leads_create { max-width: 90vw; }
    body main #frontend_leads_success { max-width: 90vw; }    
}