:root {
    --primary-color: #f6921e;
    --Secondary-color: #f6921e;
    --muted-color: #a3a3a3;
    --text-gry-color: #3f3f3f;
    --border-color: #cccccc;
    --white-color: #ffffff;
    --black-color: #000000;
    --invalid-color: #dc3545;
}
.img-class{
    width: 150px;
}
.card-header {
    background-color:#03a0e3 ;
    color:var(--white-color);
    border-bottom: none;
    padding: 15px;
}
.card {
    border: none;
    border-radius: 8px;
}
.card-body {
    padding: 20px;
}
.card-header-text{
    font-size:20px;
}
.primary-btn {
    background-color: #03a0e3 !important;
    border-color:  #03a0e3 !important;
    color:var(--white-color);
    transition: background-color 0.3s ease;
}

.primary-btn:hover {
    background-color:#03a0e3 !important;
}
.logo-img{
    max-width: 100px !important;
}
img.img-fluid {
    display: block;
    margin: 0 auto;
    max-width: 50px;
}
.left-img{
    height: 300px;
    margin: 0 auto;
}
.right-img{
    height: 700px;
}
.primary-text{
  color:var(--text-gry-color);
}

.captcha {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.loginFormInputGroupText{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0px;
}
.field_icon{
    font-size: 16px;
    padding: 0;
    text-align: center;
    line-height: 1.5;
    cursor: pointer;
}
.is-invalid{
    border: 1px solid var(--invalid-color) !important;
}
.notifyjs-bootstrap-error{
    font-size: 12px;
}
.notifyjs-bootstrap-success{
    font-size: 12px;
}
.otp-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.otp-input-field {
    width: 50px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease-in-out;
}

.otp-input-field:focus {
    border-color: var(--secondary-color);
    color:var(--white-color);
    box-shadow: 0 0 5px var(--primary-color);
    color:var(--white-color);
}