/* Gráfico - Horizontal */

html, body, .wrapper {width: 100%; height: 100%;}

.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10%;
}

.wrapper h1 {
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 80px;
  text-align: center;
}

.grafico {
/*  align-items: center;*/
  border-left: 4px solid #DDDEE3;
  display: flex;
/*  flex-direction: column;*/
  height: 46%;
/*  justify-content: space-between;*/
  max-height: 420px;
	position: relative;
  width: 56%;
}

.barras {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  height: 19%;
  min-height: 40px;
  position: relative;
  transition: all 1s;
	position: absolute;
	transition: all ease-in-out 1.2s;
  width: 100%;
}

.barras.posicao1 {top: 0%;}
.barras.posicao2 {top: 26.89%;}
.barras.posicao3 {top: 53.78%;}
.barras.posicao4 {top: 80.99%;}

.bar-label-l {
  align-items: center;
  background: #DDDEE3;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 16px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  position: absolute;
  left: -57px;
  width: 40px;
}

.bar-label-r {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  position: absolute;
  left: 100%;
  transition: all 1s;
}

.barra1,
.barra2,
.barra3,
.barra4 {
  color: #FFF;
  height: 100%;
  transition: all 1s;
}

#barras h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 10px 0 20px;
  padding: 0;
}

#barras p {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}


/* --- CORES --- */

.barras1 .bar-label-l {
  background-color: #f24e1f;
}

.barras2 .bar-label-l {
  background-color: #a259fe;
}

.barras3 .bar-label-l {
  background-color: #1bbcfe;
}

.barras4 .bar-label-l {
  background-color: #0ece81;
}

.barra1 {
  background-color: #f24e1f;
  color: #f24e1f;
}

.barra2 {
  background-color: #a259fe;
  color: #a259fe;
}

.barra3 {
  background-color: #1bbcfe;
  color: #1bbcfe;
}

.barra4 {
  background-color: #0ece81;
  color: #0ece81;
}

.cor1 {color: #f24e1f;}
.cor2 {color: #a259fe;}
.cor3 {color: #1bbcfe;}
.cor4 {color: #0ece81;}


/* --- IMPRESSÃO --- */

@media print {
  
  .fullscreen {display:none;}
  
  @page {margin: auto 0.8cm;}

    .wrapper {align-items: flex-start;}
    .wrapper h1 {font-size: 16pt;}
    .grafico {
      transform: scale(0.7) translateX(30%);
      width: 56%;
      }

    .barra1 {
      background-color: #f24e1f!important;
      color: #f24e1f!important;
    }

    .barra2 {
      background-color: #a259fe!important;
      color: #a259fe!important;
    }

    .barra3 {
      background-color: #1bbcfe!important;
      color: #1bbcfe!important;
    }

    .barra4 {
      background-color: #0ece81!important;
      color: #0ece81!important;
    }

    .bar-label-l {color: #ffffff!important;}

    .barras1 .bar-label-l {
      background-color: #f24e1f!important;
    }

    .barras2 .bar-label-l {
      background-color: #a259fe!important;
    }

    .barras3 .bar-label-l {
      background-color: #1bbcfe!important;
    }

    .barras4 .bar-label-l {
      background-color: #0ece81!important;
    }
  
}

.fullscreen {
  position: absolute;
  right: 10px;
  top: 10px;
  opacity: 0.5;
  cursor: pointer;
}

.fullscreen:hover{
  opacity: 1;
}