html{
  scroll-behavior: smooth;
       /*Comenta la línea (o dale el valor 'auto' a scroll behavior )
       para probar la diferencia con y sin scroll suavizado*/
}  

.trend{}

.trend .header-page {padding: 0; }
section .header-page h1{font-size: 30px;font-weight: 600;}
section .header-page .bajada{padding-top: 10px; font-size: 16px; }


/*.trend .filtros-top {margin-bottom: 30px;}*/



.trend .card-body{padding: 50px 40px 40px;}


.encuestas-list .thead .name,
.encuestas-list .item .first{width: 100%!important;}


.trend .encuestas-list{}

.trend .filtros-top{
    width: fit-content;
    margin: 8px 0 20px auto;
}
.trend .filtros-top .boton-wrp{}

.item.d-flex {}

.survey-state{color: #fff; font-size: 10px; text-transform: uppercase; padding: 4px 10px 3px; border-radius: 33px; }
.survey-state.activa{background-color: #49ba86; }
.survey-state.finalizada{background-color: #666;}
.survey-state.programada{}


.card-filtros-top{margin-bottom: 50px;}
.card-filtros-top .buscador{position: relative;margin: 0;font-size: 14px;padding-top: 4px;margin-left: 20px;}
.card-filtros-top .buscador input{padding-top: 0!important;font-size: 15px;height: 22px;padding-bottom: 6px!important;padding-left: 24px!important;width: 200px;transition: .3s;}
.card-filtros-top .buscador input:focus{width: 350px;}
.card-filtros-top .buscador .lupa{position: absolute;left: 0;top: 4px;}



.blank-water{width: 100px; height: 34px; background: #fff; position: absolute; bottom: 30px;}

.is-animated {-webkit-animation: .3s fade; animation: .3s fade; }

@-webkit-keyframes fade {
  0% {transform: translate(0px,10px); }
  100% {transform: none; }
}

@keyframes fade {
  0% {transform: translate(0px,10px); }
  100% {transform: none; }
}



.trend .compare-bottom{
    position: fixed;
    bottom: 30px;
    padding: 15px 30px;
    width: 100%;
    background: #2e353e;
    background-image: linear-gradient(215deg , #4d545b, #2e353e);
    z-index: 999;
    left: 310px;
    text-align: right;
    width: calc(100% - 560px);
    color: #fff;
    visibility: hidden;
    border-radius: 5px;
    box-shadow: 1px 4px 14px rgb(95 108 114 / 50%), 0 0px 6px rgb(95 108 114 / 50%);
}


.trend .compare-bottom .btn{margin-left: 30px;}




.compare-bar {-webkit-animation: .3s compare; animation: .3s compare; visibility: visible!important;}

@-webkit-keyframes compare {
  0% {transform: translate(0px,50px); }
  100% {transform: none; }
}

@keyframes compare {
  0% {transform: translate(0px,50px); }
  100% {transform: none; }
}


.trend .title-cant-encuestas{font-size: 18px;}
.trend .title-cant-encuestas .numero{display: inline-block;font-weight: 500;border-bottom: 1px dotted;cursor: pointer;position: relative;color: #0057ff;line-height: 27px;}


.trend .variables-wrp{padding: 28px 0 15px;}
.trend .variables-wrp .label{padding-right: 30px; }
.trend .variables-wrp .item{position: relative; padding-left: 26px; }
.trend .variables-wrp .item img{height: 12px; position: absolute; top: 4px; left: 0; }
.trend .variables-wrp .and{padding: 0 20px; color: #999; }
.trend .variables-wrp .btn-add{background: #444;border-radius: 2px;width: auto;height: 22px;margin-left: 20px;text-align: center;background-color: #eaf0f6;border: 1px solid #cbd6e2;color: #506e91;font-size: 13px;padding: 0px 10px;line-height: 160%;}
.trend .variables-wrp .btn-add i[data-toggle="dropdown"]{font-size: 13px; top: 6px; position: absolute; left: 0; }
.trend .variables-wrp .btn-add span{}

.menu-item, .menu-graph {position: absolute;background-color: #fff;padding: 20px;visibility: hidden;opacity: 0;width: 420px;z-index: 9999999999;border-radius: 5px;box-shadow: 0 2px 10px rgba(95,108,114,.2), 0 0px 6px rgba(95,108,114,.2);font-size: 15px;left: -1px;transition: visibility 0s, opacity 0.1s linear;top: 27px;}
.show-menu, .fav-show-menu, .com-show-menu, .res-show-menu{visibility: visible;opacity: 1;}

.menu-item .wrapper{overflow-y: auto;max-height: 263px;}
.menu-item .action-bottom{padding-top: 25px;}
.menu-item .action-bottom a{}
.menu-item .action-bottom .btn{}

.menu-item .btn-group{display: block; padding-bottom: 10px; height: auto; position: relative; min-height: 48px; }
.menu-item .btn-group .btn{position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.menu-item .btn-group .btn input{}
.menu-item .btn-group .name{font-weight: normal;padding-left: 43px;width: calc(100% - 45px);top: 50%;left: 0;transform: translateY(-50%);position: absolute;color: #444;}


/*.trend .grafico-result {text-align: center; height: 400px; padding-top: 170px; font-size: 22px; }*/


.menu-graph{width: 160px;top: 65%;left: 54%;transform: translate(-50%, 13%);}
.menu-graph .flecha{position: absolute;top: -18px;left: 62px;}
.menu-graph .flecha img{width: 35px; height: auto!important; }
.menu-graph .eliminar{border-top: 1px solid #efefef; display: block; padding-top: 15px; }
.menu-graph .title{text-transform: uppercase; font-size: 10px; color: #999; padding-bottom: 15px; display: block; }
.menu-graph .icon-graph {float: left;}
.menu-graph .icon-graph a{width: 40px;height: 40px;display: block;background-repeat: no-repeat;background-size: 24px;cursor: pointer;}
.menu-graph .icon-graph.bars a{background-image: url('../img/trend/bars.png');background-position-x: left;}
.menu-graph .icon-graph.bars.active a{background-image: url('../img/trend/bars-active.png');}
.menu-graph .icon-graph.line a{background-image:url('../img/trend/line.png');background-position-x: center;}
.menu-graph .icon-graph.line.active a{background-image:url('../img/trend/line-active.png');}
.menu-graph .icon-graph.area a{background-image:url('../img/trend/area.png');background-position-x: right;}
.menu-graph .icon-graph.area.active a{background-image:url('../img/trend/area-active.png');}



.trend .btn-switch{margin: 0 0 20px auto;width: 120px;margin: 0 auto 20px;}
.trend #chartContainer{height: 350px;}
.trend .canvasjs-chart-credit{display: none;}

.trend .heatmap {/* margin-top: 40px; */}
.trend .card.heatmap {margin-top: 40px;}
.trend .heatmap .numero div{width: 100px;}
.trend .heatmap .column-left{background-color: #fff;}
.trend .heatmap .variables .column-left{height: 100px;}
.trend .heatmap .variables .column-right .name{height: 90px;width: 100px;text-align: center;padding: 20px 15px 15px;}
.trend .heatmap .variables .column-right .name .texto{transform: none;width: initial;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: initial;line-height: 130%;font-size: 12px;}
.trend .heatmap .variables .total{margin: 0 auto; left: 0; right: 0; }


.trend .btn-demo.btn-more-details{
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
}
.trend .more-details {padding: 20px 0 10px;text-align: center;}
.trend .more-details span{position: relative;padding-right: 10px;}
.trend .more-details span:before{font-size: 16px;padding: 20px 0 10px;margin: 0 auto;}

.trend .collapsed[data-toggle="collapse"] .more-details span:after{
    transition: .3s;
    transform: rotate(180deg);
    }


.trend [data-toggle="collapse"] .more-details span:after{
    content: '\f106';
    transition: .3s;
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: -6px;
    top: 0px;
    font-size: 16px;
    }

.trend .collapsed[data-toggle="collapse"] .more-details span.open-details{display: block;}
.trend .collapsed[data-toggle="collapse"] .more-details span.close-details{display: none;}
.trend [data-toggle="collapse"] .more-details span.open-details{display: none;}
.trend [data-toggle="collapse"] .more-details span.close-details{display: block;}




/*Media queries*/

    @media (max-width: 1199.99px) {
      .trend .compare-bottom{
    width: calc(100% - 300px);
    left: 140px; }

    }



/*Tablet*/
    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    

      }



@media only screen and (max-width: 767px) {


}