.ui-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--borderRadius-default);
    border: 1px solid #E1E4EA;
    background: #F9FAFB;
    font-size: 12px;
    color: #1F2937;
    transition: all .2s ease;
}

.ui-input:focus {
    outline: none;
    background: #fff;
    border-color: #153c1c;
    box-shadow: 0 0 0 3px rgba(21, 60, 28, 0.12);
}

.ui-input::placeholder {
    color: #9CA3AF;
}

/* ####### SELECT ####### */

.ui-select,
.select2-container--bootstrap .select2-selection--single {
    height: auto;
    padding: 14px 16px;
    border-radius: var(--borderRadius-default);
    border: 1px solid #E1E4EA;
    background: #F9FAFB;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
}

/* Form Section */
.form-section {
    padding: 20px;
}

.input-group-custom {

    position: relative;
    margin-bottom: 12px;
}

.input-field {
    background-color: var(--input-bg);
    border: 2px solid transparent;
    border-radius: var(--borderRadius-default) !important;
    padding: 14px 16px 14px 48px;
    font-size: 14px;
    color: var(--text-high);
    width: 100%;
    transition: all 0.2s ease;
}

.input-field:focus {
    outline: none;
    background-color: #fff;
    border: 2px solid var(--primary);

    box-shadow: 0 0 0 4px rgba(59, 89, 152, 0.05);
}

.input-field::placeholder {
    color: var(--text-low);
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-low);
    font-size: 18px;
    z-index: 2;
}

.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.floating-label-group {
    position: relative;
}

/* Push the label to the right to clear the icon */
.floating-label {
    position: absolute;
    left: 48px;
    /* Matches your input-field padding-left */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--text-low);
    font-size: 12px;
    z-index: 3;
}

/* When the input is focused OR not showing the placeholder (meaning it has text) */
.input-field:focus+.floating-label,
.input-field:not(:placeholder-shown)+.floating-label {
    top: 0;
    left: 42px;
    font-size: 10px;
    /* color: var(--primary); */
    /* background: #fff; */
    /* Matches your focus bg color */
    padding: 0 4px;
    transform: translateY(-10%);
    /* Pulls it up to sit on the border */
}

/* Specific fix for your icons when label floats */
.input-field:focus~.input-icon,
.input-field:not(:placeholder-shown)~.input-icon {
    color: var(--primary);
}