.captcha-widget {
    width: 100%;
}

.captcha-widget__label {
    display: block;
    font-size: 12px;
    color: var(--fontColor, #586470);
    margin-bottom: 0.5rem;
}

.captcha-widget .dntCaptcha {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "captcha"
        "input"
        "error";
    row-gap: 0.75rem;
    width: 100%;
    direction: ltr;
}

.captcha-widget .dntCaptcha > img,
.captcha-widget .dntCaptcha > a[id*="RefreshButton"] {
    grid-area: captcha;
}

.captcha-widget .dntCaptcha > img {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    object-fit: contain;
    object-position: center center;
    border: 1px solid #CBD8E3;
    border-radius: 8px;
    background-color: rgb(232, 240, 254);
    margin: 0 !important;
    padding: 0 12px 0 44px;
    box-sizing: border-box;
    display: block;
}

.captcha-widget .dntCaptcha > a[id*="RefreshButton"] {
    justify-self: start;
    align-self: center;
    z-index: 1;
    width: 32px;
    height: 32px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #586470;
    background: transparent;
    border: none;
    font-size: 16px;
}

.captcha-widget .dntCaptcha > a[id*="RefreshButton"]:hover,
.captcha-widget .dntCaptcha > a[id*="RefreshButton"]:focus {
    color: var(--primaryColor, #151f3e);
    text-decoration: none;
}

.captcha-widget .dntCaptcha > .input-group {
    grid-area: input;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.captcha-widget .dntCaptcha input[type="text"] {
    width: 100%;
    border-radius: 8px !important;
    line-height: 1.8;
    background-color: rgb(232, 240, 254);
    border: 1px solid #CBD8E3;
    text-align: center;
    direction: ltr;
}

.captcha-widget .dntCaptcha input[type="text"]:focus {
    box-shadow: unset;
    border-color: var(--primaryColor, #151f3e);
    outline: none;
}

.captcha-widget .dntCaptcha input[type="text"]::placeholder {
    text-align: center;
    font-size: 14px;
    color: #828687;
}

.captcha-widget .dntCaptcha > span[data-valmsg-for] {
    grid-area: error;
    display: block;
    font-size: 12px;
    text-align: right;
    direction: rtl;
}

.captcha-widget .dntCaptcha > input[type="hidden"],
.captcha-widget .dntCaptcha > script {
    display: none !important;
}

.re-login .login-sec .captcha-widget .dntCaptcha > img {
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    .captcha-widget .dntCaptcha > img {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
}