*{
  box-sizing:border-box;
}
body{
  font-family: nunito;
}

#container1-1
{
  width: 100%;
  max-width: 1180px;
  font-family: nunito;
  grid-row: 3;
  display:flex;
  justify-content:space-between ;
  padding-bottom: 10px;
  height: auto;
}

#container1-2
{
  min-width: 15%;
  max-width: 100%;
  grid-gap: 0.1em;
  width: 1180px;
  max-width:100%;
  height: auto;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  justify-content: center;
  justify-items: stretch;
  grid-row-gap:50px;
}

.chart-container{
    border-radius: 0em;
    position: inherit;
    border-bottom: rgba(76, 87, 114, 0.5) solid 0.1px;
}

#chart-container1{
grid-row: 1;
grid-column: 1/3;
}
#chart-container2{
  grid-row: 2;
  grid-column: 1/3;
}
.chart{
  min-width: 100%;
  width: 100%;
  max-height: 100%;
  display: grid;
}

@container (width<500px){
  .kpi-card {
  box-shadow:  1px 1px rgba(102, 101, 101, 0.3);
  border-radius: 0.3em;
  border: 1px solid rgb(91, 91, 94,0.2);
  background-color: #ffffff;
  width: 100px;
  min-width: 100px;
  height: 50px;
}
}
  .kpi-card {
  box-shadow:  1px 1px rgba(102, 101, 101, 0.3);
  border-radius: 0.3em;
  border: 1px solid rgb(91, 91, 94,0.2);
  background-color: #ffffff;
  width: 250px;
  min-width: 100px;
  height: 100px;
}
 .kpi-card .highcharts-title{
   font-size:2em!important;
   font-weight:bold!important;
   fill:var(--highcharts-color-0)!important;
 }
 .kpi-card .highcharts-credits{
   font-size:0.8em!important;
   font-weight:lighter!important;
 }
 .kpi-card .highcharts-subtitle{
   font-size:1.4em!important;
 }

.kpi-card .highcharts-plot-background{
  fill: var(--highcharts-neutral-color-80);

  }
.kpi-card .highcharts-background{
  fill: var(--highcharts-neutral-color-100);
  }