.ui-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--borderRadius-default);
    border: 1px solid var(--famous-primary);
    background: var(--input-bg);
    font-size: 14px;
    color: var(--text-high);
    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: #999;
}

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

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

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

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

.input-group-custom {

    position: relative;
    margin-bottom: 12px;
    /* Default height used to vertically center icons + floating labels */
    --field-height: 48px;
}

.floating-label-group {
    position: relative;
    margin-bottom: 16px;
}

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

.input-field:focus {
    outline: none;
    background-color: #fff;
    border: 2px solid var(--famous-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: calc(var(--field-height) / 2);
    transform: translateY(-50%);
    color: var(--text-low);
    font-size: 18px;
    z-index: 2;
}

.input-icon-calendar {
    position: absolute;
    left: 16px;
    top: calc(var(--field-height) / 2);
    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;
}

/* Push the label to the right to clear the icon */
.floating-label {
    position: absolute;
    left: 48px;
    top: calc(var(--field-height) / 2);
    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: 20px;
    font-size: 12px;
    padding: 0 4px;
    transform: translateY(-100%);
    color: var(--text-high);
    font-weight: 500;
    background: linear-gradient(90deg,
            rgba(250, 252, 255, 0) 0%,
            rgba(250, 252, 255, 0.4)50%,
            rgba(250, 252, 255, 0) 100%);
}

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

/* Error message should not affect icon/label centering */
.floating-label-group .error-msg {
    position: absolute;
    left: 0;
    top: calc(var(--field-height) + 4px);
    margin: 0 !important;
}

.floating-label-group.has-error {
    padding-bottom: 18px;
}