@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

.color1 {
    color: #0454ac;
}

.color2 {
    color: #5293ec;
}

.color3 {
    color: #04742c;
}

.color6 {
    color: #3b7861;
}

.color5 {
    color: #00825a;
}

.color4 {
    color: #034995;
}

.color7 {
    color: #0f4289;
}

.color8 {
    color: #00a371;
}

.color8 {
    color: #184e77
}

.color8 {
    color: #1e6091
}

.color8 {
    color: #1a759f
}

.color8 {
    color: #168aad
}

.color8 {
    color: #34a0a4
}

.color8 {
    color: #52b69a
}

.color8 {
    color: #76c893
}

.color8 {
    color: #99d98c
}

/* a7c957
6a994e
386641
4f772d
31572c */

/* backgroundColor: '#', // Color de fondo
borderColor: 'white', // Color del borde */

/* *{
    border: solid 1px black;
} */

html,
body {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif !important;

}

p3 {
    color: green;
    font-size: 25px;
    text-align: left;
}
.caja1 {
  
  background-color: #fffbef;
  width: 250px;
  height: 50px;
}
.nav-container {
    width: auto;
    max-width: auto;
    height: auto;
    z-index: 9999;
    margin: 0;
    padding: 0;
    box-shadow: 0px 0px 20px -3px gray;
}
.navbar-brand{
    width: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 0 auto;
    margin-right: 0 !important;
}

.navbar-brand>img {
    width: 50%;
    margin: 0%;
    padding: 0%;
}

.nav-name{
    margin-left: 0 auto;
    justify-self: start !important;
}
.nav-name>p {
    font-size: calc(70% + 0.4vw);
    line-height: 1.1rem;
    margin: 0;
    padding: 0;
}

.nav-name>hr {
    margin: 0;
    padding: 0;
}

.nav-intranet{
    word-break: break-all;
    font-weight: 800 !important;
}

.dropdown-menu {
    left: auto !important;
}

/*Scrollbar just webkit*/
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    z-index: 19;
}

*::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

*::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}

*::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:active {
    background: #d4d4d4;

}

*::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

/* SECCION PRINCIPAL DE BOTONERA */

.left-panel {
    position: relative;
    background: linear-gradient(0deg, white, #ebedee);
    padding: 0;
    margin: 0;
    height: calc(100vh - 62px);
    box-shadow: 2px 5px 20px -7px gray;

}

#container-2 {
    padding: 3%;
}

.title-custom {
    font-size: calc(2rem - 30%);
    font-weight: lighter;
    line-height: 30px;
    color: gray;
    margin-top: 1rem;
    padding-bottom: 0.7rem;
    height: auto;
}

/*Contenedores de Body
Body Containers*/
.fila {
    position: relative;
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
}
.imagen-rectangular {
  border: 1px solid black;
  padding: 10px;
}


/* Botones tipo Mosaico
Tile Buttoms */
.fila>.btn {
    position: relative;
    height: 5.5rem;
    width: 8rem;
    margin: 0.50rem;
    padding: 0;
    box-shadow: 0px 0px 10px -4px;
    border-radius: 5px;
}

.fila>.btn2 {
    height: 4rem;
    width: 6rem;
}

.fila>.btn:hover {

    animation-name: moveButtom;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/*Etiquetas de Mosaico
Tile Buttoms Tag  */
.fila>.btn>span {
    position: absolute;
    background-color: #00825a;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    padding: 0.25rem;
    height: 1.60rem;
    width: 100%;
    left: 0;
    bottom: -5px;
    border-radius: 2px;
    color: white;
    font-weight: 600px;
}

.fila>.btn>span>p {
    padding: 0;
    margin: 0;
    font-size: 90% !important;
    line-height: 0.75rem;
}

/*Imagenes de Botones tipo Mosaico
Tile Buttoms Image*/

.fila>.btn>img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    border-radius: 10px;
}

/*Contenedores de Body
Body Containers - FIN*/

/*Carousel*/

.carousel-fila {
    position: relative;
    width: auto;
    max-height: 200px;
    margin-left: auto;
}

.carousel {
    position: relative;
    width: 100;
    margin-top: 10%;
}

.btn-cumple {
    /*PROXIMA IMPLEMENTACION*/
    display: block;
    position: absolute;
    height: 81%;
    width: 100%;
    z-index: 3;
}


.carousel-item>div {
    /* Contenedor de foto personal / personal photo container */
    position: relative;
    width: 50%;
    margin: auto;
    height: auto;
    z-index: 1;
}

.carousel-item>div>img {
    position: relative;
    object-fit: cover;
    object-position: center;
    background-color: white;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-right: 17px;
    padding-left: 16px;
    padding-bottom: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px -7px;

}

/* Nombre de  Cumpleanos
Happy Birthday NameTag */
.carousel-item>div>img,
#photoSpam {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#photoSpam {
    background-color: white;
    position: relative;
    word-wrap: break-word;
    word-break: break-all;
    align-items: center;
    color: black;
    font-weight: 400;
    line-height: 17px;
    height: 55px;
    z-index: 2;
    bottom: 35px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 10px 20px -10px grey;
}

#photoSpam>p {
    display: block;
    margin: auto;
    padding: auto;
    font-stretch: condensed;
    font-weight: 500 !important;
}

#photoSpam>a {
    font-weight: 800;
    font-stretch: extra-expanded;

}

.img-carru {
    width: 100%;
    height: 20%;
}

/* Tarjeta de Fecha Cumpleanos
Happy Birthday Tag */

.toptag {
    background-color: #00825a;
    height: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
    font-weight: 600;
    border-radius: 5px;
}

.toptag>p {
    line-height: 1.5rem;
    margin: 0 auto;
    padding: 0 auto;
}

/* Tarjeta de Fecha Cumpleanos FIN
Happy Birthday Tag  END*/


/* Botones Laterales Carrusel
Lateral Buttoms Carrusel */
.carousel-control-prev,
.carousel-control-next {
    border: none;
    margin-left: auto;
    margin-right: auto;
    background-color: none;
    background: none;
}

/*CARRUSELES*/

.ctrl-notice {
    position: relative;
    display: flex;
    align-items: center;
    top: 17.5%;
    margin: 2.5%;
    height: 26rem;
    max-height: 500px;
    padding: 0;

}

.noticia {
    position: relative;
    background-color: white;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    /* box-shadow: 3px 2px 10px -4px black; */
}

.noticia:hover {
    /*Animaciones del boton prox*/
    box-shadow: 0px 0px 10px -3px gray;
}

.img-notice {
    position: relative;
    background-color: gray;
    width: 4rem;
    height: 4rem;
    border-radius: 5px;
    margin-left: 10px;
}

.notice-preview {
    position: relative;
    height: 80px;
    width: 200px;
    margin: auto;
    padding: auto;
}


.notice-content,
.notice-title {
    margin: 0;
    margin-left: 5px;
    padding: 0;
}

.notice-title {
    font-size: 1rem;
    display: flex;
    justify-content: start;

}

.notice-content {
    position: relative;
    font-size: 0.8rem;
    width: calc(200px - 1vw);
    max-height: 3rem;
    text-align: start;
    line-height: 1rem;
    overflow: hidden;
}

#container-directory {
    margin-top: 3%;
}


/*Cosas Extras*/

#user-menu {
    position: absolute;
    right: 30% !important;
}

.bg-gss-img {
    position: absolute;
    opacity: 0.5;
    width: 10%;
    z-index: 0;
    right: 0%;
    bottom: 0%;

}



/* SECCION PRINCIPAL DE BOTONERA */

/* SECCION DE DIRECTORIO TELEFONICOS */

/*Botones directorio
Directory Buttoms*/
/* .table>thead>tr>.t2,
.table>thead>tr>.t3,
.table>thead>tr>.t4,
.table>thead>tr>.t5{
    display: none;
} */

#btn-directory>.btn-group>button {

    padding-bottom: 5px !important;

}

/* ------------------- */
#fr-dropdirectory {
    font-size: 100%;
    /* height: calc(100vh - 40vh); */
    /* max-height: calc(100vh - 40vh) ; */
    max-height: 60vh;
    margin-top: 0.5vh;
    overflow-y: auto;
    overflow-x: none;
}



/*fuentes-directorio
directory font*/

#sub-name>p,
#sub-extension>p,
#mail>p,
#ext>p {
    text-align: start;
    margin: 0;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
}

#sub-name>p {
    line-height: 1rem;
    font-weight: 800;
    margin: 0;
}

#sub-extension>p {
    line-height: 1rem;
    font-weight: 500;
    margin: 0;
}

#sub-name>p>span,
#sub-extension>p>span,
#ext>p>span,
#mail>p>span {

    margin-right: 5px;
}

#ext>p>span>button {
    width: auto;
    margin: 0;
    padding: 0;
}

/*filas directorio
Directory row*/

.directorygeneral {
    margin-top: 1rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.directorygeneral>div>p {
    line-height: auto;
    margin: 0;
    padding: 0;
}

.directorygeneral>div>div>div>p>span {
    display: none;
}

.btn-acti:focus{
    background-color: #0454ac !important;
}
/* SECCION DE DIRECTORIO TELEFONICOS */
/* 
_______________________________________________________________________________________ */
/* INDICADORES  */
.macroMainBox {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.macroBox {
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin: 0 !important;
    padding: 0 !important;
}

.macroBox>div {
    margin-top: 2vh;
    margin: 1vh;
}

/* Caja de la columana grafica tipo pastel */
#canvas-holder {
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 100%;
    /* min-height: 50vh;
    max-height: 50vh; */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid rgb(209, 207, 207);
    /* box-shadow: 0pc 0pc 10px -5px black; */
}



/* Caja de la grafica inferior 1 */
#canvas-holder2 {
    background-color: #FFFFFF;
    width: 100%;
    margin-top: 1vh;
    margin-bottom: 2vh;
}

/* .table{
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 3;
} */


#tableDetail1,
#tableDetail2,
#tableDetail3,
#tableDetail4,
#tableDetail5,
#tableDetail6 {
    background-color: #FFFFFF;
    box-shadow: 0pc 0pc 10px -5px black;
    height: auto !important;
    min-height: auto !important;
    margin-top: 1vh !important;
    border: 0 !important;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}

#tableDetail1,
#tableDetail2,
#tableDetail3 {
    max-height: 30vh;
}

#tableDetail4,
#tableDetail5 {
    position: relative;
    width: 100%;
    max-height: 600px;
    overflow-y: auto;

}

#tableDetail6{
    min-width: 700px;
}

.tableDetail4-over {
    overflow: scroll;
}

.table4-especial {
    min-width: 315px !important;
}


.botonCalendario{
    border: 0 !important;
    background-color: none !important;
}
/* #chartView-(123) son las graficas tipo pastel */

#chartView-1,
#chartView-2,
#chartView-3 {
    position: relative;

}

#chartView-2,
#chartView-3,
#tableDetail2,
#tableDetail3 {
    display: none;
}


#detailBox1,
#detailBox2,
#detailBox3 {
    overflow-y: auto !important;
    max-height: 30vh !important;
}

#chartView-1,
#chartView-2,
#chartView-3,
#tableDetail1,
#tableDetail2,
#tableDetail3,
#tableDetail4,
#tableDetail5 {
    width: 100%;
    height: 100%;
}

/* #chartView-4 {
    height: 97% !important;
} */

.chart-decoration-4,
.chart-decoration-3 {
    position: relative;
    width: 100vw;
    height: 50vw;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgb(209, 207, 207);
    box-shadow: 0pc 0pc 10px -5px black;
}

/* .chart-decoration-4{
    height: 100vh !important;
} */

.Grafica8 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98%;
    height: 40vh;
    background-color: white;
    box-shadow: 0px;
    border-radius: 10px;
    border: 1px solid rgb(209, 207, 207);
    box-shadow: 0pc 0pc 10px -5px black;

}

#row-down-chart-2 {
    margin-top: 2vh;
}

#chart_4 {

    width: 95%;
    height: 100%;
}

#chart_5,
#chart_6 {
    width: 100%;
    max-height: 30vh;
}

.btn-group,
.btn-secondary,
.btn {
    border-bottom: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}


.btn-group {
    box-shadow: 0px 5px 5px -5px gray;
    z-index: 3;

}

#canvas-holder2,
.chart-decoration-3 {
    padding-top: 2.5vh !important;
    /*espacio de botones detalles*/
}


#chart-detail {
    background-color: white;
    /* position: absolute; */
    width: auto;
    height: auto;
    padding: 1px;
    top: 0.2rem;
    right: 1rem;

}

.graphi8{
    max-height: 500px;
    box-shadow: 0pc 0pc 10px -5px black;
}

#chartDetailRow {
    position: relative;
    font-size: 100% !important;
}

#chartDetailRow>div,
.total-class {
    display: flex;
    align-items: center;
    justify-content: center;
}

#chartDetailRow>.font-order-col {
    justify-content: end;
}

#detailBox1>div>#chartDetailRow>.font-second-col,
#detailBox2>div>#chartDetailRow>.font-second-col,
#detailBox3>div>#chartDetailRow>.font-second-col,
#detailBox1>div>#chartDetailRow>.font-order-col {
    justify-content: center !important;
}

#detailBox2>div>#chartDetailRow>.font-second-col>p,
#detailBox1>div>#chartDetailRow>.font-second-col>p{
    margin: 0 auto !important;
    padding: 0 auto !important;
}

#chartDetailRow>.font-first-col,
#chartDetailRow>.font-first-col-2 {
    justify-content: start !important;
}

#detailBox3>div>#chartDetailRow>.font-second-col>p,
#detailBox3>div>#chartDetailRow>.font-second-col>p,
#detailBox3>div>#chartDetailRow>.font-second-col>p{
    margin-right: 0 auto !important
}

#chartDetailRow>.font-second-col-2>p,
#chartDetailRow>.font-second-col>p,
#chartDetailRow>.font-order-col>p,
#font-weight-total>p{
    margin-right: 5px !important;
}


#tableDetail2>div>div>div {
    height: calc(100% / 7);
}

#tableDetail3>div>div>div {
    height: auto;
}

#tableDetail1>div>div>div,
.hbox,
.total-class {
    height: 3em;

}

#chartDetailRow>div,
#chartDetailRow {
    min-height: 40px !important;
    border-bottom: 0 !important;
}

#chartDetailRow>div>p {
    line-height: 100% !important;
}

.font-main-title {
    height: 2em !important;
}

.font-main-title>div>p {
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* #detailBox4 > div > #chartDetailRow > .font-order-col{
    
} */
/* Targeting the p tags inside the divs with the classes font-second-col-2 and font-order-col. */
#detailBox4>div>div>.font-second-col-2>p,
#detailBox4>div>div>.font-second-col>p,
#detailBox4>div>div>.font-order-col>p {
    margin-right: 5px !important;
}

#detailBox4>div>div>#first-col-left>p{
    margin-right: auto !important;
    margin-left: 5px !important;
}
#chartDetailRow>.font-order-col>p{
    margin-left: 5px !important;
}
#detailBox4>div>div>.font-first-col-2>p,
#detailBox4>div>div>div>.font-first-col-2>p {
    margin-left: 5px !important;
    text-align: left;
}

.font-order-col {
    font-size: calc(0.5rem + 0.5vw);
    padding-right: 5px;
    padding-left: 5px;
    font-weight: 700;
}

.font-first-col{
    font-size: calc(0.5rem + 0.5vw);
    justify-content: center !important;
    font-weight: 700;
    word-wrap: break-word;
    word-break: break-all;
}

.font-weight-total {
    font-size: calc(1rem + 1vw);
    font-weight: 800 !important;
}

.font-first-col-2 {
    font-size: calc(0.45rem + 0.45vw);
    font-weight: 600;
    word-break: break-word;
}

.font-second-col,
.font-second-col-2  {
    font-size: calc(0.5rem + 0.5vw);
    font-weight: 400;
}

.grafica{
    min-height: 500px;
}

.font-grafica-min{
    height: auto !important;
    min-width: 50px !important;
}
.font-grafica-min> .font-first-col-2{
    font-size: calc(0.4rem + 0.4vw) !important;
}


.descrip {
    justify-content: center !important;
}

.font-descrip-col {
    font-size: calc(0.45rem + 0.45vw);
    min-width: 100px;
}



.font-first-col>p,
.font-first-col-2>p,
.font-second-col>p,
.font-second-col-2>p,
.font-descrip-col>p {
    margin: 0 auto;
    padding: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end !important;
}


.line-special-height {
    line-height: 2rem;
}

.resaltar-cuadro{
    background-color:  #bec4ca !important;
    color: #303b45;
    min-height: 40px;
}

.resaltar-total{
    background-color: #252d35 !important;
    color: #dee1e4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.borderless{
    border-radius: 0 !important;
}


.topSellImgContainer {
    position: relative;
    display: block;
    align-items: center;
    justify-content: center;
    width: calc(100% / 2);
    height: 100px;
    margin-bottom: 20px;

}

.topSellImgContainer>img {
    position: relative;
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.topSellImgContainer>p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.card-custom {
    box-shadow: 0px 0px 7.5px gray;
    border: 0;
    font: 10px;
    width: 8rem;
    height: 12rem;
    margin: 5px;
}

.card-custom>img {
    object-fit: contain;
    object-position: center;
    height: 6rem;
    border: 0;

}

.card-custom>img>h5 {
    margin: 0px;
    padding: 0px;
    border: 0;
}


.card-color {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #034995;
    width: 100%;
    height: 30px;
    border: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: white;
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(1rem + 0.4vw) !important;
    border: 0;
}

.card-body-custom {
    padding: 4%;
}


.card-text,
.card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(0.39vw + 0.39rem);
    font-weight: 600;
}

.circulo-1 {
    background-color: white;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    z-index: 20;
    font-size: 20px;
    color: #034995;
    font-weight: 700;
    border: solid 1px #034995;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 12px gray;

}

/* Indicadores Cuadros */






/* Indicadores Cuadros */




/* indicadores fin */


/* Footer */

footer {
    position: sticky;
    width: 100%;
    height: auto;
    bottom: 0;
    background-color: black;
    color: white;
    font-weight: 400;
    box-shadow: -2px 0px 10px -3px lightgrey;
    padding: 10px;

}

footer>div>p {
    font-size: 1rem;
    margin-bottom: 5px;
    width: 100%;
    line-height: 1.2rem;
    margin-left: auto;
}

.footer-square {
    background-color: white;
    width: 5px;
    height: 5px;
    transform: rotate(25%)
}

.footer2 {
    position: absolute;
    bottom: 0;
    color: white;
    width: 100%;
    height: auto;
    display: block;
    align-items: center;
    justify-content: start;
    line-height: 1rem;
    font-weight: 400;
    font-size: calc(0.6rem + 0.6vh);
    word-break: normal;
    padding: 10px;
}

.footer2>p {
    margin: 2px;



}

/* footer */
/* especiales */
/* serivicios */
.tagColor1 {
    /* old citadel - enchanted blue */
    /* background-color: rgb(49, 99, 156); */
    background-color: #2462a9 !important;
}

.tagColor2 {
    /* Pantone */
    /* background-color: rgb(0,130,87) */
    background-color: #008257 !important;
}

.tagColor3 {
    /* Gris Hierro */
    /* background-color: rgb(67, 75, 77) ; */
    background-color: #434b4d !important;
}

.tagColor4 {
    /* teal */
    /* background-color: rgb(0, 128, 128); */
    background-color: #008080 !important;
}




    .botonimagenedi{
  background-image:url("../img/icons/editar.png");
  background-repeat:no-repeat;
  height:25px;
  width:25px;
  background-position:center;
}

.botonimageneli{
  background-image:url("../img/icons/borrar.png");
  background-repeat:no-repeat;
  height:25px;
  width:25px;
  background-position:center;
}
.botonimagengra{
  background-image:url("../img/icons/disquete.png");
  background-repeat:no-repeat;
  height:25px;
  width:25px;
  background-position:center;
}
.botonimagenagr{
  background-image:url("/img/icons/mant.png");
  background-repeat:no-repeat;
  height:25px;
  width:25px;
  background-position:center;
}
.botonimagdes{
  /* background-image:url("../img/cards/descarga.png"); */
  background-repeat:no-repeat;
  height:25px;
  width:25px;
  background-position:center;
}

.loaderContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #00825a #0454ac transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent white white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}

.loader::before {
    width: 32px;
    height: 32px;
    border-color: #434b4d #434b4d transparent transparent;
    animation: rotation 1.5s linear infinite;
}




@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* especiales */


@media (min-width:425px) {

    /* .font-order-col {
        font-size: 0.6rem;
        font-weight: 700;
    } */

    /* .font-first-col {
        font-size: 0.5em;
        font-weight: 700;
    } */

    /* .font-first-col-2 {
        font-size: 0.55rem;
        font-weight: 600;
    } */

    /* .font-second-col {
        font-size: 0.5em;
        font-weight: 400;
    } */

    /* .font-second-col-2 {
        font-weight: 400;
        font-size: 0.5em;
    } */

    .descrip {
        justify-content: center !important;
    }

    /* .font-descrip-col {
        font-size: 0.55em;
    } */


    .card-custom {
        width: 12rem;
        height: 14rem;
    }

    .card-custom>img {
        height: 8rem;
    }

}

@media (min-width: 576px) {

    #btn-directory {
        display: block !important;

    }

    .directorygeneral>div>div>div>p>span {
        display: contents;

    }

    #sub-name>p,
    #sub-extension>p {
        margin: 0;

    }

    .topSellImgContainer {
        width: calc(100% / 4);
    }
}


@media screen and (min-width : 768px) {

    .macroBox {
        position: relative;
        margin-top: 2% !important;
    }

    /* indicadores  */
    #canvas-holder {
        background: none;
        box-shadow: none;
        border: none;
        display: flex;
        align-items: center;
        /* height: 200px; */
    }

    #canvas-holder2 {
        width: 100%;
        /* height: calc(100vh / 4); */
        margin: 0 !important;
        /* margin-left: 1vw !important; */
        margin-right: 1vw !important;

    }

    /* .chart-decoration-3 {
        max-height: 19.5vh;
    } */

    #chart_6 {
        height: 100%;
    }

    #row-bottom {
        margin-top: 1vh !important;
    }

    /* .chart-decoration-3 {
        height: 400px;
        max-height: 22.5vh;
    } */
    #row-down-middle {
        margin-left: 1vw;
        margin-right: 1.5vw;
    }

    #row-down-chart-2 {
        margin-top: 1vh;
    }

    #chartView-1,
    #chartView-2,
    #chartView-3,
    #tableDetail1,
    #tableDetail2,
    #tableDetail3,
    #tableDetail4 {
        position: relative;
        background-color: #FFFFFF;
        border: 1px solid rgb(209, 207, 207);
        box-shadow: 0pc 0pc 10px -5px black;
        display: inline-flex !important;
        margin: 0 !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        padding: auto;
        border-radius: 10px;
       
    }

    #tableDetail1,
    #tableDetail2,
    #tableDetail3,
    #tableDetail4{
        width: calc(100% / 3.2);
        height: calc(100vh / 5);
    }

    #chartView-1,
    #chartView-2,
    #chartView-3{
        position: relative;
        /* width: calc((48rem / 3) - 3vw ); */
        width:  calc((100% / 3  - 2%));       
    }


    #tableDetail1,
    #tableDetail2,
    #tableDetail3 {
        height: auto !important;
        margin-top: 1vh !important;
    }

    #tableDetail4 {
        max-height: 600px !important;
        margin-top: 1vh !important;
        width: 100% !important;
    }

    .title-chart {
        font-size: 1rem;
        line-height: 100%;
        padding-top: 2%;
        padding-right: 4%;
        padding-left: 4%;
        margin: 0%;
    }

    /* .font-order-col {
        font-size: 1em;
    } */

    /* .font-first-col {
        font-size: 0.08em;
        line-height: 1vh;
    } */

    .font-descrip-col {
        font-size: 0.7em;
    }

    /* .font-second-col,
    .font-second-col-2 {
        font-size: 0.8em;
    } */

    .directorygeneral>div>div>div>p>span {
        display: none;

    }
    .card-custom {
        width: 14rem;
        height: 16.5rem;
    }

    .circulo-1 {
        width: 40px;
        height: 40px;
        font: 25px;
    }

    .card-custom>img {
        height: 10rem;
    }

    /* .table>thead>tr>.t2,
    .table>thead>tr>.t3,
    .table>thead>tr>.t4,
    .table>thead>tr>.t5,
    .table>tbody>tr>.c5,
    .table>tbody>tr>.c4,
    .table>tbody>tr>.c3,
    .table>tbody>tr>.c2,
    .table>tbody>tr>.c1{
        display:contents;
    }

    .table>thead>tr>.t6,
    .table>tbody>tr>.c12,
    .table>tbody>tr>.c45{
        display: none;
    } */

    /* indicadores fin */
}

@media (min-height : 720px) and (orientation:landscape) {
    .macroBox {
        margin: auto;
        padding: auto;
        margin-top: 10%;
        margin-right: 5vw !important;
        margin-left: 5vw !important;
    }


    /* #canvas-holder2 {
        max-height: 45vh !important;
    } */
/* 
    .chart-decoration-3 {
        max-height: 22vh;
    } */

    .fila>.btn {
        height: 4.5rem;
        width: 6rem;
    }

}
    @media (min-width:992px) {

        .fila>.btn {
            height: 9rem;
            width: 12rem;
        }

        .left-panel {
            width: 45%;
        }

        .macroBox {
            margin-top: 2.5% !important;
            margin: auto !important;
            max-width: 900px !important;
        }
/* 
        #chartView-1,
        #chartView-2,
        #chartView-3 {
            height: calc(100vh / 4);
        } */

        @keyframes moveButtom {

            from {
                transform: translateY(0);

            }

            to {
                transform: translateY(-10px);

            }

        }

        .tableDetail4-over {
            overflow-x: hidden !important;
        }

        
        .card-custom {
            width: 12rem;
            height: 14.5rem;
        }

        .graphi8{
        max-height: 100%;
    }

        .circulo-1 {
            width: 40px;
            height: 40px;
            font: 25px;
        }

        .card-custom>img {
            height: 10rem;
        }
    }

    @media (min-width:1200px) {

        .left-panel {
            width: 25%;
        }

        #canvas-holder2 {
            max-height: 40vh !important;
        }

        /* .chart-decoration-3 {
            max-height: 19.5vh;
        } */

        /* .font-first-col-2 {
            font-size: 0.8rem;
        } */

        /* .font-second-col-2 {
            font-size: 0.8rem;
        } */

        .directorygeneral>div>div>div>p>span {
            display: contents;

        }

        .card-custom {
            height: 16rem;
        }

    }

    @media (min-width:1500px) {

        .macroBox {
            margin: auto !important;
            padding: auto !important;
            margin-top: 2.5% !important;
            max-width: 1200px !important;
        }

        #chartView-1,
        #chartView-2,
        #chartView-3 {
            /* height: calc((100vh / 3) + 2rem); */
            height: 80%;
        }

        #tableDetail1,
        #tableDetail2,
        #tableDetail3 {
            max-height: 25vh !important;
        }

        #canvas-holder2 {
            max-height: 45vh !important;
        }

        /* .chart-decoration-3 {
            max-height: 22vh;
        } */

        /* .font-order-col {
            font-size: 1.2rem;
        } */

        /* .font-first-col {
            font-size: 1rem;
            font-weight: 600;
        } */

        /* .font-second-col {
            font-size: 1rem;
        } */

        #tableDetail2>div>div>div>div {
            font-size: 1rem;
        }

        #container-directory {
            max-width: 1400px;
        }

    }