@charset "UTF-8";

*, *:after, *:before
{
    margin: 0;
    padding: 0;
}

html
{
    font-family: sans-serif;
}
body
{
    height: 100vh;
    width: 100vw;
    background-color: #dddddd;
    display: grid;
    grid-template-rows: 30px auto 30px;
}

header
{
    z-index: 11;
}
.container
{
    z-index: 9;
    height: 100%;
}
footer
{
    z-index: 10;
    text-align: right;
    line-height: 30px;
    padding: 0 10px;
}

.btn
{
    background-color: #00A5E3;
    height: 30px;
    line-height: 30px;
    padding: 5px 15px;
    border-radius: 15px;
}

.centered
{
    margin: 0 auto;
}

.content-box
{
    width: 80%;
    background-color: #eaeaea;
    box-shadow: 5px 5px 5px #868686;
    padding: 10px;
    margin-top: 30px;
}

table
{
    width: 100%;
}

div.message
{
    padding: 10px;
    background-color: #8284ff;
}
div.message.error
{
    background-color: #ff9d9d;
}
div.message.success
{
    background-color: #7cff72;
}
div.message.hidden
{
    display: none;
}