:root {
    --primary-light: #89FFFF;
    --primary: #00FFFF;
    --primary-dark: #03CECE;
    --secondary: #085E80;
    --secondary-dark: #052F40;
    --accent-1-light: #FFEB90;
    --accent-1: #F4CA13;
    --accent-2-light: #FF308D;
    --accent-2: #CB005C;
    --accent-2-dark: #7A0037;
    --gray-1: #F5F5F5;
    --gray-2: #DEDBDB;
    --gray-3: #ACACAC;
    --status-ok: rgb(31, 207, 157);
    --status-warning: var(--accent-1);
    --status-error: var(--accent-2);
    --white: #FFFFFF;
    --font-XL: 18px;
    --font-L: 16px;
    --font-M: 14px;
    --font-S: 12px
}

.wrapper {
    display: flex;
    gap: 16px;
    flex-direction: column;
    text-align: center;
    padding: 32px;
    width: 100%;
    border: solid var(--gray-2) 1px;
    border-radius: 16px;
}

.wrapper__buttons {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.button__wrapper_flex {
    flex: 1 1 300px

}

.wrapper__inputBlock {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.wrapper__inputBlock-oneline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.wrapper__label-oneline {
    line-height: 100%;
    text-align: left;
}

.wrapper__inputBlock-oneline input {
    padding: 8px 16px;
    border: solid var(--gray-2) 1px;
    border-radius: 8px;
    flex: 1;
    width: 100%
}

.wrapper__label {
    flex: 1 1 300px;
    line-height: 100%;
    text-align: left;
}


.wrapper__inputBlock input{
    padding: 8px 16px;
    border: solid var(--gray-2) 1px;
    border-radius: 8px;
    flex: 2 2 300px
}   

.wrapper__inputBlock input::placeholder {
    color: var(--gray-3);
}

.wrapper__inputBlock input:focus {
    border-color: var(--primary-dark);
}

@media (max-width: 900px) {
    .wrapper__inputBlock input {
        width: 100%;
    }
    .button__wrapper_flex {
        width: 100%;
    }
}

.wrapper__inputBlock input[type='checkbox'] {
    accent-color: var(--primary-dark);
    width: 16px;
    height: 16px;
    border-radius: 8px;
}

.wrapper__inputBlock input[type='radio'] {
    accent-color: var(--primary-dark);
    width: 16px;
    height: 16px;
}

.block_checkbox {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.block_selector select {
    border: 2px solid var(--secondary-dark);
    border-radius: 8px;
    padding: 8px 16px;
    flex: 2 2 320px;
    background-color: white;
    font-family: 'Comfortaa' sans-serif;
}