html{font-family: "Verdana", sans-serif, serif;}
body {
    background-color: #ffffff;
    margin: 0;
}
header, container, .header, box, .values, .values h1, .values svg, .today-averages, .today-chart{
    width: 100%;
}
header{
    height: 4%;
    background: #1988a3;
}
.left-div, .right-div, .box, .info, box, .values svg, .header, .values h1, .today-averages, .col-2, .today-chart, .col-3, .col-7,.col-7 svg, .chart-info, .col-7 h1, .chart-info h5{ float: left}
.box, .info{margin-left: 1%; width: 32%;}
.box{ background: #f4f4f4;}
.info .date, .info .weekday, .info .time{width: 100%; margin: 0px; font-size: 18px; font-weight: bold; color:rgb(215, 235, 240); margin-top: 3%;}
.info{margin-top: 0px;}
.aling-left{text-align: left;}
.align-right{text-align: right;}
.right-div .align-right {margin-top: 5px;}
.align-right img{height: 30px;}
.align-center{text-align: center;}
.left-div{
    width: 46%;
}
.right-div{
    width: 54%;
}

box{height: 40px;border-right: dotted 2px #13748b; }
.header{text-align: center; background: #bfc6c7; text-align: center; border-bottom: solid 1pt #13748b;}
.values {text-align: center; }
.header h1{color: #13748b; font-weight: bold; font-size: 20px; display: block;}
.values h1{color: #13748b; font-weight: bold; font-size: 20px; display: block; margin-bottom: 5px; margin-top: 5px;}
.box{width: 100%; border: solid 1pt #13748b;}
.svg{width: 170px; margin: 0 auto;}
.values svg{height: 60px;}   
.box-main{height: 95%; border-right: dotted 2px #13748b;}
container{height: 95%}
.today-averages{margin-top: 10px;}
.today-averages .box{width: 60%;border: solid 1pt #13748b;margin-left: 20%;}
.today-chart #today_chart{width: 100%;height: 320px;}
.today-chart h3{margin-bottom: 5px; color: #13748b; margin-left: 5%;}
.col-2{width: 50%;}
.col-3{width: 27%; height: 95%}
.col-7{width: 73%; height: 95%}
.col-3 .box{width: 90%; margin-left: 5%; }
.average-calls{margin-top: 10px;}
.svg>h1{color:bisque; text-shadow: -2px 0 #1a8aa5, 0 2px #1a8aa5, 2px 0 #1a8aa5, 0 -2px #1a8aa5; font-size: 45px;}
/*Pasar al black style */
.col-7 svg{height: 28%; width: 80%}
.col-7 h1{margin-bottom: 5px; margin-top: 0px; color: #13748b; margin-left: 5%; font-size: 20px;}
.chart-info{width: 20%; display: block}
.chart-info h5 {color: #1a8aa5}
.chart-info img{width: 17px}