tripwithbonus/static/v2/css/forms.css

.field_container{
    --input-border: #E6E6E6;
    --input-font-size: 16px;
    --input-border-radius: 10px;

    --placeholder-color: #27242499;
    --placeholder-font-size: 16px;

    --label-color: #000;
    --label-required-color: #FF613A;
    --label-font-size: 16px;
    --label-font-weight: 500;

    --checkbox-label-font-size: 16px;

    --textarea-min-width: 100%;
    --textarea-max-width: 100%;
    --textarea-width: 100%;
    --textarea-height: unset;
    --textarea-resize: none;

    --error-margin: 5px 0 0 0;
    --error-font-size: 12px;
    --error-color: #FF0000;

    box-sizing: border-box;

    &.line{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    label{
        display: block;
        color: var(--label-color);
        font-weight: var(--label-font-weight);
        &:has(div){
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .required_field_icon{
            color: var(--label-required-color);
        }
    }

    input{
        padding: 20px 10px;
        border: 2px solid var(--input-border);
        border-radius: var(--input-border-radius);
        font-size: var(--input-font-size);
        font-family: var(--main-font-family), serif;
        box-sizing: border-box;
        outline: none;
        &.dropped{
            border: none;
            outline: none;
            background: none;
            padding: 0;
            border-radius: 0;
        }
        &.half{
            width: 50%;
        }
        &::placeholder{
            font-size: var(--placeholder-font-size);
            color: var(--placeholder-color);
        }
    }
    textarea{
        padding: 20px 10px;
        border: 2px solid var(--input-border);
        border-radius: var(--input-border-radius);
        font-size: var(--input-font-size);
        font-family: var(--main-font-family), serif;
        min-width: var(--textarea-min-width);
        max-width: var(--textarea-max-width);
        width: var(--textarea-width);
        height: var(--textarea-height);
        resize: var(--textarea-resize);
        outline: none;
        box-sizing: border-box;
        &::placeholder{
            font-size: var(--placeholder-font-size);
            color: var(--placeholder-color);
        }
    }
    .checkbox{
        background: #FFFFFF;
        border: 1px solid #E6E6E6;
        height: 30px;
        width: 30px;
        min-width: 30px;
        border-radius: 10px;
        &:hover{
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        }
        &.checked{
            background: #FF613A;
            box-shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
        }
    }
    .checkbox_label{
        font-size: var(--checkbox-label-font-size);
    }

    .error_container{
        margin: var(--error-margin);
        font-size: var(--error-font-size);
        color: var(--error-color);
    }

    select{
        --select-padding: 14px 10px;
        --select-bg: #FFFFFF;
        --select-border: #E6E6E6;
        --select-font-size: 14px;
        --select-border-radius: 10px;
        --select-width: 100%;

        width: var(--select-width);
        padding: var(--select-padding);
        background: var(--select-bg);
        border: 1px solid var(--select-border);
        border-radius: var(--select-border-radius);
        font-size: var(--select-font-size);
        outline: none;
        appearance: none;
        background: white url(/static/img/png/icon-arrow.svg) no-repeat calc(100% - 15px) center;
    }
}

form {

    .form_line{
        --display: flex;
        &._50_grid {
            --display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }
        display: var(--display);
        justify-content: space-between;
    }

    button[type="submit"]{
        --submit-button-bg: #FF613A;
        --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);

        --submit-button-border: none;
        --submit-button-border-radius: 10px;
        --submit-button-font-size: 18px;
        --submit-button-color: #FFFFFF;
        --submit-button-font-weight: 600;

        --submit-button-width: 100%; /* initial */
        --submit-button-padding: 17px;

        outline: none;

        background: var(--submit-button-bg);
        box-shadow: var(--submit-button-box-shadow);

        width: var(--submit-button-width);
        padding: var(--submit-button-padding);

        border: var(--submit-button-border);
        border-radius: var(--submit-button-border-radius);

        color: var(--submit-button-color);
        font-size: var(--submit-button-font-size);
        font-weight: var(--submit-button-font-weight);
    }

    --label-color: #000;
    --label-required-color: #FF613A;
    --label-font-size: 16px;
    --label-font-weight: 500;

    .label{
        display: block;
        color: var(--label-color);
        font-weight: var(--label-font-weight);
        &:has(div){
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .required_field_icon{
            color: var(--label-required-color);
        }
    }
}