*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    /* height: 100%; */
    padding: 0;
    margin: 0;
}

:root {
    --font-size: calc(12px + 4 * (100vw / 1280));
    --main-color: hsl({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 45%);
    --placeholder-color: hsl({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 45%);
    --background-color: hsla({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 75%, 0.3);
    --light-color: #F6FDFF;
    --text-color: var(--main-color);
    --form-color: #f7fcfd;
    --placeholder-focus-color: hsl({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 40%);
    --placeholder-not-focus-color: var(--placeholder-color);
    --button-color: var(--main-color);
    --butthon-hover-color: hsl({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 37%);
    --button-box-shadow: hsl({{ form_settings.color_hue }}, {{ form_settings.color_saturation }}%, 45%);
    --button-focus-color: var(--placeholder-focus-color)
}

.back-svg {
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-color: var(--background-color);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-group {
    margin-top: calc(8px + 4 * (100vw / 1280));
    margin-bottom: calc(4px + 4 * (100vw / 1280));
}

.container {
    background-color: var(--light-color);
    position: relative;
    width: calc(200px + 400 * (100vw / 1280)) !important;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: calc(20px + 4 * (100vw / 1280)) !important;
    border-radius: 16px !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
}

.header_image_wrapper {
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

.back-svg {
    background-image: url("data:image/svg+xml,%3Csvg width='300' height='' viewBox='0 0 361 228' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 116.447H57.5616C61.5209 116.447 64.3947 112.68 63.3482 108.862L41.2021 28.0555C39.5927 22.183 31.2701 22.1654 29.6357 28.031L5 116.447ZM5 116.447V216.194C5 219.508 7.6863 222.194 11 222.194H65.4272M84.404 7.1159L108.119 180.224C109.062 187.106 118.995 187.152 120.001 180.278L145.331 7.1159M165.307 116.447H217.781C221.297 116.447 224.057 113.502 223.711 110.004C221.219 84.811 211.113 -5.0492 194.772 7.1159C175.794 21.2429 165.307 116.447 165.307 116.447ZM165.307 116.447C165.307 116.447 151.823 216.998 165.307 222.194C178.791 227.391 211.474 205.087 224.317 222.194M244.212 222.194C230.791 183.167 232.168 134.635 240.104 49.3075C240.747 42.3906 250.602 41.9504 251.855 48.7831L280.37 204.236C281.415 209.933 288.96 210.9 291.142 205.535C311.396 155.738 310.218 108.866 283.664 7.1159M297.603 7.1159C298.147 28.1197 324.593 7.1159 324.593 7.1159M324.593 7.1159C324.593 7.1159 370.06 2.3551 351.583 7.1159M324.593 7.1159C356.673 91.108 356.74 138.202 324.593 222.194' stroke='%23F6FDFF' stroke-width='10'/%3E%3C/svg%3E%0A");}

.title-text {
    color: var(--text-color);
}