.form-group, .form-group--row {
    display: flex;
    --padding-x: unset;
    --input-height: unset;
    --font-size: unset;
    --ico-size: unset;
    --gap: 10px;
    --gap-between: 0px;
    --rounded: 16px;
    gap: var(--gap-between);
    --border-color: transparent;
    --bg-color: transparent;
    --color: var(--defaultTextColor);
}
.form-group{flex-direction:column;}
.form-group--row{flex-direction:row;align-items:center;}

.input-wrapper {
    position: relative;
    height: var(--input-height);
}

.input,
.textarea {
    max-width: 100%;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 0 var(--padding-x);
    flex: auto;
    border-radius: var(--rounded);
    color: var(--color);
    font-size: var(--text--sm);
    font-weight: 500;
}

.form-label-input > .input {
    width: 100%;
    border-radius: 0;
    background-color: transparent;
    flex: auto; border-color: transparent;
}
.input-custom-1 {
    --border-color: var(--border-1);
    --bg-color: var(--white);
}
.input-custom-1:focus {
    --border-color: var(--color);
}

.form-label-input{
    display: flex;
}


.input {
    height: var(--input-height);
}

.textarea {
    min-height: var(--input-height);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--placeholder);
}
textarea.input{
    resize: none;
    --input-height: "auto";
    padding-top: var(--padding-x);
    padding-bottom: var(--padding-x);
}

.input--xs {
    --padding-x: 10px;
    --input-height: var(--input-size--xs);
    --font-size: 13px;
    --ico-size: 20px;
}

.input--sm {
    --padding-x: 10px;
    --input-height: var(--input-size--sm);
    --font-size: 14px;
    --ico-size: 22px;
}

.input--md {
    --padding-x: 10px;
    --input-height: var(--input-size--md);
    --font-size: 14px;
    --ico-size: 22px;
}

.input--lg {
    --padding-x: 12px;
    --input-height: var(--input-size--lg);
    --font-size: 14px;
    --ico-size: 24px;
    
}

.input--xl {
    --padding-x: 12px;
    --input-height: var(--input-size--xl);
    --font-size: 15px;
    --ico-size: 26px;
    
}

input,
button,
textarea {
    font-family: var(--fontFamily);
}



/* labels */

.label {
    display: block;
    color: var(--white);
    width: 100%;
    font-size: var(--text--sm);
    font-weight: 400;
}
.form-group.input--sm{--gap-between: 12px;}
.form-group--row.input--sm{--gap-between: 12px;}
.form-group.input--sm .label,
.form-group--row.input--sm .label{
    font-size: 12px;
    line-height: 14px;
}

.form-group.input--xs{--gap-between: 12px;}
.form-group--row.input--xs{--gap-between: 12px;}
.form-group.input--xs .label,
.form-group--row.input--xs .label{
    font-size: 12px;
    line-height: 14px;
}

.form-group.input--md{--gap-between: 12px;}
.form-group--row.input--md{--gap-between: 12px;}
.form-group.input--md .label,
.form-group--row.input--md .label{
    font-size: 13px;
    line-height: 16px;
}

.form-group.input--lg{--gap-between: 12px;}
.form-group--row.input--lg{--gap-between: 12px;}
.form-group.input--lg .label,
.form-group--row.input--lg .label{
    font-size: 13px;
    line-height: 16px;
}

.form-group.input--xl{--gap-between: 12px;}
.form-group--row.input--xl{--gap-between: 12px;}
.form-group.input--xl .label,
.form-group--row.input--xl .label{
    font-size: 13px;
    line-height: 16px;
}