:root {
    --cf-field-bg: #f1f2f7;
    --cf-field-bg-focus: #f4efff;
    --cf-field-line: #ccd1e0;
    --cf-field-line-focus: #7e57c2;
    --cf-field-height: 2.5rem;
    --cf-field-radius: 0;
    --cf-field-text: #37474f;
    --cf-field-muted: #7e7e7e;
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="hidden"]):not(.browser-default, .header-search-input, .search-box-sm),
textarea,
textarea.materialize-textarea,
select,
.select-wrapper input.select-dropdown {
    box-sizing: border-box;
    padding: 0 12px;

    border: none;
    border-bottom: 2px solid var(--cf-field-line);
    border-radius: var(--cf-field-radius);
    margin-bottom: 0;
    background-color: var(--cf-field-bg);
    box-shadow: none;
    color: var(--cf-field-text);
    transition: background-color .15s ease, border-color .15s ease;
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="hidden"]):not(.browser-default, .header-search-input, .search-box-sm):focus:not([readonly]),
textarea:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]),
select:focus,
.select-wrapper input.select-dropdown:focus {
    border-bottom: 2px solid var(--cf-field-line-focus);
    background-color: var(--cf-field-bg-focus);
    box-shadow: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #8e8e8e;
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="hidden"]):not(.browser-default, .header-search-input, .search-box-sm),
select,
.select-wrapper input.select-dropdown {
    height: var(--cf-field-height);
}

.select-wrapper input.select-dropdown {
    line-height: var(--cf-field-height);
}

textarea,
textarea.materialize-textarea {
    padding: 8px 12px;
}

.cf-listeditor__field input.cf-listeditor__input {
    height: 38px;
}

select {
    display: block;
    width: 100%;
    padding-right: 36px;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    cursor: pointer;
}

.select-wrapper select {
    display: none;
}

.select-wrapper input.select-dropdown {
    padding-right: 36px;
    cursor: pointer;
}

.cf-select,
.select-wrapper {
    position: relative;
    display: block;
}

.cf-select::after,
.select-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 20px;
    height: 20px;
    margin-top: -10px;

    z-index: 2;
    background: url("/images/icon/chevron-right.svg") no-repeat center / 20px 20px;
    pointer-events: none;
    transition: transform .2s ease;
}

.cf-select--open::after,
.select-wrapper:has(.dropdown-content[style*="display: block"])::after {
    transform: rotate(90deg);
}

.select-wrapper .caret {
    display: none;
}

.card:has(.select-wrapper) {
    overflow: visible;
}

.dropdown-content li > span {
    color: var(--cf-field-text);
}

.dropdown-content li.active,
.select-dropdown.dropdown-content li:hover,
.select-dropdown.dropdown-content li.selected {
    background-color: var(--cf-field-bg-focus);
}

.select-dropdown.dropdown-content li.selected > span {
    color: var(--cf-field-line-focus);
    font-weight: 600;
}

.input-field {
    margin-top: .9rem;
    margin-bottom: .9rem;
}

.input-field:has(> label:not(.label-icon)) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cf-field-label,
.input-field > label:not(.label-icon),
.input-field > label:not(.label-icon).active {
    position: static;
    order: -1;
    left: 0;
    display: block;
    margin-bottom: 8px;
    transform: none;
    color: var(--cf-field-line-focus);
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}

.input-field input:not(.browser-default):focus:not([readonly]) + label:not(.label-icon),
.input-field textarea.materialize-textarea:focus:not([readonly]) + label:not(.label-icon),
.input-field input:not(.browser-default):focus.valid ~ label:not(.label-icon),
.input-field input:not(.browser-default):focus.invalid ~ label:not(.label-icon) {
    color: var(--cf-field-line-focus);
}

[type="radio"] + span,
[type="checkbox"] + span:not(.lever) {
    height: auto;
    min-height: 22px;
    line-height: 22px;
}

[type="radio"] + span::before,
[type="radio"] + span::after {
    top: 50%;
    margin-top: -10px;
}

[type="checkbox"]:not(.filled-in) + span:not(.lever)::before,
[type="checkbox"]:not(.filled-in) + span:not(.lever)::after {
    top: 50%;
    margin-top: -11px;
}

[type="checkbox"]:not(.filled-in):checked + span:not(.lever)::before {
    top: 50%;
    margin-top: -15px;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after,
[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    top: 50%;
    margin-top: -12px;
}

[type="checkbox"].filled-in:checked + span:not(.lever)::before {
    top: 50%;
    margin-top: -9px;
}

[type="checkbox"].filled-in:not(:checked) + span:not(.lever)::before {
    top: 50%;
    margin-top: 1px;
}

[type="radio"]:checked + span::after,
[type="radio"].with-gap:checked + span::after {
    background-color: var(--cf-field-line-focus);
}

[type="radio"]:checked + span::before,
[type="radio"]:checked + span::after,
[type="radio"].with-gap:checked + span::before,
[type="radio"].with-gap:checked + span::after {
    border-color: var(--cf-field-line-focus);
}

[type="checkbox"]:checked + span:not(.lever)::before {
    border-right-color: var(--cf-field-line-focus);
    border-bottom-color: var(--cf-field-line-focus);
}

[type="checkbox"].filled-in:checked + span:not(.lever)::after {
    border-color: var(--cf-field-line-focus);
    background-color: var(--cf-field-line-focus);
}

.grey-text {
    color: var(--cf-field-muted) !important;
}

.gray-light {
    color: var(--cf-field-muted);
}