body{font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 18px; letter-spacing: 0.5px;}

.error_message{background-color:#2b1f28; padding:12px; color:#fff; font-weight: 600;} 
.button{ display:inline-block; border-radius: 8px; background-color:#669d16; background:linear-gradient(#365805 0%,#5d8b1b 70%,#4e7b0d 100% ); color:#fff; border:none; height: auto; padding:14px 36px; letter-spacing: 1px; font-weight: 400; font-size: 14px; box-shadow: rgba(0,0,0,0.5) 0px 0px 36px;}
input[type="submit"].button, input[type="button"].button{
    border-radius: 8px; background-color:#669d16; background:linear-gradient(#365805 0%,#5d8b1b 70%,#4e7b0d 100% ); color:#fff; border:none; height: 3em; padding:0px 36px; letter-spacing: 1px; font-weight: 400; font-size: 14px; box-shadow: rgba(0,0,0,0.5) 0px 0px 36px;
}

.Page{font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 18px; letter-spacing: 0.5px;  transition: all 0.1s ease-in; background-color:#f1efeb;}
.Page.on{opacity: 1;}
.Page .serif{font-family:adobe-caslon-pro, serif;}
.Page .content-wrap{max-width:1400px;}
.Page .body-wrap{display: flex; flex-direction: row; flex-wrap: nowrap; width:1464px; max-width:100%; overflow-x: hidden; padding-left: 32px; padding-right: 32px; margin-left:auto; margin-right: auto; min-height: 90vh; position: relative;}
.Page #mainnav{width:260px; margin-right: 24px;}
.Page #pagebody{width:100%; display: flex; align-items: center; justify-content: center; flex-direction: row;}
.Page #mainnav .no-link,
.Page #mainnav a{font-family: adobe-caslon-pro, serif; display: inline-block; text-decoration: none; color:#2c2a25; font-size: 20px; text-transform: capitalize;}
.Page #mainnav ul{list-style: none; margin:0px; padding:0px;}
.Page #mainnav ul.submenu{padding-left: 24px; padding-top:24px;}
.Page #mainnav li{margin-bottom: 24px;}
.Page header .menu-toggle{display: none;}
.Page header{padding-top:2px; background-color:#222; position: relative;}

.Page header #sitename{ display: inline-block;  color:#222;  overflow: hidden; background-image: url(../images/MAP-logo-for-dark.svg); background-size: contain; background-repeat: no-repeat; margin:4px 0px 4px 4px; text-indent: 100%;  font-size: 34px; padding-top:0px; white-space: nowrap; width:340px; height: 46px;}


.Page{background-color:#222; background-image:url(../images/login-600.webp); background-size: 100% auto; background-position: center top 56px; background-repeat: no-repeat;}
.Page:before{content:''; display: block; position: absolute; top:0px; bottom:0px; left:0px; right:0px; background-size: 100% auto; background-position: center top 56px; background-repeat: no-repeat; background-image:url(../images/login.webp); opacity: 0; transition: all 0.3s ease-in;}
.Page.on:before{opacity: 1;}
.Page fieldset.center{width:450px; max-width: 95%; padding:24px 48px 2px; background-color:rgba(255,255,255,0.3); backdrop-filter: blur(10px);}
.Page footer{text-align: center; font-size: 0.7em;}

@media screen and (max-width:1200px){
    .Page:before{background-image:url(../images/login-1200.webp);}
}

@media screen and (max-width:600px){
    .Page:before{background-image:url(../images/login-600.webp);}
}