/* Jacaranda2FA - DNN two-factor authentication 01.00.00 */
.jacaranda2fa-login .jacaranda2fa-intro {
    margin: 0 0 1.25rem 0;
    line-height: 1.55;
}

.jacaranda2fa-login .jacaranda2fa-message {
    display: block;
    margin: 0 0 1rem 0;
}

.jacaranda2fa-login .jacaranda2fa-code {
    max-width: 14rem;
    min-height: 48px;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.28rem;
    text-align: center;
}

.jacaranda2fa-login .jacaranda2fa-actions .dnnPrimaryAction,
.jacaranda2fa-login .jacaranda2fa-actions .dnnSecondaryAction,
.jacaranda2fa-login .jacaranda2fa-resend-row .dnnSecondaryAction {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
    .jacaranda2fa-login .jacaranda2fa-code {
        max-width: 100%;
        width: 100%;
    }
}

.jacaranda2fa-version {
    font-size: 0.82em;
    font-weight: normal;
    opacity: 0.75;
    white-space: nowrap;
}


/* Keep DNN authentication choices visually separate from the first login field.
   Some DNN skins float LoginTab elements without giving LoginTabGroup its own
   height, which can make the tabs overlap the Username label. */
body .dnnLogin .LoginTabGroup {
    display: flow-root !important;
    position: relative !important;
    top: -18px !important;
    clear: both !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.25rem !important;
}

body .dnnLogin .LoginTabGroup::after {
    content: "";
    display: block;
    clear: both;
}

/* Fallback styling for DNN authentication choices. 00.00.16 also applies the
   same states inline after rendering because DNN/theme stylesheet ordering varies. */
body .dnnLogin .LoginTabGroup .LoginTab,
body .dnnLogin .LoginTabGroup .LoginTabHover {
    background: #e9ecef !important;
    background-color: #e9ecef !important;
    background-image: none !important;
    color: #212529 !important;
    border: 2px solid #6c757d !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body .dnnLogin .LoginTabGroup .LoginTabSelected,
body .dnnLogin .LoginTabGroup .LoginTabSelected:hover,
body .dnnLogin .LoginTabGroup .LoginTabSelected:focus,
body .dnnLogin .LoginTabGroup .LoginTabSelected:active {
    background: #343a40 !important;
    background-color: #343a40 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 2px solid #212529 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset !important;
    text-shadow: none !important;
}

body .dnnLogin .LoginTabGroup .LoginTab *,
body .dnnLogin .LoginTabGroup .LoginTabHover *,
body .dnnLogin .LoginTabGroup .LoginTabSelected * {
    color: inherit !important;
    background-color: transparent !important;
    background-image: none !important;
    text-shadow: none !important;
}


.jacaranda2fa-login .jacaranda2fa-recovery {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.35);
}

.jacaranda2fa-login .jacaranda2fa-recovery-heading {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.jacaranda2fa-login .jacaranda2fa-recovery-code {
    max-width: 18rem;
    min-height: 44px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.1rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.jacaranda2fa-settings .jacaranda2fa-role-list label {
    margin-right: 1rem;
}

.jacaranda2fa-settings .jacaranda2fa-recovery-list {
    font-size: 1.15rem;
    line-height: 1.55;
    user-select: all;
}


.jacaranda2fa-login .jacaranda2fa-help {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.9em;
    line-height: 1.4;
    opacity: 0.82;
}

.jacaranda2fa-login .jacaranda2fa-trust-row {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}


/* 00.00.27 settings spacing */
.jacaranda2fa-settings {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/* 00.00.27 responsive settings layout */
.jacaranda2fa-settings .jacaranda2fa-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
    align-items: start;
}

.jacaranda2fa-settings .jacaranda2fa-setting-cell {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 4px;
    box-sizing: border-box;
}

.jacaranda2fa-settings .jacaranda2fa-setting-label {
    display: block;
    width: auto !important;
    float: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-weight: 600;
    text-align: left !important;
}

.jacaranda2fa-settings .jacaranda2fa-setting-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.jacaranda2fa-settings .jacaranda2fa-number {
    width: 85px !important;
    max-width: 85px !important;
    min-width: 85px;
    box-sizing: border-box;
    font-size: 18px !important;
    line-height: 1.35;
}

.jacaranda2fa-settings .jacaranda2fa-help {
    display: inline-block;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    opacity: 1;
    flex: 1 1 180px;
}

.jacaranda2fa-settings fieldset {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.jacaranda2fa-settings fieldset legend {
    font-weight: 700;
}



/* 00.00.27 authenticator/email method choice */
.jacaranda2fa-login .jacaranda2fa-method-panel {
    margin: 0 0 18px 0;
    padding: 14px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
}

.jacaranda2fa-login .jacaranda2fa-method-heading {
    margin-bottom: 10px;
    font-size: 1.02em;
    line-height: 1.5;
}

.jacaranda2fa-login .jacaranda2fa-email-choice {
    border-style: dashed;
}

/* 00.00.28 checkbox alignment/accessibility cleanup
   DNN/skin form rules can otherwise make checkbox inputs inherit full-width
   textbox sizing or float the label away from the control. */
.jacaranda2fa-login .jacaranda2fa-checkbox-row {
    clear: both;
    display: block;
    margin-top: 0.8rem;
    margin-bottom: 0.9rem;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 0.65rem;
    width: 100%;
    min-height: 28px;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-input {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-input input[type="checkbox"],
.jacaranda2fa-login input[type="checkbox"].jacaranda2fa-checkbox-input {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-label {
    display: inline-block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: calc(100% - 32px);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35;
    font-weight: 600;
    text-align: left !important;
    cursor: pointer;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-help {
    display: block;
    margin: 0.3rem 0 0 1.85rem;
    max-width: calc(100% - 1.85rem);
    font-size: 0.9em;
    line-height: 1.4;
    opacity: 0.82;
}

@media (max-width: 480px) {
    .jacaranda2fa-login .jacaranda2fa-checkbox-line {
        gap: 0.55rem;
    }

    .jacaranda2fa-login .jacaranda2fa-checkbox-help {
        margin-left: 1.75rem;
        max-width: calc(100% - 1.75rem);
    }
}

/* 00.00.29 default-skin form-width and checkbox-normalisation cleanup.
   DNN's dnnCheckbox() script normally hides a native checkbox and inserts a
   second image-based checkbox. Jacaranda2FA intentionally uses normalCheckBox
   so only the real, accessible checkbox is rendered. */
.jacaranda2fa-login .jacaranda2fa-credential-field {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 460px !important;
    box-sizing: border-box !important;
}

.jacaranda2fa-login .jacaranda2fa-checkbox-input input[type="checkbox"],
.jacaranda2fa-login input[type="checkbox"].jacaranda2fa-native-checkbox {
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
}

/* Defensive fallback if a skin or cached DNN script has already injected the
   DNN image wrapper: keep the native control and suppress the visual duplicate. */
.jacaranda2fa-login .jacaranda2fa-checkbox-line .dnnCheckbox {
    display: none !important;
}

/* 00.00.30 stock-DNN width hardening.
   The default DNN 10.3.2 skin can apply full-width input rules with equal or
   greater stylesheet precedence. These selectors are a CSS fallback to the
   inline max-width constraints emitted by Login.ascx. */
body .dnnLogin .jacaranda2fa-login input.jacaranda2fa-credential-field,
body .dnnLogin .jacaranda2fa-login input[type="text"].jacaranda2fa-credential-field,
body .dnnLogin .jacaranda2fa-login input[type="password"].jacaranda2fa-credential-field {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 460px !important;
    box-sizing: border-box !important;
}

body .dnnLogin .jacaranda2fa-login input.jacaranda2fa-code,
body .dnnLogin .jacaranda2fa-login input[type="text"].jacaranda2fa-code {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 14rem !important;
    box-sizing: border-box !important;
}

body .dnnLogin .jacaranda2fa-login input.jacaranda2fa-recovery-code,
body .dnnLogin .jacaranda2fa-login input[type="text"].jacaranda2fa-recovery-code {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 18rem !important;
    box-sizing: border-box !important;
}

/* 01.00.00 DNN popup/mobile min-width reset.
   DNN 10.3.2 default.css applies min-width:100% !important to login-form
   text/password inputs in dnnFormPopupMobileView. CSS min-width takes
   precedence over max-width, so the field stayed full-page width even when
   Jacaranda2FA supplied a smaller max-width. Reset min-width explicitly. */
body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-credential-field,
body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-code,
body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-recovery-code,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-credential-field,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-code,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-recovery-code {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-credential-field,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-credential-field {
    width: 100% !important;
    max-width: 460px !important;
}

body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-code,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-code {
    width: 100% !important;
    max-width: 14rem !important;
}

body.mobileView.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-recovery-code,
body.dnnFormPopup.dnnFormPopupMobileView
    .dnnForm .dnnFormItem > input.jacaranda2fa-recovery-code {
    width: 100% !important;
    max-width: 18rem !important;
}