/* Override the default template logo with our custom logo * /
.app-logo {
    height: 23px;
    width: 97px;
    background: url('../img/logo.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.app-logo-inverse {
    height: 23px;
    width: 97px;
    background: url('../img/logo-inverted.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.app-header__logo .logo-src {
    background: url('../img/logo-allblack.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.app-header.header-text-light .app-header__logo .logo-src {
    background: url('../img/logo-allwhite.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

*/

:root{
    --red: #303958;
}

.app-login-box .login-title {
    font-size: 3.5rem;
    color: white;
    letter-spacing: .2rem;
    font-variant: small-caps;
}

.nav-item span {
    font-size: .81818rem;
    border-radius: 30px;
    padding: .3rem .75rem;
    color: rgba(255,255,255,.6);

    display: flex;
    align-items: center;
}

.bg-danger {
    background-color: #f2031c !important; /* grm red */
}

.app-header.bg-danger {
    background-color: #f2031c !important; /* grm red */
}

.bg-primary {
    background-color: #303958 !important; /* tpg blue */
}

.app-header.bg-primary {
    background-color: #303958 !important; /* tpg blue */
}

.app-header__logo {
    min-width: 200px;
}
.app-header__logo .logo-src {
    background: url(../img/logo-tpglobal-dark.png) 50% 50% no-repeat !important;
    background-size: contain !important;
    height: 50px !important;
    width: 100% !important;
}


.app-page-title .page-title-wrapper::before {
    background-color: #303958 !important; /* tpg blue */
}

.custom-background-widget{
    background-image: radial-gradient(circle 248px at center,#7795e4 0,#3f69d8 47%,#3f69d8 100%)!important;
}
/*Delete HTML date arrow behind  jquery datepicker*/
.custom-datepicker::-webkit-calendar-picker-indicator {
    display: none;
}

legend {
    font-weight: normal !important;
}

span.code {
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 87.5%;
}

.prettyprint-container {
    max-width: calc(100vw - 370px);
}

.card-clickable {
    cursor: pointer;
}

.text-capitalize {
    text-transform: initial !important;
}

.btn-xs {
    font-size: .8rem !important;
}

.accounting {
    text-align: right;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 87.5%;
}

.item-concept-remove-button {
    position: absolute;
    float: right;
    clear: none;
    top: 1px;
    right: 2px;
}

.integration-remove-button {
    position: absolute;
    float: right;
    clear: none;
    top: 1px;
    right: 2px;
}

.no-margin {
    margin: 0;
}

.text-bold {
    font-weight: bold;
}

/* Select2 input fixes */
/* Scope the border reset to the default theme only. The bootstrap4 theme
   (select2bs4) draws its own border on .select2-selection; a blanket
   `border: none !important` here stripped it, leaving multi-selects with no
   outline. Mirrors the --single rule below. */
.select2-container--default .select2-selection--multiple {
    border: none !important;
    padding-top: 1px !important;
    padding-bottom: 0px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* DateTimePicker input fixes */
.btn-outline-secondary {
    border-color: rgb(206, 212, 218);
}

/* Select2 input fixes */
.select2-selection__placeholder {
    color: gray;
}

.select2-container--default {
    height: 38px;
}

.select2-container--default .select2-selection--single {
    border: none !important;
    /*height: 38px !important;*/
    background: transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

ul.flash-message {
    margin-bottom: 0;
}

.uat-banner {
/* Critical Fixes */
    position: fixed ;
    z-index: 9999;

    /* Alignment */
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    /* Style */
    background: #f7b924;
    color: #fff;
    padding: 4px 20px;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);

    pointer-events: none;
}


/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 980px) {
    .app-sidebar {
        overflow-y: scroll;
        height: 100%;
    }

    .scrollbar-sidebar {
        overflow-y: scroll;
        height: 100%;
    }
}

/* ==========================================================================
   Risk catalogs (Riesgo por Monto / por Estado / Bienes y Mercancía)
   One colour scale for the discrete 1-4 levels, shared by every catalog view.
   1 Bajo = verde, 2 Medio = amarillo, 3 Alto = naranja, 4 Crítico = rojo.
   ========================================================================== */

.risk-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    color: #fff;
}

.risk-badge--1 { background-color: #3ac47d; }
.risk-badge--2 { background-color: #f7b924; color: #4b3f14; }
.risk-badge--3 { background-color: #f2802d; }
.risk-badge--4 { background-color: #d92550; }
.risk-badge--unknown { background-color: #adb5bd; }

/* Level filter above the table; it doubles as the scale key, so the active button is tinted
   with its own level colour. */
.risk-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.risk-filter .btn.active[data-risk-filter="1"] { background-color: #3ac47d; border-color: #3ac47d; color: #fff; }
.risk-filter .btn.active[data-risk-filter="2"] { background-color: #f7b924; border-color: #f7b924; color: #4b3f14; }
.risk-filter .btn.active[data-risk-filter="3"] { background-color: #f2802d; border-color: #f2802d; color: #fff; }
.risk-filter .btn.active[data-risk-filter="4"] { background-color: #d92550; border-color: #d92550; color: #fff; }

/* Level-tinted rows, used by the fixed 4-tier amount table. A left accent carries the colour
   without washing out the row text. */
.risk-row { border-left: 4px solid transparent; }
.risk-row--1 { border-left-color: #3ac47d; background-color: rgba(58, 196, 125, 0.06); }
.risk-row--2 { border-left-color: #f7b924; background-color: rgba(247, 185, 36, 0.08); }
.risk-row--3 { border-left-color: #f2802d; background-color: rgba(242, 128, 45, 0.08); }
.risk-row--4 { border-left-color: #d92550; background-color: rgba(217, 37, 80, 0.07); }

/* Reserved so an error message under one column doesn't grow that cell taller than its
   row-mates, which would shift its input out of alignment. */
.risk-band-error {
    min-height: 1.2em;
    font-size: 0.8125rem;
}

/* Inline row editing: the pencil/check/cross cluster keeps a stable width so the actions
   column doesn't jump when a row toggles into edit mode. */
.risk-catalog-actions { white-space: nowrap; }

.risk-catalog-table tr.is-editing { background-color: #fff9e6; }
/* Dashboard: inline per-row trend sparkline. */
.dashboard-sparkline {
    width: 90px;
    height: 24px;
    vertical-align: middle;
}

.dashboard-lowvolume-header td {
    background-color: #f8f9fa;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Dashboard: money figures. MXN and USD get identical weight and size — neither
   currency is subordinate to the other, and the pair is never summed. */
.dashboard-money {
    display: block;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
}

/* The currency code qualifies the amount, so it sits smaller and quieter than it. */
.dashboard-money-code {
    font-size: .5em;
    font-weight: 600;
    opacity: .5;
    letter-spacing: .03em;
}

/* The certificate count under a money tile: present for context, not the headline. */
.dashboard-money-note {
    display: block;
    margin-top: .5rem;
    opacity: .6;
}