/* Basic Template
<div class="design-sys__text-input-container">
    <input type="text" name="reqfname" id="validationCustom01" class="design-sys__text-input design-sys-typo__body-1" placeholder="First Name" aria-label="First name" required>

    <div class="design-sys__text-input-message-error" hidden="">
        <img src="https://cdn.breakthroughbroker.com/assets/bb/icons/OutlinedSVG/exclamation-circle.svg" class="design-sys__text-input-error-icon" alt="error icon">
        <p class="design-sys-typo__body-3">Please enter your first name.</p>
    </div>
</div>
*/
.design-sys__text-input-container {
    position: relative;
}

.design-sys__text-input {
    display: flex;
    position: relative;
    gap: 10px;
    flex-direction: row;
    padding: 7px 16px !important;
    width: 100%;
    height: 38px;
    align-items: center;
    background: var(--design-sys-sec-color__white);
    border-radius: 6px;
    border: 1px solid var(--design-sys-sec-color__grey--8);
    color: var(--design-sys-sec-color__grey--3);
}

.design-sys__text-input:-webkit-autofill,
.design-sys__text-input:-webkit-autofill:hover,
.design-sys__text-input:-webkit-autofill:focus {
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: var(--design-sys-sec-color__grey--3) !important;
}

.design-sys__text-input::placeholder {
    color: var(--design-sys-sec-color__grey--6);
}

.design-sys__text-input:hover {
    box-shadow: 0px 0px 0px 2px rgba(142, 143, 147, 0.25);
}

.design-sys__text-input:focus {
    border-color: var(--design-sys-sec-color__blue--4);
    box-shadow: 0px 0px 0px 2px rgba(50, 127, 194, 0.25);
}

.design-sys__text-input:disabled {
    color: var(--design-sys-sec-color__grey--6);
    --webkit-text-fill-color: var(--design-sys-sec-color__grey--6);
    opacity: 1;
    border: 1px solid var(--design-sys-sec-color__grey--8);
    box-shadow: none;
    pointer-events: none;
}

.design-sys__text-input--small {
    max-width: 287px;
}

.design-sys__text-input--error {
    border: 1px solid var(--design-sys-sec-color__red--1) !important;
    outline: 2px solid rgba(255, 84, 80, 0.25) !important;
}

.design-sys__text-input-message-error {
    align-items: center;
    display: flex;
    gap: 4px;
    position: absolute;
    top: 40px;
    width: 230px;
}

.design-sys__text-input-error-icon {
    filter: brightness(0) saturate(100%) invert(54%) sepia(18%) saturate(6994%) hue-rotate(325deg) brightness(99%)
        contrast(124%);
    width: 14px;
}