td a {
    width: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

.loaderBack {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(51, 51, 51, 0.84);
    z-index: 200000;
}

.loaderInformation {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -40%;
    width: 80%;
    text-align: center;
}

    .loaderInformation h4 {
        font-size: 15px;
        font-weight: normal;
        font-family: Arial;
        color: #E0E0E0;
        text-shadow: 0 1px 1px #202020;
        margin-top: 20px;
    }

#content.container {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    margin-top: 0;
}

#login-header {
    padding: 10px 0; 
    text-align: center;
}

.login-row {
    margin-top: 20px; 
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-success.btn-circle.btn-xl {
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    color: white !important;
}

.btn-primary.btn-circle.btn-xl {
    background-color: #004d99 !important;
    border-color: #004d99 !important;
    color: white !important;
}

.btn-warning.btn-circle.btn-xl {
    background-color: #ff9900 !important;
    border-color: #ff9900 !important;
    color: white !important;
}

.demo-btns {
    display: flex !important;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 !important;
    list-style: none !important;
    margin: 20px 0 !important;
    flex-wrap: wrap;
}

    .demo-btns li {
        padding: 0 10px 20px 10px !important;
        flex: 1 1 30% !important;
        min-width: 100px;
        text-align: center;
    }

@media (max-width: 767px) {
    .demo-btns {
        flex-direction: column !important;
        align-items: center !important;
    }

        .demo-btns li {
            width: 100% !important;
            flex: 1 1 100% !important;
            margin-bottom: 20px;
            padding: 0 0 20px 0 !important;
        }
}

article#wid-left {
    min-height: 700px !important;
    height: auto !important;
}

#wid-content-left {
    min-height: 700px !important;
    height: auto !important;
}

.tab-pane {
    min-height: 550px !important;
    height: auto !important;
}

#content,
#widget-grid,
#widget-grid > .row,
.jarviswidget,
.tab-content {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.header-main-options {
    float: left;
    height: 49px;
    line-height: 49px; 
    padding: 0 15px; 
    font-size: 16px;
    font-weight: bold;
}

.header-main-options .header-option-link {
    color: #fff; 
    text-decoration: none;
    padding: 0 5px;
    margin: 0 5px;
    transition: color 0.1s;
}

    .header-main-options .header-option-link:hover {
        color: #fcc015;
    }

.header-main-options .header-option-separator {
    color: #aaa; 
}

    .header-main-options .active-header-option {
        color: #fcc015;
    }

#top-right {
float: right;
}

/* ====== App top bar (authenticated header) ======
   Self-contained flexbox bar with its own classes (.tn-*) so it does NOT fight
   SmartAdmin's id/float-based header machinery (#header > div, #hide-menu, #logo-group,
   .btn-header). The only dependency on the theme is data-action="toggleMenu" on the
   burger, which SmartAdmin's app.js uses to open the side menu. Selectors are scoped
   under #header so they beat the theme without needing !important. */

/* Keep the app header dark at every width (the theme repaints it white under 680px). */
.smart-style-1 #header {
    background-color: #22262e !important;
    background-image: none !important;
}

#header .tn-topbar {
    /* !important on the 3 layout props: the theme's `#header > div { float:left }` makes
       the bar shrink to content, which kills the flex right-alignment. */
    display: flex !important;
    float: none !important;
    width: 100% !important;
    align-items: center;
    height: 49px;
    margin: 0;
    padding: 0 14px 0 0;    /* no left pad: the logo zone provides it (see .tn-logo) */
    box-sizing: border-box;
}

/* Hamburger: hidden on desktop (menu is always visible); shown once it collapses. */
#header .tn-burger {
    flex: 0 0 auto;
    display: none;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}

    #header .tn-burger:hover,
    #header .tn-burger:focus {
        color: #fcc015;
        text-decoration: none;
    }

/* Logo: sits over the 220px menu column so the title lines up with the content area. */
#header .tn-logo {
    flex: 0 0 220px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding-left: 18px;
}

    #header .tn-logo img {
        height: 26px;
        width: auto;
        display: block;
    }

/* Commerce/issuer name: starts at 220px (aligned with #main). When it does not fit whole the
   layout script hides it instead of cutting it with an ellipsis. */
#header .tn-title {
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 0;
    color: #fff;
    font-size: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pushes everything after it to the right edge. */
#header .tn-spacer {
    flex: 1 1 auto;
}

/* Active commerce selector, one per kind, only for users with several commerces: a dark button with
   the kind as a small caption over the commerce name, opening a white list (Bootstrap dropdown). */
#header .tn-commerce {
    position: relative;
    flex: 0 0 auto;
    margin: 0 0 0 24px;
}

    #header .tn-commerce + .tn-commerce {
        margin-left: 12px;
    }

#header .tn-commerce-toggle {
    height: 38px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 0 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
}

    #header .tn-commerce-toggle:hover {
        border-color: rgba(255, 255, 255, 0.32);
    }

    #header .tn-commerce.open .tn-commerce-toggle,
    #header .tn-commerce-toggle:focus-visible {
        background: rgba(252, 192, 21, 0.10);
        border-color: #fcc015;
        outline: none;
    }

#header .tn-commerce-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

#header .tn-commerce-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a3abb8;
}

#header .tn-commerce-name {
    max-width: 230px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header .tn-commerce-caret {
    font-size: 18px;
    color: #a3abb8;
    transition: transform 0.15s;
}

#header .tn-commerce.open .tn-commerce-caret {
    color: #fcc015;
    transform: rotate(180deg);
}

#header .tn-commerce-menu {
    min-width: 300px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 6px 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(20, 24, 31, 0.22);
}

    #header .tn-commerce-menu .tn-commerce-menu-header {
        padding: 8px 14px 6px;
        font-size: 11px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #5f6773;
    }

#header .tn-commerce-option {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    background: #fff;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    color: #1f2329;
    text-align: left;
    cursor: pointer;
}

    #header .tn-commerce-option:hover,
    #header .tn-commerce-option:focus {
        background: #f3f4f6;
        outline: none;
    }

    #header .tn-commerce-option.active {
        background: #fff7dc;
        font-weight: 600;
        cursor: default;
    }

        #header .tn-commerce-option.active .fa-check {
            color: #7a5600;
        }

/* Admin in Pago Link: search box on top of the commerce list. */
#header .tn-commerce-search {
    position: sticky;
    top: 0;
    padding: 6px 10px;
    background: #fff;
    z-index: 1;
}

#header .tn-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;      /* pin the user/logout group to the right edge */
    padding-left: 24px;     /* keep it off the commerce selectors when the bar is full */
}

    #header .tn-user {
        position: relative;
    }

    #header .tn-user-toggle {
        display: block;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        text-decoration: none;
    }

        #header .tn-user-toggle:hover,
        #header .tn-user-toggle:focus,
        #header .tn-user.open .tn-user-toggle {
            color: #fcc015;
        }

    #header .tn-user-menu {
        min-width: 230px;
        margin-top: 12px;
    }

        #header .tn-user-menu .tn-user-info {
            padding: 6px 20px 4px;
            white-space: nowrap;
        }

            #header .tn-user-menu .tn-user-info strong {
                display: block;
                color: #333;
                font-size: 14px;
            }

            #header .tn-user-menu .tn-user-info span {
                display: block;
                color: #777;
                font-size: 12px;
            }

    #header .tn-logout {
        flex: 0 0 auto;
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
        text-decoration: none;
    }

        #header .tn-logout:hover,
        #header .tn-logout:focus {
            color: #fcc015;
            text-decoration: none;
        }

        #header .tn-logout i {
            margin-left: 5px;
        }

/* Tablet/phone: the side menu is collapsed -> reveal the toggle and drop the 220px
   logo column so the logo + title sit together, compact. */
@media (max-width: 979px) {
    #header .tn-burger {
        display: inline-block;
    }

    #header .tn-topbar {
        padding: 0 8px;
    }

    #header .tn-logo {
        flex: 0 0 auto;
        padding-left: 4px;
    }

    #header .tn-title {
        padding-left: 12px;
    }
}

/* Phones: smaller logo/title, logout becomes icon-only. */
@media (max-width: 767px) {
    #header .tn-logo img {
        height: 22px;
    }

    #header .tn-title {
        font-size: 15px;
        padding-left: 8px;
    }

    #header .tn-right {
        gap: 10px;
        padding-left: 10px;
    }

    #header .tn-commerce,
    #header .tn-commerce + .tn-commerce {
        margin-left: 8px;
    }

    /* No room for the caption on a phone: the name alone, shorter. */
    #header .tn-commerce-label {
        display: none;
    }

    #header .tn-commerce-toggle {
        height: 34px;
        gap: 6px;
        padding: 0 8px;
    }

    #header .tn-commerce-name {
        max-width: 110px;
        font-size: 13px;
    }

    #header .tn-commerce-menu {
        min-width: 240px;
    }

    #header .tn-logout {
        font-size: 18px;
    }

    #header .tn-logout-text {
        display: none;
    }

        #header .tn-logout i {
            margin-left: 0;
        }
}

/* ====== Select2 v4 — ARIA live region ====== */
/* select2.min.js (v4) inyecta un <span class="select2-hidden-accessible"> con el texto
   seleccionado para que un screen reader lo anuncie. El CSS de SmartAdmin solo trae reglas
   para Select2 v3, asi que sin esta regla el span queda visible en la pagina cada vez que
   se elige un valor. Copia textual de la regla oficial de select2.css v4. */
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

/* ====== Select2 v3 overrides (autocompletable) ====== */
/* Select2 copia la clase del <select> (form-control) al wrapper; neutralizar para evitar "caja dentro de caja". */
.select2-container.form-control {
    padding: 0;
    border: none;
    height: auto;
    background: transparent;
    box-shadow: none;
}

/* En smart-form (<label class="select">) el <i> dibuja la flecha nativa; ocultarla cuando ya está Select2. */
label.select .select2-container ~ i {
    display: none;
}

/* === Contexto Bootstrap 3 (.form-control) === */
.select2-container.form-control .select2-choice,
.select2-container:not(.form-control):not(.smart-form-ctx) .select2-choice {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    background-image: none;
    box-shadow: none;
}

.select2-container.form-control .select2-choice > .select2-chosen {
    line-height: 32px;
}

.select2-container.form-control.select2-container-active .select2-choice {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.select2-container.form-control .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
}

/* ====== Homologar inputs/textarea smart-form con el look de .form-control (Bootstrap) ====== */
/* Los selects ahora usan Select2 con look .form-control (34px, radio 4px). Alineamos los inputs
   smart-form para que no queden cuadrados junto a combos redondeados.
   Nota: custom_style.css se carga antes que smartadmin-production.min.css, así que duplicamos
   la clase .smart-form para ganar especificidad frente a la regla original. */
.smart-form.smart-form .input input,
.smart-form.smart-form .textarea textarea {
    height: 34px;
    border-radius: 4px;
    border-color: #ccc;
}

.smart-form.smart-form .textarea textarea {
    height: auto;
    min-height: 34px;
}

/* Re-centrar los íconos (ej: calendario del datepicker) al nuevo alto de 34px */
.smart-form.smart-form .icon-append,
.smart-form.smart-form .icon-prepend {
    top: 6px;
}

/* SmartAdmin fuerza `border-radius: 0 !important` sobre .form-control/.input-sm/.input-lg/.input-xs.
   Revertir ese override para matchear el estilo de los Select2 (redondeados).
   Uso selectores con más especificidad (elemento + clase o dos clases) porque custom_style.css
   se carga ANTES que smartadmin-production.min.css en el bundle alfabético y empatar en 0,0,1,0 pierde. */
input.form-control,
select.form-control,
textarea.form-control,
.form-control.input-sm,
.form-control.input-lg,
.form-control.input-xs {
    border-radius: 4px !important;
}

/* === Contexto smart-form (<label class="select">) — replica el look nativo de .smart-form .select select === */
.smart-form label.select .select2-container .select2-choice {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    border: 1px solid #BDBDBD;
    border-radius: 0;
    background: #fff;
    background-image: none;
    font: 13px/16px 'Open Sans', Helvetica, Arial, sans-serif;
    color: #404040;
    box-shadow: none;
}

.smart-form label.select .select2-container .select2-choice > .select2-chosen {
    line-height: 30px;
    color: #404040;
    margin-right: 24px;
}

.smart-form label.select .select2-container.select2-container-active .select2-choice {
    border-color: #3276B1;
    box-shadow: none;
}

/* Arrow común (Select2 v3) — sin borde gris separador. */
.select2-container .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
}

/* En smart-form, reemplazar el chevron único de Select2 por el "sort" (flecha doble) que asemeja el <select> nativo. */
.smart-form label.select .select2-container .select2-choice .select2-arrow {
    width: 18px;
    top: 0;
    right: 0;
    height: 100%;
    background: transparent;
    border-left: none;
}
.smart-form label.select .select2-container .select2-choice .select2-arrow b {
    display: none;
}
.smart-form label.select .select2-container .select2-choice .select2-arrow::before {
    content: '\f0dc';
    font-family: FontAwesome;
    font-size: 12px;
    color: #5a5a5a;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    line-height: 1;
}