:root {
    --main-color: #000;
    --background-color: #000;
    --hover-color: #000;
    --canvas-size: 300px;
}

.test {
    border: 1px solid black;
}

.form-control{
    height: auto;
}

.form-control:focus{
    border: 1px solid var(--main-color);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--hover-color);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--hover-color);
}

h2, .h2 {
    font-size: 2em;
}

h3, .h3 {
    font-size: 1.5em;
}

.text-ayto{
    color: #FF2220;
}

.background-ayto {
    background: #FF2220;
}

.color-2 {
    color: #006BA8;
}

.list-inline>li {
    padding-left: 5px;
    padding-right: 5px;
}

.testflex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Searcher*/

.input-searcher {
display: block;
}

.input-searcher .input-group-btn{
    text-align: right;
}

.input-searcher .btn-primary {
    padding: 8px !important;
    margin-top: 10px;
    border-radius: 5px !important;
}


/*descripcion gestion economica*/

.ge__leftDescription{
    display: block;  
}

.ge__leftDescription div {
    width: 30%;
    margin-right: 20px;
}

.ge__leftDescription img {
    width: 100%;
    max-width: 130px;
    min-width: 100px;
    max-height: : 130px;
    min-height: : 100px;
    object-fit: cover;
    object-position: center;
    padding: 20px;
    border: .5px solid rgba(0,0,0,.1);
    background-color: var(--background-color); 
    border-bottom: 5px solid var(--main-color);
    display: none;
}

.ge__rightDescription {
    width: 100%;
    max-width: 400px;
}

.ge__mobile-head {
    display: flex; 
    align-items: center;
}

.ge__mobile-head img {
    width: 100%;
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    object-position: center;
    padding: 10px;
    border: .5px solid rgba(0,0,0,.1);
    background-color: var(--background-color); 
    border-bottom: 5px solid var(--main-color);
    margin-right: 10px;
}

.ge-description-text {
    margin-top: 20px;
}

.table-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: 50px;
}

.table-container p{
    text-align: center;
}


.table-row {
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 10px 0;
}
                   

/*Indicadores*/
.canvas-gph-container{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-around;
}

.canvas-item{
    max-width: var(--canvas-size);
    max-height: var(--canvas-size);
}

.canvas-item a{
    display: block;
    height: 100%;
}


.btn-indicadores {
    width: 250px;
    border: 1px solid black;
    border-radius: 20px;
    color: white;
}

.btn-indicadores:hover{
    color: white;
}

.page-division {
    width: 50%;
    height: 5px;
    background-color: var(--main-color);
    margin-top: 50px;
}

/*colapsables*/

.collapsible {
    width: 100%;
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 18px;
    border: 1px solid rgba(0,0,0,.2);
    border-left: 5px solid var(--main-color);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;            
    box-shadow: inset 0 0 0 0 var(--main-color);
    transition: box-shadow ease-in 0.3s;
}

.collapsible.active, 
.collapsible:hover,
.collapsible:focus {
    background-color: var(--hover-color)
}
.collapsible.active, .collapsible:active {
    box-shadow: inset 100vw 0 0 0.01px var(--main-color);
}

abbr{
    text-decoration: none;
}

.collapsible:hover abbr {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: black;
}

.collapsible .glyphicon{
    transform: scaleY(2);
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.collapsible.active .glyphicon{
    transform: scaleX(2) rotate(90deg);
}


.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-in-out;     
}

.content a {
    color: black;
    text-decoration: none;
}

.content .colapse-item {
    margin-bottom: 2px;
    background-color: #f1f1f1;
}

.content > div.colapse-item {
    display: none;
}

.content.active > div.colapse-item {
    display: flex;
}

.content .colapse-item:hover {
    background-color: var(--background-color);
}

.content .colapse-item:hover a{
    text-decoration: underline;
}

.content .colapse-item:last-child {
    margin-bottom: 0;
}


/*.content .colapse-item a:nth-child(1)::before {
    content: '\0261b';
    margin-right: 5px;
} */

.content .colapse-item a:nth-child(1) {
    width: 100%;
    padding: 18px;
}


.content .colapse-item div a:nth-child(1) {
    width: 100%;

}

.content .colapse-item a {
    /*background-color: #fff;*/
    border: 1px solid rgba(0,0,0,.1);
    padding: 8px;
    white-space: nowrap;
    margin-bottom: 1px;
}

.content .colapse-item a:hover {
    background-color: var(--hover-color);
}

.colapse-links {
    display: none;
}


@media (min-width: 428px) {
    .input-searcher {
        display: table;
    }

    .input-searcher .btn-primary {
        padding: .5em .5em .5em 1em !important;
        margin-top: 0;
        border-radius: 0px 5px 5px 0 !important;
    }

    .ge__description{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .ge__leftDescription img {
        display: block;
    }

    .ge__rightDescription {
        margin-right:20px;
        margin-left: 20px;
    }

    .ge-description-text {
        margin-top: 0px;
    }

    .ge__mobile-head img {
        display: none;
    }
}

@media (min-width: 500px){
    

    /*.content .colapse-item { //activar si vuelven los botones
        display: flex;
        justify-content: space-between;
        align-items: center;
    }*/

    .colapse-links {
        display: none !important;
    }

    .content .colapse-item a:nth-child(1)::before {
        display: none;
    }
}

@media (min-width: 768px) {

}


@media (min-width: 800px) {
    .ge__description{
        width:50%;
    }

    .ge-intro {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .table-container {
        width: 50%;
        margin-top: 0;
    }

    
}

@media (min-width: 1130px) {
    .canvas-item{
        margin: 0px;
}
}