html,body { height: 100%; margin: 0; -webkit-text-size-adjust: 100%; }
html { font-size: 17px; }
body { position: relative; background-color: #eee; color: #222; font-family: 'Overpass', -apple-system, '.SFNSDisplay-Regular', Helvetica, Tahoma, Verdana, sans-serif; font-feature-settings: "tnum"; font-weight: 300; font-size: 1rem; line-height: 1.4rem; }
/* We support dark mode both via browser preference and by explicit opt-in saved in localStorage */
@media (prefers-color-scheme: dark) {
  body { background-color: #222; color: #ddd; }
}
body.dark { background-color: #222; color: #ddd; }

/* sticky footer parts */
.wrapper { min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
/*  margin-bottom: 2rem;*/ /* TODO what was this for */
}
footer, .push { margin: 0; height: 3rem; }
footer { margin-top: -3rem; /*background-color: #444;*/ color: #888; font-size: 0.85em; z-index: 1000; text-align: center; padding-top: }

div#contentpad { /*position: relative;*/ margin: 0 auto; max-width: 1200px; }
header { margin: 0 1em 0; padding-top: 1em; }
header.mainpage { /*text-align: center;*/ padding-top: 1.5em; }
#content { margin: 0.2em 1em 1em; }
@media only screen and (min-width : 801px) { /* bigger margin on desktop */
  header { margin: 0 2em 0; padding-top: 2em; }
  header.mainpage { /*text-align: center;*/ padding-top: 3em; padding-bottom: 0.7em; }
  #content { margin: 0.2em 2em 2em; }
}
body.printable header { margin: 0; }
body.printable #content { margin: 0; }
body.printable footer { margin: 0; }
body.printable #contentpad { max-width: 10000px; }
.narrowcolumn { margin: 30px auto; max-width: 640px; }

h1,h2,h3,h4 { font-weight: 300; margin-top: 0.5em; }
h1 { margin: 20px 0 15px; font-size: 2rem; line-height: 1em; }
h2,h3,h4 { margin-bottom: 0; }
h2 { font-size: 1.7rem; line-height: 1em; }
h3 { font-size: 1.5rem; line-height: 1em; }
h4 { font-size: 1.2rem; line-height: 1em; } /* margin-bottom: 10px; */
a, a:visited { color: #44b; } /* padding: 2px 7px; position: relative; left: -7px; } */ /*#abd;*/
/*a.selected { background-color: #fff; color: #222; text-decoration: none; }
nav { float: left; width: 250px; margin: 0 10px 0 0; }
ul#screenlist { list-style: none; padding: 0; }
ul#screenlist li { line-height: 1.4em; }
#screenframe { float: left; }
#screenframe, #screenframe iframe { width: 600px; height: 1024px; background-color: black; border: 0; }*/
a:hover, a:visited:hover, .metalinks a:hover { color: #88e; /*#c00;*/ }
@media (prefers-color-scheme: dark) {
  a, a:visited { color: #ddd; }
  a:hover, a:visited:hover, .metalinks a:hover { color: white; }
}
body.dark a, body.dark a:visited { color: #ddd; }
body.dark a:hover, body.dark a:visited:hover, body.dark .metalinks a:hover { color: white; }

h1 a, h2 a, h4 a { color: #ddd; text-decoration: none; }
/* not h3 because these are used on our listing pages as linked section titles */

/* The background colors are the "true" red/teal/blurple colors since they will show up well in a large area. */
.pmnsredbg { background-color: rgba(223,29,44,1); }
.pmnstealbg { background-color: rgba(64,175,182,1); }
.pmnsblurplebg { background-color: rgba(60,98,192,1); }

/* These colors, for text on light background, may have been darkened a bit. */
.pmnsred { color: rgba(223,29,44,1); }
.pmnsteal { color: rgba(44,155,162,1); }
.pmnsblurple { color: rgba(60,98,192,1); }

/* These colors, for text on dark background, may have been lightened a bit. */
@media (prefers-color-scheme: dark) {
  .pmnsred { color: rgba(255,59,64,1); }
  .pmnsteal { color: rgba(74,195,202,1); }
  .pmnsblurple { color: rgba(90,128,222,1); }
}
body.dark .pmnsred { color: rgba(255,59,64,1); }
body.dark .pmnsteal { color: rgba(74,195,202,1); }
body.dark .pmnsblurple { color: rgba(90,128,222,1); }

.num { text-align: right; /*font-family: 'Overpass Mono';*/ }
.right { text-align: right; }
/*.code, .pre { font-family: 'Overpass Mono'; }*/

/* Logo styles in template-logo.php */

#alert { background-color: #fea; margin: 2em auto; padding: 0.2em 1em 0.2em; border-top: 3px solid #ea0; max-width: 900px; }
#alert p { margin: 0.5em 0; }
@media (prefers-color-scheme: dark) {
  #alert { background-color: #444444; }
}
body.dark #alert { background-color: #444444; }

a.button, input.button[type='submit'] { min-width: 100px; text-align: center; background-color: rgba(60,98,192,1); text-decoration: none; color: #fff; padding: 0.2em 1em; font-weight: bold; display: inline-block; box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
  a.button, input.button[type='submit'] { color: #eee; }
}
body.dark a.button, body.dark input.button[type='submit'] { color: #eee; }
a.button.red, input.button.red[type='submit'] { background-color: rgba(223,29,44,1); }
a.button.teal, input.button.teal[type='submit'] { background-color: rgba(64,175,182,1); }
@media (prefers-color-scheme: dark) {
  a.button.red, input.button.red[type='submit'] { background-color: rgba(200,26,40,1); }
  a.button.teal, input.button.teal[type='submit'] { background-color: rgba(51,140,146,1); }
}
body.dark a.button.red, body.dark input.button.red[type='submit'] { background-color: rgba(200,26,40,1); }
body.dark a.button.teal, body.dark input.button.teal[type='submit'] { background-color: rgba(51,140,146,1); }
/* see also .tag */

div#clockframe { /*display: block;*/ float: right; }
svg#clock { width: 60px; height: 60px; margin: 0 auto; display: inline-block; vertical-align: middle; visibility: hidden; }
div#clockdate { display: inline-block; vertical-align: middle; text-align: left; margin-left: 0.5em; }
div#clockdate .time { font-weight: bold; }
div#clockdate .time .sec { font-size: 0.7em; }

div#clockframe { display: none; }
@media only screen and (min-width : 801px) { /* clock on desktop only */
	div#clockframe { display: block; }
}
.mainpage div#clockframe { position: relative; margin-top: -0.7em; } /* to vertically center with logo */
/*.mainpage div#clockframe { display: block; float: none; margin: 10px auto; text-align: center; }
.mainpage svg#clock { width: 80px; height: 80px; }
.mainpage div#clockdate { font-weight: bold; }
*/

.onlyInMiddleLayout { display: none; }
@media only screen and (min-width : 801px) { /* 2 columns on middly screens */
	.row { clear: both; }
	.col { float: left; width: 48%; margin: 1%; }
	.colpad { margin: 1%; }
	.row:first-child { margin-left: 0; }
	.col.wideInMiddleLayout { width: 100%; }
	.onlyInMiddleLayout { display: block; }
}
/*@media only screen and (min-width : 1201px) { / * 3 columns on desktop only * /
	.row { clear: both; }
	.col,
	.col.wideInMiddleLayout { float: left; width: 31.3%; margin: 1%; }
	.row:first-child { margin-left: 0; }
	.onlyInMiddleLayout { display: none; }
}*/
@media only screen and (min-width: 801px) {
	.mobileonly { display: none; }
}
@media only screen and (max-width: 800px) {
	.mediumhide { display: none; }
}
@media only screen and (max-width: 550px) {
	.smallhide { display: none; }
}

/*.small { font-size: 0.8em; line-height: 1.4em; }*/

.staffViewArea { max-width: 700px; margin: 20px auto 0; }
.staffViewPic { float: left; background-color: #088; border-radius: 50%; width: 150px; height: 150px; background-position: 50% 20%; background-size: cover; }
.staffViewDeets { margin-left: 170px; }
@media only screen and (max-width: 800px) {
	.staffViewPic { float: none; }
	.staffViewDeets { margin-left: 0; }
}

.twocol {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul.icons { text-align: center; margin: 1em 0; padding: 0; position: relative; }
ul.icons li { width: 6.4em; text-align: center; display: inline-block; vertical-align: top; position: relative; margin: 1em 0 0; }
/*.icon p { text-align: center; }*/
ul.icons a { text-decoration: none; }
.emojiicon { clear: both; display: block; font-size: 3.5em; line-height: 1em; margin: 0; text-decoration: none; }

#nextUpdateClock { display: inline-block; width: 40px; }

h1 span.normalsize { font-size: 1rem; }
a.editSearch { font-size: 1rem; margin-left: 0.8rem; /*color: #aaf; #777;*/ } /* because it's in h tag */
p a.editSearch { margin-left: 0; } /*not the create a new one*/
a.editCacheItem { /*color: #777;*/ }

form#bdaylookup { display: inline-block; }

.signage { display: none; }

.credit { color: #888; margin-left: 0.5em; }

.perf_no { display: none; }
.perf_code { display: none; }
.description { }
.gross_availbility { }
.availbility_by_customer { }
.onsale { color: #66cc66; /* green */ }
.soldout { color: #0099cc; /* blue */ }
.soldoutish { color: #9966ff; /* purple */ }
.process { color: #ff9933; /* orange */ }

.divider { display: inline-block; margin: 0 10px; }

.zero, .lock, .disabled, .metalinks, .metalinks a { color: #888; } /*works for both light and dark*/

p.last-updated { color: #888; }
p.last-updated a { /*color: #777;*/ }
p.jumplinks { color: #888; margin-bottom: 30px; padding-left: 70px; text-indent: -70px; }
p.jumplinks label { display: inline-block; min-width: 70px; text-indent: 0; }

iframe.editor { position: fixed; top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Safari iOS */
  transform: translate(-50%, -50%); /* Rest of browsers */
  width: 600px; height: 660px; border: 2px solid #aaa; box-shadow: 0px 5px 15px #888; background-color: #eee; }
@media (prefers-color-scheme: dark) {
  iframe.editor { border-color: #ddd; background-color: #222; box-shadow: 0px 5px 15px black; }
}
body.dark iframe.editor { border-color: #ddd; background-color: #222; box-shadow: 0px 5px 15px black; }
a#close { position: fixed; top: 15px; right: 15px; }
a#close, a#delete, a.help { color: #b00; }
@media (prefers-color-scheme: dark) {
  a#close, a#delete, a.help { color: #d55; }
}
body.dark a#close, a#delete, a.help { color: #d55; }

span.explain { font-size: 0.8rem; color: #888; font-style: italic; }
ul.key { padding-left: 110px; text-indent: -110px; list-style: none; }
ul.key li { margin-bottom: 10px; }
ul.key li span.label, ul.key li label:first-child { display: inline-block; width: 100px; text-align: left; padding-right: 10px; text-indent: 0; }
input, select, textarea { font-size: 1rem; font-family: 'Overpass', sans-serif; border: 0; background-color: #fff; color: #111; }
@media (prefers-color-scheme: dark) {
  input, select, textarea { background-color: #444; color: white; }
}
body.dark input, body.dark select, body.dark textarea { background-color: #444; color: white; }
input[type='text'], input[type='file'] { width: 300px; }
textarea { width: 300px; height: 120px; vertical-align: top; }
input.datepicker, input.timepicker { width: 110px; }
form img { max-width: 300px; max-height: 300px; vertical-align: top; }
a.button { text-indent: 0; }

/* info tables css in styles-tables.css */

.timerange { white-space: nowrap; }

span.fauxmoji { display: inline-block; width: 0.9em; height: 0.9em; }
span.birthdaycake { background: url("../resources/shortcake.png"); background-size: contain; }
span.anniversarypopper { background: url("../resources/popper.png"); background-size: contain; }
span.specialplate { background: url("../resources/bowl.png"); background-size: contain; }

span.barFull { position: relative; display: inline-block; vertical-align: middle; width: 25px; height: 5px; background-color: #fff; border: 1px solid #888; }
span.barPart { position: absolute; display: inline-block; left: 0; top: 0; height: 100%; background-color: #6c6; }
@media (prefers-color-scheme: dark) {
  span.barFull { background-color: #000; }
  span.barPart { background-color: #ddd; }
}
body.dark span.barFull { background-color: #000; }
body.dark span.barPart { background-color: #ddd; }

ul.errors { background-color: #500; border-top: 3px solid #900; padding: 20px 20px 10px 40px; margin: 0 0 15px; list-style-type: disc; }
ul.errors li { margin-bottom: 10px; }

div#error { margin: 1em 0 0; padding: 0.7em 1em; background-color: #500; border-top: 3px solid #900; }
div#error ul { margin: 0; padding: 0 0 0 40px; list-style-type: disc; }
div#error ul li { margin: 0.5em 0 0; }

footer { font-size: 0.85rem; color: #888; /*margin-top: 15px; margin-bottom: 40px;*/ }

@media print {
  body { background-color: white; color: black; }
  .contentpad { margin: 0; max-width: 10000px; } /* TODO how to cancel this properly */
  .content { margin: 0; }
  .hideinprint { display: none; }
}

#login-info{ font-size:12px; margin-left: 2rem; padding-left: 2px; margin-top: 0vh; }
@media only screen and (max-width: 800px) { #login-info{margin-left: 1rem; padding-left: 2px;} }