@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500);
html {
  height: 100%;
}

body {
  height: 100%;
  font-family: "Fira Sans";
  text-align: center;
  background: #ded9c9;
}

a {
  color: #aac3dc;
}

a:hover {
  color: #fff203;
  text-decoration: none;
}

.h-20 {
  height: 20% !important;
}

.h-30 {
  height: 30% !important;
}

.h-35 {
  height: 35% !important;
}

.h-40 {
  height: 40% !important;
}

.h-45 {
  height: 45% !important;
}

.h-55 {
  height: 55% !important;
}

.h-60 {
  height: 60% !important;
}

.h-65 {
  height: 65% !important;
}

.h-70 {
  height: 70% !important;
}

.h-80 {
  height: 80% !important;
}

.h-85 {
  height: 85% !important;
}

.h-90 {
  height: 90% !important;
}

.h-95 {
  height: 95% !important;
}

.header {
  font-size: 1.35vw;
  background: #004996;
  color: #fff;
  box-shadow: 0 1.6vw 3.2vw -0.8vw #555;
}
.alternate_header {
  background: #fff;
  color: #004996;
}

.d-xl-none.header {
  font-size: 1rem;
  box-shadow: none;
  padding-bottom: 15px;
}

.logo {
  margin-top: 1.3vw;
  margin-bottom: 1.3vw;
  max-height: 2.9vw;
}

.language-container {
  z-index: 1000;
  position: absolute;
  top: 0px;
  right: 5px;
}
.language-container .language-choice {
  display: none;
}
.language-container .flag-icon {
  display: none;
}
.language-container:hover .language-choice {
  display: inline-block;
}
.language-container:hover .flag-icon {
  display: inline-block;
}

.d-xl-none.header .logo {
  margin-top: 15px;
  margin-bottom: 5px;
  max-height: 15vh;
}

.d-xl-none > .col-12 {
  padding-left: 0;
  padding-right: 0;
}

.d-xl-block .box {
  margin-top: 0.8vw;
  margin-bottom: 0.8vw;
  padding-left: 0.8vw;
  padding-right: 0.8vw;
  height: 42.2vh;
}

.box > div {
  box-shadow: 0 30px 60px -17px #555;
}

.d-xl-none .box {
  margin-bottom: 1.6vw;
}

.d-xl-none .box > div {
  box-shadow: none;
}

.box-header {
  background: #fff;
  color: #777;
  font-size: 2vw;
  text-transform: uppercase;
}

.d-xl-none .box-header > div {
  font-size: 1.3rem;
  padding-top: 0.75rem;
  padding-bottom: 0.55rem;
}

.box-middle {
  background: #f7f7f7;
  color: #777;
  font-size: 7vw;
  font-weight: 500;
}

.d-xl-none .box-middle {
  font-size: 2.5rem;
}

.box-bottom {
  background: #fff;
  color: #777;
}

.d-xl-none .box-bottom {
  font-size: 1rem;
}

.box-bottom > div:nth-child(1) {
  font-size: 1.3vw;
  margin-top: 1.5vh;
}

.box-bottom > div:nth-child(2) {
  margin-top: 0.8vh;
  font-size: 1.7vw;
}

.d-xl-none .box-bottom > div:nth-child(1) {
  font-size: 0.8rem;
  margin-top: 5px;
}

.d-xl-none .box-bottom > div:nth-child(2) {
  font-size: 0.8rem;
  margin-top: 5px;
  margin-bottom: 5px;
}

i {
  padding: 0 0.1rem;
}

.wi {
  font-size: 90%;
}

.weather-data {
  display: inline-block;
  width: 32%;
}

@media (max-width: 1200px) {
  .weather-data {
    font-size: 1rem;
  }
  .chart-container {
    height: 60vh;
  }
  .chart-container > .box-header {
    height: 10%;
  }
  .chart-container > .box-middle {
    height: 90%;
  }
}

.benefit {
  display: inline-block;
  width: 32%;
}

.google-visualization-tooltip {
  font-size: 18pt;
  width: 200px;
  height: 100px;
  border: 6px solid rgba(245, 144, 135, 0.3);
  background-clip: padding-box;
  animation: fadeIn-chart-tooltip 200ms linear;
}

.chart {
  height: 100%;
}

.chart g > text {
  font-family: "Fira Sans";
  font-size: 0.9vw;
  fill: #777;
}

@media (max-width: 1200px) {
  .chart g > text {
    font-family: "Fira Sans";
    font-size: 9pt;
    fill: #777;
  }
}

.chart path {
  stroke: #777;
  animation: fadeIn-chart-line 300ms linear;
}

.vertical {
  position: fixed;
  font-size: 0.83vw;
  bottom: 42vh;
  right: 0;
  width: 32.5vh;
  height: 1.9vw;
  padding-top: 0.4vw;
  padding-bottom: 0.3vw;
  padding-right: 0.7vh;
  padding-left: 0.7vh;
  transform: rotate(270deg);
  transform-origin: 100% 100%;
}
.vertical.open {
  height: 15.626vw;
}
.vertical i {
  transform: rotate(90deg);
  float: right;
  padding-top: 0.4vw;
}
.infobox {
  display: none;
  background: #f7f7f7;
  text-align: left;
  position: fixed;
  bottom: 9.6774vh;
  right: 0;
  width: 13.75vw;
  height: 32.223vh;
  padding-top: 1vh;
  padding-left: 0;
  overflow: auto;
  box-shadow: 0 30px 60px -17px #555;
}
.infobox a:hover {
  color: #004996;
}
.infobox table {
  text-align: center;
  width: 100%;
}
.infobox .btn-outline-secondary {
  font-size: 0.83vw;
}
.btn-outline-secondary {
  color: #004996;
  border-color: #004996;
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #aac3dc;
}
.infobox #qrcode > img {
  width: 7vw;
  margin-top: 1vh;
}
img.playstore-logo {
  width: 9vw;
}
img.appstore-logo {
  width: 8vw;
}
@media (max-width: 1200px) {
  img.playstore-logo {
    width: 40vw;
  }
  img.appstore-logo {
    width: 35vw;
  }
}

.fixed-bottom {
  padding-top: 5px;
  padding-bottom: 5px;
}

.vision-info {
  background: #004996;
  color: #fff;
}