@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

:root {
    --cajaHeight: 150px;
    --cajaWidth: 24%;
    --cajaTituloColor: #280bbE;
    --cajaLineHeight: calc(var(--cajaHeight)/10);
    --cajaGraficaWidth: 100%;
    --cajaGraficaHeihgt: 90%;
    --cajaPadding: 20px;
    --cajaBorder: 2px solid #3333cc;
    --cajaFloat: left;
    --cajaTextAlign: center;
    --graficaWidth: 100%;
    --graficaHeight: calc(var(--cajaHeight)*1.3);
    --graficaLeft: calc((100% - var(--graficaWidth)) /2);
    --filtroWidth: 300px;
    --filtroMinWidth: 40px;
}



.bg-pre {
    background-color: #FF03F0 !important;
}

.tituloFiltro {
    font-size: 0.8em;
    line-height: 0.5;
    padding-bottom: 0.7em;
}

.tituloTab {
    font-size: 0.75em;
}

.botonesFiltro {
    line-height: 1;
}

.tituloCaja {
    font-size: 1.2vw;
    color: #280bbE;
    color: var(--cajaTituloColor);
}

.subtituloCaja {
    font-size: 0.8vw;
    color: #280bbE;
    color: var(--cajaTituloColor);
    margin-top: 20px;
}

    .subtituloCaja.invisible {
        color: #FBFCFC;
    }

.cajaNavegador {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
    text-align: right;
}

.tituloNavegador {
    font-size: 0.8vw;
    color: #280bbE;
    color: var(--cajaTituloColor);
    display: inline-block;
}

.valorCaja {
    font-size: 3vw;
    font-weight: bolder;
    top: var(--cajaHeight*2);
    color: #280bbE;
    color: var(--cajaTituloColor);
}

.tituloPenalizacion {
    font-size: 1vw;
    color: #280bbE;
    color: var(--cajaTituloColor);
    text-align: right;
    font-weight: lighter;
}

.valorPenalizacion {
    font-size: 1vw;
    font-weight: bolder;
    color: #280bbE;
    color: var(--cajaTituloColor);
    text-align: right;
}

.cajaPenalizacion {
    background-color: #E0ECF8;
}

.cajaPenalizacionIncumplido {
    background-color: #F8E6E0;
}

.cajaTrimestre {
    background-color: #266AE8;
    color: white;
    font-weight: bolder;
    font-size: 1.2vw;
}

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: #FBFCFC;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

.capaVisible {
    visibility: visible;
}

.capaInvisible {
    visibility: hidden;
}

.tabLegend {
    font-size: 0.7em;
    color: black;
}

.tabLegend.bubble1 {
    font-size: 2em;
    color: #70BE44;
}

.tabLegend.bubble2 {
    font-size: 2em;
    color: #04A45D;
}

.tabLegend.bubble3 {
    font-size: 2em;
    color: #00ACAC;
}

.tabLegend.bubble4 {
    font-size: 2em;
    color: #0265B2;
}

.tabLegend.bubble5 {
    font-size: 2em;
    color: #21409A;
}

.tabLegend.bubble6 {
    font-size: 2em;
    color: #593093;
}

.tabLegend.bubble7 {
    font-size: 2em;
    color: #BD7CB4;
}

.tabLegend.bubble8 {
    font-size: 2em;
    color: #F5786D;
}

.tabLegend.bubble9 {
    font-size: 2em;
    color: #FCC775;
}

.tabLegend.bubble10 {
    font-size: 2em;
    color: #FEF005;
}

.tabSubTitleSmall {
    font-size: 0.9em;
}

.tabSubTitleSmall.normal {
    color: orange;
}

.tabSubTitleSmall.critico {
    color: red;
}

.tabSubTitleSmall.leve {
    color: blue;
}

.tabSubTitle {
    font-size: 1.25em;
}

.tabSubTitle.normal {
    color: orange;
}

.tabSubTitle.critico {
    color: red;
}

.tabSubTitle.leve {
    color: blue;
}

#tab1chartB2 {
    width: 100%;
    height: 90%;
    height: var(--cajaGraficaHeihgt);
    z-index: 3;
}

#tab1chartB3 {
    width: 100%;
    height: 90%;
    height: var(--cajaGraficaHeihgt);
    z-index: 3;
}

#tab2 {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab2SinDatos {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab2chart1 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab2chart2 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab2tprp {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab2tprpSinDatos {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab2tprpChart1 {
    width: 100%;
    width: var(--graficaWidth);
    height: calc(var(--graficaHeight) * 3.5);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab3 {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab3SinDatos {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab3chart1 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab3chart2 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab4 {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab4SinDatos {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab4chart1 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab4chart2 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab5 {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab5SinDatos {
    position: relative;
    left: 0px;
    top: 0px;
    text-align: center;
}

#tab5chart1 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#tab5chart2 {
    width: 100%;
    width: var(--graficaWidth);
    height: 195px;
    height: var(--graficaHeight);
    position: relative;
    left: 0%;
    left: var(--graficaLeft);
}

#arContainer {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 1;
}

#arData {
    position: relative;
    left: 0px;
    top: calc(var(--cajaHeight)*-3);
    z-index: 2;
}

#arFila1 {
    overflow: hidden;
    margin-bottom: -17px;
}

#arFila2 {
    overflow: hidden;
    margin-bottom: -18px;
}

#arFila3 {
    overflow: hidden;
}

#pgA1 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    margin-right: calc(24%/15);
    border-radius: 40px 40px 0px 0px;
}

#pgB1 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    height: calc((var(--cajaHeight)/10)*9);
    position: relative;
    top: 0;
    border-radius: 40px 0px 0px 40px;
}

#pgC1 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    position: relative;
    top: 0;
    height: calc((var(--cajaHeight)/10)*9);
    border-radius: 0px;
}

#pgD1 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    height: calc((var(--cajaHeight)/10)*9);
    position: relative;
    top: 0;
    border-radius: 0px 40px 40px 0px;
}

#pgA2 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    margin-right: calc(24%/15);
    border-radius: 0px;
}

#pgB2 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 40px 0px 0px 0px;
}

#pgC2 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 0px;
}

#pgD2 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 0px 40px 0px 0px;
}

#pgA3 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    margin-right: calc(24%/15);
    border-radius: 0px 0px 40px 40px;
}

#pgB3 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 0px 0px 0px 40px;
}

#pgC3 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 0px;
}

#pgD3 {
    border: 2px solid #3333cc;
    border: var(--cajaBorder);
    padding: 20px;
    padding: var(--cajaPadding);
    width: 24%;
    width: var(--cajaWidth);
    height: 150px;
    height: var(--cajaHeight);
    float: left;
    float: var(--cajaFloat);
    text-align: center;
    text-align: var(--cajaTextAlign);
    line-height: 15px;
    line-height: var(--cajaLineHeight);
    /**/
    border-radius: 0px 0px 40px;
}

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.confirm {
    color: #280bbE;
}

.causa-alert {
    background-image: url("../images/alert.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
}

.causa-form {
    background-image: url("../images/form.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
}

.vendor-ok {
    background-image: url("../images/ok-sign.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
}

.incumplido {
    border-color: red;
    border-width: 3px;
    color: red;
    font-weight: bolder;
    cursor: pointer;
}

.incumplidoAnterior {
    border-color: red;
    border-width: 3px;
    color: red;
    font-weight: bolder;
}

.a.incumplido {
    color: red;
}

.penalizacionIncumplido {
    color: red;
}

.modal.modal-wide .modal-dialog {
    width: 90%;
}

.modal-wide .modal-body {
    overflow-y: auto;
}

.pte-respuesta {
    color: red;
}

.vendor-name {
    cursor: pointer;
}

.celda-separador {
    border-left: 1px solid #dee2e6;
}

.cajaPenalizacionNulo {
    background-color: #F3F0EF;
}

.cabeceraContrato {
    border-bottom: 1px solid #787776;
}

.fila-separador {
    height: 5px;
}