/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* Bootstrap-like styling for CAPTCHA output (renderCaptcha) */

/* Bootstrap-like styling for CAPTCHA output (renderCaptcha) */
.ls-captcha-wrap {
    gap: .5rem;
}

.ls-captcha-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.ls-captcha-page {
    padding: 1.5rem 1rem;
}

/* Helps vertical centering feel right even with headers/footers */
.ls-captcha-page.d-flex {
    min-height: 70vh;
}

@media (min-width: 992px) {
    .ls-captcha-page.d-flex {
        min-height: 80vh;
    }
}

.ls-captcha-group .input-group-text {
    background: var(--bs-body-bg);
}

.ls-captcha-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* When CAPTCHA is placed inside an input-group-text, avoid a double border */
.ls-captcha-group .input-group-text .ls-captcha-image {
    border: 0;
    border-radius: 0;
    padding: .25rem .5rem;
    background: transparent;
}

.ls-captcha-image img,
.ls-captcha-image canvas {
    display: block;
    max-height: 46px;
    width: auto;
}

.ls-captcha-image svg {
    display: block;
    max-height: 46px;
}