*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
*:focus {
  outline: 0;
  outline: none;
}

:root {
  --white: hsl(0, 0%, 100%);
  --gray: hsl(0, 0%, 60%);
  --black: hsl(0, 0%, 0%);
  --stBar: hsl(0, 0%, 93%); 
  --defTxtCol: hsl(0, 0%, 20%);
  --defBgCol: hsl(0, 0%, 100%);
  --txtCol: hsl(0, 0%, 93%);
  --bgCol: hsl(205, 45%, 45%);
  --activeYellow: hsl(59, 100%, 75%);
  --reqBtn: hsl(122, 34%, 40%);
  /* --bgColor: #3989BF; */
  --tabCol: hsl(205, 45%, 45%);
  --col6: hsl(84, 49%, 52%);
  --col7: hsl(59, 100%, 75%);
  --delBgCol: hsl(350, 81%, 48%);
  --svgDel: url("data:image/svg+xml;utf8,<svg width='30' height='30' fill='white' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 64 64' x='0px' y='0px'><path d='M45.49,55.87h-27a2,2,0,0,1-2-1.95l-2-37h35L47.49,54A2,2,0,0,1,45.49,55.87Zm0-2v0Zm-28.89-35,1.91,35,27,0,1.91-35Z'></path><path d='M51,18.86H13a1.41,1.41,0,0,1-1.5-1.35l0-.21L12.46,13a1.45,1.45,0,0,1,1.47-1.09H50.07A1.45,1.45,0,0,1,51.54,13l1,4.56A1.41,1.41,0,0,1,51,18.86Zm-37.34-2H50.34l-.65-3H14.31Z'></path><rect x='23' y='23.44' width='2' height='25'></rect><rect x='31' y='23.44' width='2' height='25'></rect><rect x='39' y='23.44' width='2' height='25'></rect><path d='M39.27,12.86h-2V7.57H26.73v5.29h-2V7.57a2,2,0,0,1,2-2H37.27a2,2,0,0,1,2,2Z'></path></svg>");
}


html,
body {
  width: 100vw;
  height: 100vh;
  color: var(--txtCol);
  background-color: var(--bgCol);
  font-size: 62.5%;
  line-height: 1.6;
  overscroll-behavior: none;
  overflow: hidden;
}

a { color: inherit; background-color: transparent; text-decoration: none; }
a:active, a:hover { outline: 0; }
input, textarea, select, button { font-size: inherit; font-family: inherit; }
img { border: 0; }
ul, li { list-style: none; }

.button { display: block; padding: 4px; width: 50px; height: 50px; background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 1.0; transition: opacity .2s ease-in-out; fill: var(--txtCol); cursor: pointer; overflow: hidden; }
.button * { pointer-events: none; }    
.button:hover { opacity: 0.7; }


/* START HERE -----------------------------  */

#wrapper {
  position:fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;

  color: var(--txtCol);
  background-color: var(--bgCol);
  overflow: hidden;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;

  touch-action: pan-y;
}



.mcstats {
  display: none;
  padding: 25px 10px 8px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #fff;
  background: #222;
}
.mcstats.show {
  display: none;
}

@media only screen and (min-width: 600px) {
  .mcstats {
    font-size: 1.6rem;
    line-height: 1.6;
  }
}



#pcw { --tabCol: #8F3A84; }
#afs { --tabCol: #B4A117; }
#mms { --tabCol: #005b96; }
#wms { --tabCol: #840B0B; }
#vaa { --tabCol: #3E5268; }
#fsg { --tabCol: #906315; }
#khc { --tabCol: #D38C87; }
#ses { --tabCol: #778A35; }


#main-content {
  position: relative;
  left: 0;
  width: 800vw;
  flex: 1;
  display: flex;
  overflow: hidden;
}


.tab {
  position: relative;
  width: 100vw;
  color: var(--defTxtCol);
  background: var(--defBgCol);
  overflow-x: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  touch-action: pan-y;
}

.tab-header {
  margin-top: 70px;
  padding: 0 1rem 2rem 1rem;
  text-align: center;
}

.tab-header h2 {
  margin-bottom: 0.8rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--tabCol);
}

.tab-header p {
  font-size: 1.4rem;
}

.tab-header a {
  font-size: 1.4rem;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}


.day-title {
  position: relative;
  min-height: 4.5rem;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  background: var(--tabCol);
}

.sub-title {
  position: relative;
  padding: .5rem 1rem;
  min-height: 3.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tabCol);
  background: var(--stBar); 
  border-bottom: 1px dotted var(--gray);
  display: flex;
  align-items: center;
}


.day-wrap {
  width: 100%;
}

.data-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.data-cell {
  padding: .5rem 1rem;
  min-height: 4.2rem;
  font-size: 1.4rem;
  border-bottom: 1px dotted var(--gray);
}

.data-cell:nth-child(odd) {
  border-right: 1px dotted var(--gray);
}

#mms .subsec:nth-child(3) .sub-title {
  color: #ffffff;
  background-color: #666666;
}

#mms .subsec:nth-child(4) .sub-title {
  color: #ffffff;
  background-color: #ce9223;
}

#mms .subsec:nth-child(5) .sub-title {
  color: #ffffff;
  background-color: #54001e;
}

.col-layout {
  padding: 1.5rem;
  column-count: 2;
  font-size: 1.6rem;
}

.col-layout span {
  font-size: 1.2rem;
  color: var(--tabCol);
}



.tab-content {
  position: relative;
  top: 0;
  /* padding-bottom: 80px; */
}

.tab-content-role {
  position: relative;
  top: -60px;
  /* padding-bottom: 80px; */
}





#tab-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bgCol);
  transform-origin: center center;
  transform: scale(0);
  opacity: 0;
  transition: 500ms ease-in-out;
  pointer-events: none;
  z-index: 10;
  overflow-x: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 10000;
}

#tab-menu.show {
  transform: scale(1);
  opacity: 1.0;
  pointer-events: auto;
}

#tab-menu .overflow {
  padding: 5rem 2rem;
}

.tab-btn {
  margin: .5rem;
  padding: 1rem;
  font-size: 1.6rem;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: 250ms ease-in-out;
  pointer-events: auto;
}

.tab-btn.active {
  color: var(--activeYellow);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.tab-btn .material-icons {
  color: var(--txtCol);
  font-size: 30px;
  pointer-events: none;
}


#main-nav {
  padding: 4px 10px 35px;
  background: var(--bgCol);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 15;
}

.btn {
  position: relative;
  margin: 0 5px;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn .material-icons {
  color: var(--txtCol);
  font-size: 30px;
  pointer-events: none;
}

.btn-dscr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  pointer-events: none;
  text-align: center;
  font-size: 1rem;
  pointer-events: none;
}


#profile-bar {
  position: relative;
}

#profile-menu {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  padding: 0 10px 14px;
  color: var(--white);
  background: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform-origin: bottom left;
  transform: scale(0);
  transition: 150ms ease-in-out;
  opacity: 0;
  pointer-events: none;
  z-index: 15;
}

#profile-menu.show {
  transform: scale(1);
  opacity: 1.0;
  pointer-events: auto;
}

[data-type='welcome'], [data-type='username'] { display: none; }



.panel {
  position: fixed;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  background: #ffffff;
  transition: left 250ms ease-in-out;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.panel * { pointer-events: none; }
.panel input { pointer-events: auto; }

.panel.show { left: 0; }

.panel .close {

}

.reserve {
  position: relative;
  cursor: pointer;
}

#reserve-popup {
  --puCol: #8F3A84;
}

#hospitality-popup {
  --puCol: #840B0B;
}

#reserve-popup, #hospitality-popup {
  padding: 25px 25px 35px;
  max-width: 450px;
  background: var(--defBgCol);
  color: var(--defTxtCol);
  border: 3px solid var(--puCol);
  border-radius: 5px;
  font-size: 1.4rem;
}

#reserve-popup h2, #hospitality-popup h2 {
  text-align: center;
  font-size: 1.6rem;
  color: var(--puCol);
}

#reserve-popup p, #hospitality-popup p {
  padding: 15px 0;
  line-height: 1.4;
}

#reserve-popup [contenteditable="true"], #hospitality-popup [contenteditable="true"] {
  padding: 5px 12px;
  min-height: 65px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 5px;
  pointer-events: auto;
}

.res-panel {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

#reserve-popup .resbtn {
  margin: 0 6px;
  padding: 6px 25px;
  color: #ffffff;
  background: var(--puCol);
  border: 2px solid var(--puCol);
  border-radius: 5px;
  pointer-events: auto;
  cursor: pointer;
}

#reserve-popup .resbtn:nth-child(2) {
  color: var(--puCol);
  background: white;
}

#hospitality-popup .resbtn {
  margin: 0 6px;
  padding: 6px 25px;
  color: #ffffff;
  background: var(--puCol);
  border: 2px solid var(--puCol);
  border-radius: 5px;
  pointer-events: auto;
  cursor: pointer;
}

#hospitality-popup .resbtn:nth-child(2) {
  color: var(--puCol);
  background: white;
}


#edit {
  position: relative;
  opacity: 0.3;
  transition: 350ms ease-in-out;
  pointer-events: none;
}

#edit.active {
  opacity: 1;
  pointer-events: auto;
}

#edit .material-icons.save {
  color: var(--activeYellow) !important;
}


#settings {
  margin-bottom: 120px;
}



#reportgrid {
  margin: 20px 0 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

#reportgrid div {
  display: grid;
  grid-template-columns: 40px auto;
  grid-gap: 10px;
}

#reportgrid label {
  margin: 0;
  padding: 0;
  padding-top: 2px;
  font-size: 14px;
  color: #666;
}

#reportgrid input {
  height: 40px;
  padding: 3px;
  font-size: 16px;
  color: #333;
  border: 1px solid #999;
  text-align: center;
}

#report #comments {
  width: 100%;
  min-height: 120px;
  padding: 8px;
  font-size: 16px;
  color: #333;
  border: 1px solid #999;
}


input[type='number']:disabled {
  background: #dddddd;
}


#arrow_box {
  position: absolute;
  right: 55px;
  padding: 0 8px 0 12px;
  white-space: nowrap;
  height: 20px;
  color: var(--bgCol);
  font-size: 14px;
  background: var(--activeYellow);
  opacity: 0;
  transition: 350ms ease-in-out;
  pointer-events: none;
}

#arrow_box.show {
  opacity: 1.0;
}

#arrow_box:after, .arrow_box:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#arrow_box:after {
  border-color: rgba(136, 183, 213, 0);
  border-left-color: var(--activeYellow);
  border-width: 10px;
  margin-top: -10px;
}



#cpanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #333;
  background: #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0);
  transition: 150ms ease-in-out;
  opacity: 0;
  pointer-events: none;
  z-index: 20;  
}

#cpanel.show {
  transform: scale(1);
  opacity: 1.0;
  pointer-events: auto;
}

#cpanel .header {
  padding: 5px 25px;
  height: 80px;
  color: var(--bgCol);
  background: #eeeeee;
  display: flex;
  justify-content: space-between;
  align-items: end;
  cursor: pointer;
}

#cpanel .header * {
  pointer-events: none;
}

#cpanel h2 {
  font-size: 1.6rem;
}

#cpanel .material-icons {
  color: #666666;
  font-size: 40px;
}

#cpanel .content {
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#cpanel section {
  padding: 10px;
  font-size: 18px;
  line-height: 1.6rem;
  display: none;
}

#cpanel section.show {
  display: block;
}

#cpanel section h2 {
  font-size: 20px;
}

#cpanel section p {
  margin: 15px 0 35px;
}

#cpanel section a {
  text-decoration: none;
  color: #3989BF;
  cursor: pointer;
}



.accordian {
  margin-top: 15px;
  min-height: 100px;
  background: #fff;
  font-size: 1.4rem;
  line-height: 1.6;
  border-radius: 6px;
}

.accordian header {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #3989BF;
  border-radius: 6px 6px 0 0;
}


.accordian main {
  padding: 15px;
}


.accordian label {
  margin: 20px 0 5px;
  font-size: 16px;
  color: #666;
  display: block;
}

.accordian input {
  margin-bottom: 15px;
  padding: 4px 8px;
  font-size: 1.6rem;
  color: var(--bgCol);
  background-color: #ffffff;
  border: none; 
  border-bottom: 1px solid #ccc;
  display: block;
  width: 100%;
}

.accordian input:focus {
  color: var(--bgCol);
  background-color: #ffffff;
}

.accordian .submit-btn-wrapper {
  margin-top: 12px;
  display: flex;
  justify-content: end;
}

.accordian .submit-button {
  display: inline-block;
  padding: 10px 15px;
  font-size: 18px;
  color: #3989BF;
  cursor: pointer;
}

.accordian .submit-button.disable {
  color: #eeeeee;
  pointer-events: none;
}


/* UTILITY STYLES */

.cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
.flex { display: flex; }
.fl-middle { justify-content: center; align-items: center; }

#searchbox{ background-color: var(--srchBgCol); padding: 6px 0; }
#search { padding: 10px 15px; width: 100%; color: var(--srchTxtCol); border: none; outline: none; font-size: 20px; font-family: var(--defFont); background: inherit; border-radius: 0; }
#search:focus { border: none; outline: none; }
#search::placeholder { color: var(--srchTxtCol); opacity: 1; }
#search::-moz-placeholder { opacity: 1; }

::placeholder { color: #999999; opacity: 1; }
:-ms-input-placeholder { color: #999999; }
::-ms-input-placeholder { color: #999999; }

[contenteditable] { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
[contenteditable="true"] { background: #FDFDEA; }
[contenteditable="true"]:focus { border: 2px dotted var(--tabCol); }
[contenteditable="true"]:empty:before { content: attr(placeholder); color: #999999; display: block;}

.smoothscroll { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.editable { cursor: pointer; }


.prevent-select {
  /* -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; */
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 30px;
  background: rgba(255,255,255,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
}

#overlay * {
  pointer-events: none;
}


#overlay-clear {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  cursor: pointer;
  z-index: 15;
}

#overlay-clear * {
  pointer-events: none;
}




.protector { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); opacity: 0; transition: 350ms ease-in-out; pointer-events: none; z-index: 1000; }
.protector.show { pointer-events: auto; opacity: 1; }

[data-type='sync'] span { opacity: 1; transition: 150ms ease-in-out; transform: rotate(0deg); }
.fade { opacity: 0.3 !important; }
.timer { animation: rotation 2s infinite linear; }
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}



.message {
  position: fixed;
  top: 25px;
  left: 50%;
  width: 280px;
  font-size: 1.4rem;
  transform: translateX(-50%);
  padding: 25px 5px;
  text-align: center;
  color: #eee;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
  opacity: 0;
  transition: 500ms ease-in-out;
  pointer-events: none;
  z-index: 50; 
}

.message.show {
  opacity: 1;
}




.hidden {
  display: none;
}


#member-list {
  background-color: #cccccc;
}

#member-list .row {
  position: relative;
  margin: 1px 0 1px;
  padding: 0;
  display: grid;
  grid-template-columns: 3fr 3fr 1fr 1fr 1fr 45px;
  gap: 1px;
}

#member-list .maincontent {
  padding-bottom: 10px;
}

#member-list .col {
  font-size: 0.8rem;
  padding: 8px;
  color: #444444;
  background-color: white;
}

#member-list .head {
  margin: 0;
  background-color: #ffffff;
}

#member-list .head div {
  color: var(--bgCol);
  background-color: #dddddd;
  font-weight: 600;
}

#member-list .controls {
  padding-left: 10px;
  color: var(--txtCol);
  background-color: var(--bgCol);
  display: flex;
  justify-content: end;
  align-items: center;
  cursor: default;
}

#member-list .saveBtn {
  color: #ffffff;
  font-size: 0.9rem;
}

#member-list .caption {
  margin-right: auto;
  font-size: 0.9rem;
}

#member-list .total {
  font-size: 0.9rem;
}

#member-list [data-type="add-member"] .material-icons {
  color: #ffffff;
  font-size: 1.6rem;
  pointer-events: none;
}

#member-list [data-type="del-member"] {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#member-list [data-type="del-member"] .material-icons {
  color: red !important;
  font-size: 1.1rem;
  pointer-events: none;
}


#member-list [contenteditable="true"] {
  outline: none;
}

#member-list [contenteditable]:focus {
  background: #FDFDEA;
}

.center {
  text-align: center;
}

#talk-list {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 500px;
  max-height: 400px;
  bottom: 0;
  padding: 20px 20px 50px;
  background: white;
  color: #444444;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  transition: 350ms ease-in-out;
  pointer-events: none;
  z-index: 20;
}

#talk-list.show {
  opacity: 1;
  pointer-events: auto;
}

#talk-list div {
  padding: 3px 0;
  cursor: pointer;
}

#talk-list div:hover {
  color: #fff;
  background: var(--bgCol);
}


.linkpanel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-right: 1.5rem;
  display: flex;
}

.infolink, .maplink {
  position: relative;
  padding: .8rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: inherit;
  cursor: pointer;  
}

.infolink p {
  position: absolute;
  right: -45px;
  top: 38px;
  padding: 15px 25px;
  width: 250px;
  font-size: 1.4rem;
  background: #ffffff;
  color: var(--tabCol);
  border: 2px solid;
  opacity: 0;
  transition: 350ms ease-in-out;
  pointer-events: none;
  z-index: 16;
}

.infolink.show > p {
  opacity: 1;
}


#mapwrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.4);
  z-index: 15;
  cursor: pointer;
  opacity: 1;
  transition: 200ms ease-in-out;
  pointer-events: none;
  z-index: -1;
}

#mapwrapper.show {
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
}

#map {
  position: relative;
  width: 96%;
  height: 275px;
  background: white;
}

#closemap {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px 15px;
  font-size: 1.6rem;
  color: #ffffff;
  background: #8F3A84;
  cursor: pointer;
}

#map iframe {
  border: 2px solid #8F3A84;
}


.month-spacer {
  border-top: 2px solid var(--tabCol);
  height: 40px;
}


.card {
  margin: 0 auto;
  width: 100%;
  color: #666666;
}

.card h2 {
  min-height: 4rem;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: var(--tabCol);
}

.card h3 {
  margin-top: 8px;
  padding: .5rem 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tabCol);
}

.card h4 {
  padding: 18px 15px 22px;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: right;
}

.card p {
  padding: 1.4rem 2.5rem;
  font-size: 1.6rem;
  line-height: 1.6;
}




.notifications {
  position: fixed;
  top: 35px;
  right: 0;
  width: 250px;
  background: red;
  z-index: 200;
}

.notifications div {
  margin: 1px 0;
  padding: 0 5px;
  height: 45px;
  line-height: 45px;
  color: black;
  background: pink;
  cursor: pointer;
}

.pendingmess {
  margin: 0 2px;
  font-size: 11px;
  color:red;
}


#login-wrapper { background-color: var(--bgColor); }
#login-form { padding-bottom: 70px; width: 100%; max-width: 260px; color: #ffffff; font-size: 1.6rem; }
#login-form img { margin-left: -30px; margin-bottom: -18px; width: 90px; height: 100%;}
#login-form input { margin-top: 20px; padding: 6px 12px; width: 100%; color: #222222; border-radius: 5px; border: 2px solid transparent; }
#login-form input:focus { border: 2px solid var(--activeYellow); }
#login-form input::placeholder { color: #999999; }
#login-form button { margin-top: 28px; padding: 6px 12px; width: 100%; color: #ffffff; background: var(--bgColor); border: 2px solid; border-radius: 5px; font-size: 1.2em; cursor: pointer; }
#login-form #errmsg { margin: 8px; min-height: 25px; color: yellow; font-size: 0.8em; }
#login-form [data-lang] { padding: 10px; display: inline-block; font-size: 0.8em; color: #fff; transition: 250ms ease-in-out; pointer-events: auto; cursor: pointer; }
#login-form [data-lang].sel { color: var(--activeYellow); pointer-events: none; }


@media only screen and (min-width: 600px) {

  .tab-header {
	margin-top: 10rem;
    padding: 0 2rem 3.5rem 2rem;
  }

  .tab-header h2 {
    font-size: 2.4rem;
  }

  .tab-header p {
    font-size: 1.6rem;
  }

  .tab-header p a {
    font-size: 1.6rem;
  }

  .day-title {
    min-height: 5rem;
    font-size: 1.8rem;
  }

  .sub-title {
    padding: .7rem 1.5rem;
    min-height: 4.2rem;
    font-size: 1.8rem;
  }

  .data-cell {
    padding: 1.2rem 1.5rem;
    font-size: 1.6rem;
  }

  .col-layout {
    padding: 2.5rem;
    column-count: 3;
  }


  #tab-menu .overflow {
    padding: 10rem 2.5rem;
  }

  .tab-btn {
    margin: 1rem;
    padding: 1.8rem;
    font-size: 2rem;
  }


  #main-nav {
    padding: 8px 35px 40px;
  }

  #main-nav .btn {
    width: 55px;
    height: 55px;
  }

  #main-nav .btn .material-icons {
    color: var(--txtCol);
    font-size: 40px;
    pointer-events: none;
  }


  
  #profile-menu {
    padding: 4px 15px 20px;
  }

  #profile-menu .btn {
    margin: 0 15px;
    /* background: red; */
  }




  #member-list .col {
    padding: 10px 15px;
    font-size: 1rem;
  }

  #member-list .controls {
    padding: 8px 0 8px 15px;
  }

  #member-list .caption {
    font-size: 1.2rem;
  }

  #member-list .saveBtn {
    font-size: 1.2rem;
  }

  #member-list .total {
    font-size: 1.2rem;
  }

  #member-list [data-type='add-member'] .material-icons {
    font-size: 2.2rem;
  }

  #member-list [data-type='del-member'] .material-icons {
    font-size: 1.3rem;
  }

  .linkpanel {
    padding-right: 2rem;
  }

  .infolink, .maplink {
    padding: 1rem 1.8rem;
    font-size: 1.4rem;
  }

  .infolink p {
    right: -35px;
    top: 56px;
    padding: 15px 25px;
    width: 320px;
    font-size: 1.6rem;
    border: 4px solid;
  }

  #map {
    width: 80%;
    height: 450px;
  }

  #map iframe {
    border: 4px solid #8F3A84;
  }


  .res-panel {
    margin-top: 45px;
  }

  #reserve-popup, #hospitality-popup {
    font-size: 1.6rem;
    border: 5px solid var(--puCol);
  }

  #reserve-popup h2, #hospitality-popup h2 {
    font-size: 1.8rem;
  }

  #reserve-popup p, #hospitality-popup p {
    padding: 25px 0;
  }



  #reportgrid {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
  }

  #reportgrid div {
    grid-template-columns: 50px auto;
  }


  .month-spacer {
    border-top: 4px solid var(--tabCol);
    height: 6rem;
  }

  .accordian {
    font-size: 1.6rem;
  }

  .card h2 {
    min-height: 4.5rem;
    font-size: 2rem;
  }

  .card h3 {
    padding: 1.5rem 2.2rem;
    font-size: 1.8rem;
  }

  .card h4 {
    padding: 2.5rem;
  }

  .card p {
    padding: 1.4rem 4rem;
  }

  .message {
    font-size: 1.6rem;
  }

  [data-type='welcome'] {
    margin-left: 10px;
    margin-top: 15px;
    font-size: 1.8rem;
    display: block;
  }

  [data-type='username'] {
    margin-right: auto;
    margin-top: 15px;
    font-size: 1.8rem;
    display: block;
  }


  #login-form { padding-bottom: 110px; max-width: 320px; font-size: 1.8rem; }
  #login-form img { margin-left: -42px; margin-bottom: -22px; width: 120px; }
  #login-form input { margin-top: 25px; padding: 8px 15px; }
  #login-form button { margin-top: 35px; padding: 8px 15px; }
  #login-form #errmsg { margin: 12px; }
}

/* @media print {
  @page { size: letter; }
  html, body { display: block; margin: 0; padding: 0; width: 215.9mm; height: auto; color: #000; background: #fff; overflow: auto; }
  .noprint { display: none !important; }
  #wrapper, #main { margin: 0; padding: 0; position: relative !important; width: 100%; height: auto; overflow: auto; display: block; } 
  #content { margin: 0; padding: 0; color: #000; background:#fff; }
  #talkttl{ margin: 0 0 25px 0; padding: 0 0 6px 0; width: 100%; color: #000; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 18pt; border-bottom: 1px solid #000; }
  #talkmain{ margin: 0; padding: 0; color: #000; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14pt; }     
} */


#logo {
  position: fixed;
  top: 25px;
  left: 10px;
  padding: 10px;
  pointer-events: none;
  color: #333333;
  background: #ffffff;
  font-size: 1.4rem;
  font-weight: 100;
  border-radius: 10px;
  opacity: 0.6;
}

#logo span {
  margin-left: 3px;
  font-weight: 200;
}

#khc .sub-title {
  display: none;
}

#info p {
  font-size: 1.4rem;
  line-height: 1.6;    
}

[data-reserve='true'], [data-hospitality='true'] {
  cursor: pointer;
}

#onlinestatus { height: 6px; background: var(--col6); }
.offline { background: var(--col7) !important; }


/* NOTIFICATIONS  */
#notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  align-items: end;
  pointer-events: none;
  touch-action: pan-y;
  z-index: 1000;
}

#notif-count {
  position: relative;
  margin-top: 2.8rem;
  width: 10rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: 150ms ease-in-out;
  opacity: 0;
  pointer-events: none;
}
#notif-count * {
  pointer-events: none;
}
#notif-count.show {
  transform: scale(1);
  opacity: 1.0;
  pointer-events: auto;
  cursor: pointer;
}

#notif-count span {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  color: var(--txtCol);
  background: green;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#notif-wrap {
  position: relative;
  padding-right: 2rem;
  width: 100%;
  height: 13rem;
  transform: scale(0);
  transition: 150ms ease-in-out;
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
}

#notif-wrap.show {
  transform: scale(1);
  opacity: 1.0;
  pointer-events: auto;
  cursor: pointer;
}

#notif-list {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

#notif-list li {
  position: relative;
  margin-bottom: 6px;
  background: var(--delBgCol) var(--svgDel) no-repeat calc(100% - 20px) center;
  width: 100%;
  height: 11rem;
  border-radius: 15px;
  cursor: pointer; 
  touch-action: pan-y;
}
#notif-list li:last-child { margin-bottom: 0; }
#notif-list .details {
  position: relative;
  left: 0;
  padding: 10px 15px;
  color: var(--txtCol);
  background-color: green;
  font-size: 1.6rem;
  line-height: 1.4;
  min-height: 100%;
  transition: left 200ms ease-in-out;
}
#notif-list .details.reveal { left: -65px; }