#observable_tab {
    background-color: white;
    height: 30%;
    width: 100%;
/*calc(100% - 320px);*/
    position: relative;
    /*left: 320px;*/
    /*bottom: 0;*/
    padding: 10px;
    /*white-space: nowrap;*/
    /*overflow-x: scroll;*/
}

#observable_tab_fixed {
    background-color: greenyellow;
    height: 30%;
    width: 320px;
    /*position: absolute;*/
    left: 0px;
    bottom: 0;
    padding: 10px;
    white-space: nowrap;
    display: none;
}

.observable-container {
    height: calc(50% - 20px);
    width: calc(100% - 20px);

    /*max-width: 1000px;*/

    border: solid;
    border-width: 1px;

    display: inline-block;
    vertical-align: top;
    background-color: white;
    margin: 10px;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.switch-group {
    /*border: none;*/
}

.switch-group .switch-container {
    position: absolute;
    top: 17px;
    left: 20px;
}

.observable-container .title {
    width: 100%;
    text-align: center;
    padding: 5px;
}

.observable-container:last-child {
    margin-right: 0px;
}

.barchart {
    /*width: 1000px;*/
    width: 100%;
    height: 100%;
}

.barchart.ensemble {
    width: 300px;
}

.hidden {
    display: none;
}

.advanced-legend-barchart {
    height: calc(100% - 60px);
}

.advanced-legend {
    width: 100%;
    height: 60px;
}

.advanced-legend canvas {
    width: 100%;
    height: 100%;
    cursor: pointer;
}