html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: 'Liberation Sans';
    /* font-size: 48px;  */
    font-size: 1.3vw; /* around 48px on 3440x2160 fullscreen*/
}
h1{
    margin-top: 20%;
    font-size: 5.5rem;
    font-weight: bold;
}

#startContainer{
    background-image: url("/pics/01_start.png");
}
#introductionContainer{
    background-image: url("/pics/02_introduction.png");
    display: none;
}
#explanationSketchtool{
    background-image: url("/pics/03_expl_sketchtool.png");
}
#explNaturwald{
    background-image: url("/pics/03_expl_sketchtool_naturwald.png");
    display: none;
}
#explNutzwald{
    background-image: url("/pics/03_expl_sketchtool_nutzwald.png");
    display: none;
}
#explErholungswald{
    background-image: url("/pics/03_expl_sketchtool_erholungswald.png");
    display: none;
}
#helpSketchtool{
    background-image: url("/pics/04_help_sketchtool.png");
    display: none;
}
#navigationSketchtool{
    background-image: url("/pics/05_nav_sketchtool.png");
    display: none;
}
#explanationPotree{
    background-image: url("/pics/06_expl_potree_red.png");
    display: none;
}
#helpPotree{
    background-image: url("/pics/07_help_potree.png");
    display: none;
}
#navigationPotree{
    background-image: url("/pics/08_nav_potree.png");
    display: none;
}
#savingOverlay{
    background-image: url("/pics/09_saving_overlay.png");
    display: none;
}
#savingIcon{
    top: 40%;
    position: relative;
}

.fullscreenOverlay{
    width: 100%;
    height: 100%;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1000;
    top: 0px;
    background-color: #FFF7;
}
.fullscreenOverlayTransparent{
    width: 100%;
    height: 100%;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
}

iframe{
    width: 100%;
    height: 100%;
    display:  none;
    border:  0px;
}
#sketchtool, #potree{
    position: absolute;
    width: 80%;
    height: 100%;
    display:  none;
    border:  0px;
}
/* potree must not be hidden in order to take the screenshot */
#sketchtool {
    z-index: 200;
}
#potree {
    z-index: 100;
}
/*
#appTopbar{
    width: 77%;
    height: 10%;
    position:  absolute;
    z-index: 500;
    padding: 10px;
    left: 23%;
}
#appTopbar button{
    cursor:  pointer;
    padding:  10px 40px 10px 40px;
} */

#appBottomBar{
    width: 80%;
    left: 20%;
    height: 10vw;
    position:  absolute;
    z-index: 500;
    bottom: 0px;
    background-color: #FFCC99;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* #appBottomBar > div {
    height: 100%;
} */

#toolbarContainer {
    height: 100%;
    flex-basis: 40%; /* So sketchtool and potree toolbar take same space */
}

.toolbar {
    height: 100%;
}

.toolbar button{
    cursor: pointer;
    border: none;
    height: 80%;
    width: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}

.toolbar .tool {
    display: inline-block;
    /* width: 25%; */
    /* width: 130px; */
    /* width: 1.5vw; */
    height:100%;
    width: 8vw;
    padding: 1vh;
    text-align: center;
    vertical-align: top;
}
.toolbar .brushtitle {
    text-align: center;
    /* width: 100%; */
    /* font-size: 23px; */
    font-size: 0.8vw;
    width: 100%;
    line-height: 1;
}

#confirmationDialogContainer{
    position:  absolute;
    top: 0px;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #ffffff75;
    display:  none;
}
#confirmationDialogContainer button{
    cursor:  pointer;
    margin: 10px;
    padding:  30px 70px 30px 70px;
}

#confirmationDialog{
    position: relative;
    top: 30%;
}
#langPanel{
    position: absolute;
    top: 10px;
    right: 10px;
}
#langPanel label{
    cursor: pointer;
}
#langPanel input[type=radio]:checked + label{
    font-weight: bold;
}
#langPanel input[type=radio], #topbar input[type=radio]{
    position: fixed;
    opacity: 0;
    pointer-events: none;
}
#warningContainer{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}
#warningMessage{
    float: right;
    margin-right: 10px;
    font-size: 1.5em;
    font-weight: bold;
    color: darkred;
}
#noForestWarningContainer{
    position: absolute;
    top: 20%;
    right: 30%;
    z-index: 1000;
    background-color: #F15A24;
    display: none;
}
#noForestWarningMessage{
    float: right;
    margin-right: 10px;
    font-size: 1.5em;
    font-weight: bold;
    color: #FFCC99;
    padding: 1vh;
}
#appContainer{
    display: none;
    height: 100%;
    width: 100%;
}
#appSidebar{
    position: relative;
    width: 20%;
    height: 100%;
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
.intro-btn, .intro-btn-potree  {
    position: absolute;
    bottom: 20%;
    right: 10%;
}
.displaced {
    right: 30%;
}
#naturwald-btn{
    position: absolute;
    top: 40%;
    left: 37%;
}
#nutzwald-btn{
    position: absolute;
    top: 40%;
    left: 55%;
}
#erholungswald-btn{
    position: absolute;
    top: 40%;
    left: 75%;
}

#appBottomBar div#tool_for_3d {
    display: none;
}
#changeVisualMode {
    background-image: url(../pics/icons/11_change_view.svg);
}
button#reset {
    background-image: url(../pics/icons/07_restart_OFF.svg);
}
button#finish {
    background-image: url(../pics/icons/05_finish_OFF.svg);
}
#finishTool{
    display: none; /* Inititally hidden */
}
#chartsContainer{
    height: 65%;
}
#explanationIndicator{
    height: 35%;
    font-size: 1.2vh;
    padding: 5%
}

#indicatorName{
    font-weight: bold;
    margin-bottom: 1vh;
}

/* .barchartContainer{
    margin-top:15%;
    height: 40%;
} */


/* from waldsim_charts.css */

.chartsContainer{
    z-index: 1000;
    pointer-events: none;
    width: 100%;
    text-align: center;
    bottom: 10px;
    height: 100%
}
.barChartContainer {
    height: 50%;
}
#barChartPotreeContainer {
    display: none;
}
.barchart{
    height: 100%;
}
.pieChartContainer{
    height: 50%;
    width: 100%;
}

.barChartContainer{
    bottom: 10px;
    width: 95%;
    min-height: 256px;
    /* height: 100%; */

    padding-right: 10px;

    margin-top:15%;
    height: 40%;
}
#barChartSketchtoolContainer, #barChartPotreeContainer{
    height: 50%;
}