* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;

    font-family: 'Poppins', sans-serif;

    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    padding: 0;
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background-color: rgb(245, 248, 250);

    scrollbar-gutter: stable both-edges;
}

body header {
    padding: 8px 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: white;
}
body header #header_inner {
    width: 100%;
    max-width: 1200px;

    display: flex;
    flex-direction: row;
    align-items: center;    
    column-gap: 16px;
    row-gap: 8px;
}
body header #header_inner #header_inner_left {
    font-weight: 600;
}
body header #header_inner #header_inner_center {
    flex-grow: 1;
}
body header #header_inner #header_inner_right {
    display: flex;
    flex-direction: row;
    align-items: center;    
    column-gap: 8px;
    row-gap: 8px;
}
body header #header_inner #header_inner_right #header_inner_right_auth {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 32px;
    row-gap: 8px;
}
body header #header_inner #header_inner_right #header_inner_right_auth #header_inner_right_auth_user span {
    font-weight: 600;
}
body header #header_inner #header_inner_right #header_inner_right_auth #header_inner_right_auth_logout {
    padding: 4px 16px;
    background-color: black;
    color: white;
    cursor: pointer;
    border-radius: 0.975rem;
}

body main {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body .frontend_row {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    row-gap: 32px;
}
body .frontend_row .frontend_row_col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 4px;
}
body .frontend_row .frontend_row_col.frontend_row_col_1_12 {
    flex-basis: 8.33%;
}
body .frontend_row .frontend_row_col.frontend_row_col_2_12 {
    flex-basis: 16.66%;
}
body .frontend_row .frontend_row_col.frontend_row_col_3_12 {
    flex-basis: 25%;
}
body .frontend_row .frontend_row_col.frontend_row_col_4_12 {
    flex-basis: 33.33%;
}
body .frontend_row .frontend_row_col.frontend_row_col_5_12 {
    flex-basis: 41.66%;
}
body .frontend_row .frontend_row_col.frontend_row_col_6_12 {
    flex-basis: 50%;
}
body .frontend_row .frontend_row_col.frontend_row_col_7_12 {
    flex-basis: 58.33%;
}
body .frontend_row .frontend_row_col.frontend_row_col_8_12 {
    flex-basis: 66.66%;
}
body .frontend_row .frontend_row_col.frontend_row_col_9_12 {
    flex-basis: 75%;
}
body .frontend_row .frontend_row_col.frontend_row_col_10_12 {
    flex-basis: 83.33%;
}
body .frontend_row .frontend_row_col.frontend_row_col_11_12 {
    flex-basis: 91.66%;
}
body .frontend_row .frontend_row_col fieldset {
    width: 100%;
    border-color: #555;
    border-radius: 0.475rem;
    padding-bottom: 16px;
}
body .frontend_row .frontend_row_col fieldset legend {
    color: #555;
}
body .frontend_row .frontend_row_col label {
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8px;
}
body .frontend_row .frontend_row_col label i {
    color: #555;
    font-size: 1.25rem;
}
body .frontend_row .frontend_row_col input[type="email"],
body .frontend_row .frontend_row_col input[type="text"],
body .frontend_row .frontend_row_col input[type="number"],
body .frontend_row .frontend_row_col input[type="password"],
body .frontend_row .frontend_row_col input[type="date"] {
    display: block;
    width: 100%;
    font-weight: 500;
    line-height: 1.5;
    appearance: none;
    outline: none;
    background-clip: padding-box;
    border: none;
    padding: .425rem 1.5rem;
    font-size: 1rem;
    border-radius: .625rem;
    background-color: rgb(232, 240, 254);
    color: #4b5675;
}
body .frontend_row .frontend_row_col select {
    display: block;
    width: 100%;
    font-weight: 500;
    line-height: 1.5;
    outline: none;
    background-clip: padding-box;
    border: none;
    padding: .625rem 1.5rem;
    font-size: 1rem;
    border-radius: .625rem;
    background-color: rgb(232, 240, 254);
    color: #4b5675;
}
body .frontend_row .frontend_row_col textarea {
    display: block;
    width: 100%;
    font-weight: 500;
    line-height: 1.5;
    outline: none;
    background-clip: padding-box;
    border: none;
    padding: .425rem 1.5rem;
    font-size: 1rem;
    border-radius: .625rem;
    background-color: rgb(232, 240, 254);
    color: #4b5675;
    font-family: 'Arial';
}
body .frontend_row .frontend_row_col input[type="checkbox"] {
    background-size: 60% 60%;
    background-color: white;
    border: 1px solid #555;
    border-radius: 0.45em;
    appearance: none;
    outline: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0;
}
body .frontend_row .frontend_row_col input[type="checkbox"]:checked {
    background-position: 50%;
    background-repeat: no-repeat;
    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='%23000000'/></svg>");
}

body .frontend_row .frontend_row_col input[type="submit"] {
    width: 100%;
    cursor: pointer;
    background-color: black;
    padding: 12px 16px;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    outline: none;
    border: none;
    border-radius: 0.4rem;
    transition: background-color 0.3s ease;
}
body .frontend_row .frontend_row_col input[type="submit"]:hover {
    background-color: #555;
}
body .frontend_row .frontend_row_col input[type="submit"]:disabled {
    background-color: #555;
    cursor: not-allowed;
}

body footer {
    padding: 8px 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}
body footer #footer_inner {
    width: 100%;
    max-width: 800px;

    display: flex;
    align-items: center;
    justify-content: center;
}
body footer #footer_inner #footer_inner_center {
    font-size: 0.8rem;
    font-weith: 200;
    color: #777;
}

@media only screen and (max-width: 600px) {
    body header #header_inner #header_inner_right #header_inner_right_auth #header_inner_right_auth_user { display: none; }
}