form {
    max-width: 100%;
    margin: 0 auto;
}

    form .form-control {
        max-width: 450px;
        width: 100%;
    }

.form-container {
    margin-inline: 2rem;
    margin-bottom: 2rem;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .form-group label {
        display: block;
        font-weight: normal;
        color: #555;
        margin-bottom: 5px;
    }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group select,
    .form-group textarea {
        width: 100%;
        max-width: 450px !important;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .form-group select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5.9%200-11.3%203.2-13.2%208.7-1.9%205.5-.3%2011.8%204%2016.1l128%20128c5.1%205.1%2011.8%207.7%2018.5%207.7s13.4-2.6%2018.5-7.7l128-128c5.3-5.3%206.9-12.7%204.6-19.1z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px;
        padding-right: 30px;
    }

.column-left, .column-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid,
input.is-invalid {
    border-color: #dc3545 !important;
}

.otp-input.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback::before,
.invalid-feedback::after,
#otpError::before,
#otpError::after {
    content: none !important;
}

.invalid-feedback i,
#otpError i {
    display: none !important;
}