.form-field {position: relative; line-height: 1.4; font-weight: 400;}

/* ##### LABEL ##### */
.form-field label:not(.error) {
    display: inline-block;
    margin: 0 0 5px 0;
    color: var(--color-heading);
    font-weight: 600;
}

.form-field label.required:not(.error)::after {
    content: '*';
    color: var(--color-red);
}

/* ##### INPUT ##### */
input {line-height: normal;}
.form-field input, .form-field textarea, .form-field select {
    height: 40px;
    font-size: 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-light-blue);
    display: block;
    padding: 0 15px;
    width: 100%;
    color: var(--color-default);
    transition: border 0.3s ease-in-out;
    border-radius: 5px;
}

.form-field input[type=number] {
    padding-right: 0;
}

.form-field input[type=file] {
    height: auto;
    padding: 0;
    border: none;
    width: auto;
    max-width: 100%;
    background: transparent;
}

input[type=search] {
    box-sizing: border-box;
}

.form-field textarea {
    height: 160px;
    line-height: normal;
    padding: 5px 15px;
    max-width: 100%;
    min-width: 100%;
}

.form-field input:not([disabled]):focus, .form-field textarea:not([disabled]):focus, .form-field select:not([disabled]):focus,
.form-field input:not([readonly]):focus, .form-field textarea:not([readonly]):focus, .form-field select:not([readonly]):focus {
    border-color: var(--color-secondary);
    outline: 0
}

.form-field input[type=date] {padding-right: 5px;}
::-webkit-calendar-picker-indicator {
    filter: invert(85%) sepia(6%) saturate(2564%) hue-rotate(180deg) brightness(102%) contrast(91%);
}

/* INPUT big */
.form-field input.big, .form-field select.big {height: 50px;}

/* INPUT small */
.form-field input.small, .form-field select.small {height: 35px; font-size: 14px;}

/* .input-with-ico */
.input-with-ico {position: relative;}
.input-with-ico input {padding-right: 35px;}
.input-with-ico .i-ico {position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; width: 35px; font-size: 18px;}

/* INPUT-WITH-BTN */
.input-with-btn {display: flex;}
.input-with-btn .i-input {margin-right: -1px; width: 100%; position: relative;}
.input-with-btn .i-input input {border-radius: 5px 0 0 5px; padding-right: 30px;}
.input-with-btn .i-btn {border-radius: 0 5px 5px 0; opacity: 1 !important;}

/* .i-btn-clear */
.form-field .i-btn-clear {position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; width: 35px; font-size: 18px;}
.form-field .i-btn-clear {cursor: pointer; color: var(--color-secondary);}
.form-field .i-btn-clear:hover {color: var(--color-secondary-hover);}

/* ##### CHECKBOX ##### */
.form-field.checkbox input[type=checkbox],
.form-field.checkbox input[type=radio] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.form-field.checkbox {
    position: relative;
}

.form-field.checkbox label:not(.error) {
    text-transform: none;
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 0 0 0 30px;
    margin: 0;
    font-weight: 400;
}
.form-field.checkbox.small label:not(.error) {font-size: 13px; padding-left: 25px;}
.form-field.checkbox.not-label label:not(.error) {padding-left: 16px;}

.form-field.checkbox label:not(.error):before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-light-blue);
    border-radius: 2px;
}
.form-field.checkbox.small label:not(.error):before {top: 1px;}

.form-field.checkbox input[type="checkbox"]:checked + label:before,
.form-field.checkbox input[type="radio"]:checked + label:before {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* checked mark aspect */
.form-field.checkbox input[type="checkbox"] + label:after,
.form-field.checkbox input[type="radio"] + label:after {
    content: '\f00c';
    position: absolute;
    top: 3px;
    left: 0;
    font-family: "Font Awesome 5 Pro";
    color: var(--color-white);
    width: 16px;
    height: 16px;
    line-height: 18px;
    font-size: 13px;
    text-align: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease-in-out;
}
.form-field.checkbox.small input[type="checkbox"] + label:after,
.form-field.checkbox.small input[type="radio"] + label:after {
    top: 1px;
}

.form-field.checkbox input[type="checkbox"]:checked + label:after,
.form-field.checkbox input[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

/* accessibility */
.form-field.checkbox input[type="checkbox"]:checked:focus + label:before,
.form-field.checkbox input[type="checkbox"]:not(:checked):focus + label:before {
    border-color: var(--color-primary-hover);
}

.form-field.checkbox input[type="checkbox"][disabled] + label,
.form-field.checkbox input[type="radio"][disabled] + label {
    opacity: 0.6;
    cursor: not-allowed;
}
.form-field.checkbox input[type="checkbox"].error + label:not(.error)::before,
.form-field.checkbox input[type="radio"].error + label:not(.error)::before {
    border-color: var(--color-red);
}

/* ##### RADIO ##### */
.form-field.radio input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.form-field.radio label:not(.error) {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 0 0 0 30px;
    margin: 0;
    text-transform: none;
    font-weight: 400;
}

.form-field.radio label:not(.error):before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-default);
    border-radius: 50%;
}

/* checked mark aspect changes */
.form-field.radio input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 8px;
    left: 4px;
    background: var(--color-primary);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.form-field.radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease-in-out;
}
.form-field.radio input[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

.form-field.radio input[type="radio"].error + label {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* accessibility */
.form-field [type="radio"]:focus + label:before {
    border-color: var(--color-primary-hover);
}

/* ##### VALIDATE ERROR ##### */
input.error:not([disabled]), textarea.error:not([disabled]), select.error {border-color: var(--color-red) !important;}

label.error {display: none; color: var(--color-red); font-size: 12px !important; line-height: normal !important; font-weight: normal; margin: 0;}
label.error.v2 {position: absolute; bottom: -15px; left: 0;}
label[generated="true"] {display: inline-block;}

.hidden-submit {
    left: -10000px;
    opacity: 0;
    position: absolute;
    top: -10000px;
}

.input-hidden {height: 0; padding: 0; opacity: 0; width: 0;}

input[readonly="readonly"], input[readonly], input[disabled="disabled"], input[disabled] {
    background-color: #f6f6f6 !important;
    border-color: #cde0ee !important;
}

::-webkit-input-placeholder {color: #c2c2c2;}
:-moz-placeholder {color: #c2c2c2;}
::-moz-placeholder {color: #c2c2c2;}
:-ms-input-placeholder {color: #c2c2c2;}

@media all and (max-width: 991px) {
    .form-field input, .form-field select {height: 35px; font-size: 14px;}
    .form-field input.big, .form-field select.big {height: 45px; font-size: 14px;;}
    .form-field input.small, .form-field select.small {height: 30px; font-size: 13px;}

    .form-field textarea {font-size: 14px;}
}

@media all and (max-width: 767px) {
    /* ##### CHECKBOX ##### */
    .form-field.checkbox label:not(.error):before {top: 1px;}
    .form-field.checkbox input[type="checkbox"] + label:after,
    .form-field.checkbox input[type="radio"] + label:after {top: 1px;}

    /* ##### RADIO ##### */
    .form-field.radio label:not(.error):before {top: 1px;}
    .form-field.radio input[type="radio"]:checked + label:after {top: 5px;}
}