/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
    width: 100%;
    height: 100%;
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
    width: 100%;
    height: 100%;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* CONTAINER & COLUMNS */
.mbxcontainer {
  position: relative;
  width: 100%;
  max-width: 4000px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  clear:both;
   display: table;
}

.mbxpaper{
  width:100%;
  max-width: 1400px;
  padding-left:1.5rem;
  padding-right:1.5rem;
}



.mbxcol
{
  width: 100%;
  float: left;
  box-sizing: border-box;
  position:relative;
  display: table-cell;
}


  .col4{  width:4%; }
  .col5{  width:5%; }
  .col10{ width:10%; }
  .col15{ width:15%; }
  .col20{ width:20%; }
  .col25{ width:25%; }
  .col30{ width:30%; }
  .col35{ width:35%; }
  .col40{ width:40%; }
  .col45{ width:45%; }
  .col48{ width:48%; }
  .col50{ width:50%; }
  .col55{ width:55%; }
  .col60{ width:60%; }
  .col65{ width:65%; }
  .col70{ width:70%; }
  .col75{ width:75%; }
  .col80{ width:80%; }
  .col85{ width:85%; }
  .col90{ width:90%; }
  .col95{ width:95%; }

  .colThird{width:31.3%;margin:0 1%;}


/* Edit profile columns */
  .colEditProfile{width:40%;margin:0 2% 0 0;}
  .colEditProfileRight{height:100%;width:16%;position: absolute;right:1em;top:0;}
  @media(max-width:768px) {  .colEditProfileRight{ position:relative;width:100%;right:0; padding-right:2em;padding-top:4em;} }


  /* Used on dashboard */
  .col25To50{ width:25%; }
  @media(max-width:768px) {  .col25To50{ width:50%; } }

  .colThirdTo50to100{ width:32%; margin-right:1.3%; }
  @media(max-width:768px) {  .colThirdTo50to100{ width:49%; margin-right: 1%; } }
  @media(max-width:450px) {  .colThirdTo50to100{ width:100%; margin-right: 0%; } }




  .formrow{
    margin-bottom:1em;
  }

  /* Make a row full width on mobile */
  .full{}
  @media(max-width:768px) {  .full{ display:block;width:100%; } }
/* General helper */
body{
	font-size:16.5px;
	font-family: helvetica, sans-serif;
}
@media(max-width:1000px){ body{ font-size:14px; } }
@media(max-width:900px) { body{ font-size:12.5px; } }
@media(max-width:768px) { body{ font-size:12px; } }
@media(max-width:420px) { body{ xfont-size:11px; } }
@media(max-width:360px) { body{ xfont-size:10px; } }


@media(min-width:768px) {
	.mobileOnly{
			display:none !important;
	}
}
@media(max-width:768px) {
	.desktopOnly{
		display:none !important;
	}
}


h1{
	font-size:1.2em;
	margin-top:3em;
	margin-bottom:2em;
}

h2{
	font-size:1.5em;
	line-height: 1.4em;
	margin-top:2em;
	margin-bottom:2em;
	font-weight:normal;
}

@media(max-width:768px) {
	.hasFormAboveOnMobile{
		margin-top:0.5em;
	}
}


small{
	font-size: 0.66em;
}

a{
	color:var(--themeIconColor);
	text-decoration: none;
}


.icon{
	font-family:ICON;
	font-weight: normal;
	color:var(--themeIconColor);
}


.iconRollover{
	color:var(--themeAccentColor);
	font-family: arial;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -0.5em);
	top: 0em;
	font-size: 12px;
	font-weight: normal;
	display: block;
	opacity: 0;
	transition: opacity 0.5s, transform 0.5s;
}

.hasRollover:hover .iconRollover{
	transform: translate(-50%, -1.5em);
	opacity: 1;
}


.loadingRotate{
	position: absolute;
	left: 50%;
	top: 50%;
}


.themed{
	color:var(--themeIconColor);
	border-color:var(--themeIconColor);
}


.circle{
	overflow: hidden;
	display:inline-block;
	height:1.7em;
	width:1.7em;
	background-color: #fff;
	border-radius: 50%;
	line-height: 1em;
	padding:0em 0;
	text-decoration: none;
	transition: opacity 0.5s ease;
	position: relative;
}

.circle:hover{
	opacity:0.7;
}

.circle>div{
	transform: translate(-50%,-50%);
	position:absolute;
	left:50%;
	top:50%;
	line-height: 1em;
}


.blackCircle{
	background-color: #000;
	color:#fff;
}


.noCircle{
	background-color: transparent;
}

.roundImage{
	background-size: cover;
	background-position: center center;
}

.fadeInOnLoad{
	opacity:0;
}

.left{
	text-align: left;
}
.right{
	text-align: right;
}

.rightButLeftOnMobile{
	text-align: right;
}
  @media(max-width:768px) {.rightButLeftOnMobile{ text-align: left;}}

.pointer{
	cursor: pointer;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.shade{
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	z-index: 10;
	transition: opacity 0.5s;
}

.shade:hover{
	opacity: 0.5;
}

#dataHoldingCell{
	display:none;
	position: absolute;
	left:-999vw;
	top:0;
}


.genericTopRightForm{
	position:absolute;
	top:0em;
	right:0em;
	text-align: right;
}
@media(max-width:768px) {
	.genericTopRightForm{	top:0em; }
}






th{
	text-align: left;
	font-weight: bold;
	font-size: 1.2em;
	color:var(--themeColor);

}

td.overline{
	border-top:1px solid #aaa;
}

.forum_td{
	line-height: 1.5em;
	padding:0.8rem;
	word-break: break-word;
}



.fixedBottom{
	z-index: 10;
	width:80%;
	padding:1.5rem 5%;
	background-color: #fff;
	position: fixed;
	left:50%;
	bottom: 0;
	transition: transform 0.8s;
	transform: translate(-50%, 105%);
	box-shadow: 0px 0px 10px #333;
}


.fixedBottom.active{
	transform: translate(-50%, 0%);
}


/* Error shake */
.errorShake{
      animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes shake {
  0% { margin-left: 0rem; }
  25% { margin-left: 0.5rem; }
  75% { margin-left: -0.5rem; }
  100% { margin-left: 0rem; }
}



/* MASTHEAD */
#masthead{
	transition: var(--theme-anim);
	background-color:var(--themeColor);
	width:100%;
	height:185px;
	color:var(--theme);
	position: relative;
}


#mastheadLogo{
	color:var(--themeAccentColor);
	position:absolute;
	left:50%;
	top:26px;
	transform: translate(-50%, 0);
	font-size:3.6em;
}


#mastheadSection{
	position:absolute;
	left:50%;
	bottom:30px;
	color:var(--themeAccentColor);
	transform: translate(-50%,0);
	font-size:1.4em;
	letter-spacing: 1px;
	font-weight: bold;
}

#mastheadDashboard{
	color:var(--themeIconColor);	
	position:absolute;
	left:1.5vw;
	bottom:22px;
	font-size:2.2em;
	display:none;
}

.loggedIn #mastheadDashboard{
	display:block;
}

#mastheadProfile{
	color:var(--themeIconColor);	
	position:absolute;
	right:calc(1.5vw);
	bottom:22px;
	font-size:2.2em;
	display:none;
}

.loggedIn #mastheadProfile{
	display:block;
}


#mastheadNotifications{
	color:var(--themeIconColor);	
	position:absolute;
	right:calc(2em + 1.5vw);
	bottom:22px;
	font-size:2.2em;
	display:none;
}

.loggedIn #mastheadNotifications{
	display:block;
}

#mastheadMainSite{
	color:var(--themeIconColor);	
	position:absolute;
	right:calc(1.5vw);
	bottom:22px;
	font-size:2.2em;
}
.loggedIn #mastheadMainSite{
	right:calc(4em + 1.5vw);
}

#mastheadMainSite .icon div{
	padding-left:8%;
	transform: translate(-50%,-50%) scale(1.3) ;
}



#mastheadMenu{
	color:var(--themeAccentColor);
	position: absolute;
	left:0.7em;
	top:20px;
	font-size:2.2em;
	display: none;
}




@media(max-width:768px) { 
	#mastheadMenu{
		display: none;
	}

.loggedIn #mastheadMenu{
	display: block;
}
	#masthead{
		height:125px;
	}

	#mastheadSection{
		bottom:20px;
	}

	#mastheadLogo{
		top:15px;
	}

  	#mastheadNotifications{
  		top:15px;
		right:calc(0.5em);
	}

	#mastheadProfile, #mastheadDashboard, .loggedIn #mastheadProfile, .loggedIn #mastheadDashboard{
		display:none;
	}

	#mastheadMainSite{
		top:15px;
		display:block;
	}

	.loggedIn #mastheadMainSite{
		display:none;
	}

}









#breadcrumbs{
	padding: 1em 1.5rem;
	color:var(--themeColor);
	font-size:0.75em;
}

#breadcrumbs a{
	color:var(--themeIconColor);
	text-decoration: none;
}

#breadcrumbs .self{
	font-weight: bold;
}






/* Main content */
/* min-height is 100vw - header height and footer height so the footer always sits at or below the bottom of the page */

#mainContent{
	x-min-height:calc(100vh - 300px - 185px + 1px - 3em);
	transition: opacity 0.3s ease;
	opacity:1;
}

@media(max-width:768px) { 
	#mainContent{
		x-min-height:calc(100vh - 300px - 125px + 1px - 3em);
		transition: opacity 0.3s ease;
		opacity:1;
	}
}

#mainContent.loadingAnim{
		opacity:0;
}






#errorMessages{
	position: fixed;
	top:50%;
	left:-500%;
	transform: translate(-50%,-50%);
	background-color: var(--themeColor);
	color: var(--themeAccentColor);
	z-index: 988;
	opacity:0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	font-weight: bold;
	text-transform: uppercase;

}

#errorMessages.showing{
	left: 50%;
	opacity:1;
}

#errorMessagesText{
	padding:1em 1.2em;
}

#x-errorMessagesText.good{
	border-color: #7b7;
}


#errorMessageCover{
	z-index: 987;
	position: fixed;
	top:0%;
	left:0%;
	width:100vw;
	height: 100vh;
	display:none;
	opacity:0;
	background-color: #000;
}

#errorMessageCover.showing{
	display: block;
	opacity:0.7;
}






#menu{
	padding:0.3em;
	position: fixed;
	top:0%;
	left:0%;
	height:100%;
	transform: translate(-100%,0%);
	background-color: #fff;
	z-index: 978;
	opacity:1;
	transition: transform 0.4s ease;
	font-size:1.75rem;
}

#menu.showing{
	transform: translate(0%,0%);
	opacity:1;
}



#menuShade{
	z-index: 977;
	position: fixed;
	top:0%;
	left:0%;
	width:100vw;
	height: 100vh;
	display:none;
	opacity:0;
	background-color: #000;
}

#menuShade.showing{
	display: block;
	opacity:0.2;
}

#menu .circle{
	margin:8px 10px 0 10px;
}

.menuTopItem, .menuTopItem a{
	font-size:12px;
	color:#000;
}

#menuLinks{
	margin:30px 10px 0px 10px;
}

#menuLinks a{
	font-weight: bold;
	font-size:18px;
	display: block;
	margin-bottom:20px;
	color:#000;
}

#menuClose{
	position: absolute;
	right:0;
	font-size:1.4em;
}






















/********* FOOTER *************/

/* FOOTER */

#footer{
	margin-top:18px;
	width:100%;
	background-color: #fff;
	min-height: 375px;
	overflow:hidden;
	text-align: center;
	font-size:12px;
	position: relative;
	color:#000;
	letter-spacing: 1px;
	opacity: 0;
	transition: opacity 1s;
}

#footer.active{
	opacity: 1;
}

#footer img{
	-webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
	filter: invert(100%);

}

#footer_signup_input{
	border:0px solid black;
	width:220px;
	color:#000;
	font-size:11px;

}


#footer_signup_input{
	border:0px solid black;
	width:380px;
	max-width: calc(80%);
	color:#000;
	font-size:11px;

}
#footerForm{
	margin-top:70px;
	width:600px;
	max-width:80%;
	text-align:center;
	border-bottom:1px solid #000;
	display:inline-block;
	color:#000;
}

#footerFormTerms{
	font-size:10px;
	letter-spacing: 0.7px;
	width: 600px;
	max-width:80%;
	margin: 10px auto;
	line-height: 18px;
}

#footerFormTerms a{
	color:#000;
}

.loading #footer{
	min-height: 0px;
	height:0px;
}

#footerLinks span{
	display: inline-block;
	margin-left: 12px;
	margin-right: 12px;
}


#footCheckbox{
	opacity:0.1;
	position:absolute;
	left:-9999px;
}

#footCheckbox + label > div{
	opacity:0;
	margin-left:4px;
}


#footCheckbox:checked + label > div{
	opacity:1;
}

#footCheckboxLabel{
	position:relative;
	top:3px;
	border:1px solid #000;
	width:16px;
	height:16px;
	line-height: 16px;
	overflow: hidden;
	display: inline-block;
	cursor: pointer;
}



form.disabled
{
	pointer-events: none;
	opacity:0.8;
}


label{
	margin-top:calc(0.4em + 1px);
	color:#888;
	display: inline-block;
}


textarea, select, input[type="text"],input[type="password"], input[type="text"]:focus, input[type="password"]:focus{
	border-radius: 0;
	outline: 0;
	border:1px solid #aaa;
	color:#333;
	x-webkit-appearance:none;
	padding:0.5rem;
}


.genInput{
	width:100%;
	padding:0.4em 0.5em 0.4em 0.6em;

}



.loginInput, .loginInput:focus{
	border:1px solid #888;
	max-width:250px;
	width:calc(100% - 1rem);
	xwidth:calc(100%);
}



button, .button{
	position: relative;
	display: inline-block;
	border:1px solid var(--themeColor);
	background-color: var(--themeColor);
	color:var(--themeAccentColor);
	font-size:0.95rem;
	padding:0.5rem 1.5rem;
	line-height: 1.25rem;
	font-weight: bold;
}

button.loading{
	color:var(--themeColor);
}



button.link, .button.link{
	border:1px solid var(--themeColor);
	background-color: #fff;
	color: var(--themeColor);
}

button:disabled, .button:disabled{
	opacity:0.6;
}

.colEditProfileRight>div{
	position: absolute;
	bottom:1em;
	right:0;
	margin-right: 0;
}

@media(max-width:768px) { .colEditProfileRight>button{ 	margin-right: 5%; }}

.searchInput{
	font-size: 0.95rem !important;
	line-height:1.25rem !important; 
	width:160px;
    border: 1px solid var(--themeColor) !important;
}



.loadingRotate{
	color: #fff;
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	display: none;
}
.loading .loadingRotate{
	display: block;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.fileIconGreen{
	color: #292;
}
/* Dashboard */
.dashboardButton{
	display: inline-block;
	margin-top: 18px;
	margin-left: 10px;
	margin-right: 10px;
	width:calc(100% - 20px);


	xheight:calc((100vh - 185px) / 3);
	height:calc((100vh) / 3);
	font-size:1em;
	background-size:cover;
	background-position: center;
	position: relative;
}
@media(max-width:1300px) { .dashboardButton{ font-size:0.8em;} }

@media(max-width:768px) { .dashboardButton{ font-size:1em;height:calc((100vh - 250px) / 4); } }
@media(max-width:500px) { .dashboardButton{ font-size:0.8em; } }




.noSpaceDash{
	letter-spacing: -0.25em;
	display: inline-block;
	margin-left:-0.25em;
}

.dashboardText{
	color:#fff;
	text-align: center;
	position: absolute;
	z-index: 10;
	left:50%;
	top:50%;
	transform: translate(-50%, -45%);
	width:90%;
	max-width:280px; 
	font-size: 1.2em;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	pointer-events: none;
}
.dashboardHeaders{
	font-size:1.55em;
	line-height:1.1em;
	font-weight: normal;
	width:100%;
}

.dashboardNotification{
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 1.6em;
	z-index: 11;
	font-weight: bold;
}

.yellowed{
	background-color: #f1db4e !important;
}.personSearchResult:nth-child(n+4)
{
	border-top:2px solid #aaa;
}

.personSearchResult:nth-child(3n+1){
	clear:left;
}

@media(max-width:768px) {

	.personSearchResult:nth-child(n+4)
	{
		border-top:0px solid #aaa;
	}

	.personSearchResult:nth-child(3n+1){
		clear:unset !important;
	}


	.personSearchResult:nth-child(n+3)
	{
		border-top:2px solid #aaa;
	}

	.personSearchResult:nth-child(2n+1){
		clear:left;
	}
}


@media(max-width:450px) {

	.personSearchResult
	{
		border-top:2px solid #aaa;
	}

	.personSearchResult{
		clear:left;
	}

	.personSearchResult:nth-child(1)
	{
		border-top:0px solid #aaa;
	}
}





#connectSearchBox{
	font-size: 0.95rem;
	line-height:1em; 
	width:160px;
    border: 1px solid var(--themeColor);
	padding:0.55em;
}

@media(max-width:768px) {
	#connectSearchBox{
		width:120px;
	}
}
#forumSearchBox{

}

@media(max-width:768px) {
	#forumSearchBox{
		width:calc(100% - 133px);
	}
}

.orderByBox{
	border-style: solid;
	border-width: 1px;
	width:113px;
	text-align: center;
	padding:0.5rem 0rem;
	line-height: 1.25rem;
	display: block;
	position: relative;
}


@media(max-width:768px) {
	.orderByBoxTopics{
		position:absolute;
		top:calc(4.45rem - 1px) !important;
		right:0em;
		width:80px;
	}
}

.nestedComment{
	margin:1em 0 0em 0;
	border-left:1px solid #aaa;
}


.forumIconNoRightMargin{
	margin:0em 0.75em 0 0em;
	font-size:1.5rem;
}

.forumIconIsRightMargin{
	font-size:1.5rem;
	margin:0em 1em 0 1em;
}

@media(max-width:768px) {
	.forumIconNoRightMargin{
		margin:0em 0.5em 0 0em;
		font-size:1rem;
	}

	.forumIconIsRightMargin{
		font-size:1rem;
		margin:0em 0.5em 0 0.5em;
	}
}

.forumCommentRow:hover{
	x-background-color:#f5f5f5;
}.article{
	border-top:1px solid #aaa;
	padding:3em 0 2.5em;
}
.article:first-child{
	border-top:1px solid #fff;
}

.article h1{
	margin-top:0;
	margin-bottom:0.5em;
}

@media(max-width:768px) { .article h1{ margin-top:1em;}}

.subheading{
	color:#aaa;
	margin-bottom:1em;
}
	#messageHolder{
		height:calc(100vh - 230px);
		display: flex;
	}

	#inboxHolder{
		width:35%;
		height:100%;
		xborder: 1px solid green;
	}
	#inbox{
		height:calc(100% - 60px);
		xborder:1px solid blue;
		overflow-y: scroll;
		margin-top:10px;
	}

	#chatHolder{
		width:65%;
		margin-left:2%;
		height:100%;
		xborder: 1px solid green;
	}

	#chat{
		height:calc(100% - 165px);
		xborder:1px solid blue;
		margin-top:10px;
		overflow-y: scroll;
	}

@media(max-width:768px) {
	#messageHolder{
		width:100%;
		overflow: hidden;
		height:calc(100vh - 170px);
	}

	#inboxHolder, #chatHolder{
		position: absolute;
		left:1%;
		width:98%;
		margin-left:0%;
		transition: transform 0.6s ease;
		transform: translate(0%, 0%);
	}
	#chatHolder{
		transform: translate(110%, 0%);
	}


	#messageHolder.active #inboxHolder{
		transform: translate(-110%, 0%);
	}
	#messageHolder.active #chatHolder{
		transform: translate(0%, 0%);
	}

	#chat{
		height:calc(100% - 190px);
	}
}



.messagesPaddedLeft{
	padding-left: 3.5em;
}
.messageHeaderContainer{
	height:3em;
}
.messageHeader{
	color:#888;
	font-weight: bold;
}

.messageWriteContainer{
	border:1px solid #aaa;
	margin-top:10px;
}


#new_message_text{
	background-color:#fff;
	border:0px;
	width:calc(100% - 240px);
	padding:10px;
	margin-top:0px;
	height: 60px;
}

@media(max-width:768px) {
#new_message_text{
	width:94%;
}
}

#noMessage{
	padding:10px;
}


.message{
	display: flex;
	width:99%;
	clear: both;
}

.messageIconLeft{
	width:1.5em;
	font-size:1.5em;
	margin-right:0.8em;
}

.messageText{

}

.inboxMessage{
	width:90%;
	border-bottom: 1px solid #aaa;
	padding:1em 0.5em;
}

.trimmedMessage{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
  width:100%;
}

.myMessageIcon{
	font-size:1.5em;
}
.myMessageIcon div{
	margin-left:0.6em;
	margin-right:0.1em;
}

.yourMessageIcon{
	font-size:1.5em;
}
.yourMessageIcon div{
	margin-right:0.6em;
}

.myMessage{
	text-align: right;
	max-width: 350px;
}

.yourMessage{
	text-align: left;
	max-width: 350px;
	color:#999;
}


.myMessage a{
	color:#000;text-decoration: underline;
}

.yourMessage a{
 	text-decoration: underline;
}

.myMessage small{
	color:#aaa;
}

.yourMessage small{
	color:#aaa;
}

.messageSpacer{
	margin-bottom:1.0em;
}

.noOpacity{
	opacity:0;
	transition: opacity 0.6s ease;
}

.active .noOpacity{
	opacity:1;
}


.unreadCircle{
	position: absolute;
	top: -5px;
	right: 0;
	color: var(--themeColor);
	background-color: var(--themeColor);
	font-size: 0.8em;
}

#messagesPersonSelector{
}
.calendarBorder{
	border: 1px solid #d43a57;
}

#spaceLayoutManager{
	position: relative;
	height: 600px;
	width: 100%;
	max-width: 1400px;
	margin: auto;
}


.tenantColSpacer{
	display: none;
	position: relative;
	background-color: #fff;
	margin-bottom:10px;
	width:1.5%;
	xdisplay: table-cell !important;
}

.tenantColCalendar{
	position: absolute;
	left: 1.5rem;
	top: 0;
	background-color: #fff;
	margin-bottom:10px;
	width:45%;
	height:330px;
	xdisplay: table-cell !important;
}

.tenantColTime{
	position: absolute;
	left: calc(46.5% + 1.5rem);
	top: 0;
	background-color: #fff;
	margin-bottom:10px;
	width:25%;
	height:330px;
	xdisplay: table-cell !important;
}



.tenantColSpace{
	position: absolute;
	left: calc(73% + 1.5rem);
	top: 0;
	background-color: #fff;
	margin-bottom:10px;
	width:calc(27% - 3rem);
	height:330px;
	xdisplay: table-cell !important;
}


.tenantColSummary {
	position: absolute;
	left: calc(1.5rem);
	top: calc(330px + 1.5rem);
	background-color: #fff;
	width:calc(71.5% + 2px);
	height:250px;

}

.tenantColFAQ{
	position: absolute;
	left: calc(73% + 1.5rem);
	top: calc(330px + 1.5rem);
	background-color: #fff;
	width:calc(27% - 3rem);
	height:260px;
}

#bookingNotes{
	width:95%;height:120px;
}


.spaceBookingMenu1, .spaceBookingMenu2B, .spaceBookingMenu3B{
	display: none;
	position: absolute;
	left: calc(65% - 1rem);
	top: calc(280px + 1.5rem);
	width: calc(35% + 1rem);
	height: 200px;
}


.spaceBookingMenu2A, .spaceBookingMenu3A{
	display: none;
	position: absolute;
	left: calc(1rem);
	top: calc(280px + 1.5rem);
	width: calc(35% + 1rem);
	height: 200px;
}


.spaceBookingMenu2A,.spaceBookingMenu2B, .spaceBookingMenu3A,.spaceBookingMenu3B{
	top: 420px;
}

@media(max-width:769px){

	#spaceLayoutManager{
		height: 500px;
	}


	.tenantColCalendar, .tenantColTime, .tenantColSummary{
		display: none;
		width: calc(100% - 3rem);
		top: 0;
		left: calc(1.5rem);
		height: 280px;
	}

	.tenantColTime, .tenantColSummary{
		height: 400px;
	}

	#bookingTimeScroller{
		height: 370px !important;
	}
	#bookingNotes{
		height: 250px !important;
	}

	.tenantColSpace, .tenantColFAQ{
		display: none;
		font-size: 0.8rem;
		width: calc(65% - 3rem);
		top: calc(280px + 1.5rem);
		left: calc(1.5rem);
		height: 200px;
	}

	.tenantColSpace li{
		font-size: 0.8rem;
	}

	.spaceStage1 .tenantColCalendar, .spaceStage1 .tenantColSpace, .spaceStage1 .spaceBookingMenu1{
		display: block;
	}

	.spaceStage2 .tenantColTime, .spaceStage2 .spaceBookingMenu2A, .spaceStage2 .spaceBookingMenu2B{
		display: block;
	}


	.spaceStage3 .tenantColSummary, .spaceStage3 .spaceBookingMenu3A, .spaceStage3 .spaceBookingMenu3B{
		display: block;
	}







}


#tenantsBookingWrapper .title{
	width:100%;
	text-align: center;
	margin-top:10px;
}

.calendar{
	width:80%;
	margin-left:10%;
}

.calendar th{
	color:#777;
	font-size:0.7em;
}

.calendar td{
	font-size:0.8em;
	width:14.2587%;
	text-align: center;
}

.calendar td div{
	width:40px;
	height:40px;
	xbackground-color:#666;
	border-radius:50%;
	cursor:pointer;
	display:inline-block;
	padding-top: 0px;
	line-height: 40px;
}

@media(max-width:769px){
	.calendar td div{
		width:30px;
		height:30px;
		line-height: 30px;
	}
}

.calendar td div.tooEarly{
	color:#999;
	cursor: default;
}

.calendar td div.weekEnd{
	color:#d99;
	cursor: default;
}


.calendar td div.selectedDay{
	color:#fff;
	background-color: #d43a57;
	cursor: default;
}



#bookingTimeScroller{
	width:80%;
	margin-left:10%;
	height:270px;
	overflow:hidden;
}




#bookingTimeScrollerInner{
	height:100%;
	width:calc(100% + 20px);
	overflow-y: scroll;
}


#bookingTimeScrollerInner > div{
	border-bottom:1px solid #ccc;
	position:relative;
	font-size:0.8em;
	height: 46px;
	cursor: pointer;
	line-height:2.4em;

}


#bookingTimeScrollerInner .unavailable{
	color:#ccc !important;
	cursor: default;
}


#bookingTimeScrollerInner .time{
	position:absolute;
	left:10px;
	top:3px;
}

#bookingTimeScrollerInner .text{
	position:absolute;
	left:80px;
	top:3px;
}


#bookingTimeScrollerInner .timeActive{
	background-color:#d43a57;
	color:#fff;
}

#nextMonth{
	font-size: 2em;
	position:absolute;
	right:20px;
	top:50%;
	cursor:pointer;
}

#prevMonth{
	font-size: 2em;
	position:absolute;
	left:20px;
	top:50%;
	cursor:pointer;
}

#prevMonth.inactive{
	cursor: unset;
	opacity: 0.5;
}


#bookingTimeUp{
	position:absolute;
	right:10px;
	top:15px;
	cursor:pointer;
}

#bookingTimeDown{
	position:absolute;
	right:10px;
	bottom:10px;
	cursor:pointer;
}

.title{
	font-weight: bold;
}

/* Forms */
#overlays{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.7);
	z-index:99999;
	display:none;
}

#overlays .clickToClose{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(255,0,0,0);
	z-index:99999;
	display:none;
}



.linkButton{
	width: calc(80% - 20px);
	margin-left: 10%;
	line-height:1.5em;
	text-transform: uppercase;
	display:inline-block;
	font-size:12px;
	padding:10px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.5px;
	background-color:#d43a57;
	border:1px solid #d43a57;
	color:#fff;
	cursor: pointer;
	text-decoration: none;

}

.linkButton.medium{
	font-size:14px;
	padding:8px 18px;
}

.linkButton.small{
	font-size:11px;
	padding:8px 18px;
}

.linkButton.dark{
	background:rgba(0,0,0,1);
	border:1px solid #fff;
	color:#fff;
}

.linkButton.disabledButton{
	opacity: 0.4;
	pointer-events: none;
}

.processing{
	pointer-events: none !important;
	opacity: 0.3 !important;
}


#overlay_alert{
	width:unset;
	max-width: 500px;
	padding-top:30px;
	padding-bottom:10px;
	text-align:center;
}

.popover{
	position:absolute;
	overflow:auto;
	width: calc(86vw - 80px);
	max-width:920px;
	padding:40px 70px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color: #fff;
	max-height:80vh;
	font-size:14px;
	line-height: 16px;
}


@media(max-width:769px){
    .popover{
    	width:calc(90vw - 40px);
    	padding: 20px 20px;
    	max-height: 90vh;

    }
}


.popover h1{
	margin:0px 0px 20px 0px
}

.popover em{
	font-style: normal;
	font-size: 14px;
	line-height: 18px;
	display:block;
	margin-bottom:5px;
	margin-top:10px;
	letter-spacing: 1px;
}

.formClose{
	font-size: 2em;
	position:absolute;
	right:1em;
	top:1em;
	cursor: pointer;
}

#bookingList{
	width: 100%;
	min-width: 300px;
}
#bookingList td{
	padding: 3px;
	font-size: 13px;
	border-bottom: 1px solid #d43a57;
}.mbx-slider{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:99;
	overflow-x: hidden;
}

.mbx-slide{
	position:absolute;
    transform: translateX(100%);
	left:0%;
	top:0;
	width:100%;
	height:100%;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	transition: transform 1.0s ease;
	text-align: center;
	will-change: transform;
}

.mbx-slide:first-child{
    transform: translateX(0%);

	xleft:0%;
}



/* https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily */
.mbx-slide-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}


.mbx-slider-dotholder{
	position:absolute;
	bottom:30px;
	xleft:50%;
	xtransform: translate(-50%, 0);
	width:100%;
	text-align: center;
}

.mbx-slider-dot{
	display: inline-block;
	margin:16px 5px;
	width:10px;
	height:10px;
	border:2px solid white;
	border-radius: 50%;
}

.mbx-slider-dotclicker{
	display: inline-block;
	cursor: pointer;
}
.mbx-slider-dot.active{
	background-color:#fff;
}



.mbx-slide-left{
	position:absolute;
	left:0px;
	top:0%;
	height:100%;
	width:118px;
	cursor: pointer;
	z-index: 999;
}

.mbx-slide-right{
	position:absolute;
	right:0px;
	top:0%;
	height:100%;
	width:118px;
	cursor: pointer;
	z-index: 999;
}


.mbx-slide-right img, .mbx-slide-left img{
	position:absolute;
	left:0px;
	top:50%;
	cursor: pointer;
	transform: translate(0,-50%);
	pointer-events: none;
}

@media(max-width:769px){

	.mbx-slide-left, .mbx-slide-right{
		width:40px;
	}
	.mbx-slide-left img{
		left:-10px;
	}

	.mbx-slide-right img{
		left:-58px;
	}
}