/** {
    box-sizing: border-box;
}*/

body, html {
    /*background-color: #804215;*/
    /*background-color: #648864;*/
    background-color: #333333;
    color: white;
    font-size: 18pt;
}

#langbox {
  margin-bottom: 0.5em;
  text-align: right;
  min-width: 1215px;
}

    #langbox > a {
        color: white;
    }

#controls * {
    font-style: normal;
    font-family: sans-serif;
}

#obal {
    display: flex;
    flex-wrap: wrap;
}

#controls {
    /*flex: 1 1 16rem;*/
    flex: 17rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 17rem;
}

    #controls > div {
        float: left;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.5em;
    }

a.button {
    display: table-cell;
    color: white;
    width: 10em;
    border: 1px solid;
    border-radius: 10px;
    height: 2em;
    text-align: center;
    vertical-align: middle;
    font-size: 17pt;
    text-decoration: none;
    margin-top: 0.5em;
}

#diagram {
    background-color: #EEEEEE;
    width: 1215px;
    height: 825px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#controls1 {
    width: 15rem;
    height: 15.5rem;
    float: left;
}

#controls2 {
    width: 15rem;
    height: 15rem;
    float: left;
}

#controls3 {
    width: 15rem;
    height: 13.7rem;
    float: left;
}

select {
    font-size: 16pt;
}

div.skupina {
    margin-top: 0.5em;
}

div.radio {
    padding-left: 1em;
}

#pata {
  text-align: center;
  /*border-top: 1px solid;*/
  font-size: 80%;
  width: 1215px;
}

#pata > a {
  color: white;
}

@media only print {
    #langbox {
        display: none;
    }
    h1 {
        display: none;
    }
    #controls {
        display: none;
    }
    /*#pata {
      display: none;
    }*/
    #obal {
        width: 1220px;
    }
    #diagram {
        background-color: #FFFFFF;
        margin: 0;
    }
}