*{
    box-sizing:border-box;
}

html{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

body{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;

    font-family:sans-serif;
}

body>nav{
    display:block;
    position:relative;
    width:9rem;
    height:100%;

    background-color:#282828;
}
body>nav>button{
    display:block;
    position:relative;
    width:100%;
    height:2.5rem;
    padding:0 1rem 0 1rem;

    text-align:left;
    font-size:1.25rem;
    cursor:pointer;

    background-color:#282828;
    color:#c0c0c0;
    border:0;
    outline:0;
} body>nav>button:hover{
    background-color:#383838;
    color:#e0e0e0;
}

body>nav>header{
    display:block;
    position:relative;
    width:100%;
    height:3rem;

    line-height:3rem;
    text-align:center;
    font-size:1.8rem;
    font-weight:bold;
    font-variant:small-caps;

    color:#d0d0d0;
    border-bottom:1px solid #404040;
}

main{
    display:flex;
    position:relative;
    flex-flow:column nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:100%;

    flex-grow:1;

    background-color:#202020;
}

main>nav{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    width:100%;
    height:3rem;

    background-color:#282828;
    border-bottom:1px solid #404040;
}

main>nav>section:first-child{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-start;
    height:100%;
}

main>nav>section:last-child{
    display:flex;
    position:relative;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-end;
    height:100%;
    flex-grow:1;
}

main>nav>section>button{
    display:block;
    position:relative;
    width:auto;
    height:100%;
    padding:0 1rem 0 1rem;
    text-align:left;
    font-size:1.25rem;
    cursor:pointer;

    background-color:#282828;
    color:#c0c0c0;
    border:0;
    outline:0;
}
main>nav>section>button:hover{
    background-color:#383838;
    color:#e0e0e0;
}

main>nav>section>div{
    display:block;
    position:relative;
    width:auto;
    height:100%;
    padding:0 1rem 0 1rem;

    line-height:3rem;
    text-align:left;
    font-size:1.25rem;

    color:#e0e0e0;
}

main.list table{
    width:100%;
    border-collapse:collapse;
}
main.list table tr{
    height:2.5rem;
}
main.list table th{
    padding:0 1rem 0 1rem;

    text-align:center;
    font-size:1.2rem;
    font-weight:bold;

    background-color:#383838;
    color:#f0f0f0;
    border-bottom:1px solid #404040;
}
main.list table td{
    height:100%;
    padding:0 1rem 0 1rem;

    text-align:center;

    background-color:#303030;
    color:#f0f0f0;
}
main.list table td:last-child{
    display:flex;
    flex-flow:row nowrap;
    align-items:flex-start;
    justify-content:flex-end;
    flex-grow:1;
}

main.list table td:last-child>button{
    display:block;
    position:relative;
    width:auto;
    height:100%;
    padding:0 1rem 0 1rem;

    text-align:left;
    font-size:1.25rem;
    cursor:pointer;

    background-color:#303030;
    color:#e0e0e0;
    border:0;
    outline:0;
}
main.list table td:last-child>button:hover{
    background-color:#343434;
}

main.game>canvas{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    padding:0;
    margin:0;

    background-color:#202020;
}

main.game>div.sidemenu{
    display:flex;
    position:absolute;
    bottom:0px;
    right:1px;
    z-index:10;

    flex-flow:column nowrap;

    width:auto;
    height:auto;

    border:0;
    border-top-left-radius:1rem;

    overflow:hidden;
}

main.game>div.sidemenu>button{
    display:block;
    position:relative;
    padding:1rem;
    margin:0 0 1px 0;
    background-color:#202020;
    color:#F0F0F0;
    border:0;
    outline:0;

    font-family:sans-serif;
    font-size:1rem;

    cursor:pointer;
}
main.game>div.sidemenu>button:hover{
    background-color:#404040;
}
main.game>div.sidemenu>button.warn:hover{
    background-color:#602020;
}

main.form>section{
    display:flex;
    position:relative;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
    height:auto;
    flex-grow:1;
}

main.form>section>div{
    display:block;
    position:relative;
    width:100%;
    max-width:30rem;
    padding:0.5rem;

    background-color:#303030;
}

main.form>section>div>table{
    width:100%;
}

main.form>section>div>table label{
    display:block;
    position:relative;
    width:auto;
    height:auto;
    padding:0 0.5rem 0 0.5rem;

    text-align:right;
    font-size:1.2rem;

    color:#e0e0e0;
}

main.form>section>div>table input{
    display:block;
    position:relative;
    width:100%;
    height:2.5rem;
    padding:0 1rem 0 1rem;

    text-align:left;
    font-size:1.15rem;

    background-color:#202020;
    color:#e0e0e0;
    border:1px solid #303030;
    outline:0;
}
main.form>section>div>table input.error{
    border:1px solid #603030;
}

main.form>section>div>button{
    display:block;
    position:relative;
    width:100%;
    height:2.5rem;
    padding:0.5rem 1rem 0.5rem 1rem;

    font-size:1.2rem;
    cursor:pointer;

    background-color:#303030;
    color:#e0e0e0;
    border:0;
    outline:0;
}
main.form>section>div>button.error{
    border:1px solid #603030;
}
main.form>section>div>button:hover{
    background-color:#383838;
}
main.form>section>div>button:disabled{
    background-color:#2c2c2c;
    color:#606060;
    cursor:pointer;
}

span.text-system{color:#909090;}