html,
body {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
    background-color: #e8e8e8;
}

#vis {
    width: 100%;
    padding: 2% 5%;
}

#toolbar{
    width:40px;
    position: absolute;
    padding: inherit;
    right: 0px;
    top: 0px;
}

#toolbar button{
    display: block;
    cursor: pointer;

    border: none;
    border-left: solid 2px;
    border-bottom: solid 2px;
    width: 100%;
    height: 30px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#toolbar button.active{
    -webkit-filter: invert(100);
    filter: invert(100);
    border: none;
}

#msg_dialog{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    height: 100px;
    z-index: 100;
    background-color: lightgrey;
    display: none;
    border: 1px solid black;
    font-size: 0.8em;
    padding: 5px;
}
.close {
    background-image: url(../pics/icons/close.png);
    position: absolute;
    top: 2px;
    right: 2px;
    cursor: pointer;
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
    background-size: 100%;
    z-index: 100;
}

.brush.siedlung {
    background-image: url(../pics/icons/traktor_gross.png);
}
/*.brush.urban {
    background-image: url(../pics/icons/brush_urban.png);
}*/
.brush.wald {
    background-image: url(../pics/icons/brush_fir.png);
}
.brush.brush01 {
    background-image: url(../pics/icons/rice_2.png);
}
/*.brush.grapes {
    background-image: url(../pics/icons/brush_grapes.png);
}*/
.brush.brush02 {
    background-image: url(../pics/icons/cloves_2.png);
}
.brush.eraser {
    background-image: url(../pics/icons/eraser.png);
}
.brush.brush05 {
    background-image: url(../pics/icons/kuh_gross.png);
}
.brush.wald {
    background-image: url(../pics/icons/Icon_wald.png);
}
.brush.energie {
    background-image: url(../pics/icons/Icon_energie.png);
}
.brush.brush03 {
    background-image: url(../pics/icons/haus_gross.png);
}
.brush.brush04 {
    background-image: url(../pics/icons/technology_2.png);
}
.brush.brush06 {
    background-image: url(../pics/icons/vanilla_2.png);
}
.brush.infrastruktur {
    background-image: url(../pics/icons/Icon_Infrastruktur.png);
}

#save_vis_btn {
    background-image: url(../pics/icons/save.png);
}
#load_vis_btn {
    background-image: url(../pics/icons/load.png);
}
#brush_size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#size_1 {
    background-image: url(../pics/icons/brush_small.png);
}
#size_2 {
    background-image: url(../pics/icons/brush_medium.png);
}
#size_3 {
    background-image: url(../pics/icons/brush_big.png);
}
#brush_size button {
    display: none;
    width: 40px;
}
#brush_size .active {
    display: block;
}
#brush_size:hover button {
    display: block;
}
#brush_size:hover button:nth-child(1),
#brush_size:hover button:nth-child(2) {
    border-top: solid 2px;
}
#brush_size:hover .active:nth-child(1),
#brush_size:hover .active:nth-child(2) {
    border-top: none;
}

#saveForm{
    display: none;
    position: fixed;
    top: 10%;
    left: 30%;
    background-color: white;
    padding: 40px;
}
#loadingDiv, .loadingDiv{
    display: none;
    text-align: center;
    margin-top: 10px;
}