﻿/* CSS Document */
#viewDiv {
    margin-top: 10px;
    background-color: #EEEEEE;
    padding: 10px !important;
}

#pnl-visor {
    position: relative !important;
    z-index: 99;
}

#pnl-total {
    margin-bottom: 25px;
}

.btn-primary {
    border-color: transparent !important;
}

.card-custom ul {
    padding: 0;
}

    .card-custom ul li {
        padding: 0;
        padding: 5px 0;
    }

        .card-custom ul li p {
            padding: 0;
            margin: 0 !important;
        }

        .card-custom ul li.inicial {
            display: inline;
            float: left;
        }

        .card-custom ul li.final {
            display: inline;
            float: right;
        }

.form-group {
    margin-bottom: 5px;
}

.indicadores th {
    color: #000;
}

    .indicadores th.paz {
        background-color: #EAD6D7;
    }

    .indicadores th.art {
        background-color: #E0E1D6;
    }

    .indicadores th.oxi {
        background-color: #F4EBCF;
    }

    .indicadores th.pdte-art {
        background-color: #EAE1CE;
    }

    .indicadores th.pgn {
        background-color: #E2E0DD;
    }

    .indicadores th.internacional {
        background-color: #EBECDC;
    }

    .indicadores th.tablaBlanco {
        color: #fff !important;
    }

.indicadores th {
    border-left: 3px;
    border-right: 0;
    border-color: #fff;
    border-style: solid;
}

.escala {
    background-color: #EEEEEE;
    padding: 0 0 5px 10px;
    overflow: hidden
}

.spacer-left {
    margin-right: 5px;
}

.inversiones {
    background-color: #54571E !important;
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 10px;
}

.inversiones2 {
    background-color: #b90f0f !important;
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 5px 10px;
}

.btn-success {
    background-color: #54571E !important;
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 3px 8px !important;
}

.btn-success2 {
    background-color: #b90f0f !important;
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 3px 8px !important;
}

.btn-subregion {
    background-color: #9F3623 !important;
    appearance: none;
    border: 1px solid rgba(27, 31, 35, .15) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding: 3px 8px !important;
    color: #fff;
    float: right;
}

    .btn-subregion.btn:hover, :active {
        color: #fff;
    }

.bot-sub {
    padding-top: 8px
}

.escalaIn {
    padding-right: 8px
}

.glyphicon-download {
    padding-right: 7px
}

.glyphicon-picture {
    padding-right: 5px
}

.escalaIn {
    padding-right: 8px
}

.glyphicon-download {
    padding-right: 7px
}

.glyphicon-picture {
    padding-right: 5px
}

table.dataTable thead th {
    color: #fff;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid #666633 !important;
    background-color: #666633 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #A9A47E !important;
    background-color: #A9A47E !important;
}

.esri-widget *:focus {
    outline: transparent !important;
    background-color: #EEEDE5;
    border: 0;
    padding: 2px;
}
/* VENTANA MODAL*/

.row {
    font-size: 14px;
    color: #000;
}

    .row.a1 {
        background-color: #D8D9CC
    }

    .row .subtitles {
        font-size: 15px;
        color: #9F3623;
        font-weight: 600;
    }

    .row .title {
        font-size: 30px;
        color: #727629;
        font-weight: 600;
        display: block;
    }

    .row .title-peq {
        font-size: 20px;
        color: #727629;
        font-weight: 600;
        display: block;
        line-height: 13px;
    }

    .row .resultado-filtro {
        background-color: #DDE2C7;
        margin: 15px;
        padding: 10px;
        border-radius: 6px;
    }

        .row .resultado-filtro .p-subregion, .p-departamento, .p-municipio {
            border-bottom: 1px dotted;
            border-color: #cdcaca;
            line-height: 34px;
            background-color: #EBECDC;
        }

        .row .resultado-filtro strong {
            color: #54571E;
            font-size: 16px;
        }

        .row .resultado-filtro p {
            color: #000;
            margin: 0;
        }

.a1 .col-md-12 {
    line-height: 20px;
}

.a2 {
    background-color: #fff;
    padding-bottom: 8px;
}

.separacion {
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding: 5px 0;
}

.nota {
    color: #646733;
    font-size: 11px;
    padding: 6px 1px;
}

.spacer-top {
    padding-top: 15px
}

    .spacer-top p {
        font-weight: 600;
        color: #000;
    }

.subregion {
    background-color: #646834;
    color: #fff;
    padding: 9px 0 4px 10px
}

.txt-pilar {
    font-size: 11px
}

.tit-col {
    font-weight: 600;
    color: #000;
    font-size: 12px;
}

.uno {
    background: url( "../assets/images/ico-ordenamiento.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.dos {
    background: url( "../assets/images/ico-infraestructura.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.tres {
    background: url( "../assets/images/ico-salud.png") -1% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.cuatro {
    background: url( "../assets/images/ico-educacion.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.cinco {
    background: url( "../assets/images/ico-vivienda.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.seis {
    background: url( "../assets/images/ico-reactivacion.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.siete {
    background: url( "../assets/images/ico-sistema_alimentacion.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.ocho {
    background: url( "../assets/images/ico-reconciliacion.png") 2% 65% no-repeat;
    padding-left: 38px;
    height: 27px;
    margin-bottom: 5px;
}

.multipilar {
    background: url("../assets/images/ico-multiplicar.png") 2% 5% no-repeat;
    padding-left: 38px;
    height: auto;
    margin-bottom: 5px;
}

.modal-body .texto {
    margin-top: 0 !important;
    color: #54571E;
    font-weight: 600;
}

.m-t-0 {
    font-weight: 600;
    color: #676f27;
}

    .m-t-0 span {
        font-weight: 400;
        color: #000;
    }

.carousel-indicators {
    bottom: -10px !important;
    overflow: hidden;
    height: 30px;
}

    .carousel-indicators li {
        background-color: #54571E !important;
        border: 1px solid #54571E !important;
    }

    .carousel-indicators .active {
        background-color: #fff !important;
    }

.carousel-inner .tit-cab p {
    color: #9F3623;
    font-weight: 600;
    padding: 0 20px 10px;
    font-size: 18px;
    line-height: 26px;
}

.carousel-control .glyphicon-chevron-left {
    margin-top: 0 !important;
    color: #54571E !important;
    text-shadow: 0 0 black !important;
}

.carousel-control .glyphicon-chevron-right {
    margin-top: 0 !important;
    color: #54571E !important;
    text-shadow: 0 0 black !important;
}

.carousel {
    padding-bottom: 3%;
}

    .carousel .row.fotos {
        overflow: auto;
        max-height: 425px;
    }

.carousel-indicators li {
    background-color: #54571E !important;
    border: 1px solid #54571E !important;
}

.carousel-indicators .active {
    background-color: #fff !important;
}

.modal-xl.peq {
    width: 25% !important;
}

    .modal-xl.peq hr {
        margin-top: 12px;
        margin-bottom: 11px;
        border: 0;
        border-top: 2px solid #eeeeee;
    }

#pnl-leyenda {
    padding-TOP: 1%;
}

    #pnl-leyenda ul {
        padding-left: 17px;
    }

        #pnl-leyenda ul li {
            padding: 5px 0;
            font-size: 14px;
            color: #CE9822;
        }

            #pnl-leyenda ul li span {
                color: #000;
            }

#pnl-leyenda {
    padding-TOP: 1%;
}

.closeModal {
    background: transparent;
    color: #fff;
    line-height: 28px;
    position: absolute;
    right: -44px;
    text-align: center;
    top: 0px;
    width: 35px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    font-size: 14px;
    border: 3px solid #fff;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

a:active, a:hover, a:visited.closeModal {
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    text-decoration: none !important;
}

.glyphicon-record {
    font-size: 16px;
    opacity: .5
}

.glyphicon-new-window {
    font-size: 16px;
}

.card-custom-galeria .foto {
    border-radius: 20px 20px 0 0
}

#myCarousel hr {
    background-color: #A9A47E !important;
    height: 1px !important;
    border: 1px dashed;
}

.card-custom-galeria {
    color: #A9A47E !important;
}

.logos {
    list-style: none;
    display: inline-block;
    text-align: center;
    padding: 0 5px
}

    .logos img {
        width: 100%;
        height: auto;
    }

a:active, a:hover, a:visited.closeModal {
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    text-decoration: none !important;
    cursor: pointer;
}

.rotador-logos {
    padding: 0 !important;
}

.ventana-inicio {
    width: 100%;
    height: auto;
    z-index: 10;
    background-color: #ededed;
}


/* VENTANA NUEVAL*/
.center {
    position: absolute;
    display: inline-block;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

    .center select {
        width: 100%;
    }

    .center .caja-select {
        background-color: #F2F2F2;
        padding: 20px 20px 60px 20px;
        border-radius: 20px;
        border: 4px solid #e4e4e4;
    }

        .center .caja-select div:nth-child(2) .col-md-4 {
            margin-top: 15px;
            padding-left: 0;
        }

        .center .caja-select hr {
            display: none;
        }

        .center .caja-select #pnl-desplegable-subregion {
            padding-left: 0;
        }

        .center .caja-select #pnl-desplegable-municipio {
            padding-right: 0;
        }

    .center p {
        font-size: 30px;
        color: #5a5454;
        font-weight: 600;
        display: block;
        text-align: center;
    }

    .center select option {
        font-size: 16px;
    }

    .center input {
        position: relative !important;
        margin: 0 !important;
        width: 20px;
    }

    .center .radio {
        border: none;
        position: relative;
        display: flex;
        background-color: #FFCD00;
        border-radius: 20px;
    }

        .center .radio hr {
            height: 1px;
            border: 0;
            background-color: #555;
        }

        .center .radio span {
            font-size: 17px;
            color: #000;
            margin: 5px 5%;
        }

    .center span.spacer-button {
        top: 33px;
        position: relative;
    }

    .center .btn-ficha {
        background-color: #5a5454;
        ;
        border: 1px solid rgba(27, 31, 35, .15);
        border-radius: 6px;
        font-size: 16.5px;
        font-weight: 500;
        padding: 3px 8px;
        color: #fff;
    }

.custom-select {
    padding: 3px 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    line-height: 60px;
    background: #929292;
    border-radius: 4px;
    width: auto;
}

    .custom-select .active {
        background: #fff;
        color: #555;
        font-size: 14px;
    }

.tit-subregion {
    font-size: 20px;
    color: #555;
    font-weight: 600;
    padding-bottom: 6px;
}


/* LOADER*/
.preloader {
    background: #A9A47E !important;
}

.loader__label {
    color: #fff !important;
}

.loader__figure {
    background: url( "/Images/logo-central.png") 0% 0% no-repeat;
    padding-left: 38px;
    margin-bottom: 5px;
    opacity: .5
}

/* TABS*/
.wrapper {
    margin: 30px auto;
    width: 70%;
    font-family: sans-serif;
    color: #555;
    font-size: 14px;
    line-height: 24px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

    h1 + p {
        text-align: center;
        margin: 20px 0;
        font-size: 16px;
    }

.tabs li {
    float: left;
    width: 50%;
    list-style: none;
    left: -36px;
    position: relative;
}

.tabs a {
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    padding: 14px 0;
    border-bottom: 2px solid #888;
    background: #EBECDC;
    border-radius: 14px 14px 0 0;
    font-weight: 500;
}

    .tabs a.active {
        background: #54571E;
        color: #fff;
    }

    .tabs a:hover {
        background: #9BA251;
        color: #fff;
    }

.tabgroup {
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

    .tabgroup div {
        overflow: hidden;
    }

    .tabgroup .title-peq {
        line-height: 30px;
    }

    .tabgroup .title {
        font-size: 25px;
    }

    .tabgroup .fdo-tab {
        background-color: #D8D9CC;
    }

    .tabgroup .tabla-borde {
        border-bottom: dotted 1px #FFFFFF;
        padding: 5px 0;
    }

    .tabgroup .subregion {
        padding: 14px 0 4px 27px;
    }

    .tabgroup .oscuro {
        font-weight: 600;
    }

    .tabgroup div h2 {
        font-size: 24px;
        text-transform: uppercase;
        color: #54571E;
        font-weight: 600;
    }

.clearfix {
    margin-bottom: 1px;
}

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }

.col-tabs {
    margin: 20px .5% 0;
    width: 32%;
    float: left;
    box-shadow: none !important;
    position: relative;
    border-radius: 15px;
    padding: 20px;
}

    .col-tabs.col1 {
        background-image: url("https://www.sacyrinfraestructuras.com/documents/125541812/125573464/colombia_playa-larga-3.jpg/106d5381-f5d1-b077-fd99-596d6d6d6467?t=1550840419795");
        background-color: #cccccc;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .col-tabs.col2 {
        background-image: url("https://www.laopinion.com.co/sites/default/files/2021-10/Arreglan%20vias%20rurales-Chitag%C3%A1-temporada%20de%20lluvias-aguaceros-vias%20terciarias..jpg");
        background-color: #cccccc;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .col-tabs.col3 {
        background-image: url("https://www.mintransporte.gov.co/info/mintransporte/media/pubInt/thumbs/thpub_700x400_8915.jpg");
        background-color: #cccccc;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .col-tabs:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.5);
    }

    .col-tabs p {
        font-size: 13px;
        color: #fff;
        font-weight: 500;
        line-height: 17px;
        position: relative;
        z-index: 10;
    }

    .col-tabs span {
        display: block;
        position: relative;
        z-index: 10;
        color: #fff;
    }

        .col-tabs span.cifras {
            font-size: 20px;
            color: #fff;
            font-weight: 600;
            line-height: 17px;
            padding: 25px 0 10px;
        }

        .col-tabs span.municipio {
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            line-height: 17px;
            padding: 0 0 10px;
            display: inline;
        }

        .col-tabs span.estado {
            font-size: 14px;
            color: #fff;
            font-weight: 400;
            line-height: 17px;
            padding: 3px;
            display: inline;
            background-color: rgba(155, 162, 81, .3);
        }

        .col-tabs span.camera {
            padding: 5px 0 5px;
            text-align: right;
        }

            .col-tabs span.camera .btn {
                padding: 3px 6px;
            }

/* CARRUSEL */

.foto {
    padding: 7px;
    width: 100%;
}

.card-custom-galeria {
    border-color: #6d6c5c;
    border: 1px solid;
    border-radius: 17px;
}

.contenedor {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 8px;
    color: #fff;
}

.antes {
    background-color: #979687;
}

.despues {
    background-color: #676f27;
}

.texto {
    margin-top: 20%;
}

/* SLIDER FOTOS*/

.image-container {
    position: relative;
}

    .image-container img {
        position: relative;
        width: 100%;
        height: auto;
        display: none;
        border-radius: 20px 20px 0 0;
        padding: 7px;
    }

    .image-container .active {
        display: block;
    }

.dot-container {
    width: 150px;
    margin: 10px auto 5px auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

    .dot-container button {
        padding: 3px;
        border-radius: 100%;
        border: 3px solid #676F25;
    }

        .dot-container button:nth-child(1) {
            background-color: #676F25;
        }

#prev, #next {
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: #676F25;
    color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 100%;
    font-size: 20px;
    font-weight: bolder;
    border: 2px solid #fff;
    padding-top: 0;
}

#prev {
    left: 30px;
}

#next {
    right: 30px;
}


@media (max-width: 700px) {
    .custom-select {
        width: 100%;
    }


    .fechacorte {
        margin-top: 7px;
        margin-bottom: 7px;
    }

    .fechacortespan {
        background-color: #9BA251;
        color: #fff;
        padding: 5px;
    }
    /* TABS*/
    .wrapper {
        margin: 30px auto;
        width: 70%;
        font-family: sans-serif;
        color: #555;
        font-size: 14px;
        line-height: 24px;
    }

    .tabs li {
        float: left;
        width: 50%;
        list-style: none;
        left: -25px;
        position: relative;
    }

    .tabs a {
        padding: 12px 0;
        border-radius: 14px 14px 0 0;
        font-weight: 500;
        font-size: 13px;
    }



    .tabgroup div h2 {
        font-size: 20px;
    }

    .card-custom {
        min-height: 36px;
    }

    .carousel .row.fotos {
        overflow: auto;
        max-height: none;
    }

    .card-custom-galeria {
        margin-bottom: 9px;
    }

    .center {
        width: 94%;
    }

        .center .radio {
            flex-direction: column;
            padding: 5px 0;
        }

        .center .caja-select {
            padding: 10px 10px 60px 10px;
        }
}
