.input-container {
    display: flex;
    gap: 8px;
    flex-direction: column;
    width: 100%;
    align-items: start;
}

.input-container input,
.input-container textarea,
.input-container select {
    width: 100%;
    color: var(--interbox-black, #2E3D38);
    padding: 8px 16px;
    border-radius: 8px !important;
    border: 1px solid var(--interbox-grey, #B8B5B5);
}

.input-container input:disabled,
.input-container textarea:disabled,
.input-container select:disabled {
    background-color: #f0f0f0;
    color: #a0a0a0;
}

.input-container input:focus,
.input-container textarea:focus,
.input-container select:focus {
    outline-color: var(--interbox-green);
}

.input-container-password {
    background: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border-radius: 8px !important;
    border: 1px solid var(--interbox-grey, #B8B5B5);
}

.input-container-password.focus {
    border: 2px solid var(--interbox-green);
}

.input-container-password input {
    padding: 0;
    width: 100%;
    border: none;
}

.input-container-password input:focus {
    outline: none;
}

.input-container-password i {
    color: var(--interbox-green);
    cursor: pointer;
}

.input-container-checkbox {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-container-checkbox input {
    height: 16px;
    width: 16px;
}

.input-container-checkbox label a {
    color: var(--interbox-green, #0F6F4C) !important;
    text-decoration: none;
}

.input-container input.error,
.input-container textarea.error,
.input-container select.error,
.input-container-password.error {
    border: 1px solid var(--red, #D1221C);
    background: rgba(209, 34, 28, 0.10);
}

.input-container input.error:focus,
.input-container textarea.error:focus,
.input-container select.error:focus {
    outline-color: var(--red, #D1221C);
}

.input-container-password.error.focus {
    border: 2px solid var(--red);
}

.input-container-password.error input {
    background: rgba(209, 34, 28, 0.10);
}

.input-error-text small.text-danger {
    display: flex;
    gap: 4px;
    align-items: center;
}

@media screen and (max-width: 992px) {
    .input-container input,
    .input-container textarea,
    .input-container select,
    .input-container-checkbox,
    .input-container small.text-danger {
        font-size: 12px;
    }
}

@media screen and (max-width: 576px) {
    .input-container select {
        height: 36px;
        background: white;
    }
}
