:root {
  --maxWidth: 800px;
  --myBlack:#343337;
  --myTheme:#00B0BA;
}

body {
    height:100vh;
    margin:0;
    
    background: #f3f3f3;
    color:var(--myBlack);
    font-family: "Century Gothic", sans-serif;
    font-size: small;
    
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

#mainContainer
{
    width:90%;
    max-width:var(--maxWidth);
    padding:5px 20px;
    margin:0 auto;
    
    overflow:auto;
}

#mainContainer .title
{
    font-size:x-large;
    text-transform: uppercase;
    margin-bottom:20px;
}

#mainContainer .subTitle
{
    margin-top:10px;
    font-size:small;
    font-weight:bold;
    text-transform: uppercase;
}

#mainContainer .highlight
{
    font-size:medium;
}

#mainContainer label
{
    font-size:small; 
    font-weight:bold;
}

#mainContainer input
{
    margin-bottom:10px;
}

#mainContainer input[type=text], #mainContainer input[type=password], #mainContainer input[type=number], #mainContainer select, #mainContainer input[type=date]
{
    outline:none;
    border:none;
    background:white;
    padding:10px;
    width:300px;
    margin:10px auto;
}

#buttons
{
    width:80%;
    max-width:var(--maxWidth);
    margin:0 auto;
    text-transform: uppercase;
    
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items:baseline;
    
    padding:50px 0px;
}

input[type=button]
{
    outline:none;
    border:none;
    background:firebrick;
    padding:5px 10px;
    color:white;
    cursor:pointer;
}

input[type=button].nonAlert
{
    outline:none;
    border:none;
    background:transparent;
    padding:5px 10px;
    font-weight:bold;
    color:var(--myBlack);
    cursor:pointer;
}

#buttons > *
{
    cursor:pointer;
    
    font-size:small; 
    font-weight:bold;
    
    z-index:99;
    
    margin:0 30px;
}

#headerContainer
{
    background:transparent;
    padding: 20px;
    
    z-index:99;
}

#headerContainer > div
{
    max-width:var(--maxWidth);
    margin:auto;
    
    font-size:small; 
    font-weight:bold;
    text-transform: uppercase;
    
    display: flex;
    flex-direction:row;
    justify-content: space-between;
}

#headerContainer > div > div:first-child
{
    color:var(--myTheme);
    text-transform: none;
}

#footerContainer
{
    background:var(--myBlack);
    color:white;
    
    padding:20px;
    
    z-index:99;
}

#footerContainer > div
{
    max-width:var(--maxWidth);
    margin:auto;
    
    font-size:small; 
    font-weight:bold;
    text-transform: uppercase;
    
    display: flex;
    flex-direction:row;
    justify-content: space-evenly;
}

[class^="button-"]
{
    cursor:pointer;
}

.button-logout, .button-install
{
    font-size:larger;
}

#username
{
    text-transform: uppercase;
}