:root{
    --chartFgage:#f75c5c;
    --chartMgage:#f7a45d;
    --chartSgage:#00a2ff;
}
.container{
    display: inline-flex;
    position: relative;
    width: 50%;
    flex-direction: column;
    height: auto;
    border: 1px solid gainsboro;
    box-sizing: border-box;
    padding: 30px;
    margin: 10px 0;
}
.container.row{
    display: inline-flex;
    flex-direction: row;
}
.gage{
    transition: all .55s;
}
.rowchart{
    width: 100%;
    background: linear-gradient(80deg,rgb(241, 241, 241),rgb(224, 224, 224));
    color: white;
    border: 1px solid gainsboro;
    border-radius: 20px;
    padding: 3px;
    margin: 5px 0;
    box-sizing: border-box;
    
}

.rowchart > .gage{
    width:80%;
    background: var(--chartSgage);
    box-shadow: 0 0 8px rgb(240, 240, 240) inset;
    padding: 3px 10px;
    box-sizing: border-box;
    border-radius: 20px;
}
.colchart{
    display: inline-flex;
    position: relative;
    align-items: flex-end;
    width: 30px;
    height:30vh;
    background: linear-gradient(80deg,rgb(241, 241, 241),rgb(224, 224, 224));
    color: white;
    border: 1px solid gainsboro;
    border-radius: 20px;
    padding: 3px;
    margin: 0px 5px;
    box-sizing: border-box;
}
.colchart > .gage{
    display: inline-flex;
    align-items: flex-end;
    /* flex-wrap: wrap;
    text-overflow: ellipsis; */
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    width:100%;
    height: 80%;
    background: rgb(0, 162, 255);
    box-shadow: 0 0 8px rgb(240, 240, 240) inset;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 20px;
    /* margin: auto; */
}
.gage+.gage-label{
    display: inline-block;
    position:absolute;
    width: 100%;
    border: none;
    /* font-size: .8rem; */
    color: black;
    bottom: -20px;
    outline: 0;
}