@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Merriweather&family=Alkatra&family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root               {
    --border:               solid medium #24408F;
    --border-radius:        15px;
    --main-text:            #24408F;
    --box-background:       #D9F3FD;
    --box-light-background: #E1F5FD;
    --banner:               #82D0F6;
}

#headbar            {
    background:         var(--banner);
    position:           relative;
    text-align:         left;
}
#footer             {
    background:         var(--banner);
    color:              #000000;
    text-align:         center;
    padding:            6px 0;
}
#footLinks          {
    background:         var(--box-light-background);
    margin:             0 0 80px;
    padding:            10px 0;
}
.footBlock          {
    display:        inline-block;
    text-align:     left;
    vertical-align: middle;
    margin:         auto 8px;
}
.footAward          {
    width:          33%;
    max-width:      100px;
    margin:         12px 8px;
}
#headcontact        {
    position:           absolute;
    top:                50%;
    right:              20px;
    transform:          translateY(-50%);
    font-size:          18pt;
    color:              #24408F;
}
.headlogo           {
    height:             5vw;
    min-height:         50px;
    max-height:         150px;
}
.headlogoeml           {
    height:             40px;
    position:           relative;
    top:                4px;
}
#headmobile         {
    display:            none;
}
#mainmenu           {
    text-align:     center;
    background:     var(--main-text);
    color:          white;
    font-size:      min(13pt, 1.9vw);
}
.menuitem           {
    font-family:    Merriweather, serif;
    display:        inline-block;
    min-width:      70px;
    margin:         0 0px;
    padding:        1px 4px;
}
.menuitem:hover     {
    background:     var(--box-background);
    color:      var(--main-text);
}
#mobilemenu     {
    display:        none;
    position:       absolute;
    background:     var(--box-light-background);
    text-align:     left;
    font-size:      28pt;
    color:      var(--main-text);
}
#mobilenav      {
    display:        none;
    position:       absolute;
    background:     var(--box-background);
    width:          56%;
    font-size:      15pt;
    line-height:    22pt;
    text-align:     left;
    padding:        2px 12px 16px;
}
#mobilenav>span     {
    float:          right;
}
.cookie-banner {
    position:       fixed;
    bottom:         10px;
    left:           50%;
    transform:      translateX(-50%);
    background-color: #f8f9fa; /* Light background */
    color:          #333; /* Dark text */
    border:         solid thin var(--main-text); /* Optional border */
    padding:        4px 6px;
    border-radius:  5px;
    box-shadow:     0 2px 10px rgba(0, 0, 0, 0.1);
    z-index:        1000; /* Ensure it appears above other content */
    width:          80%; /* Responsive width */
    max-width:      400px; /* Max width */
    text-align:     center; /* Center text */
}

.cookie-button {
    background-color:   var(--main-text);
    color:              white; /* White text */
    border:             none;
    border-radius:      3px;
    padding:            8px 12px;
    margin:             0 5px;
    cursor:             pointer;
}

.cookie-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}
#login              {
    display:            inline-block;
    background:         #D9F3FD;
    color:              var(--main-text);
    border:             var(--border);
    border-radius:      15px / 50%;
    padding:            2px 10px;
    position:           relative;
    top:                -5px;
    font-size:          16pt;
    cursor:             pointer;
}
#headwide            {
    position:           relative;
    top:                -5px;
}    
#headstrapline      {
    font-family:        Alkatra,cursive;
    font-size:          min(18pt, 3.8vw);
    color:              #283583;
    margin:             4px auto 0 10px;
}
body                {
    text-align:         center;
    font-family:        'Nunito Sans', sans-serif;
}
a                   {
    color:              inherit;
    font-weight:        bold;
    text-decoration:    none;
}
main                {
    width:              100%;
    max-width:          700px;
    display:            inline-block;
    margin:             0 auto;
}
h1                  {
    color:              var(--main-text);
    font-size:          24pt;
    text-align:         left;
}
h3                  {
    color:              var(--main-text);
    font-size:          16pt;
    text-align:         center;
}
ul,ol               {
    text-align:         left;
    color:              var(--main-text);
    font-size:          16pt;
}
.material-icons     {
    cursor:             pointer;
}
.blendSelect        {
    background:         none;
    border:             none;
    color:              var(--main-text);
}
.blendSelect:focus  {
    outline:            none;
}
.blendSelect>option {
    background:         var(--box-light-background);
    border:             none;
}
.formbox            {
    width:              96%;
    margin:             auto;
    padding:            12px 6px;
    box-sizing:         border-box;
    border:             var(--border);
    border-radius:      var(--border-radius);
}
.formfilled         {
    background:         var(--box-light-background);
    background:         url('/images/site/background-blue1.jpg') no-repeat;
    background-size:    cover;
}
.genbox         {
    display:            inline-block;
    background:         #D9F3FD;
    border:             var(--border);
    border-radius:      var(--border-radius);
    padding:            10px 8px;
}
.msgbox         {
    display:            inline-block;
    border:             solid thin green;
    padding:            2px 6px;
    background:         #E0FFE1;
    color:              green;
}
.warnbox        {
    display:            inline-block;
    border:             solid thin red;
    padding:            2px 6px;
    background:         #FFCCCB;
    color:              red;
}
.panel              {
    display:            inline-block;
    vertical-align:     top;
    width:              100%;
    max-width:          600px;
}
.panel>h1           {
    text-align:         center;
}
#choosebox      {
    visibility:         hidden;
    position:           relative;
    border:             var(--border);
    border-radius:      var(--border-radius);
    color:              var(--main-text);
    font-size:          14pt;
    height:             65px;
    padding:            2px 4px;
    margin:             4px auto 20px;
}
#choosebox>div      {
    position:           absolute;
    width:              100%;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
}
.homeback           {
    background:         url('/images/site/background-blue.jpg') no-repeat;
    background-size:    cover;
    padding:            6px 6px 18px 6px;
}
.button,.smallbutton  {
    display:            inline-block;
    background:         var(--main-text);
    color:              white;
    font-size:          16pt;
    margin:             2px 8px;
    padding:            4px 8px;
    border-radius:      8px;
    cursor:             pointer;
}
.smallbutton        {
    font-size:          10pt;
}
.button:disabled    {
    background:         lightgrey;
    color:              grey;
    cursor:             default;
}
.smallbutton:disabled    {
    background:         lightgrey;
    color:              grey;
    cursor:             default;
}
.checkbox,.bigcheckbox  {
    accent-color:       var(--main-text);
    color:              white;
    height:             20px;
    width:              20px;
    position:           relative;
    top:                6px;
}
.bigcheckbox            {
    height:             25px;
    width:              25px;
    border-radius:      50%;
}
.readmore           {
    color:              blue;
    font-style:         italic;
    cursor:             pointer;
}
.blog               {
    text-align:         left;
    color:              var(--main-text);
    font-size:          14pt;
}
.maininfo           {
    background:         var(--box-background);
    font-size:          14pt;
    padding:            4px 8px;
}
.mininfo            {
    background:         #FFFFBD;
    font-size:          12pt;
    padding:            4px 8px;
}
.forminfo           {
    font-size:          12pt;
    padding:            4px 8px;
}
.label              {
    font-size:          12pt;
    text-align:         right;
    vertical-align:     top;
}
.enter              {
    width:              300px;
    max-width:          100%;
}
.smallprint         {
    width:              300px;
    max-width:          80%;
    text-align:         center;
    font-size:          9pt;
    margin:             6px auto;
    padding:            2px 4px;
    border:             solid thin dimgrey;
}
.homeform           {
    margin:             4px auto;
    width:              300px;
    max-width:          100%;
}
.charity_list       {
    margin:             6px 0;
    font-size:          10pt;
    cursor:             pointer;
}
.hiderow            {
    display:            none;
}
.overlay            {
    background:         var(--box-background);
    border:             var(--border);
    border-radius:      var(--border-radius);
    padding:            12px 8px;
    display:            none;
    position:           fixed;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-height:         90vh;
}
.dashcontainer      {
    display:            flex;
    width:              100%;
    max-width:          920px;
    margin:             auto;
    justify-content:    center;
    flex-wrap:          wrap;
}
.dashnavigate   {
    flex-basis:         100%;
    display:            flex;
    justify-content:    space-between;
    height:             auto;
}
.dashbreak  {
    flex-basis:         100%;
    height:             0;
}
.dash               {
    display:            block;
    position:           relative;
    background:         var(--box-background);
    border:             var(--border);
    border-radius:      var(--border-radius);
    width:              100%;
    max-width:          200px;
    padding:            4px 8px 48px 8px;
    margin:             10px 2px;
    text-align:         center;
    vertical-align:     top;
}
.dash>span          {
    position:           absolute;
    bottom:             8px;
    left:               50%;
    transform:          translateX(-60%);
}
.dashselect     {
    max-width:      400px;
    background:         var(--box-light-background);
    background:         url('/images/site/background-blue1.jpg') no-repeat;
    background-size:    cover;
    margin:     12px 18px;
    cursor:     pointer;
}
.dashhead           {
    width:              100%;
    max-width:          874px;
}
.dashboard-icon         {
    position            :relative;
    top:                8px;
    font-size:          22pt;
    cursor:             initial;
}
summary                 {
    padding-top:        4px;
    cursor:             pointer;
}
.demo                   {
    width:              90%;
    max-width:          450px;
    margin:             4px auto;
    cursor:             pointer;
}
.demoslot               {
    background:         lightblue;
    border-radius:      10px;
}
.demobook               {
    background:         #F26D21;
    color:              white;
    border-radius:      10px;
}
.narrowOnly             {
    display:            none;
}
.wideHomeMargin {
    margin-top:         32px;
}
.homeSocial             {
    width:              80px;
    max-width:          20%;
}
.homeSocial:hover       {
    opacity:            0.5;
}
.changelog              {
    font-size:          11pt;
    padding-left:       18px;
}
.accountUser            {
    font-size:          12pt;
    color:              #3A3A3A;
}
.communityLogoLeft      {
    float:              left;
    width:              20%;
    margin:             0 20px 15px 0px;
}
.communityLogoRight     {
    float:              right;
    width:              20%;
    margin:             0 0px 15px 20px;
}
.communityHead          {
    text-align:         left;
    margin-top:         20px;
}    
#genieApply             {
    margin:             10px auto 20px;
    width:              100%;
    max-width:          720px;
    text-align:         left;
    background:         #EFF9FB;
    border:             solid thin lightgrey;
    border-radius:      3px;
    padding:            4px 10px;
}
.picker                 {
    display:            none;
    position:           absolute;
    background:         #E9E9E9;
    border:             solid thin darkgrey;
    border-radius:      3px;
}
.picklist               {
    text-align:         left;
    padding:            1px 4px;
    cursor:             pointer;
}
.pickList:hover         {
    background:         white;
}
#todoPerson             {
    display:            block;
}
@media screen and (max-width: 700px) {
    #headwide       {
        display:        none;
    }
    #headmobile     {
        display:        inline;
    }
    .homeback       {
        box-sizing:     border-box;
    }
    #login          {
        top:            -12px;
        font-size:      14pt;
    }
    #mainmenu       {
        display:    none;
    }
    #mobilemenu     {
        display:    block;
    }
    .menuitem       {
        color:      var(--main-text);
        font-size:  12pt;
    }
}
@media screen and (max-width: 1236px) {
    .narrowOnly     {
        display:        block;
    }
    .wideOnly       {
        display:        none;
    }
    .wideHomeMargin {
        margin-top:     0px;
    }
}
@media screen and (max-width: 1100px) {
    #todoPerson         {
        display:        none;
    }
}