/* Styles for all items in pnl_nav.html & common components such as ms_event.
   Designed to be used for hosting & white-labelling
   Copyright Makesweat 2020 */

@font-face {
  font-family: 'ms_fontello';
  src:  url("fontello26.woff") format('woff');
}

/* Colors */

:root {
  --ms-colour-highlight: rgb(122, 124, 255); /* Highlighted text */
  --ms-colour-background: rgb(255, 255, 255); /* Default background where needed for elements */
  --ms-colour-midgrey: rgb(128, 128, 128); /* Default background where needed for elements */
}

/* HTML & status */

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "ms_fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  width:2em;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-list:before { content: '\e800'; } /* 'î €' */
.icon-calendar:before { content: '\e801'; } /* '' */
.icon-adult:before { content: '\e802'; } /* 'î ‚' */
.icon-group:before { content: '\e803'; } /* 'î ƒ' */
.icon-logout:before { content: '\e804'; } /* 'î „' */
.icon-login:before { content: '\e805'; } /* 'î …' */
.icon-bell:before { content: '\e806'; } /* 'î †' */
.icon-location:before { content: '\e807'; } /* 'î ‡' */
.icon-award:before { content: '\e808'; } /* 'î ˆ' */
.icon-cog:before { content: '\e809'; } /* 'î ‰' */
.icon-left-big:before { content: '\e80a'; } /* 'î Š' */
.icon-camera:before { content: '\e80b'; } /* 'î ‹' */
.icon-ok:before { content: '\e80c'; } /* '' */
.icon-user:before { content: '\e80d'; } /* '' */
.icon-heart:before { content: '\e80e'; } /* 'î Ž' */
.icon-basket:before { content: '\e80f'; } /* '' */
.icon-phone:before { content: '\e810'; } /* '' */
.icon-pause:before { content: '\e811'; } /* 'î ‘' */
.icon-clock:before { content: '\e812'; } /* 'î ’' */
.icon-arrows-cw:before { content: '\e813'; } /* 'î “' */
.icon-edit:before { content: '\e814'; } /* 'î ”' */
.icon-makesweat:before { content: '\e815'; } /* 'î •' */
.icon-right-open:before { content: '\e816'; } /* 'î –' */
.icon-left-open:before { content: '\e817'; } /* 'î —' */
.icon-picture:before { content: '\e818'; } /* 'î ˜' */
.icon-mail:before { content: '\e819'; } /* 'î ™' */
.icon-sun:before { content: '\e81a'; } /* 'î š' */
.icon-sun-filled:before { content: '\e81b'; } /* 'î ›' */
.icon-floppy:before { content: '\e81c'; } /* '' */
.icon-up-open:before { content: '\e81d'; } /* '' */
.icon-down-open:before { content: '\e81e'; } /* 'î ž' */
.icon-wrench:before { content: '\e81f'; } /* 'î Ÿ' */
.icon-eye:before { content: '\e820'; } /* 'î  ' */
.icon-search:before { content: '\f002'; } /* '' */
.icon-cancel:before { content: '\f00d'; } /* '' */
.icon-plus:before { content: '\f067'; } /* '' */
.icon-minus:before { content: '\f068'; } /* '' */
.icon-filter:before { content: '\f0b0'; } /* 'ï‚°' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-columns:before { content: '\f0db'; } /* '' */
.icon-sort:before { content: '\f0dc'; } /* '' */
.icon-comment-empty:before { content: '\f0e5'; } /* '' */
.icon-food:before { content: '\f0f5'; } /* '' */
.icon-doc-text:before { content: '\f0f6'; } /* '' */
.icon-medkit:before { content: '\f0fa'; } /* '' */
.icon-plus-squared:before { content: '\f0fe'; } /* '' */
.icon-angle-double-down:before { content: '\f103'; } /* '' */
.icon-help:before { content: '\f128'; } /* '' */
.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
.icon-ticket:before { content: '\f145'; } /* 'ï……' */
.icon-thumbs-up-alt:before { content: '\f164'; } /* 'ï…¤' */
.icon-graduation-cap:before { content: '\f19d'; } /* '' */
.icon-child:before { content: '\f1ae'; } /* '' */
.icon-sliders:before { content: '\f1de'; } /* '' */
.icon-share:before { content: '\f1e0'; } /* '' */
.icon-cc-visa:before { content: '\f1f0'; } /* '' */
.icon-cc-mastercard:before { content: '\f1f1'; } /* '' */
.icon-cc-amex:before { content: '\f1f3'; } /* '' */
.icon-cc-stripe:before { content: '\f1f5'; } /* '' */
.icon-bell-off-empty:before { content: '\f1f7'; } /* '' */
.icon-user-secret:before { content: '\f21b'; } /* '' */
.icon-user-plus:before { content: '\f234'; } /* '' */
.icon-user-times:before { content: '\f235'; } /* '' */
.icon-sticky-note-o:before { content: '\f24a'; } /* '' */
.icon-shopping-basket:before { content: '\f291'; } /* '' */
.icon-handshake-o:before { content: '\f2b5'; } /* '' */

/* Resetting */

*:focus {
  outline: none;
}

.hideiflive {
  display:none !important;
}


#makesweat_assets .ms_accordion>h3 {
  padding:0.2em 0.4em 0.2em 2em;
  line-height:1.8em;
  border-radius:10px;
  margin:10px 10px 0px 10px;
  vertical-align:top;
  color:rgb(100,100,100);
  background: linear-gradient(0deg,#eee,#fff);
  cursor:pointer;
  transition:border-bottom-left-radius 0.25s, border-bottom-right-radius 0.25s, border 0.25s;
  border:1px solid #aaa;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26);
}
#makesweat_assets .ms_accordion>h3>button {
  line-height:1.7em;
  margin:0px;
  font-size:inherit;  
}
#makesweat_assets .ms_accordion>h3+div {
  overflow-x:hidden;
  overflow-y:hidden;
  margin:0px 10px;  
  border:1px solid #aaa;
  border-width: 0px 1px 1px 1px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background: var(--ms-colour-paper);
  background: initial;
  border: 0;
}

#makesweat_assets .ms_accordion>h3::before {
  content:"\f067";
  margin:0px 10px 0px -15px;
  font-family:"ms_fontello";
}

#makesweat_assets .ms_accordion>h3.active {
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}

#makesweat_assets .ms_accordion>h3.active::before {
  content:"\f068";
}
#makesweat_assets .ms_accordion>h3.disabled { display:none; }
#makesweat_assets .ms_accordion>h3.disabled+div { display:none; }


#makesweat_assets .ms_accordion>h3:hover {
  Dbox-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.26);  
  border:1px solid #888;
}
#makesweat_assets .ms_accordion>.ms_acc_bar {
  display: none;
}

#makesweat_assets .admin  {
  margin-top:10px;
  border-radius:3px;
}

#makesweat_assets p {
  padding:0px;
  margin:10px;
}

#makesweat_assets button {
  border-radius:5px;
  transition:border 0.25s;
  background:white;
  margin:10px;
  font-family: inherit;
  font-size: 1.2em;
  color:var(--ms-colour-highlight);
  line-height:32px;
  height: 32px;
  padding:0px 10px;
  border:1px solid var(--ms-colour-highlight);
  position: relative;
}

#makesweat_assets button:hover, #makesweat_assets button.highlight, #makesweat_assets button.dialogbutton, #makesweat_assets button[type='submit'] {
  background:var(--ms-colour-highlight);
  color:white;
}

#makesweat_assets button[disabled] {
  background: #ddd;
}

@keyframes ms_spinner {
  to {transform: rotate(360deg);}
}

#makesweat_assets .ms_loading:before {
  content: '\e815';
  font-family: ms_fontello;
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  line-height: 20px;
  font-size: 20px;
  color: var(--ms-colour-highlight);
  animation: ms_spinner 1s linear infinite;
}

#makesweat_assets .spin-icon { animation: ms_spinner 1s linear infinite; }


#dialogcardaddr .infogroup {
  display:none;
}

.ms-block-center {
  display: block;
  margin: 10px auto;
}

#makesweat_assets .calendar .ms_selmonth {
  display: flex;
  width: 100%;
  justify-content: center;
}
#makesweat_assets .calendar .ms_selmonth select {
  font-size: 22px;  
  margin: 5px;
  background: #ddd;
  border-radius: 5px;
  color: #222;
  padding:5px 10px;
}
    
#makesweat_assets .calendar .ms_dows, .calendar .ms_week {
  display:flex;
  width: 100%;
  justify-content: center;
}
#makesweat_assets .calendar .ms_dows > div , #makesweat_assets .calendar .ms_week > div {
  flex: 0 1 80px;
  text-align:center;
  line-height: 6vh;
  border-radius: 50%;
  border: 2px solid transparent;
  margin: 0.2em;
  background-color: #ddd;
  color: #999;
  font-size: 1.2em;
  transition: 0.15s;
  cursor: pointer;
}

#makesweat_assets .calendar .ms_dows > div { font-weight: bold; color: #222; }

#makesweat_assets .calendar .ms_week > .ms_day.current { color: #222; }
#makesweat_assets .calendar .ms_week > .ms_day.hasevents { border: 2px solid var(--ms-colour-highlight); font-weight: bold; }
#makesweat_assets .calendar .ms_week > .ms_day.noevents { background-color: #bbb; color: #999; }
#makesweat_assets .calendar .ms_week > .ms_day.today { background-color: #cec; }
#makesweat_assets .calendar .ms_week > .ms_day:hover {
  background-color: var(--ms-colour-highlight);
  color: #555;
}

/* Day */

.ms_eventheaderday {
  color:var(--ms-colour-highlight);
  padding:0.5em 1em 0 1em;
  line-height: 1.28em;
  font-weight: bold;
  font-size: 1.14em;
  border-top: 5px solid var(--ms-colour-highlight);
}
  .ms_eventheaderday.past {
    /* background:rgba(128,128,128,0.1); */
    color:#888;
    border-top: 5px solid rgb(194,194,194);
  }

.daybody {
  border-radius: 0px 0px 5px 5px;  
  padding:10px;
}


/* ms_event */

.ms_event {
  position: relative;
  margin:0px;
  padding:5px 10px 0px 10px;
  overflow:hidden;
  min-height:60px;
  border:1px solid rgba(0,0,0,0);
  border-radius:10px;
  text-align:left;
  transition:0.25s;
  display:grid;
  grid-template-columns: 50% auto;
  min-width:0;
}
  .ms_event:before {
    display: block;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    border-top:1px solid #bbb;
    margin: 0 auto;
    width:90%;
    display:block;
    content: "";
    padding-top:0.5em;
  }
  .ms_dlg_frame .ms_event:before { display:none; }

.ms_event>div {
  display:none;
}
.ms_event .clubbadge {
  display:block;
  position:absolute;
  right:15px;
  top:10px;
  width:4.5em;
  height:4.5em;
  background: no-repeat center center;
  background-size: cover;
  border-radius: 50%;
}
.ms_event.canenroll > .ms_spaces {
  display:block;
  display: block;
  grid-row: 10 / 11;
  grid-column: 2 / 3;
  justify-self: right;
  align-self: center;
  font-size:1.14em;
  color:var(--ms-colour-highlight);
}
  .ms_dlg_frame .ms_event .ms_spaces { display:none; }

.ms_event>.ms_event_title_leaders {
  display:block;
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  font-size:1.14em;
  /* margin-right:80px; */
  overflow:hidden;
  font-weight:bold;
  line-height:1.6em;
}
  .ms_event.onwaitlist .ms_event_title_leaders::after {
    content: " !Waitlist!";
    color: red;
  }

.ms_event>.ms_eventstart {
  display: block;
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  font-size:1.1em;
  font-weight:bold;
  line-height:1.4em;
}
  .ms_event.tz_other>.ms_eventstart { font-style:italic; }

  .ms_event.tz_other > .ms_tz {
    display: block;
    grid-row: 3 / 4;
    grid-column: 2 / 4;  
    font-size:0.9em;
    line-height:1.4em;
    align-self: center;
  }

.ms_event .ms_eventshortdate {
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  margin-left: 7.5em;
  font-size:1.1em;
  font-weight:bold;
  line-height:1.4em;
} 
  .ms-featured .ms_event .ms_eventshortdate {
    display: block;
  }
 
.ms_event>.ms_venue_name {
  display: block;
  grid-row: 4 / 5;
  grid-column: 1 / -1;
  min-width:0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height:1.6em;
  /* min-height:1.6em; */
  font-size:1.1em;
}

.ms_event>.ms_clickmask {
  position: absolute;
  top:10px;
  left:10px;
  right:100px;
  height:1.8em;
  display:block;
}

.ms_event .ms_event_bookingstatus {
  position:absolute;
  top: 15px;
  right: 3px;
  font-size: 14px;
  padding: 2px 5px;
  background: var( --ms-colour-highlight );
  color: white;
  border-radius: 5px;
}
  .ms_event.enrolled .ms_event_bookingstatus {
    display: block;
  }

  .ms_event.enrolled:not(.haspass) >.ms_event_bookingstatus::before {
    content: "Reserved";
  }
  .ms_event.enrolled.haspass >.ms_event_bookingstatus::before {
    content: "Enrolled";
  }

.ms_event .ms_desc_plain_150 {
  display: block;
  grid-row: 6 / 7;
  grid-column: 1 / -1;
  margin-top:5px;
  margin-bottom:5px;
}
  .ms_event.desc-overflows .ms_desc_plain_150::after {
    content: "More >>>";
    text-decoration: underline;
    cursor: pointer;
    margin-left: 1ch;
  }

.ms_event.expand .ms_desc_plain_150 {
  display: none;
}

.ms_event .ms_eventdescription {
  display: none;
  overflow: hidden;
  max-height: 0;
  grid-row: 6 / 7;
  grid-column: 1 / -1;
  transition: 1s;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0);
}
.ms_event.expand .ms_eventdescription {
  display: block;
  max-height: 2000px;
  padding: 10px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26);
  margin: 10px 0;
}

  .ms_event.expand .ms_eventdescription::after {
    content: " <<< Less";
    text-decoration: underline;
    cursor: pointer;
    margin-left: 1ch;
  }

.ms_event .ms_enrolled_info {
  display: block;
  grid-row: 8 / 8;
  grid-column: 1 / -1;
  margin-bottom:5px;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 5px 10px;
  word-break: break-word;
  /* border-radius: 10px; */
}
  .ms_dlg_frame .ms_enrolled_info {
      display: none;
  }

.ms_event.has-image .ms_event_image {
  display: block;
  width: 150px;
  height: 150px;
  border-radius:20px;
  grid-column: 4 / 5;
  grid-row: 2 / 7;
  overflow: hidden;
  margin: 10px;
}

.ms_event.has-image .ms_event_image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ms_event .ms_enrolled_info:before {
  content: "Enrolled information";
  display: block;
  font-style: italic;
  font-size: 0.9em;
  line-height: 2em;
  opacity: 0.5;
}
.ms_event .ms_enrolled_info .join-with-zoom a {
  margin: 5px auto;
  background: #0e71eb;
  border-radius: 10px;
  width: 150px;
  padding: 8px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white !important;
  text-align: center;
  text-decoration: none;
  display: block;
}

.ms_event>.ms_attendees {
  grid-row: 5 / 6;
  grid-column: 1 / -1;
  display: block;
}

.ms_event span.ms_location {
  margin-left: 0.5ch;
}

.ms_event:not(.hidepass)>.statusdiv {
  grid-row: 10 / 11;
  grid-column: 1 / 2;
  max-width: calc( 100% - 10px );
  align-self: center;
  text-align: center;
  position:relative;
  border:1px solid rgba(0,0,0,0);
  width:10em;
  border-radius:5px;
  line-height:32px;
  height:32px;
  margin:5px;
  cursor:pointer;
}
  .ms_event .statusdiv:before { /* Set up default symbol handling */
    font-family:ms_fontello_msassets;
    font-size:1.2em;
    text-align:center;
    display:inline-block;
  }
 
  /* Not currently enrolled and user can enroll for event */
  .ms_event.canenroll .statusdiv {   display:block; background-color:var(--ms-colour-highlight); color:white; }
  /* .ms_event.canenroll .statusdiv:before { content: '\f234'; } */
  .ms_event.canenroll .statusdiv:before { content: 'Book'; font-family: inherit; }
  .ms_event.canenroll .statusdiv:hover { background-color:var(--ms-colour-highlight); color:white; }

  /* Enroll onto waitlist */
  .ms_event.canenroll.joinwaitlist .statusdiv {   display:block; background-color:rgba(255,128,64,1); color:white; }
  .ms_event.canenroll.joinwaitlist .statusdiv:before { content: 'Join'; font-family:inherit; }
  .ms_event.canenroll.joinwaitlist .statusdiv:hover { background-color:rgba(255,128,64,1); color:white; }  

  /* No space */
  .ms_event.nospace .statusdiv { display:block; color:rgba(255,128,128,1); border-color:rgba(255,128,128,1); }
  /* .ms_event.nospace .statusdiv:before { content: '\f235'; } */
  .ms_event.nospace .statusdiv:before { content: 'Full'; font-family:inherit; }
  .ms_event.nospace .statusdiv:hover { background-color:rgb(255,64,64); color:white;  }  
  
  /* Enrolled */
  /* .ms_event.enrolled .statusdiv:before { content: '\e80d';} */
  .ms_event.enrolled .statusdiv:before { content: 'Booked. Cancel?'; font-family:inherit; }
  .ms_event.enrolled.onwaitlist .statusdiv:before { content: 'Waitlist. Cancel?'; font-family:inherit; }
  
  /* Enrolled with pass */
  .ms_event.enrolled.haspass .statusdiv { display:block; background-color:var(--ms-colour-highlight); color:white; }
  .ms_event.enrolled.onwaitlist .statusdiv { border-color: white; border-style: dashed; }
  .ms_event.enrolled.haspass .statusdiv:hover:before { content: 'Cancel...';}


  /* Enrolled with no pass */
  .ms_event.enrolled.nopass .statusdiv { display:block; background-color:rgba(255,128,64,1); color:white; }
  .ms_event.enrolled.nopass .statusdiv:before { content: 'Please pay'; font-family:inherit; }
  .ms_event.enrolled.nopass .statusdiv:hover { background-color:var(--ms-colour-highlight); }
  .ms_event.enrolled.nopass .statusdiv:hover:before { content: 'Pay...';}
      
  /* Leader */
  .ms_event.leader .statusdiv { display:block; background-color:rgb(212,144,187); color:white; }
  .ms_event.leader .statusdiv:before { content: 'Leader';}

  .topevent .ms_event > .statusdiv { display: none !important; }

/*
.ms_event.desc-overflows .ms_toggleexpand {
  display: block;
  grid-row: 10 / 11;
  grid-column: 2 / 3;
  justify-self: center;
  align-self: center;
}
  .ms_event.desc-overflows .ms_toggleexpand:before {
    content: "More...";
    text-decoration: underline;
    cursor:pointer;
  }
*/
/*
  .topevent > .ms_event .2 { display:none; }  
  #singleeventheader > .ms_event .ms_toggleexpand { display:none; }  
*/

.ms_event .ms_userpic {
  height:50px;
  width:50px;
  border-radius:50%;
  display:inline-block;
  margin:5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: content-box;
}
  .ms_event .ms_userpic.isleader {
    border: 3px solid var(--ms-colour-highlight);
    margin: 2px;
  }

  .ms_event.highlight { background-color: rgb(244,111,46); }
  .ms_event.flash { background-color: var(--ms-colour-highlight); }
  
  .hideattendees .ms_event>.ms_attendees {
    display:none;
  }
  .ms_event>.ms_attendees>.ms_spaces {
    height:60px;
    padding:0px 5px;
    border:0px solid #aaa;
    vertical-align:bottom;
    display: inline-flex;
    align-items: center;
    line-height:25px;
    text-align:center;
    color: var( --ms-colour-highlight );
    font-weight:bold;
    line-height:1.2em;
  }

.ms_event .ms-attendance {
  display: block;
  grid-row: 10 / 11;
  grid-column: 2 / -1;
  justify-self: left;
  align-self: center;
  font-size: 0.9em;
  color: var(--ms-colour-highlight);
}


/* Quick date & Filter bar */

.ms-filter-selects {
  display: flex;
  justify-content: space-around;
}
.ms-filter-selects > select {
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
  border: 3px solid var( --ms-colour-highlight );
  font-size: inherit;
  font-family: inherit;
  font-weight: bold;
  color: var(--ms-colour-highlight);
}

.ms_quickdate {
  display:block;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space:nowrap;
}
.ms_quickdate > div  { max-width:200px; }
.ms_quickdate > div > div, .ms-filterbar .ms-filterbar-icons > div {
  display: inline-block;
  width: 4em;
  border: 2px solid var(--ms-colour-highlight);
  border-width: 1px 0px 1px 1px;
  padding: 5px 0px;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  color: var(--ms-text-def);
  vertical-align: top;
  height: 2.86em;
  background: var(--ms-text-background);
  transition: 0.5s;
  box-sizing: content-box;
}
.ms_quickdate > div > div > div:first-child {
  font-weight: bold;
  line-height: 1.5em;
  color: var( --ms-colour-highlight );
}
.ms_quickdate > div > div > div:first-child {
  font-weight: bold;
  line-height: 1.5em;
  color: var( --ms-colour-highlight );
}
.ms_quickdate > div > div:last-child {
  border-right-width: 1px;
  margin-right: 150px;
}

.ms_quickdate > div > div.today { background: rgba( var( --ms-colour-highlight ) , 0.9 ); }
/* .ms_quickdate > div > div.today { background: var( --ms-colour-highlight ); } */

  .ms_quickdate > div > div:hover, .ms_quickdate > div > div.active  {
    background-color: var(--ms-colour-highlight);
    color: #555;
  }
  .ms_quickdate > div > div:hover > div:first-child , .ms_quickdate > div > div.active > div:first-child { color:white; }


.ms_quickdate > div > div > h3 {
  font-size: 1.14em;
  font-weight: bold;
  margin: 0px;
  color: var(--ms-colour-highlight);
}

.ms_quickdate .ms_dow_sat h3, .ms_quickdate .ms_dow_sun h3 {
  color: var( --ms-colour-highlight );
}

.ms-filterbar { 
  position: relative; 
  min-height: 3em; 
  margin: 10px 10px;
  background: white;
  background: var( --ms-colour-background );
}

  .ms-filterbar .ms-filterbar-icons {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.26);
  }

  .ms-filterbar .ms-filterbar-icons > div {
    line-height: 2em;
    width:3.5em;
    border: 1px solid #888;
    display: flex;    
    align-items: center;
    justify-content: center;
    background-color: var( --ms-colour-background );
  }
    .ms-filterbar .ms-filterbar-icons > div:before {
      font-size: 1.4em;
    }
    .ms-filterbar .ms-filterbar-icons > div.disabled {
      border: 1px solid #bbb;
      color: #bbb;
    }
    .ms-filterbar .ms-filterbar-icons > div.active {
      background: var(--ms-colour-highlight);
      color: white;
    }


.ms_titlefilter {
  text-align: center;
  padding-bottom: 8px;
}
.ms_titlefilter select {
  text-align-last: center;
  font-size: 16px;
  padding: 5px;
  max-width: calc( 100vw - 20px );
  color: #999;
  border: 1px solid #999;
  border-radius: 5px;
  border: 2px solid var(--ms-colour-highlight);
}



/* Products */

.ms_product {
  width:200px;
  height:260px;
  margin:10px;
  padding:0px;
  display:inline-grid;
  grid-template-rows: 200px auto auto auto;
  grid-template-columns: 50% 50%;
  position:relative;
  cursor:pointer;
  background-color:white;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.26);
  border-radius:5px;
  overflow: hidden;
}
  .ms_basket .ms_product {
    cursor:initial;
  }
  #dialogbuypass .ms_product {
    height:60px;
    margin:5px;
    grid-template-rows: auto auto;
    grid-template-columns: 60px auto;
  }  

.ms_product .title {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  text-align:left;
  color:black;
  font-size:0.9em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 5px;
}
  .ms-product-mini .ms_product .title {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
    padding-top: 8px;
  }

.ms_product .variation {
  position:absolute;
  bottom:2px;
  left:5px;
  right:5px;
  text-align:left;
  color:black;
  font-size:0.9em;
  overflow:hidden;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
  #dialogbuypass .ms_product .variation {
    right:55px;
  }

.ms_product .description {
  display:none;
}
.ms_product .stock {
  position:absolute;
  grid-row: 3 / 4;
  grid-column: 2 / -1;
  justify-self: right;
  color:black;
  font-size:0.9em;
  margin: 0 5px;
}
  #dialogbuypass .ms_product .stock {
    display:none;
  }

.ms_product .cost {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  text-align:left;
  color:black;
  font-weight:bold;
  margin: 0 5px;
}
  .ms-product-mini .ms_product .cost {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
  }

.ms_product .image {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  margin: 5px;
  background-size:cover;
  background-position:center center;
  background-color:white;
  background-image: url( "");
}
  .ms-product-mini .ms_product .image {
    width:50px;
    height:50px;
    grid-row: 1 / 3;
  }
  .ms_product.notlisted .image {
    filter: grayscale(100%) brightness(300%) contrast(20%);
    color:red;
  }

#admin_shop_todo_list .tradeitem {
  height:50px;
}

.ms_product .ms_item_delete {
  display:none;
  background-image:url("");
  background-size:cover;
  background-position:center center;
  width:32px;
  height:32px;
  cursor:pointer;
  position:absolute;
  right:10px;
  top:10px;
}
  .ms_basket .ms_product .ms_item_delete { display:block; }
    
    
.ms_product .clubbadge {
  display:none;
  position:absolute;
  width:32px;
  height:32px;
  left:10px;
  top:10px;
}
  .ms_product .clubbadge:hover {
    box-shadow:none;
    cursor:initial;
  }
  .ms_basket .ms_product .clubbadge { display:block; }
  
  
.ms_product input {
  display:none;
  position:absolute;
  right:10px;
  bottom:75px;
  width:40px;
  border:3px solid #ddd;
  border-radius:2px;
}
  .ms_basket .ms_product input { display:block; }

.ms_product .quantity {
  display:none;
  position:absolute;
  font-weight:bold;  
}
  .ms-product-mini .ms_product .quantity {
    display:block;
    grid-row: 2 / 3;
    grid-column: 3 / 4;
    justify-self: right;
    padding-right: 10px;
  }
  
#ms_dsp_hscroll {
  overflow-x:scroll;
  overflow-y:hidden;
  border:1px solid #eee;
  height:500px;
}
#ms_dsp_hscroll>div {
  white-space:nowrap;
}
#ms_dsp_hscroll>div>div {
  display:inline-block;
  height: 320px;
  width: 320px;
  margin: 10px;
  background: no-repeat center center;
  background-size:cover;  
}

#dialogshowproduct .description {
  height:480px;
  margin: 10px;
  overflow-y: auto;
}
#dialogshowproduct form {
}


/* Product category filter */

.ms-shop-categories-1 , .ms-shop-categories-2 {
  display: block;
  height: 40px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

.ms-shop-categories-1 > div , .ms-shop-categories-2 > div {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  white-space: nowrap;
  margin: 0 5px;
  padding: 0 10px;
  font-weight: bold;
  cursor: pointer;
}

.ms-shop-categories-1 > div.active , .ms-shop-categories-2 > div.active {
  background: var( --ms-colour-highlight );
  color: var( --ms-colour-background );
  border-radius: 5px;
}


/* Basket */

.topevent > .ms_event .ms-attendance { display:none; }  
.topevent > .ms_event .ms_desc_plain_150 { display:none; }  

.ms_dlg_frame .ms_desc_plain_150, .ms_dlg_frame .ms_attendees {
  display:none;
}


/* Pass Type */

.passtypegroup {
  padding: 3px;
  border: 1px solid #aaa;
  border-radius: 7.5px;
  margin: 7.5px 3px;
  background: rgba( 255 , 255 , 255 , 0.5 );
}
  .passtypegroup > p {
    margin: 5px;
    text-align: center;
    font-size: 1.2em;
    font-style: italic;
  }

.passtype {
  position: relative;
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-template-rows: auto min-content;
  padding:4px 4px 4px 10px;
  margin:10px 0;
  overflow:hidden;
  min-height:3em;
  font-size:100%;
  background-color:rgba(255,255,255,0.5);
  color:#444;
  max-height:9999px;
  transition:background-color 0.25s, box-shadow 0.25s, border 0.25s;
  border-radius:5px;
  border:1px solid #aaa;
}
  .passtype > div { display: none; }

  .passtype:hover {
    border:1px solid #444;
    background-color:#fdfdfd;
  }
  .warning .passtype, .warning.passtype {
    box-shadow: 0px 0px 0px 3px rgb(244,46,46);
  }
  .passtype.passwarn {
    background-color:#ffa;
  }
  .passtype.passok {
    background-color:#cfc;
  }
  .passtype.passexpired .passtypetitle::after {
    content: " (Expired)";
    color:#f44;
  }
  .passtype.passusedup .passtypetitle::after {
    content: " (Used up)";
    color:#f44;
  }
  .passtype.hascode {
    background-color:#ffff99;
  }
  .hiderecurcancel .recurcancelaction {
    display:none;
  }
  .passtype .pass-showlinked {
    display: block;
    text-align: right;
    grid-column: 1 / 4;
  }
  .passtype .pass-linkedevents {
    display: block;
    text-align: left;
    grid-column: 1 / 4;
    margin: 10px;
  }
  .passtype .pass-linkedevents > div {
    margin: 10px;
  }


.passtype > .passtypecost {
  display:block;
  grid-column: 1 / 2;
  grid-row: 1 / 2;  
  font-size:1.2em;
  align-self: center;
  min-width: 40px;
  margin: 0 10px 0 0;
}

.passtype > .passtypetitle {
  display: block;
  grid-column: 2 / 3;
  grid-row: 1 / 2;  
  font-size:1.2em;
  align-self: center;
}
.passtype > .passtypenotes {
  display: block;
  grid-column: 1 / 3;
  grid-row: 2 / 3; 
  padding:0px;
  font-size:0.9em;
  margin:2px 0px;
}
.passtype > .ms_clickmask {
  display: block;
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  height: 34px;
  line-height: 34px;
  margin: 10px;
  border-radius: 5px;
  padding: 0 15px;
  text-align: center;
  align-self: center;
  background-color: var(--ms-colour-highlight);
  color: white;
  white-space: nowrap;
  cursor: pointer;
}
  .passtype.ispass > .ms_clickmask::before { content: 'Enroll' }
  .passtype.ispasstype > .ms_clickmask::before { content: 'Buy' }
  .passtype.ispasstype.isfree > .ms_clickmask::before { content: 'Enroll' }
  .ms-passes-widget .passtype.ispass .ms_clickmask::before { content: 'Buy another' }

.hidepasslink .statusdiv, .hidepasslink .ms_clickmask {
  display:none;
}
.hidepasslink .passtypeclickdiv {
  margin:0px !important;
}

.passtypecheckbought {
  background-image:url("");
}
.passtypechecklink {
  cursor: pointer;
}
.passtype > .passused {
  display: block;
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  text-align: center;
  min-width: 100px;
}
  .hidepasslink .passtype > .passused { grid-row: 1 / 3; }
  .passused:before { content: "Used ";}
  
.passtype > .passpair {
  display: block; 
  grid-column: 1 / 4;
  /* grid-row: 4 / 5; */
}  
.passkey,.passvalue {
  display:inline-block;
  font-size:0.9em;
}
.passkey {
  padding-right:1em;
  font-weight:bold;
  min-width: 65px;
}
.passtypenotes + .passpair {

  border-top:1px solid #888;
  padding-top:5px;
}
.hidepasstypenotes .passtypenotes {
  display:none;
}

.passtype.hasservices.ispasstype .ms-passtype-services {
  display: block;
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}
.ms-passtype-service {
  display: grid;
  grid-template-columns: 44px 44px 55px auto;
  grid-template-rows: auto;
}
.ms-passtype-service-title {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  align-self: center;
}
.ms-passtype-service-quantity {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  width: 50px;
  font-size: 24px;
  font-weight: bold;
  align-self: center;
  text-align: center;
}
.ms-passtype-service-minus, .ms-passtype-service-plus {
  width: 34px;
  height: 34px;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin: 5px;
  box-sizing: border-box;
  color: white;
  background: var( --ms-colour-highlight );
  border-radius: 5px;
  cursor: pointer;
}
  .ms-passtype-service-minus:before , .ms-passtype-service-plus:before {
    line-height: 36px;
    width: 36px;
  }
.ms-passtype-service-plus {
  grid-column: 2 / 3;

}


/* Stripe / Payment */


/* User */

.userlist {
  display: block;
  text-align: center;
}

.user {
  display: inline-grid;
  grid-template-columns: 70px auto 70px;
  grid-template-rows: 70px auto 30px 30px;
  overflow:hidden;
  position:relative;
  max-height:300px;
  height:48vw;
  max-width:250px;
  width: 40%;
  border:0px;
  border-radius:5px;
  margin:10px;
  vertical-align:middle;
  text-align:center;
  cursor:pointer;
  background-color:white;
  box-shadow:0px 0px 10px #aaa;  
}
  .profileheader .user {
    height:90vw;
    width:90vw;
    max-width:500px;
  }
  .smalluser .user {
    height:150px;
    max-width:initial;
  }
  .user.passwarn {
    background-color:#ffa;
  }
  .user.passok {
    background-color:#cfc;
  }
  .user.passexpired {
    background-color:#fbb;
  }

  
.user .ms_userpic {
  /* position:absolute; */
  /* top:0px; */
  /* left:0px; */
  /* right:0px; */
  /* bottom:50px; */
    grid-row: 1 / 3;
  grid-column: 1 / -1;

  margin:0px;
  /* width:auto; */
  /* height:auto; */
  border-radius:0px;
  border:0px;
  transition: top 0.25s, left 0.25s, right 0.25s;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  color: #888;
}
.inevent .user:hover .ms_userpic:hover {
  transition: 0.25s;
  top:-10px;
  left:-10px;
  right:-10px;
}

  .user:hover .ms_userpic:hover {
  }
  .isadmin.user {
    box-shadow: 0px 0px 0px 3px rgb(204, 204, 0);
  }
  /* .user.isleader .ms_userpic, .isleader.ms_userpic {
    /* box-shadow: 0px 0px 0px 3px var( --ms-colour-highlight ); */
    /* border-color: 2px solid var( --ms-colour-highlight ); */
  } */
  .user.onwaitlist .ms_userpic {
    filter: grayscale(100%);
    box-shadow: 0px 0px 0px 3px rgb(204, 204, 204);
  }
  
  .user .kudosdiv {
    display: none;
    width:auto;
  }
  .user.gotkudos  .kudosdiv, .user.gavekudos .kudosdiv {
    /* display:block; */
    width:50px;
    height:50px;
    top:0px;
    right:0px;
    background-repeat:no-repeat ;
    background-position:center;
    background-size:cover;    
    background-image:url("");
    -webkit-transition : -webkit-filter 250ms linear;
    border:20px solid rgba(0,0,0,0);
  }
  .user.gavekudos:not(.gotkudos) .kudosdiv {
    background-image:url("");
  }


    
  .givekudos {
    display:none;
  }

  .user .likediv {
    width:40px;
    height:40px;
    border:6px solid white;
    top:10px;
    left:10px;
    border-radius:23px;
    content:"h";
  }
  
.user .username {
  /* position:absolute; */
  text-align:center;
  font-weight: bold;
  /* bottom:5px; */
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  /* left:10px; */
  /* right:10px; */
  height:30px;
  line-height: 30px;
  overflow:hidden;
  color: var( --ms-colour-midgrey );
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
  .user .username .Nickname {
    flex:0 1 100%;
    text-align:left;
    order:1;
  }

/* User - Normal list */

.user .seendiv, .user .haspassdiv, .user .leaderdiv {
  grid-row: 1 / 2;
  grid-column: 1 /2;
  border-radius:50%;
  height:50px;
  width:60px;
  font-size: 30px;
  line-height: 50px;
  padding: 10px 5px;
  color: var( --ms-colour-highlight);
  text-shadow:
		-1px -1px 0 #aaa,
		1px -1px 0 #aaa,
		-1px 1px 0 #aaa,
		1px 1px 0 #aaa;
  transition:background-color 0.15s, color 0.15s;
  display:none;
}
  .user .haspassdiv { grid-column: -2 / -1; }
  .user .leaderdiv { grid-column: -3 / -2; }

  .user.seen .seendiv { display:block; }
  .user.haspass .haspassdiv { display:block; }
  .user.isleader .isleader { display:block; }

/* User - Simple List */

.usersimplelist {
  display: block;
  text-align: center;
}

.usersimplelist .user {
  grid-template-columns: 50px auto 40px 40px 40px;
  grid-template-rows: 25px 25px;
  width: calc( 49% - 10px );
  height:auto;
  min-height:46px;
  border-radius: 0px;
  border:0px;
  padding:0px;
  margin:5px;
}
.usersimplelist .ms_userpic {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  width:50px;
  height:50px;
  border-radius:0px;
  font-size: 20px;
  border: 0;
  box-sizing: content-box;
}
.usersimplelist .username {
  text-align:left;
  padding-left: 0.5ch;
  font-size: 16px;
  line-height: 25px;
  height: 25px;
  grid-column: 2 / -1;
  grid-row: 1 / 2;
}
.usersimplelist .statusdiv {
  display:none;
}
.usersimplelist .seendiv, .usersimplelist .leaderdiv, .usersimplelist .haspassdiv {
  width:40px;
  height:25px;
  font-size: 20px;
  line-height: 25px;
  grid-row: 2 / 3;
  padding: 0;
}

  .usersimplelist .seen .seendiv {
    grid-column: -2 / -1;
    display:block;
  }
  .usersimplelist.seenhide .seendiv  {
    display:none;
  }
  .usersimplelist .haspass .haspassdiv {
    grid-column: -3 / -2;
    display:block;
  }
  .usersimplelist .isleader .leaderdiv {
    grid-column: -4 / -3;
    display:block;
  }

.usersimplelist.admin .enrolled.user {
  box-shadow: 0px 0px 0px 2px rgb(255,165,0);
}
.usersimplelist.admin .haspass.user {
  box-shadow: 0px 0px 0px 3px rgb(0,255,0);
}
.usersimplelist.admin .bookedin.user {
  box-shadow: 0px 0px 0px 3px rgb(128,128,0);
}
.usersimplelist.admin .isleader.user {
  box-shadow: 0px 0px 0px 3px rgb(255,0,255);
}

/* User Filter */

.userfilter select {
  width:150px;
}

.usertopfilter {
  margin-top:-10px;
  padding:0px;
  color:rgba(246,146,82,1);
  border-bottom:1px solid black;
  background:rgb(237, 237, 237);
}

.usertopfilter button {
  width:48px;
  height:48px;
  border:1px solid #888;
  color:white;
  font-size:0.9em;
  font-weight:bold;
  border-radius:5px;
  padding:0px;
  margin:3px;
  background-color:rgba(246,146,82,1);
  vertical-align:middle;
}
.usertopfilter button.active {
  box-shadow: 0px 0px 5px 5px rgba(246,146,82,1);
}
.usertopfilter h3 {
  margin:5px;
}
.usertopfilter p {
  margin:0px;
  padding:3px;
}



/* Dialog */

#makesweat_assets > #dialogshowmessage {
  display: block;
  background-color: white; 
  position:fixed;
  z-index:2010;
  width: 100vw;
  border-top:1px solid var( --ms-colour-highlight );
  color: grey;
  transition: 1s;
  max-width: min( 400px , 90vw );
  top: 50vh;
  transform:translateX(-50%) translateY( -50%);
  font-size: 2em;
  text-align: center;
  border: 5px solid var( --ms-colour-highlight );
  border-radius: 25px;
  left: -50vw;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.26);
  padding: 30px 15px;
}
#makesweat_assets > #dialogshowmessage.onscreen {
  left: 50vw;
}
#makesweat_assets > #dialogshowmessage > button {
  padding: 5px 20px;
  color: white;
  background: var( --ms-colour-highlight );
  height: auto;
  margin-top: 20px;
}

#makesweat_assets > #ms_dlgmask {
  display:none;
  z-index:2001;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:rgba(128,128,128,0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition:opacity 0.25s, backdrop-filter 0.5s;
  opacity: 0;
}
  #makesweat_assets > #ms_dlgmask.active {
    opacity: 1;
  }

#makesweat_assets > #ms_savemask, #pageloadingmask {
  z-index:2003;
  position:fixed;
  display: none;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:rgba(128,128,128,0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition:opacity 0.5s, backdrop-filter 0.5s;
}
#makesweat_assets > #ms_savemask.active, #pageloadingmask.active {
  display: block;
}

#makesweat_assets > #ms_savemask:before , #pageloadingmask:before {
  content: '\e815';
  font-family: ms_fontello;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  line-height: 100px;
  font-size: 100px;
  color: rgba(192,192,192,0.8);
  animation: ms_spinner 1s linear infinite;
}

#makesweat_assets  > div {
  /* display:none; */
  box-sizing:border-box;  
}

.ms_dlg_frame {
  z-index: 2002;
  position: fixed;
  /* display: none; */
  /* grid-template-rows: min-content auto min-content; */
  flex-direction: column;
  left: -60vw;
  top: 25px;
  min-height: 400px;
  width: 75vw;
  max-width: 800px;
  max-height: calc( 100vh - 50px );
  margin: 0px;
  transform: translateX(-50%);
  background-color: rgba(255,255,255,0.9);
  padding: 0px;
  overflow: hidden;
  box-shadow: 0px 0px 25px #444;
  transition: 0.5s;
  background: rgba(255,255,255,0.9) url("mslogo.svg") no-repeat -50px -100px;
}
  .ms_dlg_frame.instant { transition: 0s; }
  .ms_dlg_frame.active, #makesweat_assets .ms_dlg_frame.active {
    display: flex;
    left: 50vw;
  }

.ms_dlg_header {
  top:0px;
  height:42px;
  flex: 0 0 42px;
  padding:0px;
  background: var( --ms-colour-highlight );
  color:white;
  font-family:OpenSans,sans-serif;
  border-bottom:1px solid rgb(153,153,153);
  display: grid;
  grid-template-columns: min-content auto min-content min-content ;
}
.ms_dlg_body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 357px;
  /* max-height: calc( 100vh - 93px ); */
}


.ms_dlg_close, .ms_dlg_header > .ms_dlg_help {
  /* right:0px; */
  align-self: end;
  line-height:42px;
  width:42px;
  cursor: pointer;
  /* float:right; */
  transition: background-color 0.15s;
}
  .ms_dlg_close { grid-column: 4 / 5; }
  .ms_dlg_header > .ms_dlg_help { grid-column: 3 / 4; }

  .ms_dlg_close::before {
      width: 42px;
      content: '\f00d';
      font-family: 'ms_fontello';
      text-align: center;
      display: inline-block;
  }
  .ms_dlg_close:hover { background-color:rgb(232,17,35); color:white; }

  .ms_dlg_frame > .ms_dlg_header > .ms_dlg_help {
    background-image:url("help_32_bw.png");
    right:50px;
  }


.ms_dlg_header > h3 {
  font-weight:normal;
  margin:0px;
  line-height:42px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  overflow:hidden;
  color:white;  
  padding-left: 1ch;
}
.ms_dlg_frame .ms_dlg_body .scrollinbody {
  max-height:70vh;
  min-height:300px;
  overflow-y:scroll;
}
.ms_dlg_frame .ms_dlg_error {
  text-align:center;
  font-size:20px;
  color:rgb(244,111,46);
  margin:20px 0px;
}
.ms_dlg_frame .dialogbutton, #makesweat_assets .ms_dlg_frame .dialogbutton {
  width:90%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Minitab */
.ms_dlg_frame .minitabs {
  display:block;
  width:100%;
}
.ms_dlg_frame .minitabs div {
  margin-top:5px;
  display:inline-block;
  padding:5px 15px 5px 15px;
  cursor:pointer;
  background-color:rgba(0,0,0,0.1);
  border-radius:10px 10px 0px 0px;
  border:1px solid rgba(0,0,0,0);
  border-width:1px 1px 0px 1px;
}
.ms_dlg_frame .minitabs div:first-child {
  margin-left:10px;  
}
.ms_dlg_frame .minitabs div.active {
  background-color:rgba(255,255,255,0);
  border-color: #ccc;
}
.ms_dlg_frame .minitabs div.disabled {
  cursor:initial;
  color:rgb(128,128,128);
}

/* End Minitab */

.ms_dlg_frame.leftmenu {
  top: 0px;
  left: 0px;
  margin:0px;
  width:0px;
  background-color: rgba(73,73,81,1);
  min-height:0px;
  bottom: 0px;
  transition: width 0.25s;
  overflow: hidden;
}
  .ms_dlg_frame.leftmenu a { width: 300px; }


.ms_dlg_frame.leftmenu a:hover {
  border-bottom:4px solid rgb(244,111,46);
}

.ms_dlg_frame #ms_dlg_helpbutton {
  position:fixed;
  right:1px;
  bottom:1px;
  width:100px;
  height:30px;
  line-height:30px;
  border:1px solid var( --ms-colour-highlight );
  background:rgba( var( --ms-colour-highlight) , 0.5 );
  cursor:pointer;
  text-align:center;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  color:var( --ms-colour-highlight );
  font-size:14px;
  font-weight:bold;
  z-index:1001;
}
.ms_dlg_frame #ms_dlg_helpbutton:hover {
  background: var( --ms-colour-highlight );
  color:white;
}

.ms_dlg_frame #dialogbuypasstotal {
  text-align:center;
  font-size:1.6em;
  width:200px;
  margin: 0px auto;
}

.ms_dlg_frame #dialogclosebutton, .ms_dlg_frame .dialoghelpbutton  {
  background-image:url("");
  float:right;
  height:32px;
  width:32px;
  margin:3px 0px 0px 20px;
  padding:0px;
  vertical-align:middle;
  text-align:center;
  cursor: pointer;
}

.ms_dlg_frame.nobody {
  background:none;
  box-shadow:initial;
  position:fixed;  
}
.ms_dlg_frame#dialogselect ul {
  list-style-type: none;
  padding:0px;
  margin-bottom:20px;
}
.ms_dlg_frame#dialogselect li {
  height:50px;
  line-height:50px;
  border-bottom:1px solid #ddd;
  width:auto;
  padding:0px 5px;
  margin: 0px 10px;
  text-align:center;
  background-color:#e8e8e8;
  font-weight:bold;
  font-size:1.2em;
  color:#888;
  cursor:pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms_dlg_frame#dialogselect li:not(.popslinfo):hover {
  background:rgba(244,222,200);
}

.ms_dlg_frame#dialogselect li:first-child{
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}
.ms_dlg_frame#dialogselect li:last-child{
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
}
.ms_dlg_frame#dialogselect .popslinfo {
  height:auto;
  min-height:50px;
  background-color:white;
  border:1px solid #4444;
  line-height:40px;
  cursor:auto;
}
.ms_dlg_frame#dialogselect li.popslinfo>div {
  font-weight:normal;
  font-size:0.9em;
  Dtext-align:left;
  padding-bottom:10px;
  line-height:1.2em;
}


/* Specific dialogs */

#dialogchoosepass .passtypeclickdiv, .passislink .passtypeclickdiv {
  margin:0px;
  cursor:pointer;
}
#dialogchoosepass .passtypecheck {
  display:none;
}

.ms_dlg_frame .ms_event>.ms_event_title { right:100px; }
.ms_dlg_frame .ms_event { min-height:50px; }

.ms_dlg_frame#dialogsupport #quickhelptitle {
  font-size: 20px;
  text-align: center;
}
.ms_dlg_frame#dialogsupport #quickhelpbody {
  font-size: 16px;
}


/* Also book */
.dlg-alsobook-list .ms_event {
  border: 2px solid #ddd;
  margin: 10px;
  padding: 5px 5px 5px 60px;
  grid-template-columns: 100px auto 0;
}

.dlg-alsobook-list .ms_event_title_leaders {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0;
}

.dlg-alsobook-list .ms_event.enrolled >.ms_event_bookingstatus {
  display: block;
  top: 5px;
}


.dlg-alsobook-list .ms_event .ms_tz { display: none; }

.dlg-alsobook-list .ms_event .ms_event_startdate {
  display: block;
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  font-size: 1.1em;
  font-weight: bold;
  padding-left: 1ch;
  align-self: center;
}
.dlg-alsobook-list .ms_event > a { display: none; }

.dlg-alsobook-list .ms_event .ms_club_at_venue { display: none; }
  
.dlg-alsobook-list .ms_event.selected {
  border-color: var( --ms-colour-highlight );
}
.dlg-alsobook-list .ms_event:not(.haspass) > .icon-ok {
  opacity: 0;
  transform: rotate( 180deg );
  transition: 0.5s;
  display: block;
  position: absolute;
  font-size: 2em;
  top: 10px;
  left: 0;
  color: var( --ms-colour-highlight );
}
.dlg-alsobook-list .ms_event.selected > .icon-ok {
  opacity: 1;
  transform: rotate( 360deg );
}


/* Logged in / out items */

body:not(.ms_loggedin) .loggedin { display:none !important; }
body.ms_loggedin .loggedout { display:none !important; }


/* YesNo control */

.ms_yesno {
  display: flex;
  box-shadow: 0 0 0 1px #999;
  border-radius: 11px;
  width: fit-content;
  overflow: hidden;
  margin: 6px 1px 5px 1px;  
}

.ms_yesno > div {
  display: inline-block;
  padding: 2px 15px 0px 15px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: linear-gradient(#cfcfcf, #f5f5f5);
  cursor: pointer;
  transition: 0.5s;
  font-size: 0.9em;
  color: #aaa;
}
  .ms_yesno.ms-yesno-larger > div {
    font-size: 1em;
    height: 32px;
    line-height: 32px;
  }

  .ms_yesno > div:not(:first-child) { border-left: 1px solid #999; }
  .ms_yesno > div.selected {
    background: var( --ms-colour-highlight );
    color: white;
  }
    /* transform: scale( 1.1 ); } */


/* Form items */

.infogroup h4 {
  font-size:16px;
  font-weight:bold;
  text-align: center;
  margin: 8px;
  color: #aaa;
}
.infogroup > p {
  max-width: 480px;
  width: 95%;
  margin: 0 auto;
  text-align: center;
}

.infogroup.hide-children .fitem.ms-info-child { display: none; }

.fitem{
  max-width: 500px;
  width: calc( 100% - 20px );
  margin: 10px auto;
  padding: 18px 34px 0px 5px;

  transition: border 0.1s, background-color 0.1s;
  position: relative;
  /* font-family: 'OpenSans'; */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
}

  .fitem:first-child { margin-top:5px; }
  .fitem.form-row { display:block; }
  .fitem.noborder { border: 0; }

.fitem > label {
  position: absolute;
  top: 1px;
  left: 5px;

  color: #aaa;
  font-size: 14px;
  line-height: normal;
  font-weight: bold;
  text-align: left;
  margin: 0px;
  padding: 0 5px 2px 5px;
  transition: 0.15s;
  z-index: 100;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc( 100% - 50px );  
}
/*
  .fitem > input:placeholder-shown:not(:focus) + label {
    top: 12px;
    font-size: 18px;
  }
*/

.fitem > p {
  margin: 0px;
  font-size: 14px;
  line-height: normal;
  padding: 2px 5px;
  font-style: italic;
  color: #999;
  text-align: left;
}


.fitem div label {
  width:18em;
}
.fitem > button {
  margin: 5px auto;
  height:34px;
  padding: 0px 5px;
  line-height: 28px;
  display: block;
}
  .fitem input + button, .fitem > button:first-child , .fitem button + button {
    display: inline-block;
    margin: 5px;
  }

.fitem > .status {
  display: block;
  position: absolute;
  right: 5px;
  top: calc( 50% - 16px );
  height: 32px;
  margin: 0;
  line-height: 32px;
  font-size: 20px;
  color: var(--ms-colour-highlight);
}

.fitem textarea,.fitem input[type="date"],.fitem input[type="datetime"],
  .fitem input[type="datetime-local"], .fitem input[type="email"],
  .fitem input[type="month"], .fitem input[type="number"], .fitem input[type="password"],
  .fitem input[type="search"], .fitem input[type="tel"], .fitem input[type="text"],
  .fitem input[type="time"], .fitem input[type="url"], .fitem input[type="week"],
  .fitem input[type="checkbox"],
  .fitem > select, .fitem > div.input {
/* .fitem > input, .fitem > textarea, .fitem > select, .fitem > input[type=password], .fitem > div.input { */
  position: relative;
  border: 0;
  color:#555;
  font-size: 1.2em;
  font-family: inherit;
  padding: 0px 0.5ch;
  height:30px;
  margin:1px 34px 0px 0px;
  box-sizing:border-box;
  width: 100%;
  background:white;
  z-index: 101;
  background: transparent;
  box-shadow: none;
}
  .fitem > input::placeholder {
    color:#a4a4a4;
  }
  .fitem > div.input {
    min-height: 30px;
    height: initial;
    text-align: left;
  }
  .fitem > div.input:empty:before {
    content: attr(placeholder);
    opacity: 0.5;
  }

 .textarea {
  border-radius:3px;
  color:#4b4b4b;
  font-size:18px;
  padding: 5px 0.5ch;
  margin:1px 34px 0px 0px;
  box-sizing:border-box;
  background:white;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 90px;
  max-height: 20vh;
}

.fitem > div.toggle {
  height:22px;
  width:100px;
}
.fitem > .ms_yesno, .fitem > .toggle {
  margin: 8px auto 5px auto;
}

  .fitem input[readonly] {
    color:#888;
  }

.fitem > textarea {
  resize:none;
  height:100px;
}
  .fitem > label.ta {
    width:auto;
  }
  .fitem > .status.ta {
    float:right;
  }


/* Specific fitem forms  */

.ms_login_form .ms_reset_link {
  text-decoration: underline;
  cursor:pointer;
}

/* Responsive */
 
 @-ms-viewport {
  width: device-width;
}  


@media (max-width: 800px), (max-height:520px ) {
  
  .ms-filterbar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1002;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.26);
  }
  .ms-filter-selects { display: none; }

  .hideonmobile {
    display:none;
  }
  .admindiv,.statusdiv,.seendiv,.kudosdiv,.likediv {
    height:30px;
    width:30px;
  }
  .ms_event .clubbadge {
    height:3.5em;
    width:3.5em;
  }
  
  .fitem .toggle {
    margin:0px 25px;
  }
  .eventclickdiv {
    margin:0px 40px 0px 55px;
  }
  .splash {
    padding:5px;
  }

  .day, .paper {
    margin: 3px
  }

  .ms_accordion>h3 {
    margin:3px 3px 0px 3px;
  }
  .ms_accordion>h3+div {
    margin:0px 3px;
  }
  .passtype {
    padding:2px 2px 2px 5px;
  }
  .ms_event .ms_userpic {
    height:35px;
    width:35px;
    margin:3px;
  }
    .ms_event .ms_userpic.isleader { margin: 0; }

  .ms_event>.ms_attendees>.ms_spaces { height:41px; }
  .ms_event.has-image .ms_event_image { display: none; }
  
  .daybody {
    padding:3px;
  }

  .smallmodeonly {
    display:block;
  }
  .largemodeonly {
    display:none;
  }

  .ms_dlg_frame .ms_event>.clubbadge { display:none; }

  .usertopfilter.topfixed {
    top:45px;
    z-Index:500;
    max-width:949px;
    width:100%;
    margin:0px;
    border-radius:0px;
    border-top:0px;
    position:fixed;
  }
}
@media (max-width: 520px), (max-height:520px ) {
  .ms_dlg_frame {
    margin:0px;
    top:0px;
    width: 100vw;
    bottom: 0;
    max-height: none;
  }
    .ms_dlg_frame.active { left: 50vw; }

  .ms_dlg_frame > .ms_dlg_header {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26);
  }
/* 
  .ms_dlg_frame > .ms_dlg_body > div:last-child::after {
    content: " ";
    height: 100px;
    width: 50px;
    display: block;
  } */
  
  .ms_dlg_frame .ms_dlg_body .scrollinbody {
    margin:0px;
    max-height:initial;
  }

  .ms_dlg_frame .ms_dlg_close { grid-column: 1 / 2; }
  .ms_dlg_frame .ms_dlg_close::before { content: '\e80a'; }
  .ms_dlg_frame .ms_dlg_header h3 { text-align:center; }
  .ms_dlg_frame .ms_dlg_header h3::before { content: ''; width:0px; }

  .fitem > input:placeholder-shown:not(:focus) + label { top: 11px; }

    .fitem > .status { bottom: 2px; }
}


.choosespot-grid table {
  margin: 0 auto;
}
.choosespot-grid div:not(:empty) {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 34px;
  font-weight: bold;
  margin: 2px;
  border: 2px solid var(--ms-colour-highlight);
  transition: 0.15s;
}
.choosespot-grid div.available {
  cursor: pointer;
  background: white;
  color: var(--ms-colour-highlight);
}
.choosespot-grid div.available:not(:empty):hover, .choosespot-grid div.selected {
  background: var(--ms-colour-highlight);
  color: white;
}
.choosespot-grid div.unavailable {
  background: white;
  color: lightgrey;
  border: 2px solid lightgrey;
}