:root {
    --azul: #10069f;
    --verde: #97D700;
    --verde-medio: #52b200;
    --verde-opaco: #2cb877;
    --rojo: #df4747;
    --fondo-side: #353a40;
    --fondo: #F3F3F9;
    --celeste: #78c6e4;
    --azul-opaco: #FF66C4;
    --azul-text: #183153;
    --verde-dma:#434e2d;
    --naranja-dma: #ff8200;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    
}

html {
    font-size: 62.5%;

    @media (max-width: 1370px) {
        font-size: 50%;
    }

    @media (min-width: 750) {
        font-size: 62.5%;


        
    }
}

body{
    background-color: #f1f1f1;
    font-size: 1.6rem;

    @media (min-width: 750px) {
        overflow: hidden;
    }
}

#speciesGraph, #heightGraph {
    width: 100%;
    height: 500px;
    font-family: 'Montserrat', sans-serif !important;
  }

#viewDiv {
    padding: 0;
    margin: 0;
    height: 90vh;
     /* height: 100%; */
    width: 100%;
    overflow: hidden;
  }

.card{
    border-radius: 0px;
    cursor: pointer;
    border:none;
    

    &:nth-child(1 of .imagen){
        overflow: hidden;
    }

    &.filtro{
        background-color: unset;
       
    }
}

.card_tree{
    width: 100%;
    height: 100%;
    background: #313131 url('https://gis.muniguate.com/proyectosDIGM/arbolado_build/img/VistaHermosa.jpg');
    /* background-position-y:-10rem; */
    background-repeat:no-repeat;
    background-size: cover;
    filter:brightness(0.5);    
    position: absolute;
    z-index: 1;
}

.count{
    /* position: absolute; */
    color:var(--fondo);
    z-index: 1000;
    left: 15px;
    bottom: 0;

    & p:nth-child(1){
        font-size: 7rem;
    }

    & p:nth-child(2){
        /* margin-left: -55px; */
        
    }
    
}


.titles{
    color: var(--verde-dma)


}

.boton{
background-color: var(--verde-dma);
color: white;
}

.text-box{
    /* height: 5rem; */
    width: auto;
    /* background-color: var(--fondo); */
    /* border-radius: 10px; */
    color: var(--verde-dma);
    /* font-size: 4.5rem; */
    /* font-weight: 900; */

    &.mini{
        /* font-size: 2rem; */
        height: 3rem;
        width: auto;
    }
}

.dropdown{
    cursor: pointer;
}

.dropdown:nth-child(-n+4){
    background-color: white;
    padding: 0px;

    cursor: pointer;
    border-right: 1px solid var(--fondo);
    padding-block: 0.5rem;
}    

.dropdown:nth-child(5){
    padding: 10px;
    cursor: pointer;
} 

ul{
    inset: -35px 10px auto auto !important;
}

#species_trees{
    cursor: pointer;
}

.logo{
    width: 7rem;
    height: 7rem;

    &.mini{
        width:7rem; 
    }

    &.oficial{
        width: 7rem;
        height: 9rem;
        margin-right: 2rem;

        @media (max-width: 700px) {
            width: 8rem;
            height: 10rem;
        }

    }

}

.info{
    color: var(--naranja-dma);
    z-index: 2;
    font-size: 2rem;

    &.texto{
        color: white;
    }
}

.tab_filtros ul li{
    color: var(--verde-dma);
    font-size: 1.5rem;
}


.h1{
    font-size: calc(9.333rem / 1.5) ;
    font-weight: 900;
}

.h2{
    font-size: calc(6.667rem / 1.5);
    font-weight: 900;

    @media (max-width: 700px){
        font-size: calc(9.333rem / 1.5);

        &.titulo{
            font-size: calc(9.333rem / 2);
        }
    }

}

.h3{
    font-size: calc(4rem / 1.5);
    font-weight: bold;
}

.p1{
    font-size: calc(2.667rem / 1.5);
    
    font-weight:700;
}

.p2{
    font-size: calc(2rem / 1.5);
    font-weight:500; 
}


    
#scroll-up{
    display: none !important;

    @media (max-width: 700px){
        display: flex !important;
        width: 5rem;
        height: 5rem;
        background-color: var(--verde-dma);
        bottom: 1.5rem;
        right: 1.5rem;
        color: white;
        cursor: pointer;
      }    
}

.se_title{
    /* writing-mode: sideways-lr; Works on supported browsers */
    transform: rotate(270deg); /* Fallback for iOS */
    white-space: pre;
    /* transform-origin: left bottom; Adjust rotation pivot */
    /* display: inline-block; */
}