.input-container {
    position: relative;
}

    .input-container select,
    .input-container input {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
        font-size: 16px;
        box-sizing: border-box; /* Ensure padding and border are included in the width */
        transition: all 0.2s ease; /* Smooth transition */
    }

    .input-container label {
        position: absolute;
        top: 2px;
        left: -1px;
        padding: 12px;
        pointer-events: none; /* Prevent label from blocking clicks */
        font-size: 16px; /* Match input font-size */
        color: transparent;
        transition: all 0.2s ease; /* Smooth transition */
        transform-origin: 0 0; /* Anchor point for transform */
    }

    .input-container input:not(:placeholder-shown) + label {
        top: -10px;
        left: 0px;
        font-size: 12px;
        color: #888;
        z-index: 10;
    }

    .input-container select:not(:placeholder-shown) + label {
        top: -10px;
        left: 0px;
        font-size: 12px;
        /*color: #888;  Highlight color */
    }

    .input-container input:not(:placeholder-shown) {
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

    .input-container select:not(:placeholder-shown) {
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

.input-group .last-btn {
    border-top-right-radius: var(--mud-default-borderradius) !important;
    border-bottom-right-radius: var(--mud-default-borderradius) !important;
}

    .input-group .last-btn:focus {
        border-top-right-radius: var(--mud-default-borderradius) !important;
        border-bottom-right-radius: var(--mud-default-borderradius) !important;
        color: var(--mud-palette-text-primary);
        border-color: var(--mud-palette-primary) !important;
        box-shadow: inset 0 0 0 1.2px var(--mud-palette-primary) !important;
        outline: none; /* Remove default outline */
    }

.input-group-text {
    color: var(--mud-palette-text-primary);
    background-color: transparent !important;
    border-color: var(--mud-palette-lines-inputs) !important;
}

.form-label {
    color: var(--mud-palette-text-primary) !important;
}

.form-control {
    color: var(--mud-palette-text-primary);
    background-color: transparent !important;
    border-color: var(--mud-palette-lines-inputs) !important;
    border-radius: var(--mud-default-borderradius);
    box-sizing: border-box;
    font-size: var(--mud-typography-subtitle1-size) !important;
}

    .form-control:focus {
        color: var(--mud-palette-text-primary);
        border-color: var(--mud-palette-primary) !important;
        box-shadow: inset 0 0 0px 1000px var(--mud-palette-surface) !important;
        outline: none; /* Remove default outline */
    }

    .form-control:focus-within {
        color: var(--mud-palette-text-primary);
        border-color: var(--mud-palette-primary) !important;
        box-shadow: inset 0 0 0px 1000px var(--mud-palette-surface) !important;
        outline: none; /* Remove default outline */
    }

    .form-control:hover:not(:focus) {
        color: var(--mud-palette-text-primary);
        box-shadow: inset 0 0 0px 1000px var(--mud-palette-surface) !important;
        border-color: #a6a6a6 !important;
    }

input:-webkit-autofill {
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    caret-color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: 0 0 0px 1000px var(--mud-palette-surface) inset
}

    input:-webkit-autofill:hover:not(:focus) {
        -webkit-appearance: none;
        appearance: none;
        -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
        caret-color: var(--mud-palette-text-primary) !important;
        background-color: var(--mud-palette-surface) !important;
        box-shadow: 0 0 0px 1000px var(--mud-palette-surface) inset
    }

    input:-webkit-autofill:focus {
        -webkit-appearance: none;
        appearance: none;
        -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
        caret-color: var(--mud-palette-text-primary) !important;
        background-color: var(--mud-palette-surface) !important;
        box-shadow: inset 0 0 0 1.2px var(--mud-palette-primary), inset 0 0 0px 1000px var(--mud-palette-surface);
    }

    input:-webkit-autofill:focus-within {
        -webkit-appearance: none;
        appearance: none;
        -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
        caret-color: var(--mud-palette-text-primary) !important;
        background-color: var(--mud-palette-surface) !important;
        box-shadow: 0 0 0px 1000px var(--mud-palette-surface) inset;
        box-shadow: inset 0 0 0 1.2px var(--mud-palette-primary), inset 0 0 0px 1000px var(--mud-palette-surface);
    }

.input-group-text {
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
}