@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: lighter;
}
@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'Montserrat';
  src:  url('/classes/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
}

/* Responsive */
.smallmodeonly {
  display:none;
}
.largemodeonly {
  display:block;
}

h1, h2, h3, h4, p {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}


body {
  background: white;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color:var(--ms-text-def);
  margin:0px;
  height:90%;
  font-size:14px;
  box-sizing:border-box;
}

button {
  border-radius:5px;
  transition:border 0.25s;
  background:white;
  margin:10px;
  font-family:OpenSans, sans-serif;
  font-size:18px;
  color:var(--ms-colour-highlight);
  line-height:32px;
  padding:0px 10px;
  border:1px solid var(--ms-colour-highlight);
  position: relative;
}
button.button-small {
  padding: 0 5px;
  font-size: 0.9em;
  line-height: 24px;
}

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

}

select {
  border-radius: 5px;
  padding: 2px;
  margin: 5px;
  font-size: inherit;
  font-family: inherit;
}


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

table {
  border: 0px solid #ddd;
  padding: 0;
  border-collapse: collapse;
}


th, td {
  border: 1px solid #ddd;
  padding: 5px;
}

/* Left panel */

#panelleft {
  width:210px;
  min-width:210px;
  vertical-align:top;
  background-color: rgba(73,73,73,0.8);
  min-height: calc( 100vh - 106px );
}

.panelleftspacer {
  display:table-cell;
  width:100px;
}
#panelleft a,#dialogleftholder a,#panelleft h2,#dialogleftholder h2 {
  display:block;
  text-align:left;
  vertical-align:middle;
  border-top:1px solid rgb(123,123,131);
  border-bottom:2px solid transparent;
  margin:0px;
  font-size:1.2em;
  padding:21px 5px 21px 10px;
  word-wrap:break-word;
  line-height:18px;
  text-decoration: none;
  color:#eee;
  transition:border-bottom 0.25s;
}
#panelleft .menubreak {
  border-top:1px solid rgb(123,123,131);
  height: 64px;
}

#panelleft a:hover {
  border-bottom:2px solid rgb(244,111,46);
  transition:border-bottom 0.10s;
}

#panelleft a:first-child {
  border-top:0px;
}

#panelleft h2 {
  background:#888;
  text-align:center;
  padding:10px;
}

#panelmain {
  position:relative;
  flex: 1 0 300px;
  max-width: 100vw;
}

.pagebody {
  display: flex;
}
#panelnav {
  padding:0px;
  margin:0px;
}

/* Top area */

.pageheader {
  background: #faf9f8;
}
  
#pagetitle {
  text-decoration: none !important;
  font-size:30px;
  line-height:60px;
  margin-left:20px;
  height:60px;
  margin-top:25px;
  color:rgba(246,146,82,1);
  vertical-align:center;
  display: flex;
  justify-content: left;
  align-items: center;
}

#pagetitle img {
  padding-right: 20px;
}

.pageheader {
  background: linear-gradient(180deg,rgba(250,250,250,1),rgba(237,237,237,1));
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.26);
  z-index:2000;
  min-width:300px;  
}
.pagemenu {
  display:grid;
  grid-template-columns: min-content min-content auto min-content;
  white-space: nowrap;
}
  .pagemenu .main-title {
    font-size: 30px;
  }
.pagemenu a {
  text-decoration: none;
}

.pagemenu .smallmodeonly.icon-menu {
  font-size: 20px;
  line-height: 48px;
}

/* Tab buttons */

.pageheader .tabbuttons {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
  display: flex;
}
.pageheader .tabbuttons>div {
  color:rgba(90,90,90,1);
  padding: 0px;
  margin: 0px;
  padding: 0px 10px;
  min-width:60px;
  cursor:pointer;
  border-left:0px solid rgba(153,153,153,1);
  border-bottom:4px solid transparent;  
  text-align: center;
  white-space: nowrap;
  line-height: 100px;
}

.pageheader .tabbuttons>div:hover {
  border-bottom:4px solid rgb(244,111,46);
}
.pageheader .tabbuttons>.active {
  color:white;
  background: linear-gradient(180deg,rgba(87,87,89,1),rgba(45,45,45,1));
  border:0px 2px 0px 2px solid black;
  border-bottom:4px solid rgba(45,45,45,1);
}
.tabbuttons>div>label {
  position:absolute;
  font-size:1.2em;
  line-height:24px;
  height:24px;
  width:24px;
  top:5px;
  right:5px;
  padding:3px;
  border:3px solid rgb(244,111,46);
  border-radius:24px;
  text-align:center;
  color:rgb(244,111,46);
  background:#eee;
  font-weight:bold;
}


/* Info & Warning */

.warning, .info {
  background: url( '/res/icon_info_32.png' ) right 10px center no-repeat, white;
  border: 2px solid rgba(246,146,82,1);
  border-radius: 5px;
  margin: 10px;
  position: relative;
  padding: 10px 50px 10px 10px;
}


/* Calendar overrides */

.fc-ltr .fc-time-grid .fc-event-container {
  margin: 0;
}

.fc-title , .fc-time {
  color: #2c0000;
  margin: 2px;
  font-weight: bold;
}
.fc-event {
  border-radius: 0;
  border: 0;
  margin: 0 8px 1px 0;
}

/* Special form items */

::placeholder {
  color: #ddd;
}

form textarea[name="EnrolledInfo"] {
  height: 40px;
  font-size: 0.9em;
}
form textarea[name="EnrolledInfo"]:not(:placeholder-shown), form textarea[name="EnrolledInfo"]:focus {
  min-height: 200px;
}


/* Linked events in passes */

.passtype .ms-events-in-pass {
  padding-left: 20px;
}
.passtype .ms-events-in-pass .statusdiv { display: none !important; }
.passtype .ms-events-in-pass .ms_toggleexpand { display: none !important; }
.passtype .ms-events-in-pass .ms_event_startdate {
  display: block;
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

/* Waitlist */

.ms_event.onwaitlist .ms_event_title_leaders::after {
  content: " !Waitlist!";
  color: red;
}


/* Follower passes */

#mypassesdiv .passtype .ms_clickmask:before { content: "Edit"; }
#clubpasstypes .passtype .ms_clickmask:before { content: "Give pass"; }
#pastevents .ms_event .statusdiv { display: none; }

/* Event passes */

#pnl_adminres_event_validpasstypes .passtype .ms_clickmask:before { content: "Remove"; }
#pnl_adminres_event_notvalidpasstypes .passtype .ms_clickmask:before { content: "Add pass"; }

.panelleftspacer {
  display: none;
}


#panelmain,body {
  margin:0px;
}

h2 {
  font-size:1.3em;
  font-weight:bold;
  margin:20px;
  text-align:center;
}

#panelleft {
  background: #faf9f8;
  /* min-width: 250px; */
  margin: 0;
  border-right: 1px solid #ddd;
}

#panelleft h2 {
  background: transparent;
}

#panelleft a, #dialogleftholder a, #panelleft h2, #dialogleftholder h2 {
  padding:6px 5px 6px 5px;
  color: #262626;
  border-top: 1px solid #ddd;
}
#panelleft a:before {
  color: #aaa;
}

.pvtAxisContainer, .pvtVals {
  background:initial;
  background-color: rgba(255,255,255, 0.4);
}

#panelleft .clubadminmenu a {
  display:block;
  text-align:center;
  vertical-align:middle;
  background: linear-gradient(180deg,rgba(215,215,0, 1.0),rgba(160,192,0, 1.0));
  border:1px solid #888;
  text-decoration: none;
  color:#444;
  font-size:16px;
  line-height:16px;
  height:auto;
  padding:10px;
  margin:5px;
  border-radius:5px;
}

#uvsetable_header {
  position:absolute;
  left:205px;
  width:3500px;
}

#uvsetable_header span {
  height:50px;
  width:64px;
  background-color: rgba(255,255,255, 1);
  display:inline-block;
  overflow:hidden;
}
.uvsetable_title span {
  border:1px solid #aaa;
}
.uvsetable_start span {
  font-size:10px;
  border:1px solid #aaa;
}
#uvsetable {
  font-size:12px;
  border: 0px;
  margin:105px 0px 0px 205px;;
}
#uvsetable span
{
  border:0px;
  margin:1px;
  height:36px;
  width:64px;
  background-color: rgba(240,255,255, 0.6);
  display:inline-block;
  white-space:nowrap;
}
#uvseuserlist {
  position:absolute;
  left:0px;
  top:105px;
}
#uvseuserlist > div {
  border:1px solid #aaa;
  height:36px;
  line-height:36px;
  width:200px;
  background-color: rgba(255,255,255, 1);
  vertical-align:middle;
  text-align:center;
  font-size:14px;
}

/* Venue */

#venuelist {
  padding:10px;
  cursor:pointer;
}
.venue, .group {
  padding:10px;
  box-shadow:0px 0px 10px #888;
  margin: 20px;
  border-radius:10px;
  border:4px solid rgba(0,0,0,0);
  transition: border-color 0.25s;
}
.venue:hover, .group:hover {
  border:4px solid rgb(244,111,46);
  transition: border-color 0.10s;
}
.group {
  font-size:1.4em;
}
#venuelist .name,.notes,.address,.postcode {
  width:auto;
  padding:3px;
}
#venuelist .name {
  font-size:1.3em;
}
#venuelist .address,.postcode {
  display:inline-block;
}

/* End Venue */

/* Voucher */

.inactive {
  color:#888;
}

#voucherlist {
  padding:10px;
  cursor:pointer;
}
#voucherlist .code {
  font-size:1.3em;
  padding:10px 0px 10px 0px;
}
#voucherlist .title {
  padding-bottom:10px;
}
#voucherlist .discount {
  border-bottom:1px solid black;
  padding-bottom:10px;
}

/* End Voucher */

/* Passtype */

.passtype.requirespt {
  margin-left:20px;
}

/* End passtype */


/* Table of debt */

table.userdebts {
  font-size:16px;
  border: none !important;
  padding:5px;
  margin:3px;
  font-family:"OpenSans-Regular","Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
.userdebts td, .userdebts th {
  padding:5px;
  margin:3px;
}

.userdebts td {
  padding:2px;
  text-align:center;
  font-size:30px;
  width:75px;
}
.userdebts td.usertd {
  text-align:center;
  font-size:16px;
  width:200px;
}


.userdebts th {
  background:linear-gradient(180deg,#575e63,#3f4347);
  color:white;
}
.userdebts td {
  background-color:#eee;
  border:0px;

}
.userdebts td.indebt {
  color:red;
  font-weight:bold;
}

/* End debt table */


/* People  */

#spreadsheet {
  color: #444;
}

/* End People` */


/* Accordion */


.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);
}
.ms_accordion>h3>button {
  line-height:1.7em;
  margin:0px;
  font-size:inherit;  
}
.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;
}

.ms_accordion>h3::before {
  content:"\f067";
  margin:0px 10px 0px -15px;
  font-family:"ms_fontello";
}
.ms_accordion>h3.active {
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}
.ms_accordion>h3.active::before {
  content:"\f068";
}
.ms_accordion>h3.disabled { display:none; }
.ms_accordion>h3.disabled+div { display:none; }


.ms_accordion>h3:hover {
  border:1px solid #888;
}
.ms_accordion>.ms_acc_bar {
  justify-content: center;
  display: flex;
  border-bottom: 1px solid #aaa;
}
.ms_accordion>.ms_acc_bar>div {
  display:inline-block;
  font-size:1.1em;
  padding:3px 5px;
  background-color:#ddd;
  cursor:pointer;
  margin:3px 3px 0px 3px;
  border:1px solid #ddd;
  text-align: center;
  flex-grow: 1;
  transition: 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;  
}
.ms_accordion>.ms_acc_bar>div:hover {
  font-weight:bold;
  border:1px solid #888;
}

.ms_accordion>.ms_acc_bar>div {
  padding: 6px 3px 6px 3px;
  border: 0;
  border-bottom: 5px solid transparent;
  background: transparent;
}
.ms_accordion>.ms_acc_bar>div:hover {
  font-weight:normal;
  border: 0;
  border-bottom: 5px solid transparent;
}
.ms_accordion>.ms_acc_bar>div.active {
  border-bottom: 5px solid var(--ms-colour-highlight);
}


/* Notes */

.ms-note {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: min-content min-content;
  margin: 0 auto;
  max-width: 600px;
  padding: 5px;
  margin: 10px auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
}

.ms-note > .createdTime {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  text-align: right;
  font-size: 0.8em;
  padding: 5px;
}
.ms-note > .createdBy {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  text-align: left;
  font-size: 0.8em;
  padding: 5px;
}


.ms-note > .note {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  padding: 5px;
}


.ms_yesno {
  margin: 20px auto;
}
.ms_yesno > div > span::before {
  font-weight: normal;
}
.ms_yesno > div {
  padding: 2px 10px 0px 10px;
}
.ms_yesno > div.selected {
  background: var( --ms-colour-highlight );
}



@media (max-width: 800px), (max-height:520px ) {

  .panelleftspacer {
    width:0px;
  }
  .pageheader {
    padding-left:10px;
    padding:0px;
    height:48px;
    position:fixed;
    width:100vw;
  }
  .pagebody {
    padding:48px 0px 0px 0px;
  }
  .pagemenu .menucentre {
    text-align: center;
    line-height: 44px;
    background: url( '/res/makesweatheader_logo.png' );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 5px;
    flex: 0 1 100%;
    min-width: 50px;
  }
  .pagemenu .smallmodeonly.icon-menu {
    font-size: 20px;
    line-height: 48px;
  }
  
  .smallmodeonly {
    display:block;
  }
  .largemodeonly {
    display:none;
  }
  .pageheader .tabbuttons {
    display: flex;
    max-width: 50vw;
  }
  .pageheader .tabbuttons>div {
    line-height: 44px;
    min-width:40px;
  }
  
  .tabbuttons>div>label {
    font-size:0.8em;
    line-height:12px;
    height:12px;
    width:12px;
  }

  #panelleft {
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: -210px;
      z-index: 2002;
      transition: left 0.15s;
  }

  .pageheader .tabbuttons {
    max-width: 100vw ;
  }
  .pageheader .tabbuttons>div {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}