body
{
    margin:             0;
    overflow-x:         hidden;

    margin-top:         30px;
}

.nobr
{
    white-space:        nowrap;
}

#tableau
{
    display:            -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:   center;
    -webkit-box-lines:  multiple;

    display:            -webkit-flex;
    -webkit-flex-wrap:  wrap;
    -webkit-justify-content: space-around;

    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-around;
}

@media only screen and (max-height: 480px) and (orientation: portrait) {
    #tableau {
        -webkit-box-orient: vertical;
    }
}

ul.tabcontainer
{
    display:            -webkit-box;
    -webkit-box-orient: horizontal;

    display:            flex;
    margin:             0;
    padding:            0;
    list-style:         none;
}

ul.tabcontainer li
{
    -webkit-box-flex:   1;
    flex:               1 1 0;

    text-align:         center;
    padding:            1em;
    cursor:             pointer;
}

ul.tabcontainer li:not(:first-child)
{
    border-left:        1px solid black;
}

ul.tabcontainer .inactive
{
    background-color:   #CCCCCC;
}

.tabbody
{
    padding:            1em;
    margin-bottom:      4em;
}

.tabbody.inactive
{
    height:             0;
    margin-top:         0;
    margin-bottom:      0;
    padding-top:        0;
    padding-bottom:     0;
    overflow:           hidden;
}

.selectionlist
{
    list-style:         none;
    padding:            0;
}

.panecontainer
{
    position:           fixed;
    top:                0;
    left:               0;
    max-width:          100vw;
    height:             0;
    z-index:            2;
}

.pane
{
    position:           relative;
    left:               0;
    height:             100vh;
    overflow-x:         hidden;
    overflow-y:         auto;
    background:         white;
    box-shadow:         1em 0 1em rgba(0, 0, 0, 0.5);
    -webkit-transition: left 0.2s ease;
    transition:         left 0.2s ease;
    z-index:            1;
}

.pane.inactive
{
    left:               -110%; /* fallback */
    left:               calc(-100% - 2em);
}

#cancelarea
{
    position:           absolute;
    left:               0;
    top:                0;
    width:              100vw;
    height:             100vh;
    background-color:   rgba(0, 0, 0, 0.5);
    z-index:            0;
}

#settingsbtn
{
    margin-left:        1em;
    margin-top:         1em;
    width:              5ch;
    height:             5ch;
    cursor:             pointer;
    z-index:            1;
}