.ceudah-native-captcha {
    margin-top: .25rem;
}

.ceudah-captcha-label {
    font-weight: 500;
    color: #0b1f3a;
}

.ceudah-captcha-challenge {
    display: flex;
    align-items: stretch;
    gap: .65rem;
    margin-bottom: .7rem;
    width: 100%;
}

.ceudah-captcha-image {
    display: block;
    width: min(230px, calc(100% - 58px));
    height: 72px;
    object-fit: cover;
    border: 1px solid #c8d8ee;
    border-radius: 12px;
    background: #f0f6ff;
}

.ceudah-captcha-refresh {
    flex: 0 0 48px;
    width: 48px;
    border: 1px solid #c8d8ee;
    border-radius: 12px;
    background: #f7faff;
    color: var(--cb-primary, #0b4bb3);
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: none;
}

.ceudah-captcha-refresh:hover,
.ceudah-captcha-refresh:focus {
    background: #eaf3ff;
    border-color: var(--cb-primary, #0b4bb3);
    color: var(--cb-secondary, #07316f);
}

.ceudah-captcha-refresh:disabled {
    opacity: .55;
}

.ceudah-captcha-input {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
}

.ceudah-captcha-help {
    color: #66758c;
    font-size: .82rem;
    margin-top: .4rem;
}

body.pagelayout-login .ceudah-native-captcha .form-control {
    min-height: 52px;
}

@media (max-width: 480px) {
    .ceudah-captcha-challenge {
        gap: .5rem;
    }
    .ceudah-captcha-image {
        width: calc(100% - 54px);
        height: 66px;
    }
    .ceudah-captcha-refresh {
        flex-basis: 46px;
        width: 46px;
    }
}