: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:20px 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;
}

#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;
}

input[type=text], select, input[type=date], input[type=number]
{
    font-size:large;
    width: 80vw;
}

@media only screen and (min-width:700px)
{
    input[type=text], select, input[type=date], input[type=number]
    {
        font-size:small;
        width: 300px;
    }
}






.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 0px;
  right:0px;
  z-index: 1;
  cursor:pointer;
}

.dropdown:hover .dropdown-content,.dropdown:active .dropdown-content {
  display: block;
}

.dropdown-content > div {
    font-size:regular;
    padding:10px;
}