html, body {
margin: 0;
padding: 0;
}
body {
color: #666;
}
* {
box-sizing: border-box;
}
.mm {
margin: 0;
padding: 0;
/*font-family: Calibri, Arial, Helvetica, sans-serif;*/
font-size: 11pt;
font-family: Open Sans,Arial,sans-serif;
font-weight: 500;
line-height: 1.5em;
}
.mm.page {
width: 99%;
margin: auto;
}
.mm a {
color: #2ea3f2;
text-decoration: none;
}
.mm a:target {
color: inherit;
text-decoration: none !important;
}
.mm a:hover {
text-decoration: underline;
}
.mm input[type="text"], .mm input[type="password"], 
.mm input[type="date"], .mm input[type="number"],
.mm input[type="datetime-local"],
.mm select, .mm textarea {
width: 100%;
}
.mm select {
background-color: white;
border: 1px solid #bbb;
padding: 2px;
}
.mm textarea {
height: 100%;
}
.mm input[type="text"]:read-only, .mm input[type="text"]:disabled, .mm textarea:read-only {
color: #666;
background-color: #EFEFEF;
}
.mm input[type="text"]:-moz-read-only, .mm textarea:-moz-read-only { /* For Firefox */
    color: #666;
background-color: #EFEFEF;
}

/* ------ NAV ------ */

.mm.nav {
position: fixed;
top: 0;
width: 100%;
z-index: 9;
background-color: #315b54;
line-height: inherit;
}
.mm.nav a, .mm.nav button, .mm.nav.navopen a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 8px;
font-size: 17px;
}
.mm.nav li {
list-style: none;
}
.mm.nav button { 
float: none;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.mm.nav:not(.navopen) > div > button::after {
padding-left: 5px;
font-size: 12pt;
font-family: "Font Awesome 6 Pro"; 
font-weight: 900;
content: "\f0d7";
}
.mm.nav:not(.navopen) > div:hover > button::after{
 content: "\f0d8";
}
.mm.nav > div {
float: left;
overflow: hidden;
}
.mm.nav:not(.navopen) > div > div {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.mm.nav a:hover, .mm.nav:not(.navopen) > div:hover > button {
  background-color: #ddd;
  color: black;
  text-decoration: none;
}
.mm.nav > div:hover > div {
display: block;
}
.mm.nav > div > div > a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.mm.nav .logo {
padding-right: 40px;
}
.mm.nav .mobilemenu {
display: none;
float: right;
}

/* ----- MOBILE NAV ----- */

@media (max-width:825px) {
.mm.nav a:not(:first-child), .mm.nav div {
display: none;
}
.mm.nav .mobilemenu {
display: block !important;
}
}
.mm.nav.navopen {
position: relative;
}*
.mm.nav.navopen a, .mm.nav.navopen div {
display: block !important;
float: none;
text-align: left;
}
.mm.nav.navopen .mobilemenu {
position: absolute;
right: 0;
top: 0;
}
.mm.nav.navopen a:not(:first-child), .mm.nav.navopen button {
padding-left: 15px;
}
.mm.nav.navopen div a {
padding-left: 30px !important;
}
.mm.nav button {
width: 100%;
text-align: left;
}

/* ----- END NAV ----- */

.mm table {
border-collapse: collapse;
border-spacing: 0;
}
.mm .datatable {
width: 100%;
max-width: 700px;
margin: auto;
table-layout: fixed;
}
.mm .datatable tr td {
border: 2px solid #999;
padding: 2px;
text-align: center;
vertical-align: middle;
}

.mm .datatable tr:first-child, .mm .header {
background-color: #EEE;
font-weight: bold;
text-align: center !important;
text-transform: uppercase;
height: 28px;
}

.mm .datatable .left {
text-align: left;
padding: 5px 8px;
}
.notop tr:first-child td {
border-top: 0;
}
.nobottom tr:last-child td {
border-bottom: 0;
}

.mm .entrytable {
width: 100%;
max-width: 400px;
margin: auto;
table-layout: fixed;
font-size: 11pt;
}
@media (max-width:600px) {
.mm .datatable, .mm .entrytable {
width: 98%;
}
}
.mm .entrytable tr {
border: 2px solid #999;
}
.mm .entrytable tr td {
margin: 0px;
padding: 3px !important;
text-align: left;
vertical-align: middle;
overflow: hidden;
}
.mm .entrytable .center {
text-align: center;
}
.mm .button {
width: 180px;
padding: 10px;
margin-top: 20px;
font-size: 18px;
box-sizing: border-box;
border: 1px solid #E0E2E3;
border-radius: 4px;
outline-offset: -2px;
display: inline-block;
-moz-appearance: none !important;
color: #FFF;
background-color: #7272ff;
cursor: pointer;
}
.mm .cancel.button {
    background-color: darkorange !important;
    margin-right: 20px !important;
}

@media (max-width:400px) {
.mm .button {
width: 150px;
}

}
.req {
color: #F00;
font-size: 12pt;
}
.no-over {
white-space: nowrap;
overflow: hidden;
}
.mm .nohead tr:first-child {
background-color: transparent;
}
.mm .nohead tr td {
font-weight: normal;
text-transform: none;
}
.scrollover1 {
overflow-x: scroll;
text-align: center;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.scrollover2 {
display: inline-block; 
}
.scroll {
xwidth: 100%;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
xmargin-bottom: 30px !important;
}
.saved {
text-align: center;
padding-top: 10px; 
font-size: 18pt; 
color: red;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
  supported by Chrome, Edge, Opera and Firefox */
}

.mm :not(form) :invalid {
xborder: 1px solid red;
xborder: none;
    outline: 2px solid red;
}

.popup { 
position: relative;
overflow: auto !important;
cursor: help;
line-height: normal;
} 
.popup > div {
display: inline-block;
border-bottom: 2px dotted #AAA;
xxcolor:#AAAAAA;
}
.popup > div > span { 
display: none; 
position: absolute;
bottom: 90%;
left: 50%;
width: 80px;
margin-left: -40px;
border: 1px solid #000; 
background-color: white; 
border-radius: 6px;
padding: 3px; 
color: #000;
text-align: center;
font-weight: normal;
} 
.popup:hover > div > span { 
display: block;
} 
.popup > div > span::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}