/* @import url(https://fonts.googleapis.com/css?family=Quicksand|Parisienne); */

@import url(https://fonts.googleapis.com/css2?family=Glory:wght@200..800&display=swap);
:root {
    --bus: 24px;
}

body {
    background-color: #444444;
    font-size: var(--bus);
    font-family: 'Glory', sans-serif;
    color: #dddddd;
    margin: 10px !important;
}

.circleProgress {
    width: calc(var(--bus) * 4.5);
    height: calc(var(--bus) * 4.5);
    display: inline-block;
}

.circleProgress:link {
    text-decoration: none;
}

.chart-footer {
    font-size: 70%;
    color: #999;
}


/* Tooltip */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-bottom {
    top: 135%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    /* width: 200px; */
    background-color: #555;
    color: #ddd;
    text-align: center;
    padding: 5px 0px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 50%;
    white-space: nowrap;
}

.tooltiptext td {
    padding-left: 5px;
    padding-right: 5px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* general */

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

#chart_div {
    height: 500px;
    width: 100%;
    position: relative;
}

#loading-dotrace {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* chart */

#chart_div {
    width: 100%;
    height: calc(var(--bus) * 20);
    /* border: solid #4c4c4c 10px; */
}

#chart_div2 {
    width: 100%;
    height: calc(var(--bus) * 20);
    /* border: solid #4c4c4c 10px; */
}

.chartTitle {
    font-size: 80%;
    color: #729cdb;
}


/* Blue */

.info {
    border-color: #4279a5;
    color: #4279a5;
}

.info:hover {
    background: #4279a5;
    color: white;
}

.chartNarrow {
    width: 100%;
    height: calc(var(--bus) * 10);
    /* border: solid #4c4c4c 10px; */
}

#chart_div3 {
    width: calc(var(--bus) * 5);
    height: calc(var(--bus) * 2);
    /* border: solid #4c4c4c 10px; */
}

.fa-stack {
    font-size: 0.5em;
}

.fa-scale-down {
    /* font-size: 70%;
    vertical-align: 15%; */
}

i {
    vertical-align: middle;
    /* color: #666; */
    /* font-size: 50%; */
}

.space {
    margin-right: calc(var(--bus) * 0.2);
}

.fa-sync-alt {
    color: #444;
}

.bold1 {
    color: #729cdb;
    font-weight: bold;
}