@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url("https://www.njoyart.co.uk/wp-content/uploads/et-fonts/SemplicitaPro.otf");

body                    {
    text-align:         center;
    font-family:        'Semplicita Pro', Helvetica, Arial, Lucida, sans-serif;
}
#footer                 {
    background:         dimgrey;
    color:              #929F98;
    text-align:         center;
    font-size:          14pt;
}
#headlogo               {
    width:              60%;
    max-width:          300px;
    margin:             auto;
    cursor:             pointer;
}
h1,h2                   {
    color:              #9E7900;
}
h3,p                    {
    color:              #666;
}
.button                 {
    background:         #9E7900;
    color:              white;
    border:             none;
    font-size:          14pt;
    padding:            5px 10px;
    font-weight:        normal;
    cursor:             pointer;
}
.button:hover           {
    background:         #929F98;
}
.button:disabled        {
    background:         #929F98;
}
.navbutton              {
    height:             40px;
    width:              80%;
    max-width:          400px;
    margin:             12px auto;
    display:            flex;
    justify-content:    center;
    align-items:        center;
    background:         #9E7900;
    font-size:          20px;
    color:              white;
    cursor:             pointer;
    user-select:        none;
}
.navbutton:hover        {
    background:         #929F98;
}
.navbutton:disabled     {
    background:         #C2C3C4;
}
.menu                   {
    width:              100%;
    max-width:          650px;
    display:            flex;
    justify-content:    center;
    margin:             12px auto 0;
}
.menu>div               {
    width:              100%;
    border-left:        solid thin lightgrey;
    border-right:       solid thin lightgrey;
    text-align:         center;
    color:              dimgrey;
    cursor:             pointer;
    user-select:        none;
}
.formblock              {
    border:             solid medium #9E7900;
    border-radius:      6px;
    background:         lightgrey;
    padding:            10px 2px;
}
.formblock>input        {
    width:              85%;
    font-size:          16pt;
    margin:             5px auto;
}
.maintable              {
    width:              100%;
    max-width:          650px;
    margin:             0 auto;
    border-collapse:    collapse;
}
.maintable tr           {
    cursor:             pointer;
}
.maintable tr:nth-child(odd)    {
    background:         #E4E4E4;
}
.maintable tr:nth-child(even)   {
    background:         #F4F4F4;
}
.formtable              {
    width:              90%;
    max-width:          650px;
    margin:             0 auto;
}
.label                  {
    text-align:         right;
    vertical-align:     top;
    color:              #9E7900;
}
.forminput              {
    width:              100%;
}
input[type=checkbox]    {
    position:           relative;
    top:                -4px;
    width:              20px;
    height:             20px;
    accent-color:       #9E7900 !important;
}
input[type=checkbox]:checked    {
    accent-color:       #9E7900 !important;
}
.overlay            {
    background:         lightgrey;
    border:             solid medium #9E7900;
    padding:            12px 8px;
    display:            none;
    position:           fixed;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-height:         90vh;
}