* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
body {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    /* font-family: 'PT Sans', sans-serif; */
    font-family: 'Roboto';

    display: flex;
    flex-direction: column;
}

/* header { */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/* } */
/* header #header_logo { */
/*     padding: 32px; */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/* } */
/* header #header_logo img { */
/*     max-width: 100%; */
/*     display: block; */
/*     max-height: 128px; */
/* } */

main {
    flex-grow: 1;

    display: flex;
    flex-direction: column;

    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 64px;
}

#frontend {
    flex-grow: 1;
    
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;

    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 128px;
}

#frontend #frontend_common {
    flex: 1 1 0;
    width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}
#frontend #frontend_common #frontend_common_image {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#frontend #frontend_common #frontend_common_image img {
    display: block;
    max-width: 100%;
    max-height: 296px;
}

#frontend #frontend_content {
    flex: 1 1 0;
    width: 0;

    background-color: white;
}
#frontend #frontend_content #frontend_content_steps_wrapper {
    max-width: 100%;
    overflow-x: hidden;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps {
    width: 500%;
    display: flex;
    align-items: stretch;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item {
    flex-basis: 20%;
    
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var( --secondary-color );
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form {
    width: 100%;
    display: flex;
    flex-direction: column;
} 
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item .frontend_content_steps_form_title {
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    color: var( --primary-color );
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form {
    overflow-x: hidden;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form a {
    color: #333;
    text-decoration: none;
    font-weight: 900;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    column-gap: 20px;
    margin-bottom: 15px;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_1_12 {
    flex-basis: 8.33%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_2_12 {
    flex-basis: 16.66%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_3_12 {
    flex-basis: 25%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_4_12 {
    flex-basis: 33.33%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_5_12 {
    flex-basis: 41.66%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_6_12 {
    flex-basis: 50%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_7_12 {
    flex-basis: 58.33%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_8_12 {
    flex-basis: 66.66%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_9_12 {
    flex-basis: 75%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_10_12 {
    flex-basis: 83.33%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col.frontend_content_steps_form_col_11_12 {
    flex-basis: 91.66%;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col label {
    margin-bottom: 5px;
    font-size: 0.8rem;
    color: #333;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col label.checkbox_wrapper {
    display: flex;
    align-items: center;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col select {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
    box-shadow: none;
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col input[type="text"] {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
    box-shadow: none;
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col input[type="email"] {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
    box-shadow: none;
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col input[type="submit"] {
    background-color: var( --primary-color );
    border-color: var( --primary-color );
    color: var( --secondary-color );
    box-shadow: none;
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid var( --primary-color );
    border-radius: 0.475rem;
    margin-top: 20px;
    text-transform: uppercase;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col input[type="checkbox"] {
    background: white;
    border: 1px solid white;
    border-radius: 0.45em;
    appearance: none;
    outline: none;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin-right: 10px;
}
#frontend #frontend_content #frontend_content_steps_wrapper #frontend_content_steps .frontend_content_steps_item form .frontend_content_steps_form_row .frontend_content_steps_form_col 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='%234997e6'/></svg>" );
}

@media only screen and ( max-width: 600px ) {
    body { /* background-image: url( '../../images/frontend/frontend_background_mobile_00_1080_1920.jpg' ); */ }
    #frontend { flex-direction: column; }
    #frontend #frontend_common { width: 100%; }
    #frontend #frontend_common #frontend_common_image img { max-width: 50vw; }
    #frontend #frontend_content { width: 100%; }
}