/**
 * Dirty compatibility layer for StandardUI-based MasterPages.
 * Mainly used for overriding whole form components and irreplaceable template structures.
 */

/*                                                                          */
/* GENERIC ELEMENTS                                                         */
/*                                                                          */

.text-error {
    color: rgb(var(--theme-status-critical)/var(--tw-text-opacity, 1));
    font-weight: 700;
    font-size: 0.875rem;
}

/*                                                                          */
/* STANDARD UI FORM SUPPLEMENTS                                             */
/*                                                                          */

/* fix aspnet radio/checkbox controls using side-by-side input + label templates */
.form-control.radio label,
.form-control.checkbox label {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* fix HPE radio button detail placement */
.form-control.radio::after {
    left: 0.375rem !important;
    top: 0.375rem !important;
}

/**
 * Following the similar logic with dropdown-field-wrappers on Standard UI 1.6,
 * we need to add adjusting wrappers for date pickers & other custom icon controls
 * exclusive to B2i as well.
 */
.date-picker-field-wrapper {
    position: relative;
}

/**
 * Add support for the custom OTP input fields splitting script from the compat layer.
 */
.form-control.otp-input {
    position: relative;
}

    .form-control.otp-input input[data-otp-out] {
        position: absolute;
        opacity: 0;
        width: 1px !important;
        height: 1px !important;
        padding: 0;
        left: -1rem;
        top: -1rem;
        pointer-events: none;
    }

    .form-control.otp-input .otp-digits {
        position: relative;
        display: flex;
        gap: 0.25rem;
        width: max-content;
    }

        .form-control.otp-input .otp-digits .otp-digit {
            display: block;
            flex: 1;
            width: 2.5rem;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
        }

/*                                                                          */
/* TELERIK UI OVERRIDES                                                     */
/*                                                                          */

/* RadCaptcha */

.RadCaptcha {
    margin: 1rem 0;
}

    .RadCaptcha div[id$="SpamProtectorPanel"] {
    }

    @media screen and (min-width: 640px) {
        .RadCaptcha div[id$="SpamProtectorPanel"] {
            display: grid;
            gap: 2rem;
            grid-template-columns: auto 1fr;
        }
    }

    .RadCaptcha .tlrkCptchImg {
        margin: 0 0 1rem;
        width: auto !important;
        height: 3rem !important;
    }

    .RadCaptcha .rcRefreshImage {
        margin: 1rem 0;
    }

    .RadCaptcha p {
        margin: 0;
    }

    .RadCaptcha .tlrkCptchTxt {
        background-color: white;
        box-shadow: 0 0 0 1px rgb(var(--theme-border-weak,var(--theme-border))/1) inset;
        color: rgb(var(--theme-text)/var(--tw-text-opacity));
        display: block;
        line-height: 2rem;
        padding: .5rem 1rem;
        width: 100%;
    }

    .stdui-theme-hpe .RadCaptcha .tlrkCptchTxt {
        border-radius: 0.5rem;
    }

    .RadCaptcha span[style^="color:Red"] {
        display: block;
        margin: 0 0 1rem;
        color: rgb(var(--theme-status-critical)/var(--tw-text-opacity, 1)) !important;
        font-weight: 700;
        font-size: 0.875rem;
    }

    .RadCaptcha:not(.rcInvalid) span[style^="color:Red"] {
        display: none;
    }

    .RadCaptcha .tlrkCptchTxt:focus:not(:disabled) {
        box-shadow: 0 0 0 1px rgb(var(--theme-border-strong,var(--theme-border))/1) inset;
        outline-color: rgb(var(--theme-focus)/1);
        outline-offset: 2px;
        outline-style: double;
        outline-width: 2px;
    }