@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: #f59087;
}

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: #520a76;
    color: #f59087;
    box-shadow: 0 1.6vw 3.2vw -0.8vw #555;
}
.alternate_header {
    background: #fff;
    color: #520a76;
}

.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: 1.0rem;
    }
    .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: #520A76;
}
.infobox table {
    text-align: center;
    width: 100%;
}
.infobox .btn-outline-secondary {
    font-size: 0.83vw;
}
.btn-outline-secondary {
    color: #520a76;
    border-color: #520a76;
}
.btn-outline-secondary:hover {
    color: #f59087;
    background-color: #520a76;
}
.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: #520a76;
    color: #f59087;
}