.input-group-addon.primary {
    color: rgb(255, 255, 255);
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
}

.input-group-addon.success {
    color: rgb(255, 255, 255);
    background-color: rgb(92, 184, 92);
    border-color: rgb(76, 174, 76);
}

.input-group-addon.info {
    color: rgb(255, 255, 255);
    background-color: rgb(57, 179, 215);
    border-color: rgb(38, 154, 188);
}

.input-group-addon.warning {
    color: rgb(255, 255, 255);
    background-color: rgb(240, 173, 78);
    border-color: rgb(238, 162, 54);
}

.input-group-addon.danger {
    color: rgb(255, 255, 255);
    background-color: rgb(217, 83, 79);
    border-color: rgb(212, 63, 58);
}
#resmessage .alert{
    display: none;
}


.otp-form {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}


/* OTP input styles */
.otp-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.otp-input, .otp-input-int {
width: 40px;
height: 40px;
text-align: center;
font-size: 18px;
margin: 0 5px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
transition: border-color 0.3s;
}

.otp-input:focus {
border-color: #007bff;
}

#verificationCode {
width: 100%;
margin-top: 15px;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
transition: border-color 0.3s;
}

#verificationCode:focus {
border-color: #007bff;
}

span.input-group-addon {
    min-width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.modal-backdrop.show {
    opacity: 0;
    z-index: 0;
}