:root {
    --color-primary: #2c67fc;
    --color-primary-active: #5581e6;
    --color-primary-transparent: rgba(85, 129, 230, 0.08);
    --color-primary-transparent-darker: rgba(85, 129, 230, 0.17);

    --color-secondary: #9ea7bc;
    --color-secondary-active: #4b505b;

    --background-color: #f4f6fa;

    --border-color: #dde2ee;
    --border-color-active: #9ea7bc;

    --input-padding: 10px 16px;
    --input-color: var(--color-secondary-active);
    --input-border: 1px solid var(--border-color);
    --input-border-color-focus: 1px solid var(--border-color-active);
    --input-border-radius: 2px;
    --input-margin-bottom: 28px;
    --input-margin-bottom-secondary: 20px;
    --input-placeholder-color: var(--color-secondary);
    --input-height: 38px;
    --input-font-size: 14px;

    --check-margin-bottom: 16px;

    --form-input-gap: 48px;
    --form-input-width: 188px;

    --box-shadow-color: rgba(206, 209, 216, 0.16);

    --font-family: "IBM Plex Sans", sans-serif;
    --font-family-secondary: "Montserrat", sans-serif;
}

html {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 16px;
    color: #4b505b;
    background: #f4f6fb;
    height: 100vh;
}

body *,
body *:after,
body *:before {
    box-sizing: border-box;
    font-family: inherit;
}

#sapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a {
    color: var(--color-secondary);
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.link {
    transition: color 0.2s;
    color: var(--color-primary-active);
    cursor: pointer;
}

.link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

img {
    display: inline-block;
}

h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 48px;
}

h4 {
    font-size: 14px;
    font-weight: 700;
}

h6 {
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 12px;
    margin: 0 0 8px;
}

button {
    cursor: pointer;
    outline: none;
}

input,
textarea {
    width: 100%;
    padding: var(--input-padding);
    color: var(--input-color);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    margin-bottom: var(--input-margin-bottom);
    background: #fff;
    height: var(--input-height);
    font-size: var(--input-font-size);
    transition: border-color 0.2s;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder-color);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-border-color-focus);
}

textarea {
    height: 120px;
    resize: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.selectContainer {
    background: #fff url("/images/chevron-down.svg") no-repeat center right 16px !important;
    --background: #fff;
    --border: var(--input-border);
    --borderFocusColor: var(--border-color);
    --borderHoverColor: var(--border-color);
    --borderRadius: var(--input-border-radius);
    --height: var(--input-height);
    --itemColor: var(--input-color);
    --itemIsActiveBG: var(--color-primary-transparent);
    --itemHoverBG: var(--color-primary-transparent-darker);
    --itemIsActiveColor: var(--input-color);
    --padding: var(--input-padding);
    --placeholderColor: var(--input-placeholder-color);
    --inputFontSize: var(--input-font-size);
    --listShadow: 0 0 10px rgba(206, 209, 216, 0.16);
    --listBorderRadius: var(--input-border-radius);
    margin-bottom: var(--input-margin-bottom);
    transition: border-color 0.2s;
}

.selectContainer input {
    top: 0;
}

.selectContainer .listContainer {
    border: var(--input-border);
}

.selectContainer .indicator {
    display: none;
}

.selectContainer .indicator + div {
    z-index: 10 !important;
}