/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.container{
  max-width: 800px;
  margin: 0 auto;
}

.bg-gray{
  background-color: #f4f4f4;
}

.only-text-grid .icon img {
  max-width: 100px;
  height: auto;
}

@media(max-width:460px){
  .icon {
    text-align: center !important;
  }
  .only-text-grid {
    grid-template-rows: 200px 1fr!important;
    grid-template-columns:1fr!important;
    grid-gap: 40px!important;
    align-items: center!important;
    margin: 30px 0!important;
    justify-items: center !important;
  }

  .text h2{
    text-align:center;
  }

}
.text p{
  text-align: justify;
}


.only-text-grid {
  align-items: center;
  color: #003865;
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}




.status-message .image-box{
  width: 40%;
}

.status-message .content{
  width: 60%;
  padding-left: 40px;
}

.status-message .content h3{
  font-size: 32px;
  color: #111C4E;
  margin-bottom: 10px;
  font-family: "BiNeoIndustrial-Black";
}

.status-message .content p{
  font-size: 23px;
  color: #111C4E;
  margin: 0 0 20px 0;
  font-family: "BiNeoIndustrial-Regular";
}

.gray-block{
  z-index: -1;
}

.gray-block div{
  width: 100%;
  height: calc(100% - 60px);
  margin: 30px 0;
  border-radius: 200px;
}

.inner{
  border-radius: 100px;
  padding: 0 55px;

}


.thermometer-bar{
  background: rgb(140,200,50);
  background: linear-gradient(90deg, rgba(140,200,50,1) 0%, rgba(255,190,0,1) 50%, rgba(255,20,40,1) 100%);
  width: 100%;
  height: 25px;
  border-radius: 40px;
}

.progress-bar{
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
}
.progress-bar .slide-bar{
  position: absolute;
  top: 0;
  right: -1px;
  width: 25px;
  height: 25px;
  border-radius: 40px;
  border: 3px solid white;
  color: #003865;
  font-size: 10px;
  background-color: #fff;
}



.indece-section{
  color:#003865;
}
.chart-section{    
  margin: 0 0 30px;
  color: #003865;
}


.indece-section p {
  text-align: center;
  color: #003865;
  font-size: 13px;
  line-height: 15px;
  max-width: 400px;
  margin: auto;
}
p.endeudamiento {
  font-weight: bold;
  margin-bottom:10px;
}

.apexcharts-canvas{
  margin: 0 auto;
}

.apexcharts-legend-series{
  margin: 0 0 10px !important;
}

.tabs li{
  display: inline;
  list-style: none;
  margin-left: 20px;
}

.tabs li a.active{
  font-family: "BiNeoIndustrial-Bold";
}

.tabs li a{
  text-decoration: none;
  color: white;
  letter-spacing: 1px;
}

.btn-section{
  margin: 80px 0;
}

.btn-lg{
  background-color: #0055b8;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-family: "BiNeoIndustrial-Bold";
  font-size: 16px;
  letter-spacing: 1px;
}

.results-container-back {
  background-image: url(https://blog.corporacionbi.com/hubfs/2023/Asesor%20Virtual/Imagen%20de%20fondo%20general-1.png);
  background-size: cover;
  max-width: 100%;
  width: 100vw;
}
.results-container {
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-wrap: wrap;
  opacity: 1;
  padding: 50px 0;
  place-content: center;
  width: 100%;
}

.results-div {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.meta-container {
  align-items: center;
  background: #003865 0 0 no-repeat padding-box;
  border-radius: 55px 0;
  display: flex;
  flex-flow: column;
  height: 400px;
  justify-content: center;
  max-width: 340px;
  mix-blend-mode: multiply;
  opacity: .85;
  text-align: center;
  width: 340px;
}


img.icon-boton-meta {
  height: 50px;
  width: auto;
}

.meta-container h3 {
  color: #FFFFFF;
  font-size: 16px;
  font-family: BiNeoIndustrial-Bold;
  line-height: 22px;
  margin: 10px 0;
}
a.boton-volver-home {
  color: #FFFFFF;
  font-size: 12px;
  font-family: BiNeoIndustrial-Bold;
  line-height: 22px;
  border-bottom: solid;
  padding: 0 15px;
}
.formulario-tabs {
  background: #fff;
  border: 3px solid #fff;
  border-radius: 45px 0;
  margin-left: -60px;
  margin-top: 40px;
  max-width: 780px;
  min-height: 475px;
  opacity: .85;
  padding: 20px 25px 20px 30px;
  width: 780px;
}
.results-wrap.tabs-content {

  padding: 0 20px;
}




.results-wrap .tab-content .main-title-results {
  margin: auto;
  text-align: left;
  color: #003865;
  font-family: 'BiNeoIndustrial-Bold';
  font-size: 24px;
  line-height: 30px;
}
.only-text-grid h2 {
  font-size: 16px;
  line-height: 22px;
  font-family: 'BiNeoIndustrial-Bold';
}
.only-text-grid .text p {
  text-align: left;
  font-size: 13px;
  line-height: 15px;
  color: #003865;
}

.only-text-grid .text {
  margin-left: 20px;
}
.container-chat-tip {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container-chat-tip .bi-tip {
  width: 275px;
}

.container-chat-tip .chart-section {
  width: 375px;
}
.chart-section h2, .bi-tip h2 {
  color: #003865;
  font-size: 16px;
  line-height: 22px;
  font-family: BiNeoIndustrial-Bold;
  margin: auto;
}
.bi-tip .text p {
  color: #003865;
  font-size: 13px;
  line-height: 15px;
  text-align: left;
}
.indece-section h2 {
  color: #003865;
  font-family: BiNeoIndustrial-Bold;
  font-size: 16px;
  line-height: 22px;
  margin: auto;
  text-align: left;
}

.indece-section {
  padding: 0;
}
.thermometer-bar.relative {
  margin: 30px auto;
}

.status-message {
  margin: 30px auto;
}


@media(max-width:1150px){

  .results-div {
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .meta-container {
    height: auto;
    padding: 20px 0;
  }
  .formulario-tabs {

    margin: 30px 10px;
    width: 800px;
  }
  .container-chat-tip .chart-section {
    width: 100%;
    height: auto;
  }
  .container-chat-tip .bi-tip {
    width: 100%;
    margin-bottom: 30px;
  }
  @media(max-width:768px){

    .formulario-tabs {
      width: auto;
    }

  }


  @media(max-width:767px){
    .results-div {
      width: 100%;
    }
    .formulario-tabs {
      width: 95%;
      margin: 30px auto;
    }

    .meta-container {
      height: auto;
      padding: 20px;
      max-width: calc(100% - 20px);
    }
    .only-text-grid {

      flex-direction: column;
    }

    .only-text-grid .text {
      margin-left: 0;
    }
    .results-wrap .tab-content .main-title-results ,.chart-section h2, .bi-tip h2,.indece-section h2{

      text-align: center;
    }
    .container {
      padding: 0;
    }
    .results-wrap.tabs-content {
      padding: 0 ;
    }

  }

  @media(max-width:575px){
    .status-message .inner.w-full.flex.items-center {
      padding: 0 10px;
    }
    .status-message .content h3 {

      font-size: 26px !important;
    }
    .status-message .content p {

      font-size: 18px !important;
      margin: auto;
    }
    .formulario-tabs {
      margin: 30px auto;
      padding: 20px 10px;
    }


  }
  
  /*
  @media(min-height:800px){
 .results-container, .results-container-back {    height: 100vh;
} 
}
  */