/*@import "base/_variables";*/
*, *::before, *::after {
  box-sizing: border-box;
  border: 0;
  margin: 0;
}
html, body { height: 100%; }
:root {
	--subtleTextColor: #707070;
	--iconColor: #666;
	--mediumDividerLine: 1px solid #dddddd;
	--marginPadding: 40px;
	--baseColor: #4e4e4e;
}
@media (max-width: 530px) {
  :root {
    --marginPadding: 15px;
  }
}
@media (min-width: 1010px) {
  :root {
    --marginPadding: 60px;
  }
}
img {
  max-width: 100%;
  height: auto;
}
@font-face {
  font-family: "appIconsDesigner";
  src:url("../fonts/coachaccountable-app-icons-v2.eot");
  src:url("../fonts/coachaccountable-app-icons-v2.eot?#iefix") format("embedded-opentype"),
    url("../fonts/coachaccountable-app-icons-v2.woff") format("woff"),
    url("../fonts/coachaccountable-app-icons-v2.ttf") format("truetype"),
    url("../fonts/coachaccountable-app-icons-v2.svg#coachaccountable-app-icons-v2") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Caveat';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Caveat-Regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Caveat';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Caveat-Bold.woff2") format("woff2");
}
body {
	font-family: Inter, Roboto, Arial, Tahoma, sans-serif;
	color: #1a1a1a;
	color: var(--baseColor);
	font-size: 18px;
}
a:link, a:visited { text-decoration: none; color: var(--brandingPrimary); }
a:hover { text-decoration: underline; }
p {
	line-height: 1.5em;
	margin-bottom: 1.8em;
}
hr {
	margin: 80px 0;
	border-top: 1px solid #f6f6f6;
	border-bottom: 1px solid #ededed;
}
h2 {
	font-size: 30px;
	margin-bottom: 30px;
	font-weight: 600;
}
@media (max-width: 530px) {
  h2 {
    font-size: 26px;
  }
}
h3 {
	margin-bottom: 20px;
}
.maxWidthContent {
	margin: 0px auto;
	max-width: 1200px;
	padding-left: var(--marginPadding);
	padding-right: var(--marginPadding);
}
.maxWidthContent.readable {
  max-width: 1000px;
}
.maxWidthContent.bottomPadded {
  padding-bottom: 120px;
}
.readableWidth {
	max-width: 800px; /* 880px; */
/*	margin: 0 auto;*/
	margin-left: auto;
	margin-right: auto;
}
img.fullScreenshot {
	border: 1px solid #429ada;
	border: var(--mediumDividerLine);
}
.primaryColor { color: var(--brandingPrimary); }
ul.intrigueSections {
	padding: 0;
	
}
ul.intrigueSections li {
  position: relative;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  color: #535353;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  margin: 0 0 10px 0;
  list-style-type: none;
  padding: 8px 10px 8px 30px;
  border-radius: 4px;
}
ul.intrigueSections li:before {
  content: '';
  position: absolute;
  top: 13px;
  left: 10px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid var(--brandingPrimary);
}
ul.intrigueSections li a.current {
  font-weight: 700;
  color: inherit;
  pointer-events: none;
}
ul.intrigueSections.spacey li {
  padding: 15px 30px 15px 40px;
  font-size: 15px;
}
ul.intrigueSections.spacey li:before {
  top: 20px;
  left: 15px;
}
ul.intrigueSections.checkmarks li:before {
  border-radius: 0;
  border: 2px solid var(--brandingPrimary);
  border-top: none;
  border-left: none;
  height: 12px;
  width: 7px;
  transform: translateY(-4px) rotate(45deg);
}
ul.intrigueSections.arrows li:before {
  font-family: "appIconsDesigner" !important;
  content: "\e01e";
  border: none;
  top: 5px;
  left: 3px;
  font-size: 24px;
  color: #aaa;
}
ul.intrigueSections.noBullet li {
  padding-left: 20px;
}
ul.intrigueSections.noBullet li:before {
  content: none;
}
ul.intrigueSections.noBullet li.spacy {
  padding-left: 30px;
}
.highlightItemIcon {
	display: inline-block;
	padding: 10px;
	line-height: .7;
	border-radius: 5px;
	background-color: rgba(var(--brandingPrimaryRGB), .1);
}
.highlightItemIcon:before {
  font-size: 30px;
  color: var(--brandingPrimary);
}
table.data {
	background-color: var(--baseBGColor);
	color: var(--baseColor);
	border-spacing: 0px;
}
table.data.largeData {
  font-size: 14px;
}
table.data.verticalMiddle td {
  vertical-align: middle;
}
table.data.textRight tr th {
  text-align: right;
}
table.data.tightData tr td:first-child, table.data.tightData tr th:first-child {
  padding-left: 3px;
}
table.data th, table.data td {
  padding: 10px 3px 10px 3px;
}
table.data th:first-child, table.data td:first-child {
  padding-left: 10px;
}
table.data td {
  vertical-align: baseline;
}
table.data td .snug[class^="icon-"]:before,
		table.data td .snug[class*=" icon-"]:before {
  font-size: 14px;
}
table.data tr th {
  background: var(--baseBGColor);
  border-bottom: var(--mediumDividerLine);
  color: var(--baseColor);
  text-align: left;
  font-weight: 700;
}
table.data tr th.right {
  text-align: right;
}
table.data tfoot td, table.data tfoot td, table.data tr.footer th {
  background: var(--baseBGColor);
  border-top: var(--mediumDividerLine);
  border-bottom: none;
}
table.data tr td:first-child, table.data tr th:first-child {
  padding-left: 10px;
}
table.data tr td.right:last-child, table.data tr th.right:last-child {
  padding-right: 10px;
}
table.data tr.odd  td, table.data tr:nth-child(odd)  td {
  background-color: var(--highlight03);
}
table.data tr.even td, table.data tr:nth-child(even) td {
  background-color:	var(--cardBGColor);
}
table.data.numberTable td, table.data.numberTable th {
  text-align: right;
  padding-right: 10px;
}
table.data.numberTable td:first-child, table.data.numberTable th:first-child {
  text-align: left;
  white-space: pre;
}
table th.sortAsc, table th.sortDesc {
  position: relative;
}
table th.sortAsc:after, table th.sortDesc:after {
  font-family: 'appIconsDesigner';
  content: "\56";
  position: absolute;
  display: inline-block;
  padding-top: 2px;
  padding-left: 4px;
}
table th.sortAsc.right, table th.sortDesc.right {
  padding-right: 24px;
  /* make room for arrow so it doesn't spill out of table bounds! */
}
table th.sortAsc:after {
  content: "\3f";
  padding-top: 1px;
}
/*------------------------------------------------------------------------------*/
/* SECTION::Legacy  */
.content {
	margin:					0px 20px;
	max-width:				960px;
	width:					auto;
	position:				relative;
	padding-bottom:			30px;
}
.content div.innerContent { padding: 0px 0px 96px 0px; }
@media only screen and (min-width: 1000px) {
	.content { margin: 0 auto; }
}
#pageHeader + .content { margin-top: 100px; }
.content p, .content ul, .content ol { font-size: 18px; line-height: 1.8em; }
#greenHeaderBar { margin-top: 120px; }
/*------------------------------------------------------------------------------*/
/* SECTION::Universal Utility  */
.left       { float: left; }
td.left, th.left	{ text-align: left;  float: none; }
.right      { float: right;}
td.right,th.right	{ text-align: right; float: none; }
.clear      { clear: both; }
td.top, table.top td, tr.top td { vertical-align: baseline; padding-top: 6px; }
td.bottom			{ vertical-align: bottom; }
.inline		{ display: inline; }
.block		{ display: block; }
.inlineBlock{ display: inline-block; }
.left.buffered  { margin: 0 30px 10px 0; }
.right.buffered { margin: 0 0 10px 30px; }
.textLeft	{ text-align: left; }
.textRight	{ text-align: right !important; }
.justify	{ text-align: justify; }
.bold		{ font-weight: 700; }
.relative	{ position: relative; }
.absolute	{ position: absolute; }
.clickable	{ cursor: pointer; }
.unclickable{ cursor: default !important; }
.center     { text-align: center; }
/* CENTER elements contained by me  */
.centered   { display: block; margin: 0 auto; }
/* make me CENTERED in my container */
.oneLiner	{ height: 1.3em; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verticalMiddle td, td.verticalMiddle	{ vertical-align: middle; }
div.verticalMiddle						{ vertical-align: middle; }
.verticalMiddle>*, .verticalMiddle>a>*	{ vertical-align: middle; }
.hidden     	{ display: none !important; }
.truncatedText	{ overflow: hidden; }
.hideOverflow	{ overflow: hidden; }
.nextElement	{ margin-top:  6px; }
.nextSection	{ margin-top: 16px; }
/* End SECTION::Universal Utility
/*------------------------------------------------------------------------------*/
/* @import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic); */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-italic-webfont.eot');
    src: url('../fonts/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('../fonts/roboto-italic-webfont.woff') format('woff'),
         url('../fonts/roboto-italic-webfont.ttf') format('truetype'),
         url('../fonts/roboto-italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Inter-Thin.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-ThinItalic.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Italic.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
       url("../fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}
.color--red,   .color--red[class^="icon-"]:before    { color: var(--statusRed)    !important; }
.color--green, .color--green[class^="icon-"]:before  { color: var(--statusGreen)  !important; }
.color--orange { color: var(--statusOrange) !important; }
:root {
	--baseColor: #4a4a4a;
	--iconColor: #666;
  --borderColor:       #ababab;
  --mediumBorderColor: #dbdbdb;
  --minorBorderColor:  #e1e1e1;
  --tinyBorderColor: 	 #e8e8e8;
  --meenyBorderColor:  #efefef;
  --dividerLine:       1px solid var(--borderColor);
  --mediumDividerLine: 1px solid var(--mediumBorderColor);
  --minorDividerLine:  1px solid var(--minorBorderColor);
  --meenyDividerLine:  1px solid var(--meenyBorderColor);
  --baseBGColor: #ffffff;
  --baseBGColorRGB: 255, 255, 255;
  --cardBGColor: #ffffff;
  --subtleGrey: #fafafa;
  --fadedBGColor: #eeeeee;
  --disabledTextColor: #ccc;
  --meterBGColor: #f4f4f4;
  --penBlue: #1E83CC;
	--primaryLight60: #bcd79c;
	--primaryLight97: #fafcf7;
  --highlight03: #f8f8f8;
  --highlight06: #f2f8fd;
  --highlight13: #e3f1fa;
  
  --CAGreen: #6c9c31;
  --brandingPrimary: #6c9c31;
  --brandingSecondary: #429ada;
  --brandingPrimaryOnBlack: #6c9c31; /* Generate a sufficiently contrasting alternative when too dark */
  --primaryLight60: #bcd79c;
  --secondaryLight60: #add4f0;
  --secondaryLight87: #e3f1fa;
	--secondaryLight94: #f2f8fd;
  --brandingPrimaryRGB: 108, 156, 49;
  --brandingSecondaryRGB: 66, 154, 218;
  
  --statusRed:		#e53935;
  --statusOrange: #fe8f01;
  --statusYellow:	#fcbf30;
  --statusGreen:  #6c9c31;
  --statusBlue:		#2597dd;
  --statusGrey:		#888888;
  --statusPurple:	#701896;
  --statusGreenLight: #bcd79c;
  
  --inputBGColor: #ffffff;
  --shadowColorRGB: 0, 0, 0;
  --buttonRadius: 6px;
  
  --topBarHeight: 60px;
	--pageHeaderHeight: 0px;
	--standardPadding: 15px;
	--standardPaddingH: 15px;
	
	--regionPadding: 10px 15px;
	--inverseRegionPaddingMargin: 10px -15px -10px -15px;
	
	--roundedRadius: 10px;
	--rectangleItemRadius: 10px;
			
	--pageNavWidth: 265px;
	--WYSIWYGContentWidth: 600px;
	--WYSIWYGPaddedWidth: calc(var(--WYSIWYGContentWidth) + (2 * var(--standardPaddingH)));
/*	--WYSIWYGPaddedWidth: calc(var(--WYSIWYGContentWidth) + (2 * 24px));*/
	
}
/*------------------------------------------------------------------------------*/
/* SECTION::Buttons  */
/*a.button, span.button, label.button, input[type=submit], input[type=button], button {*/
.button, a.button, input[type=submit], input[type=button], button {
	font-size: 15px;
	margin-right:			10px;
	display:				inline-block;
	background:				#fff;
	border: 1px solid #999999;
	text-align: center;
	white-space: nowrap;
/*	overflow: hidden;
	text-overflow: ellipsis;*/
	user-select: none; -moz-user-select: none; -webkit-user-select: none;
	text-decoration:		none !important;
	color:					var(--baseColor);
/* 	padding:				5px 12px 5px 12px; */
	padding: 9px 12px;
	height: 40px;
	line-height: normal;
	cursor:					pointer;
	outline:				0; /* remove dotted outline on focus in FF */
	border-radius: var(--buttonRadius);
	transition: background-color linear 0.1s, border-color linear 0.1s;
	-webkit-appearance: none;
}
.button:not(.primary), a.button:not(.primary), input[type=submit]:not(.primary), input[type=button]:not(.primary), button:not(.primary) {
  border: 1px solid #ddd;
}
.button.iconImage, a.button.iconImage, input[type=submit].iconImage, input[type=button].iconImage, button.iconImage {
  padding: 0;
  position: relative;
  top: 7px;
}
.button.iconImage img, a.button.iconImage img, input[type=submit].iconImage img, input[type=button].iconImage img, button.iconImage img {
  height: 28px;
  border-radius:2px;
}
.button.mini, a.button.mini, input[type=submit].mini, input[type=button].mini, button.mini {
  padding: 4px 8px;
  font-size: 12px;
  height: auto;
}
a.button:link, a.button:visited { color: var(--baseColor); }
.button.button--fileUpload {
	margin: 0;
	padding-top: 5px;
}
.button.button--fileUpload svg {
  position: relative;
  top: -3px;
}
.textRight .button:last-child, .textRight input[type=submit]:last-child, .textRight input[type=submit]:last-child, { margin-right: 0; }
input[type=submit], input[type=button] {
	font-family: Roboto, Arial, sans-serif;
}
/* We define atFullUI as having a screen size sufficient to have the full on desktop-like layout:
	
	atFullUI:												Smaller than atFullUI:
		Multiple columns 								Single column
		Regions with padding						Regions abutting the screen edge
		Pop ups float/are positioned		Pop ups that are full screen
		Menus show beside sections			Menus are full screen and slide over upon selection
	*/
@media (min-width: 800px) and (min-height: 500px) {
  input[type=submit], input[type=button] {
    /* line-height: 17px; */
  }
}
.button.omega, input.omega[type=submit], input.omega[type=button] { margin-right: 0; }
.textRight a.button, .textRight input[type=submit], .textRight input[type=button] { margin-right: 0; margin-left: 10px; }
.button:hover,  input[type=submit]:hover,  input[type=button]:hover,
.button:focus,  input[type=submit]:focus,  input[type=button]:focus,
.button:active, input[type=submit]:active, input[type=button]:active { color: var(--brandingSecondary) !important; border-color: var(--brandingSecondary); }
.button.disabled, input[type=submit]:disabled, input[type=button]:disabled {
	background:			#eeeeee;
	color:					#aaaaaa !important;
	cursor:					default;
	pointer-events: none;
}
.button.primary, input.primary[type=submit], input.primary[type=button] {
	color: #ffffff !important; border-color: var(--brandingPrimary); background: var(--brandingPrimary);
	box-shadow: none;
}
.button.primary:hover, input.primary[type=submit]:hover, input.primary[type=button]:hover, 
.button.primary:focus, input.primary[type=submit]:focus, input.primary[type=button]:focus  {
	background-color: var(--brandingSecondary); border-color: var(--brandingSecondary); /* #8cd3ff 429ada; */ }
.button.primary:active, input.primary[type=submit]:active, input.primary[type=button]:active { box-shadow: inset 0 0 0 150px rgba(0, 0, 0, .2); }
.button.primary.disabled, input.primary[type=submit]:disabled, input.primary[type=button]:disabled {
	border-color: var(--primaryLight60) !important; background: var(--primaryLight60) !important;
}
.buttonRow {
	font-size: 0;
}
.buttonRow .button {
  border-radius: 20px;
  min-width: 40px;
  margin: 0;
  vertical-align: middle;
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 4px;
}
.buttonRow .button[class^="icon-"]:not(.iconWithText),
		.buttonRow .button[class*=" icon-"]:not(.iconWithText) {
  overflow: hidden;
  text-align: center;
  padding-top: 9px;
  padding-left: 0;
  padding-right: 0;
}
/* We define atFullUI as having a screen size sufficient to have the full on desktop-like layout:
	
	atFullUI:												Smaller than atFullUI:
		Multiple columns 								Single column
		Regions with padding						Regions abutting the screen edge
		Pop ups float/are positioned		Pop ups that are full screen
		Menus show beside sections			Menus are full screen and slide over upon selection
	*/
@media (min-width: 800px) and (min-height: 500px) {
  .buttonRow .button[class^="icon-"]:not(.iconWithText),
		.buttonRow .button[class*=" icon-"]:not(.iconWithText) {
    max-width: 40px;
  }
}
/*		@mixin atMiniUI {
			border-radius: 22px;
			padding-top: 6px;
		}*/
.buttonRow .button + .button {
  margin-left: -1px;
}
.buttonRow:not(.toggleControl) .button {
  min-width: 40px !important;
}
.buttonRow.judgementRow .button {
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 2px 0 4px 0 !important;
}
.buttonRow button:first-child {
  border-radius: 3px 0 0 3px;
}
.textRight .button:last-child { margin-right: 0; }
.button.icon { width: 32px; background: #ffffff 50% 50% no-repeat; }
.button.icon:hover { background-color: #e1e1e1; }
.button.icon.withText {/*  padding-top: 3px; height: auto;  */ height: 30px; padding-left: 30px; width: auto;  background-position: 7px 50%; }
/*  padding-left: 8px;
  padding-right: 8px;*/
.button[class^="icon-"].iconWithText:before, .button[class*=" icon-"].iconWithText:before {
  letter-spacing: 8px;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .button[class^="icon-"].iconWithText.hideTextAtMini, .button[class*=" icon-"].iconWithText.hideTextAtMini {
    font-size: 0px !important;
  }
  .button[class^="icon-"].iconWithText.hideTextAtMini:before, .button[class*=" icon-"].iconWithText.hideTextAtMini:before {
    letter-spacing: 0px;
  }
}
.button[class^="icon-"]:before,
.button[class*=" icon-"]:before {
  font-size: 20px;
  color: var(--iconColor);
  letter-spacing: 0px;
  transition: color .2s linear;
  vertical-align: middle;
  position: relative;
  top: -3px;
}
.buttonRow .button[class^="icon-"]:before, .buttonRow .button[class*=" icon-"]:before {
  top: -1px;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .button[class^="icon-"]:before,
.button[class*=" icon-"]:before {
    top: -2px;
  }
}
.button[class^="icon-"]:hover:before,
.button[class*=" icon-"]:hover:before {
  color: #000;
}
.button.disabled[class^="icon-"]:hover:before,
.button.disabled[class*=" icon-"]:hover:before {
  color: #888888;
}
.button.primary[class^="icon-"]:before,
.button.primary[class*=" icon-"]:before {
	color: #ffffff !important;
}
.inputSideCar.button {
	margin-left: -1px !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	padding-left: 4px;
	padding-right: 5px;
}
.inputSideCar.button:before {
  font-size: 15px;
}
.inputSideCar.button.miniSideCar {
  height: 30px;
  padding: 4px 5px 1px 5px;
}
.inputSideCar.button.overSideCar {
  margin-left: -8px !important;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .button.button--halfWidthAtMini {
    width: calc(50% - 10px) !important;
    display: inline-block;
    margin-left: 0;
  }
  .button.button--halfWidthAtMini ~ .button.button--halfWidthAtMini {
    margin-left: 14px !important;
  }
  .button.button--halfWidthAtMini + .button.icon-download {
    display: none;
  }
}
.fixed100 { min-width: 100px; }
.selfPadded { margin: 10px 15px; }
/* End SECTION::Buttons
/*------------------------------------------------------------------------------*/
input, textarea, select, input[type=submit], .textInput {
	transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=text], input[type=password], input[type=number], textarea, select, input[type=submit] {
	-webkit-appearance: none; /* prevent webkit override styling */
}
::-webkit-input-placeholder { color: #999999; }
:-ms-input-placeholder { color: #999999; }
:-moz-placeholder { color: #999999; }
::-moz-placeholder { color: #999999; }
input[type=text], input[type=password], input[type=number], textarea, select, input[type=submit], .textInput {
		color: var(--baseColor);
 		border: var(--mediumDividerLine);
 		border-radius: 3px;
 		background-color: var(--inputBGColor);
 		font-size: 15px;
 		font-family: Roboto, Arial, sans-serif;
		padding: 9px 10px;
 	}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus, input[type=submit]:focus, .textInput:focus {
  border-color: var(--brandingSecondary);
  outline: 0;
}
.StripeElement--focus { border-color: var(--brandingSecondary); }
input[type=text], input[type=password], input[type=number], select {
 	/*	height: 30px;*/
		height: auto;
 	}
input[type=text].twoWide, input[type=password].twoWide, input[type=number].twoWide, select.twoWide {
  width: 48px;
}
input[type=text].threeWide, input[type=password].threeWide, input[type=number].threeWide, select.threeWide {
  width: 64px;
}
input[type=number] {
 		padding: 0px 0 0px 10px;
 		height: 40px;
 	/*	line-height: 2.7; *//* Nice in Chrome to make spin buttons fill the height, but makes wonky in Safari, ugh! */
 		width: 60px;
 	}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
--knobHeight: 25px;
inputX[type="range"] {
 	  background-color: var(--inputBGColor);
 	}
inputX[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  width: var(--knobHeight);
  height: var(--knobHeight);
  background-color: var(--inputBGColor);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}
inputX[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--fadedBGColor);
}
inputX[type="range"]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 3px #387bbe;
}
inputX[type="range"]::-moz-range-thumb {
  appearance: none;
  pointer-events: all;
  width: var(--knobHeight);
  height: var(--knobHeight);
  background-color: var(--inputBGColor);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}
inputX[type="range"]::-moz-range-thumb:hover {
  background-color: var(--fadedBGColor);
}
inputX[type="range"]::-moz-range-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 3px #387bbe;
}
.textInput {
	display: inline-block;
	width: 100%;
}
/* Extended restyling of <select>: */
select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: 0;
	}
select option.folder {
  font-style: italic;
}
select:not([multiple]) {
		background: var(--inputBGColor) url(../../images/v3/graphics/selectArrowDown.png) no-repeat right .3rem center / .8rem 1rem;
		padding-right: 1.5rem;
	}
select[multiple] { height: auto; }
select::-ms-expand { display: none; }
form.search { display: inline-block; }
input.search, input.DatePicker-input, input.timeInput {
 		background: #989898 0 50% no-repeat;  padding-left: 30px;
 		transition: background-color linear 0.2s;
 	}
input.search:hover, input.search:focus,
 	input.DatePicker-input:hover, input.DatePicker-input:focus,
 	input.timeInput:hover, input.timeInput:focus { background-color: var(--brandingSecondary); }
input.search {
 		background: #ababab url(../../images/v3/graphics/searchInputBGM.png?m=2) 0 50% no-repeat;
 		background-size: auto 41px;
 		border-radius: 20px;
 		width: 200px;
 	}
input.DatePicker-input {
 		width: 104px;
 		padding-right: 2px;
 		background: #ababab url(../../images/v3/graphics/dateInputBGM.png) -4px 50% no-repeat;
 		background-size: auto 52px;
 	}
input.timeInput {
 		background: #ababab url(../../images/v3/graphics/timeInputBGM.png) -4px 50% no-repeat;
 		width: 104px;
 		text-align: right;
 		background-size: auto 62px;
 	}
.formAlignTest {
	position: relative;
}
.formAlignTest .guideline {
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #f0f;
  opacity: .15;
}
.formAlignTest .guideline.baseline {
  top: 25px;
}
.formAlignTest .guideline.bottom {
  top: auto;
  bottom: 0;
}
textarea[disabled] {
	background-color:	#f4f4f4;
	color:				#bbb;
}
.filterInputClearHolder {
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 40px;
}
.filterInputClearHolder .filterInputClearButton {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 31px;
  background: var(--brandingSecondary);
  background: rgba(var(--brandingSecondaryRGB), .1);
  background: transparent;
  z-index: 1;
  opacity: 0;
  transition: opacity ease-out .05s;
  pointer-events: none;
  border-radius: 0 50% 50% 0;
  cursor: pointer;
  text-align: right;
}
.filterInputClearHolder .filterInputClearButton:after {
  font-family: "appIcons" !important;
  content: "\e011";
  position: absolute;
  top: 13px;
  left: 8px;
  color: #fff;
  top: 12px;
  color: var(--baseColor);
  font-size: 12px;
}
input[type=text].filterApplies {
	border-color: var(--brandingSecondary) !important;
	padding-right: 35px;
	box-shadow: inset 0 0 0 0px var(--brandingSecondary);
}
input[type=text].filterApplies + .filterInputClearHolder .filterInputClearButton {
  pointer-events: auto;
  opacity: 1;
  transition: opacity ease-out .15s;
}
.camouflauge { background: transparent; border-color: transparent; }
.switchCheckbox {
	display: inline-block;
	padding-top: 5px;
	cursor: pointer;
	
}
.switchCheckbox input {
  /* position: absolute; top: 0; left: -9999px; z-index: -1; opacity: 0; margin-right: 4px; */
  margin-right: -17px;
  opacity: 0;
}
.switchCheckbox input:checked + .theSwitch {
  border-color: var(--brandingSecondary) !important;
  background-color: var(--brandingSecondary) !important;
}
.switchCheckbox input:checked + .theSwitch i {
  left: 23px;
  background-color: #fff;
}
.switchCheckbox .theSwitch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 27px;
  overflow: hidden;
  cursor: pointer;
  margin: -4px 8px 0 0;
  border-radius: 15px;
  border: 2px solid #bbb;
  background: #ddd;
  vertical-align: middle;
  transition: background ease-in 150ms;
}
.switchCheckbox .theSwitch i {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 23px;
  width: 23px;
  border-radius: 12px;
  transition: left ease-in 150ms;
  background-color: #fff;
}
.styleCheckbox {
	cursor: pointer; position: relative; display: inline-block; padding: 5px 0 0 25px;
	min-height: 1.9em;
}
.styleCheckbox input[type=checkbox]:first-child {
  z-index: -1;
  opacity: 0;
  margin-right: 4px;
  position: absolute;
  left: -9999px;
}
.styleCheckbox input[type=checkbox]:first-child:not(:checked) ~ .showIfChecked,
		.styleCheckbox input[type=checkbox]:first-child:checked       ~ .hideIfChecked {
  display: none;
}
.styleCheckbox input[type=checkbox]:first-child:checked + div, .styleCheckbox input[type=checkbox]:first-child:checked + span {
  background: var(--baseBGColor);
  border: 1px solid var(--brandingSecondary);
}
.styleCheckbox div, .clientNoteContent .styleCheckbox span {
  position: absolute;
  top: 4px;
  left: 0;
  height: 19px;
  width: 19px;
  border: 1px solid var(--mediumBorderColor);
  border-radius: 0px;
  background: var(--baseBGColor);
}
/*	
	input:checked + div, .clientNoteContent & input:checked + span {
		background: var(--baseBGColor);
		border: 1px solid var(--brandingSecondary);
	}*/
.styleCheckbox input:disabled + div, .clientNoteContent .styleCheckbox input:disabled + span {
  pointer-events: none;
  opacity: .6;
  background: #e6e6e6;
  border-color: #888888 !important;
}
.styleCheckbox div:after, .clientNoteContent .styleCheckbox span:after {
  position: absolute;
  display: none;
  content: '';
  top: 0px;
  left: 5px;
  width: 7px;
  height: 13px;
  transform: rotate(45deg);
  border: solid var(--brandingSecondary);
  border-width: 0 2px 2px 0;
}
.styleCheckbox input:checked  + div:after, .clientNoteContent .styleCheckbox input:checked  + span:after {
  display: block;
}
.styleCheckbox input:disabled + div:after, .clientNoteContent .styleCheckbox input:disabled + span:after {
  border-color: #7b7b7b;
}
.styleCheckbox .helpLink {
  position: relative;
  padding-left: 33px;
}
.styleCheckbox .helpLink span {
  position: absolute;
  left: 5px;
  top: -2px;
}
.styleRadio {
	cursor: pointer;
	position: relative;
	display: inline-block;
	padding: 5px 0 0 25px;
	
}
.styleRadio input[type=radio]:first-child {
  z-index: -1;
  opacity: 0;
  margin-right: 4px;
  position: absolute;
  left: -9999px;
}
.styleRadio input[type=radio]:first-child:not(:checked) ~ .showIfChecked,
		.styleRadio input[type=radio]:first-child:checked       ~ .hideIfChecked {
  display: none;
}
.styleRadio input[type=radio]:first-child + div, .styleRadio input[type=radio]:first-child + span {
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  height: 19px;
  width: 19px;
  border: 1px solid var(--mediumBorderColor);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px var(--cardBGColor);
  transition: box-shadow ease-in 200ms;
}
.styleRadio input[type=radio]:first-child:checked + div, .styleRadio input[type=radio]:first-child:checked + span {
  background: var(--brandingSecondary);
  border: 2px solid var(--brandingSecondary);
  box-shadow: inset 0 0 0 3px var(--cardBGColor);
}
.styleRadio.styleRadio--blue      input[type=radio]:first-child:checked + div {
  background: #2597dd;
  border: 2px solid #2597dd;
}
.styleRadio.styleRadio--lightBlue input[type=radio]:first-child:checked + div {
  background: #8cd3ff;
  border: 2px solid #8cd3ff;
}
.styleRadio.styleRadio--yellow    input[type=radio]:first-child:checked + div {
  background: #fcc02e;
  border: 2px solid #fcc02e;
}
.styleRadio.styleRadio--red       input[type=radio]:first-child:checked + div {
  background: #c9120e;
  border: 2px solid #c9120e;
}
/*
.styleRadio input:first-child { z-index: -1; opacity: 0; margin-right: 4px; position: absolute; left: -9999px; }
.styleRadio div, .clientNoteContent .styleRadio span {
	position: absolute; top: calc(50% - 8px); left: 0; height: 19px; width: 19px;
	border: 1px solid var(--mediumBorderColor); border-radius: 50%;
	box-shadow: inset 0 0 0 10px var(--cardBGColor);
	transition: box-shadow ease-in 200ms;
}
.styleRadio input:first-child:checked + div, .clientNoteContent .styleRadio input:first-child:checked + span {
	background: var(--brandingSecondary);
	border: 2px solid var(--brandingSecondary);
	box-shadow: inset 0 0 0 3px var(--cardBGColor);
}
  
.styleRadio.styleRadio--blue      input:first-child:checked + div { background: #2597dd; border: 2px solid #2597dd; }
.styleRadio.styleRadio--lightBlue input:first-child:checked + div { background: #8cd3ff; border: 2px solid #8cd3ff; }
.styleRadio.styleRadio--yellow    input:first-child:checked + div { background: #fcc02e; border: 2px solid #fcc02e; }
.styleRadio.styleRadio--red       input:first-child:checked + div { background: #c9120e; border: 2px solid #c9120e; }

*/
.styleRadio:hover input:first-child:not([disabled]):checked + div,
.styleRadio input:first-child:checked:focus + div {
	box-shadow: inset 0 0 0 3px var(--cardBGColor), 0 0 8px rgba(82, 168, 236, 0.6);
}
.styleRadio input:first-child:disabled + div, .clientNoteContent .styleRadio input:first-child:disabled + span { pointer-events: none; opacity: .6; background: #e6e6e6; }
.radioInputRider { margin-left: 24px; display: inline-block; }
input.beautifulFileInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
input.beautifulFileInput + label {
  cursor: pointer;
  max-width: 450px;
}
/*100%; */
input.beautifulFileInput + label i {
  position: relative;
  top: -2px;
}
input.beautifulFileInput + label span {
  display: inline-block;
  padding-left: 5px;
  font-size: 1.25em;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
input.fileInput {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
input.fileInput + label {
  cursor: pointer;
  max-width: 100%;
}
input.fileInput + label span {
  display: inline-block;
  padding-left: 8px;
  font-size: 1.25em;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.magicTagSet {
	position: relative;
	margin-top: 20px;
	border-radius: 5px;
	padding: 8px 15px 8px 15px;
	background-color: rgba(var(--brandingPrimaryRGB), .1);
	border: 1px solid var(--brandingPrimary);
	width: fit-content;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	user-select: none;
}
.magicTagSet .legend {
  position: absolute;
  display: block;
  padding: 0 5px;
  top: -8px;
  top: -.7em;
  /*	@mixin atMiniUI { top: -7px; }*/
  left: 15px;
  font-size: 11px;
  z-index: 1;
}
.magicTagSet .legend:before {
  content: '';
  position: absolute;
  inset: auto 0 5px 0;
  background: var(--cardBGColor);
  height: 3px;
  z-index: -1;
}
.magicTagSet a:link {
  text-decoration: none;
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: var(--cardBGColor);
}
._ephemeralMessage {
	position:absolute;
	top: 0;
	left: -9999px;
	z-index:9999;
	opacity: 0;
	background-color: var(--baseBGColor);
	padding: 15px 20px;
	border-radius: 10px;
	border: var(--dividerLine); 
	transform: translate3d(-50px, 0, 1px); opacity: 0; z-index: -1;
	transition: transform ease-out 0.3s, opacity ease-in 0.3s, z-index ease-out 0.3s;
}
._ephemeralMessage.appearing {
  box-shadow: 2px 4px 9px rgba(0, 0, 0, .15);
  opacity: 1;
  transform: translate3d(0, 0, 1px);
}
._ephemeralMessage .vanishing {
  transform: translate3d(150px, 0, 1px);
  opacity: 0;
  z-index: -1;
  transition: transform ease-in 0.3s, opacity ease-in 0.3s, z-index ease-out 0.3s;
}
.ephemeralContent {
	display: none;
}
/*------------------------------------------------------------------------------*/
/* SECTION::Alert/Confirm  */
.modal-view-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 100000;
	pointer-events: none;
	transform: translateZ(1px);
}
.view.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100001;
	
	
	-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
	opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
	opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity;
}
.view.modal.visible {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: scale(1) translateZ(1px);
	transform: scale(1) translateZ(1px);
	
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
	opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
	opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.modal-view-details {
	background: #FFF;
	z-index: 2;
	position: fixed;
	left: 50%;
	top: 50%;
	padding: 25px 25px 25px 25px;
	width: 85%;
	max-width: 460px;
	-webkit-transform: translate3d(-50%, -50%, 1px) scale(1.15);
	        transform: translate3d(-50%, -50%, 1px) scale(1.15);
	        
	transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	
	will-change: transform, opacity;
	
	border-radius: 2px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.6);
	
}
@media (max-width: 530px) {
  .modal-view-details {
    width: 65%;
  }
}
.view.modal.visible .modal-view-details {
	-webkit-transform: translate3d(-50%, -50%, 1px) scale(1);
	        transform: translate3d(-50%, -50%, 1px) scale(1);
	will-change: transform, opacity;
	max-height: calc(100vh - 100px);
	overflow: auto;
}
.modal-view-details h1 {
	margin: 0.2em 0 0.4em 0;
	padding: 0;
	line-height: 1;
	font-size: 24px;
	color: #111;
}
.modal-view-details p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0; padding: 0 0 1em 0;
}
.modal-view-details input.prompt { width: 100%; margin: 20px 0 -20px 0; }
.modal-view-details div.errorMessage { margin-top: 15px; padding: 10px 0; color: #800; }
.modal-view-details .modal-button-row {
	margin-top: 20px;
	text-align: right;
}
.modal-view-details .modal-button-row .button, .modal-view-details .modal-button-row input[type=button] {
  min-width: 80px;
}
.modal-view-details .modal-button-row .button:last-child, .modal-view-details .modal-button-row input[type=button]:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .modal-button-row .button, .modal-button-row input[type=submit], .modal-button-row input[type=button] {
    width: 100%;
    margin: 0 0 10px 0;
  }
}
.modal:after {
	position: fixed;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: block;
	content: '';
}
.view {
	will-change: transform;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	transition:         transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
/* End SECTION::Alert/Confirm
/*------------------------------------------------------------------------------*/
input.tuckedButton {
	background-image: url(../../images/v3/graphics/selectArrowDown.png);
	background-repeat: no-repeat;
	background-position: calc(100% - 3px) 50%;
	padding-right: 25px;
}
.tuckedControlsHolder {
	position: relative;
	display: inline-block;
}
.tuckedControls {
	position: absolute; left: -9999px; top: -9999px;
	border-radius: 4px;
	background: var(--cardBGColor);
	box-shadow: 0 0 3px rgba(0, 0, 0, .3); padding: 0px 0;
	transform: scale(1.15); opacity: 0;
	
	transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	pointer-events: none;
	z-index: 100;
	text-align: left;
	font-size: 13px;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .tuckedControls {
    /* prevent horizontal overflow & scroll bar */
  }
  .tuckedControls:not(.showing) {
    transform: scale(.85);
  }
}
.tuckedButton.omega + .tuckedControls:not(.showing) {
  transform: scale(.85);
}
.tuckedControls.showing {
  transform: scale(1) translate3d(0, 0, 1px);
  opacity: 1;
  pointer-events: auto;
  left: 0;
}
.tuckedControls:after {
  width: 10px;
  height: 10px;
  position: absolute;
  top: -5px;
  right: 10px;
  transform: rotateZ(45deg);
  background: var(--cardBGColor);
  z-index: -1;
  content: '';
  border-top: var(--minorDividerLine);
  border-left: var(--minorDividerLine);
}
.tuckedControls.inverted:after {
  top: auto;
  bottom: -5px;
  transform: rotateZ(-135deg);
}
.tuckedControls.mirrored:after {
  right: auto;
  left: 10px;
}
.tuckedControls > label, .tuckedControls > span.option {
  display: block;
  padding: 6px 10px;
  background: var(--cardBGColor);
  min-width: 100px;
  cursor: pointer;
  white-space: nowrap;
}
.tuckedControls > label span, .tuckedControls > span.option span {
  white-space: nowrap;
}
.tuckedControls > label:first-child, .tuckedControls > span.option:first-child {
  border-radius: 4px 4px 0 0;
}
.tuckedControls > label:last-child,  .tuckedControls > span.option:last-child  {
  border-radius: 0 0 4px 4px;
}
.tuckedControls > label:hover, .tuckedControls > span.option:hover {
  background: var(--minorBorderColor);
}
.tuckedControls > label.selected, .tuckedControls > span.option.selected {
  background: var(--fadedBGColor);
}
.tuckedControls > label.disabled, .tuckedControls > span.option.disabled {
  cursor: default;
  background: var(--fadedBGColor) !important;
  /*	color: #888;*/
  opacity: .6;
}
.tuckedControls > .styleCheckbox {
  padding: 8px 10px 8px 38px;
}
.tuckedControls > .styleCheckbox div {
  left: 10px;
  top: 6px;
}
.tuckedControls > .tuckedArbitrary {
  padding: 10px 15px;
  background: var(--cardBGColor);
  border-radius: 4px;
}
.PasswordInputHelper {
	position: relative;
}
.PasswordInputHelper .dialogPopUp {
  position: absolute;
  background: #fff;
  border: 1px solid #ababab;
  border-top: none;
  padding: 5px 15px 10px 15px;
  transform: translateX(50px);
  opacity: 0;
  z-index: 100;
  transition: transform ease-out .1s, opacity ease-out .1s;
  pointer-events: none;
  border-radius: 0 0 4px;
  margin: -1px 0 0 10px;
  max-width: calc(100% - 60px);
}
.PasswordInputHelper .dialogPopUp.showing {
  pointer-events: auto;
  top: auto;
  left: auto;
  transform: translateX(0);
  opacity: 1;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .15);
}
.PasswordInputHelper .dialogPopUp .caption {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-bottom: 4px;
}
.PasswordInputHelper .dialogPopUp .strengthMeter {
  width: 100%;
  min-width: 200px;
  max-width: 100%;
  height: 12px;
  border: 1px solid #888;
  border-radius: 3px;
  overflow: hidden;
}
.PasswordInputHelper .dialogPopUp .strengthMeter .strengthBar {
  width: 0;
  height: 14px;
  transition: width ease-out .1s, background-color ease-out .1s;
  background-color: var(--statusRed);
  max-width: 100%;
}
.PasswordInputHelper .dialogPopUp .strengthMeter .strengthBar.poor {
  background-color: var(--statusOrange);
}
.PasswordInputHelper .dialogPopUp .strengthMeter .strengthBar.weak {
  background-color: var(--statusYellow);
}
.PasswordInputHelper .dialogPopUp .strengthMeter .strengthBar.good {
  background-color: var(--statusGreen);
}
.PasswordInputHelper .dialogPopUp .strengthMeter .strengthBar.great{
  background-color: var(--statusBlue);
}
.PasswordInputHelper .dialogPopUp .guessCaption {
  padding-top: 6px;
  font-size: 10px;
}
.PasswordInputHelper .dialogPopUp .guessCaption .guessLabel {
  font-weight: 700;
  color: var(--statusRed);
}
.PasswordInputHelper .dialogPopUp .guessCaption .guessLabel.poor {
  color: var(--statusOrange);
}
.PasswordInputHelper .dialogPopUp .guessCaption .guessLabel.weak {
  color: var(--statusYellow);
}
.PasswordInputHelper .dialogPopUp .guessCaption .guessLabel.good {
  color: var(--statusGreen);
}
.PasswordInputHelper .dialogPopUp .guessCaption .guessLabel.great{
  color: var(--statusBlue);
}
.PasswordInputHelper .visibilityToggle {
  position: absolute;
  margin: 0;
  right: 0;
  bottom: 100%;
  /*		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;*/
  border-radius: 0 3px 3px 0 !important;
}
.roar-body {
	position: absolute;
	text-align: left;
	z-index: 100001;
	transform: translateZ(1px);
}
.roar {
	color: #fff;
	position: absolute;
	width: 300px;
	max-width: calc(100vw - 60px);
	padding: 10px 20px;
	cursor: pointer;
	background-color: var(--brandingSecondary);
	border-radius: 20px;
}
.roar h3 {
  font-size:18px;
  font-weight:400;
}
.roar p {
  margin: 6px 0 0 0;
  padding: 0;
  font-size:14px;
}
.roar a:link, .roar a:visited, .roar a:active, .roar a:active {
  color: #fff;
}
.roar-bg {
	display: none;
}
#loadingMessage {
	z-index: 30000;
	position: fixed;
	top: 0px;
	right: 0px;
	color: #fff;
	background: var(--brandingPrimary);
	height: var(--topBarHeight);
	padding: 18px 20px 0 50px;
	font-size: 16px;
	box-shadow: -5px 0 10px 0px rgba(0, 0, 0, .3);
	
	opacity: 0;
	pointer-events: none;
 	display: none;
	transform: translate3d(20px, 0, 1px);
	transition: opacity 100ms ease-in, transform 150ms ease-in;
}
#loadingMessage.showing {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 1px);
}
#loadingMessage.clicked {
  opacity: .7;
  transform: translate3d(95px, 0, 1px);
  pointer-events: none;
}
#loadingMessage div,
	#loadingMessage div:before,
	#loadingMessage div:after {
  background: #ffffff;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  width: 4px;
  height: 4em;
}
#loadingMessage div {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #ffffff;
  text-indent: -9999em;
  font-size: 5px;
  transform: translate3d(0, 0, 0);
  animation-delay: -0.16s;
}
#loadingMessage div:before,
	#loadingMessage div:after {
  position: absolute;
  top: 0;
  content: '';
}
#loadingMessage div:before {
  left: -1.5em;
  left: -7px;
  animation-delay: -0.32s;
}
#loadingMessage div:after {
  left: 1.5em;
  left: 7px;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
/*------------------------------------------------------------------------------*/
/* SECTION::MooRainbow  */
#mooRainbow { font-size: 11px; color: var(--baseColor); }
.moor-box {
	z-index: 3;
	width: 395px;
	height: 310px;
	border: var(--dividerLine);
	background-color: var(--cardBGColor);
	box-shadow: 4px 8px 12px rgba(0, 0, 0, .15);
}
.moor-box input[type=text] { padding: 2px 3px !important; height: auto; font-size: 13px !important; }
.moor-overlayBox {
	width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */
	height: 256px; 
	margin-top: 9px; 
	margin-left: 9px;
	border: 1px solid #000;
	user-select: none;
}
.moor-slider {
	border: 1px solid #000;
	margin-top: 9px; 
	margin-left: 280px;
	width: 20px; /* if you want a bigger or smaller slider... */
	height: 256px;
	user-select: none;
}
.moor-colorBox {
	border: 1px solid #000; 
	width: 59px; 
	height: 70px; 
	margin-top: 10px; 
	margin-left: 315px;
}
.moor-chooseColor { /* Top Box Color, the choosen one */
	margin-top: 11px; 
	margin-left: 316px; 
	width: 57px; 
	height: 34px;
}
.moor-currentColor { /* Bottom Box Color, the backup one */
	margin-top: 45px; 
	margin-left: 316px; 
	width: 57px; 
	height: 34px;
}
.moor-box .moor-okButton { margin-top: 272px; margin-left: 8px; padding: 4px 7px !important; height: auto !important; }
#mooRainbow label, .moor-box label	{ font-family: monospace; }
/* Following are just <label> */
.moor-rLabel		{ margin-top: 100px; margin-left: 315px; }
.moor-gLabel		{ margin-top: 125px; margin-left: 315px; }
.moor-bLabel		{ margin-top: 150px; margin-left: 315px; }
.moor-HueLabel		{ margin-top: 190px; margin-left: 315px; }
span.moor-ballino	{ margin-top: 190px; margin-left: 370px; }
.moor-SatuLabel		{ margin-top: 215px; margin-left: 315px; }
.moor-BrighLabel	{ margin-top: 240px; margin-left: 315px; }
.moor-hexLabel		{ margin-top: 275px; margin-left: 255px; }
/* <input> */
.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput { width: 32px; }
.moor-hexInput { width: 70px; }
.moor-cursor {
	background-image: url(../../images/mooRainbow/moor_cursor.gif); 
	width: 12px;
	height: 12px;
}
.moor-arrows {
	background-image: url(../../images/mooRainbow/moor_arrows.gif);
	top: 9px; 
	left: 270px;
	width: 41px;
	height: 9px;
}
/* End SECTION::MooRainbow
/*------------------------------------------------------------------------------*/
/**
 * SqueezeBox - Expandable Lightbox
 *
 * Allows to open various content as modal,
 * centered and animated box.
 *
 * @version		1.1 rc4
 *
 * @license		MIT-style license
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	Author
 */
#sbox-overlay {
	position: absolute;
	background-color: #000;
	left: 0px;
	top: 0px;
	zoom: 1;
}
#sbox-window {
	position: absolute;
	background-color: #6c9c31;
	text-align: left;
	overflow: visible;
	padding: 10px;
	/* invalid values, but looks smoother! */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
/*	box-shadow: 0 0 15px rgba(0, 0, 0, 1);*/
}
#sbox-btn-close {
	position: absolute;
	width: 30px;
	height: 30px;
	right: -15px;
	top: -15px;
	background: url(../../images/public/closebox.png) no-repeat center;
	border: none;
}
.sbox-loading #sbox-content {
/*	background-image: url(spinner.gif);*/
	background-repeat: no-repeat;
	background-position: center;
}
#sbox-content {
	clear: both;
	overflow: auto;
	background-color: #fff;
	height: 100%;
	width: 100%;
}
.sbox-content-image#sbox-content {
	overflow: visible;
}
#sbox-image {
	display: block;
}
.sbox-content-image img {
	display: block;
	width: 100%;
	height: 100%;
}
.sbox-content-iframe#sbox-content {
	overflow: visible;
}
#sbox-content.sbox-content-iframe, #sbox-content.sbox-content-iframe iframe { z-index: 1; }
/* Hides scrollbars */
.body-overlayed {
	overflow: hidden;
}
/* Hides flash (Firefox problem) and selects (IE) */
.body-overlayed embed, .body-overlayed object, .body-overlayed select {
	visibility: hidden;
}
#sbox-window embed, #sbox-window object, #sbox-window select {
	visibility: visible;
}
/* Shadows */
.sbox-bg {
	position: absolute;
	width: 33px;
	height: 40px;
}
[class^="icon-"]:before,
	[class*=" icon-"]:before {
	  font-family: "appIconsDesigner" !important;
	  font-style: normal !important;
	  font-weight: 100 !important;
	  font-variant: normal !important;
	  text-transform: none !important;
	  speak: none;
	  line-height: 1;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
.icon-add-folder:before { content: "\4c"; }
.icon-add:before { content: "\55"; }
.icon-addPerson:before { content: "\4e"; }
.icon-AI:before { content: "\e019"; }
.icon-arrowDown:before { content: "\56"; }
.icon-arrowRight:before { content: "\e01e"; }
.icon-arrowRightInCircle:before { content: "\5d"; }
.icon-arrowUp:before { content: "\3f"; }
.icon-back:before { content: "\57"; }
.icon-bug:before { content: "\e018"; }
.icon-businessCenter:before { content: "\2f"; }
.icon-call:before { content: "\59"; }
.icon-certificate:before { content: "\e020"; }
.icon-check:before { content: "\e031"; }
.icon-checkbox:before { content: "\e026"; }
.icon-checkCircle:before { content: "\5f"; }
.icon-checkDoc:before { content: "\e021"; }
.icon-checkInCircle:before { content: "\5e"; }
.icon-checkMarkThin:before { content: "\e032"; }
.icon-client:before { content: "\2b"; }
.icon-clock:before { content: "\52"; }
.icon-clone:before { content: "\32"; }
.icon-close:before { content: "\51"; }
.icon-coach:before { content: "\2e"; }
.icon-collapse:before { content: "\31"; }
.icon-comment:before { content: "\53"; }
.icon-contract:before { content: "\5b"; }
.icon-convo:before { content: "\3c"; }
.icon-convoFilled:before { content: "\3b"; }
.icon-crossInCircle:before { content: "\e037"; }
.icon-database:before { content: "\e023"; }
.icon-dataOut:before { content: "\e022"; }
.icon-dotsHorizontal:before { content: "\e015"; }
.icon-download:before { content: "\50"; }
.icon-drag:before { content: "\29"; }
.icon-dragDots:before { content: "\e016"; }
.icon-earListening:before { content: "\e038"; }
.icon-edit:before { content: "\30"; }
.icon-email:before { content: "\5a"; }
.icon-expand:before { content: "\23"; }
.icon-fastforward:before { content: "\7a"; }
.icon-feedback:before { content: "\e035"; }
.icon-fileAudio:before { content: "\e011"; }
.icon-fileDoc:before { content: "\e014"; }
.icon-fileTable:before { content: "\e012"; }
.icon-fileVideo:before { content: "\e013"; }
.icon-folder-grid:before { content: "\4a"; }
.icon-folder-tree:before { content: "\47"; }
.icon-folderClosed:before { content: "\34"; }
.icon-folderOpen:before { content: "\6b"; }
.icon-forbidden:before { content: "\e017"; }
.icon-forward:before { content: "\58"; }
.icon-gear:before { content: "\63"; }
.icon-globe:before { content: "\e01d"; }
.icon-growthChart:before { content: "\e02b"; }
.icon-hearts:before { content: "\e02d"; }
.icon-help:before { content: "\35"; }
.icon-home:before { content: "\6d"; }
.icon-house:before { content: "\e02e"; }
.icon-ideasLightBulb:before { content: "\e033"; }
.icon-info:before { content: "\49"; }
.icon-invoicing:before { content: "\6e"; }
.icon-itemA:before { content: "\54"; }
.icon-itemB:before { content: "\6a"; }
.icon-itemE:before { content: "\76"; }
.icon-itemF:before { content: "\4d"; }
.icon-itemG:before { content: "\65"; }
.icon-itemI:before { content: "\40"; }
.icon-itemJ:before { content: "\48"; }
.icon-itemM:before { content: "\2a"; }
.icon-itemN:before { content: "\77"; }
.icon-itemO:before { content: "\71"; }
.icon-itemP:before { content: "\64"; }
.icon-itemQ:before { content: "\2d"; }
.icon-itemR:before { content: "\68"; }
.icon-itemS:before { content: "\6c"; }
.icon-itemT:before { content: "\43"; }
.icon-itemW:before { content: "\73"; }
.icon-itemY:before { content: "\79"; }
.icon-laptop:before { content: "\e01b"; }
.icon-library:before { content: "\6f"; }
.icon-lightbulb:before { content: "\4b"; }
.icon-location:before { content: "\74"; }
.icon-mailreport:before { content: "\61"; }
.icon-manageclient:before { content: "\75"; }
.icon-membership:before { content: "\24"; }
.icon-menu:before { content: "\7b"; }
.icon-messageclients:before { content: "\78"; }
.icon-minimize:before { content: "\27"; }
.icon-moneyBag:before { content: "\e01a"; }
.icon-myProfile:before { content: "\70"; }
.icon-overview:before { content: "\2c"; }
.icon-package:before { content: "\62"; }
.icon-paper-plane:before { content: "\25"; }
.icon-pause:before { content: "\38"; }
.icon-personnel:before { content: "\69"; }
.icon-phoneSound:before { content: "\e034"; }
.icon-piggyBank:before { content: "\e02a"; }
.icon-play:before { content: "\37"; }
.icon-plusBox:before { content: "\60"; }
.icon-popout:before { content: "\e01c"; }
.icon-print:before { content: "\28"; }
.icon-private:before { content: "\e030"; }
.icon-pulse:before { content: "\e029"; }
.icon-puzzle:before { content: "\66"; }
.icon-questionBox:before { content: "\e02f"; }
.icon-reassign:before { content: "\36"; }
.icon-record-download:before { content: "\45"; }
.icon-reload:before { content: "\4f"; }
.icon-reply:before { content: "\e027"; }
.icon-reportdownload:before { content: "\41"; }
.icon-reports:before { content: "\72"; }
.icon-rewind:before { content: "\33"; }
.icon-schedule:before { content: "\42"; }
.icon-share:before { content: "\26"; }
.icon-shield:before { content: "\e024"; }
.icon-smilyFace:before { content: "\e01f"; }
.icon-sort:before { content: "\3d"; }
.icon-star:before { content: "\3e"; }
.icon-stop:before { content: "\21"; }
.icon-stopWatch:before { content: "\e036"; }
.icon-stream:before { content: "\44"; }
.icon-target:before { content: "\e02c"; }
.icon-team:before { content: "\67"; }
.icon-trash:before { content: "\22"; }
.icon-upload:before { content: "\e025"; }
.icon-videoPlay:before { content: "\e028"; }
.icon-view:before { content: "\39"; }
.icon-visible:before { content: "\46"; }
.icon-wys-alignCenter:before { content: "\3a"; }
.icon-wys-alignJustify:before { content: "\7c"; }
.icon-wys-alignLeft:before { content: "\7d"; }
.icon-wys-alignRight:before { content: "\7e"; }
.icon-wys-bold:before { content: "\5c"; }
.icon-wys-bulletList:before { content: "\e000"; }
.icon-wys-code:before { content: "\e001"; }
.icon-wys-horizontalRule:before { content: "\e002"; }
.icon-wys-indentLeft:before { content: "\e003"; }
.icon-wys-indentRight:before { content: "\e004"; }
.icon-wys-insertImage:before { content: "\e005"; }
.icon-wys-insertVideo:before { content: "\e006"; }
.icon-wys-italic:before { content: "\e007"; }
.icon-wys-link:before { content: "\e008"; }
.icon-wys-numberList:before { content: "\e009"; }
.icon-wys-redo:before { content: "\e00a"; }
.icon-wys-strikethrough:before { content: "\e00b"; }
.icon-wys-table:before { content: "\e00c"; }
.icon-wys-textColor:before { content: "\e00d"; }
.icon-wys-underline:before { content: "\e00e"; }
.icon-wys-undo:before { content: "\e00f"; }
.icon-wys-unlink:before { content: "\e010"; }
/*	.icon-membership:before { content: "\65"; }*/
.icon-dollar:before { content: "\6e"; }
.icon-itemB-hr:before { content: "\6a"; }
.icon-itemF-hr:before { content: "\4d"; }
:root {
	--brandingPrimary: #68a921;
	--brandingPrimaryRGB: 104, 169, 33;
/*	--brandingPrimary05: #f7faf3;
	--brandingPrimary10: #f0f6e8;*/
	
	/* Minty green experiment: */
/*	--brandingPrimary: #039949;
	--brandingPrimaryRGB: 3, 153, 173;
	
	--brandingPrimary: #03991f;
	--brandingPrimaryRGB: 3, 153, 31;*/
	
	
	
	--brandingPrimary05: rgba(var(--brandingPrimaryRGB), .05);
	--brandingPrimary10: rgba(var(--brandingPrimaryRGB), .10);
	
	--brandingPrimary05: color-mix(in srgb, var(--brandingPrimary) 5%, white);
	--brandingPrimary10: color-mix(in srgb, var(--brandingPrimary) 10%, white);
	
	
	
}
.padded { padding: 25px 25px; }
.helpText { font-size: 14px; opacity: .7; }
.button {
	border-radius: 3px;
}
.button.fullWidth {
  width: 100%;
}
.button.primary.white {
  background-color: #fff;
  color: var(--brandingPrimary) !important;
}
.button.bold {
  height: auto;
  padding: 10px 20px;
  font-size: 18px;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .2);
}
ul.checklist {
	margin-bottom: 16px;
	padding-left: 25px;
}
ul.checklist li {
  list-style-type: none;
  padding: 6px 0 6px 25px;
  position: relative;
}
ul.checklist li:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  height: 12px;
  width: 7px;
  border-right: 3px solid var(--brandingPrimary);
  border-bottom: 3px solid var(--brandingPrimary);
  transform: rotate(45deg) scaleX(.8);
}
#pageContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	height: 100%;
}
#pageContainer .logoImage {
  width: 152px;
}
#pageContainer #pageHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  font-size: 15px;
  margin: 20px auto;
  max-width: 1200px;
  padding: 0 20px;
  align-items: center;
}
#pageContainer #pageHeader a:link, #pageContainer #pageHeader a:visited {
  text-decoration: none;
  color: #707070;
}
#pageContainer #pageHeader a:hover {
  text-decoration: underline;
}
#pageContainer #pageHeader a.current {
  color: var(--brandingPrimary);
  pointer-events: none;
  cursor: default;
  font-weight: bold;
}
#pageContainer #pageHeader .topLogo {
  width: 145px;
  height: 30px;
}
#pageContainer #pageHeader #mainMenu a:link {
  display: inline-block;
  margin: 0 7px;
}
#pageContainer #pageHeader.white {
  color: #fff;
}
#pageContainer #pageHeader.white a:link, #pageContainer #pageHeader.white a:visited {
  color: #fff;
}
/*	#menuToggle.onWhite { color: #a1a1a1; }*/
#pageContainer #pageHeader.white a.button {
  background-color: #fff;
  color: var(--brandingPrimary) !important;
}
#pageContainer #pageHeader #menuToggle {
  z-index: 3;
}
#pageContainer #pageHeader #menuToggle:before {
  font-size: 30px;
}
#pageContainer #pageHeader #menuToggle:hover {
  text-decoration: none;
}
@media (max-width: 849px) {
  #pageContainer #pageHeader #mainMenu {
    position: absolute;
    top: -7px;
    right: 10px;
    background-color: #fff;
    z-index: 2;
    box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15);
    border-radius: 10px;
    padding-top: 0px;
    overflow: hidden;
    transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    transform-origin: 100% 0;
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none;
  }
  #pageContainer #pageHeader #mainMenu.expanded {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  #pageContainer #pageHeader #mainMenu a:link, #pageContainer #pageHeader #mainMenu a:visited {
    color: #1a1a1a;
    display: block;
    padding: 15px 30px;
    margin: 0;
    font-size: 16px;
  }
  #pageContainer #pageHeader #mainMenu a:link:hover, #pageContainer #pageHeader #mainMenu a:visited:hover {
    text-decoration: none;
    background-color: #efefef;
  }
  #pageContainer #pageHeader #mainMenu a:link.current, #pageContainer #pageHeader #mainMenu a:visited.current {
    color: var(--brandingPrimary);
    background-color: #f8f8f8;
  }
  #pageContainer #pageHeader.white #mainMenu.expanded + #menuToggle {
    color: #a1a1a1;
  }
  #pageContainer #pageHeader #accessMenu {
    display: none;
  }
}
@media (min-width: 850px) {
  #pageContainer #pageHeader .hideAtMedium {
    display: none !important;
  }
}
#pageContainer #pageHeader .button {
  padding: 5px 15px;
  height: auto;
  margin: 0 0 0 20px;
}
#pageContainer #pageFooter {
  background-color: var(--brandingPrimary);
  padding: 60px 0;
  color: #fff;
}
#pageContainer #pageFooter a:link, #pageContainer #pageFooter a:visited {
  text-decoration: none;
  color: #fff;
}
#pageContainer #pageFooter a:hover {
  text-decoration: underline;
}
#pageContainer #pageFooter .tagline {
  margin-top: 10px;
  font-size: 14px;
}
#pageContainer #pageFooter .footerContentSectionHolder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#pageContainer #pageFooter .footerContentSectionHolder > div {
  flex: 25%;
  padding-right: 10px;
}
#pageContainer #pageFooter .footerContentSectionHolder .footerMenu h3 {
  color: #fffa;
  font-weight: 400;
  font-size: 16px;
  margin: 0 0 10px 0;
}
#pageContainer #pageFooter .footerContentSectionHolder .footerMenu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#pageContainer #pageFooter .footerContentSectionHolder .footerMenu ul li {
  margin-bottom: 16px;
}
@media (max-width: 849px) {
  #pageContainer #pageFooter .footerContentSectionHolder {
    display: block;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu {
    position: relative;
    max-height: 50px;
    overflow: hidden;
    transition: max-height ease-in 250ms;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu .icon-add {
    pointer-events: none;
    position: absolute;
    top: 15px;
    right: 10px;
    transition: transform ease-in 250ms;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu .icon-add:before {
    font-size: 20px;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu ul {
    margin-left: 10px;
    padding-bottom: 20px;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu ul a:link {
    color: #fffc;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu.open {
    max-height: 400px;
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu.open .icon-add {
    transform: rotate(45deg);
  }
  #pageContainer #pageFooter .footerContentSectionHolder .footerMenu h3 {
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    padding: 10px 0 20px 0;
    margin: 0;
  }
}
@media (min-width: 850px) {
  #pageContainer #pageFooter .footerContentSectionHolder .icon-add {
    display: none;
  }
}
#pageContainer #pageFooter .legal {
  padding: 20px 0 0px;
  color: #fffa;
  font-size: 14px;
}
.topMediumDividerLine {
	border-top: var(--mediumDividerLine);
}
.bottomSpace { padding-bottom: 80px; }
.noTopMargin { margin-top: 0; }
.CAGreen { color: var(--brandingPrimary); }
.buttonChoice .button {
  margin: 0;
}
.buttonChoice span {
  display: inline-block;
  margin: 0 8px;
  font-size: 14px;
  color: rgba(var(--brandingPrimaryRGB), .75);
}
.button.transparent:not(.primary) {
	border-color: var(--brandingPrimary);
	color: var(--brandingPrimary);
	background-color: transparent;
}
.button.transparent:not(.primary):hover {
  color: var(--brandingPrimary) !important;
  background-color: rgba(var(--brandingPrimaryRGB), .2);
}
.chalkUnderline {
	display: inline-block;
	background: url(../../images/svg/underlineLarge.svg) no-repeat 100% 100%;
	background-size: 100% auto;
	overflow: visible;
	padding-bottom: 5px;
	white-space: nowrap;
}
.chalkUnderline.long   {
  background-image: url(../../images/svg/underlineLong.svg)
}
.chalkUnderline.longer {
  background-image: url(../../images/svg/underlineLonger.svg)
}
.CALeafWireFrameBG {
	position: relative;
	width: 100%;
	min-height: 100px;
	background: var(--brandingPrimary10) url(../../images/svg/CALeafWireFrame.svg) no-repeat 50% -100px;
	overflow: hidden;
	
	
	padding-top: 100px;
}
.CALeafWireFrameBG.pageTop {
  background-position: 20px -130px;
}
.CALeafWireFrameBG.pageTop .backLink {
  font-size: 14px;
  font-weight: 600;
}
.CALeafWireFrameBG.pageTop .backLink span {
  position: relative;
  top: 2px;
}
/*	margin-bottom: 60px;*/
#pageHeader.white + .CALeafWireFrameBG {
  background-color: var(--brandingPrimary);
  color: #fff;
}
#pageHeader.white + .CALeafWireFrameBG .chalkUnderline {
  background-image: url(../../images/svg/underlineLarge-light.svg);
}
.CALeafWireFrameBG.pageTop {
  top: -90px;
}
.CALeafWireFrameBG.forSchools {
  height: 900px;
}
.CALeafWireFrameBG.forSchools:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 292px;
  background-color: #e1eed3;
}
.CALeafWireFrameBG.forSchools h1 {
  padding: 0 0 10px;
}
.CALeafWireFrameBG.tour {
  height: 680px;
}
.CALeafWireFrameBG.tour h1 {
  padding-top: 30px;
}
.CALeafWireFrameBG h1 {
  font-size: 50px;
  padding-bottom: 10px;
  padding: 80px 0 10px;
  font-weight: 600;
}
@media (max-width: 530px) {
  .CALeafWireFrameBG h1 {
    font-size: 34px;
    padding-top: 30px;
  }
}
.CALeafWireFrameBG .forSchoolsHeader {
  padding-bottom: 10px;
}
.CALeafWireFrameBG p.subHeader {
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
}
.CALeafWireFrameBG p.subHeader.larger {
  font-size: 26px;
  line-height: 1.3;
}
.CALeafWireFrameBG p.subHeader.extraSpaceBelow {
  margin-bottom: 60px;
}
.CALeafWireFrameBG .heroImageHolder {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1000px;
}
/*		z-index: 1;*/
.CALeafWireFrameBG .heroImageHolder .heroImage {
  margin: 40px 0;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .2);
  min-width: 700px;
}
.CALeafWireFrameBG .heroImageHolder .CALeaf3D {
  position: absolute;
  top: 200px;
  right: -2%;
  height: 192px;
  width: 177px;
  overflow: visible;
}
.CALeafWireFrameBG .heroImageHolder .CALeaf3D img {
  position: absolute;
  top: 0;
  left: 0;
}
.CALeafWireFrameBG .heroImageHolder .CALeaf3D img:nth-child(2) {
  left: 44px;
}
@media (max-width: 1170px) {
  .CALeafWireFrameBG .heroImageHolder .CALeaf3D {
    display: none;
  }
}
@media (min-width: 850px) {
  .CALeafWireFrameBG .heroImageHolder {
    padding: 0 40px;
  }
}
.CALeafWireFrameBG .heroImageHolder.tourPage {
  margin-top: 0px;
}
/*	overflow: hidden;
			height: 344px;*/
.CALeafWireFrameBG .heroImageHolder.tourPage img {
  margin: 0;
}
.fadedGreenSection {
	position: relative;
	background-color: rgba(var(--brandingPrimaryRGB), .2);
	border-bottom: 1px solid rgba(var(--brandingPrimaryRGB), .3);
}
.CALeafWireFrameBG.pageTop + .fadedGreenSection {
  top: -90px;
  padding-top: 90px;
}
.tuckedControlsHolder.sortControl {
	
	font-size: 15px;
}
.tuckedControlsHolder.sortControl .button {
  border: none;
  font-weight: bold;
  margin: 0;
  padding-left: 6px;
  padding-right: 0;
}
.tuckedControlsHolder.sortControl .button:before {
  display: none;
}
.tuckedControlsHolder.sortControl .button span.icon-arrowUp {
  display: inline-block;
  margin-left: 4px;
  transform: translateY(2px);
}
.tuckedControlsHolder.sortControl .button span.descending + span {
  transform: rotate(180deg) translateY(2px);
}
.greenBGSection {
	background-color: var(--brandingPrimary);
	background-color: #53871a;
	border-radius: 20px;
	padding: 60px var(--marginPadding);
	color: #fff;
	margin-bottom: 60px;
	overflow: hidden;
}
.greenBGSection a:link, .greenBGSection a:visited {
  color: #fff;
}
.greenBGSection a:hover {
  text-decoration: underline;
}
.slowRollGreenGradient {
	background: linear-gradient(0deg, rgba(var(--brandingPrimaryRGB), .05) 0%, rgba(255, 255, 255, 0) 100%);
}
.slowRollGreenGradient.withBottomBorder {
  padding-bottom: 80px;
  border-bottom: 1px solid #ededed;
}
.fadedGreenBGSection {
	background-color: rgba(var(--brandingPrimaryRGB), .05);
	padding: 80px 0;
}
.whiteCardSet {
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 0 auto 60px auto;
}
.whiteCardSet > div {
  flex-grow: 1;
  position: relative;
  background-color: #fff;
  color: #535353;
  width: calc(50% - 15px);
  min-width: 250px;
  margin-bottom: 15px;
  margin: 0 7.5px 15px 7.5px;
  padding: 30px;
  border-radius: 7px;
}
.whiteCardSet > div [class^="icon-"] {
  display: inline-block;
  background-color: rgba(var(--brandingPrimaryRGB), .1);
  padding: 8px 8px 0 8px;
  border-radius: 6px;
}
.whiteCardSet > div [class^="icon-"]:before {
  color: var(--brandingPrimary);
  font-size: 35px;
}
.whiteCardSet > div h3 {
  margin: 16px 0 10px;
}
.whiteCardSet > div p {
  font-size: 15px;
  margin: 0;
}
@media (min-width: 710px) {
  .whiteCardSet > div:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 7px;
    transform: translateX(calc(-100% - 15px));
    background: rgba(255, 255, 255, .15);
  }
  .whiteCardSet > div:nth-child(2n):before {
    transform: translateX(calc(100% + 15px));
  }
  .whiteCardSet > div:nth-child(1):before, .whiteCardSet > div:nth-child(2):before {
    background: linear-gradient(0deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 100%);
  }
  .whiteCardSet > div:nth-last-child(1):before, .whiteCardSet > div:nth-last-child(2):before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
.whiteCardSet.centeredCheckmark > div {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 10px 20px 10px 90px;
  font-size: 16px;
  font-weight: bold;
}
.whiteCardSet.centeredCheckmark > div:after {
  font-family: "appIconsDesigner" !important;
  font-style: normal !important;
  font-weight: 100 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 30px;
  left: 30px;
  content: "\5f";
  color: var(--brandingPrimary);
  font-size: 40px;
}
.qualificationSet {
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 auto 60px auto;
	position: relative;
	
}
.qualificationSet > div {
  position: relative;
  flex-grow: 1;
  width: 50%;
  min-width: 100%;
  padding: 90px 15px 50px 15px;
}
.qualificationSet > div:before {
  font-family: "appIconsDesigner" !important;
  font-style: normal !important;
  font-weight: 100 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 30px;
  left: 15px;
  content: "\5f";
  color: var(--brandingPrimary);
  font-size: 40px;
}
.qualificationSet > div strong {
  display: block;
  margin-bottom: 16px;
  font-size: 16px;
}
.qualificationSet > div p {
  font-size: 14px;
  margin: 0;
}
@media (max-width: 849px) {
  .qualificationSet > div:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: url(../../images/svg/splitLineHorizontal.svg) no-repeat 0 50%;
  }
}
@media (min-width: 850px) {
  .qualificationSet > div {
    padding: 30px 50px 50px 80px;
    min-width: 350px;
  }
  .qualificationSet:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 5px);
    width: 10px;
    background: url(../../images/svg/splitLineVertical.svg) no-repeat 50% 0;
    background-size: auto 100%;
  }
  .qualificationSet:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 5px);
    height: 10px;
    background: url(../../images/svg/splitLineHorizontal.svg) no-repeat 0 50%;
  }
}
.caveat {
	font-family: Caveat;
}
.caveat.big {
  font-size: 2.6rem;
}
.caveat.medium {
  font-size: 2.0rem;
}
.engageOptions {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
.engageOptions > div {
  background-color: var(--brandingPrimary);
  padding: 60px 50px;
  width: calc(50% - 10px);
  margin-bottom: 10px;
  min-width: 340px;
  max-width: 100%;
  border-radius: 10px;
  cursor: pointer;
}
.engageOptions > div h2 {
  margin: 0;
  font-weight: 400;
}
.engageOptions > div h2.caveat {
  font-size: 50px;
}
.engageOptions > div p {
  margin: 20px 0;
}
.engageOptions > div .callToAction {
  position: relative;
  font-size: 20px;
  padding: 15px 0 15px 50px;
}
.engageOptions > div .callToAction .icon-arrowRightInCircle {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 40px;
}
.engageOptions > div:nth-child(1) {
  color: #fff;
}
.engageOptions > div:nth-child(2) {
  background-color: rgba(var(--brandingPrimaryRGB), .15);
}
.engageOptions > div:nth-child(2) h2, .engageOptions > div:nth-child(2) .callToAction {
  color: var(--brandingPrimary);
}
.engageOptions > div:after {
  content: 'OR';
  background-color: #fff;
  color: rgba(var(--brandingPrimaryRGB), .5);
  border-radius: 50%;
  font-size: 20px;
  padding: 18px 15px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  cursor: default;
}
.webinarSeriesBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid rgba(var(--brandingPrimaryRGB), .5);
	border-radius: 20px;
	overflow: hidden;
	background: rgba(var(--brandingPrimaryRGB), .10) url(../../images/designer/gridTexture.png);
	margin-bottom: 60px;
}
.webinarSeriesBox .textBits {
  padding-left: 50px;
}
.webinarSeriesBox .textBits h2 {
  font-size: 36px;
}
.webinarSeriesBox .textBits .caveat {
  font-size: 26px;
  color: var(--brandingPrimary);
}
@media (max-width: 530px) {
  .webinarSeriesBox .textBits {
    padding-left: 20px;
  }
  .webinarSeriesBox .textBits h2 {
    font-size: 20px;
  }
}
.footNotesHolder {
	border-top: 1px solid #e8ebe5;
	border-top: var(--mediumDividerLine);
	background-color: rgba(var(--brandingPrimaryRGB), .05);
	padding: 60px 0 80px 0;
}
.footNotesHolder h2 {
  font-size: 24px;
  margin-bottom: 16px;
}
.footNotesHolder ol {
  margin: 0;
  padding-left: 15px;
}
.footNotesHolder ol li {
  font-size: 13px;
  margin-bottom: 1.3em;
}
.footNoteLinkBack {
	position: relative;
	top: -100px;
}
.checkmarkBoxItemSet {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	font-size: 16px;
	
	margin: 0 -7.5px 0 -7.5px;
}
.checkmarkBoxItemSet > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid #e8e8e8;
  color: #535353;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  width: calc(25% - 15px);
  min-width: 200px;
  margin-bottom: 15px;
  margin: 0 7.5px 15px 7.5px;
  padding: 20px 5px 20px 50px;
  border-radius: 4px;
  vertical-align: middle;
}
.checkmarkBoxItemSet > div:before {
  font-family: "appIconsDesigner" !important;
  font-style: normal !important;
  font-weight: 100 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  content: "\5e";
  color: var(--brandingPrimary);
  font-size: 20px;
}
#sbox-window {
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
}
#sbox-window #sbox-btn-close {
  top: 10px;
  right: 7px;
}
.CALeafWireFrameBG.homePage {
	
	padding: 180px 0 100px;
}
.CALeafWireFrameBG.homePage .premise {
  font-size: 50px;
}
.CALeafWireFrameBG.homePage p.subtle {
  font-size: 14px;
  opacity: .8;
}
.CALeafWireFrameBG.homePage .button.primary {
  background: #fff;
  color: var(--brandingPrimary) !important;
  font-size: 20px;
  height: auto;
  margin: 40px 0 20px;
  box-shadow: 4px 10px 10px rgba(0, 0, 0, .2);
}
.CALeafWireFrameBG.homePage .CADesktopScreenshot {
  position: absolute;
  bottom: 0;
  left: 60%;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.CALeafWireFrameBG.homePage .CADesktopScreenshot img {
  display: block;
  height: 450px;
  width: auto;
  max-width: none;
}
.CALeafWireFrameBG.homePage .CADesktopScreenshot:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.CALeafWireFrameBG.homePage .mobileDevice {
  position: absolute;
  bottom: 0;
  right: 25%;
  width: 300px;
}
@media(max-width:1100px) {
  .CALeafWireFrameBG.homePage {
    padding: 100px 0 200px;
  }
}
@media(max-width: 900px) {
  .CALeafWireFrameBG.homePage {
    padding: 100px 0 280px;
  }
}
@media(max-width: 800px) {
  .CALeafWireFrameBG.homePage {
    padding: 100px 0 320px;
  }
}
@media(max-width: 720px) {
  .CALeafWireFrameBG.homePage {
    padding: 100px 0 440px;
  }
  .CALeafWireFrameBG.homePage .CADesktopScreenshot {
    left: 20%;
  }
}
.threeReasons {
	position: relative;
	max-width: 600px;
	margin: 0 auto 80px;
}
.threeReasons:before {
  /* center line */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: 2px;
  background-color: rgba(var(--brandingPrimaryRGB), .2);
}
.threeReasons > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px 160px;
  padding: 80px 0 0;
  padding-left: 100px;
}
.threeReasons > div .numberHolder {
  position: absolute;
  top: 100px;
  left: 40px;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  height: 65px;
  width: 65px;
  border: 2px solid rgba(var(--brandingPrimaryRGB), .2);
  background: #fff;
  padding: 20px 0;
  text-align: center;
  color: var(--brandingPrimary);
}
.threeReasons > div .numberHolder.checkmark {
  background: #fff url(../../images/svg/checkmark.svg) 50% 50% no-repeat;
  background-size: 25px;
}
.threeReasons > div .imageHolder {
  position: relative;
  order: 2;
  background: var(--brandingPrimary);
  border-radius: 10px;
  flex: 1 1 auto;
  aspect-ratio: 2;
  padding: 10px 20px 0;
  overflow: hidden;
}
.threeReasons > div .imageHolder:after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .15);
}
.threeReasons > div .imageHolder img {
  border-radius: 5px;
}
.threeReasons > div .textHolder {
  order: 1;
  border-radius: 10px;
  flex: 1 1 auto;
}
.threeReasons > div .textHolder .quality, .threeReasons > div .textHolder h3 {
  font-size: 28px;
  font-weight: 700;
}
.threeReasons > div .textHolder .quality {
  color: var(--brandingPrimary);
}
.threeReasons > div .textHolder h3 {
  margin: 8px 0 16px;
}
.threeReasons > div .textHolder p {
  font-size: 16px;
  margin: 0;
}
/* top gradient to fade center line */
.threeReasons > div:first-child:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.threeReasons > div:last-child {
  padding-bottom: 0;
}
.threeReasons > div:last-child .numberHolder {
  top: 100%;
}
@media(max-width: 600px) {
  .threeReasons:before, .threeReasons > div .numberHolder {
    left: 10px;
  }
  .threeReasons > div {
    padding-left: 60px;
  }
}
@media(max-width: 530px) {
  .threeReasons:before, .threeReasons > div .numberHolder {
    left: 25px;
  }
}
@media (min-width: 1000px) {
  .threeReasons {
    max-width: none;
  }
  .threeReasons:before {
    /* center line */
    left: calc(50% - 1px);
  }
  .threeReasons > div {
    flex-direction: row;
    padding-left: 0;
    max-width: none;
    padding: 80px 0;
  }
  .threeReasons > div .numberHolder {
    left: 50%;
    top: 50%;
  }
  .threeReasons > div .imageHolder {
    order: 0;
  }
  .threeReasons > div .imageHolder, .threeReasons > div .textHolder {
    width: 300px;
  }
  .threeReasons > div:nth-child(2) .imageHolder {
    order: 2;
  }
}
.explainerVideoSection {
	
	background-color: var(--brandingPrimary);
	color: #fff;
	overflow-wrap: auto;
}
.explainerVideoSection h2 {
  font-size: 40px;
  margin-bottom: 10px;
}
.explainerVideoSection .explainerVideoFacade {
  position: relative;
  bottom: -20px;
  width: 100%;
  height: 500px;
  background-image: url('../../images/public/explainerVideoFacade.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 30px 30px 40px rgba(0, 0, 0, .1);
  border-radius: 10px;
  /*	border-top: 1px solid rgba(255, 255, 255, .7);*/
  cursor: pointer;
}
.explainerVideoSection .explainerVideoFacade .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background-color: #fff;
  color: var(--brandingPrimary);
  padding: 20px 20px 15px;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, .2);
  z-index: 1;
}
.explainerVideoSection .explainerVideoFacade .icon-play:before {
  font-size: 50px;
}
.explainerVideoSection .explainerVideoFacade:after {
  border-radius: 10px;
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
}
.explainerVideoSection:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
}
.since2012Riff {
	background-color: var(--brandingPrimary);
	padding: 90px 0;
	color: #fff;
	
}
.since2012Riff p {
  font-size: 22px;
}
.miniCardSet {
	position: relative;
	margin: 40px -1600px;
}
.miniCardSet .miniCardRow {
  width: fit-content;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding-bottom: 15px;
}
.miniCardSet .miniCardRow .miniCard {
  border-radius: 5px;
  background: #fff;
  width: 330px;
  padding: 20px 20px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, .2);
  text-align: center;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease-in, box-shadow 150ms ease-in;
}
.miniCardSet .miniCardRow .miniCard:hover {
  transform: translate3d(-5px, -10px, 0);
  box-shadow: 8px 14px 10px rgba(0, 0, 0, .2);
}
.miniCardSet .miniCardRow .miniCard .starRating {
  margin: 0 auto;
}
.miniCardSet .miniCardRow .miniCard .starRating .ratingStar {
  display: inline-block;
  width: 21px;
  height: 17px;
  background: url(../../images/public/ratingStars.png) no-repeat 0 0;
  background-size: 17px auto;
}
.singleItemViewer {
	position: absolute;
	margin: -100px auto 0 auto;
	left: 50%;
	
	border-radius: 15px;
	background: #fff;
	max-width: 530px;
	width: 530px;
	max-width: calc(100% - 30px);
	padding: 20px 25px;
	box-shadow: 8px 12px 10px rgba(0, 0, 0, .2);
	color: #888;
	
	opacity: 0;
	pointer-events: none;
	transform: scale(.9) translateX(-50%);
/*	transform: translateY(-20px) translateX(-50%);*/
	transform-origin: 0% 100%;
	transition: opacity 250ms ease-in, transform 250ms ease-in;
	
	z-index: 1;
}
.singleItemViewer.showing {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(-50%);
  /*	transform: translateY(0) translateX(-50%);*/
}
.singleItemViewer .icon-close {
  position: absolute;
  top: 20px;
  right: 25px;
  cursor: pointer;
}
.singleItemViewer .reviewContent {
  margin-bottom: 30px;
}
.singleItemViewer .reviewContent .review {
  border: none;
  box-shadow: none;
  padding: 15px;
}
.singleItemViewer .reviewContent .review .theReview {
  max-height: 500px;
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
}
.singleItemViewer .reviewContent .review .fullReviewLink {
  display: none;
}
.greatCoachingBox {
	padding: 90px 0;
	background: url(../../images/designer/gridTexture.png);
	border-bottom: var(--mediumDividerLine);
}
.greatCoachingBox .youSee {
  font-size: 3rem;
  color: var(--brandingPrimary);
  text-align: center;
  margin: 0;
}
.twoReasons {
	margin: 40px 0;
}
.twoReasons .dashedLine {
  position: absolute;
  width: 50%;
  border-radius: 15px;
  border: 3px dashed rgba(var(--brandingPrimaryRGB), .4);
}
.twoReasons .reasonsHolder {
  position: relative;
  padding: 0 20px 40px;
  overflow: hidden;
}
.twoReasons .reasonsHolder .dashedLine {
  bottom: -15px;
  border-bottom: none;
}
.twoReasons .reasonsHolder .dashedLine1 {
  top: 45px;
  left: 0;
  border-right: none;
}
.twoReasons .reasonsHolder .dashedLine2 {
  bottom: -15px;
  height: 100px;
  right: 0;
  border-left: none;
}
.twoReasons .reason {
  position: relative;
  border: 2px solid var(--mediumBorderColor);
  border-radius: 5px;
  background: #fff;
  margin: 0 auto;
  padding: 20px 30px 20px 90px;
  max-width: 540px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
  z-index: 1;
}
.twoReasons .reason:first-child {
  margin-bottom: 20px;
}
.twoReasons .reason .theNumber {
  position: absolute;
  top: 20px;
  left: 20px;
  border: 2px solid rgba(var(--brandingPrimaryRGB), .4);
  border-radius: 50%;
  padding: 5px 15px 0;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 30px;
  color: rgba(var(--brandingPrimaryRGB), 1);
}
.twoReasons .reason p {
  font-size: 15px;
  margin: 0;
}
.twoReasons .explanationsHolder {
  position: relative;
  overflow: hidden;
  padding: 0 40px;
}
.twoReasons .explanationsHolder .dashedLine {
  top: -15px;
  border-top: none;
}
.twoReasons .explanationsHolder .dashedLine1 {
  left: 0;
  height: 185px;
  border-right: none;
}
.twoReasons .explanationsHolder .dashedLine2 {
  bottom: -15px;
  height: 615px;
  right: 0;
  border-left: none;
}
@media (max-width: 849px) {
  .twoReasons .explanationsHolder .dashedLine1 {
    height: auto;
    bottom: calc(75% + 48px);
  }
  .twoReasons .explanationsHolder .dashedLine2 {
    height: auto;
    bottom: calc(25% + 48px);
  }
}
@media (max-width: 530px) {
  .twoReasons .explanationsHolder {
    padding: 0 25px;
  }
  .twoReasons .explanationsHolder .dashedLine2 {
    bottom: calc(25% + 140px);
  }
}
.twoReasons .explanation {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  border: 2px solid rgba(var(--brandingPrimaryRGB), .4);
  border-radius: 10px;
  background: var(--brandingPrimary05);
  padding: 40px;
  margin: 0 auto 40px;
  max-width: 840px;
  z-index: 1;
}
.twoReasons .explanation .theNumber {
  position: absolute;
  top: calc(50% - 25px);
  left: -26px;
  border-radius: 50%;
  padding: 7px 15px 0;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 30px;
  background: var(--brandingPrimary);
  color: #fff;
}
.twoReasons .explanation .theNumber.rightSide {
  left: calc(100% - 24px);
}
.twoReasons .explanation .headingAndQuotes {
  flex: 1 1 auto;
  width: 45%;
  width: 300px;
}
.twoReasons .explanation .headingAndQuotes h3 {
  font-size: 29px;
  line-height: 1.3;
}
.twoReasons .explanation .headingAndQuotes blockquote {
  margin-top: 15px;
  border-radius: 5px;
  border: 1px solid var(--brandingPrimary);
  padding: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brandingPrimary);
  background: rgba(255, 255, 255, .1);
}
.twoReasons .explanation .details {
  flex: 1 1 auto;
  width: 55%;
  width: 360px;
}
.twoReasons .explanation .details p {
  font-size: 15px;
  margin: 0 0 16px 0;
}
.twoReasons .explanation .details p:last-child {
  margin: 0;
}
@media (max-width: 849px) {
  .twoReasons .explanation {
    flex-direction: column;
    align-items: stretch;
  }
  .twoReasons .explanation .headingAndQuotes, .twoReasons .explanation .details {
    width: 100%;
  }
}
@media (max-width: 530px) {
  .twoReasons .explanation {
    padding: 40px 20px;
  }
  .twoReasons .explanation .theNumber {
    width: 40px;
    height: 40px;
    font-size: 22px;
    top: calc(50%);
  }
}
.overviewSections > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px 80px;
  padding: 0px 0 0;
  margin: 0 auto 80px;
  max-width: 500px;
  background: url(../../images/designer/floatingBrushstroke.jpg) no-repeat 50% 100%;
  background-size: contain;
  background-size: 540px;
  align-items: center;
}
.overviewSections > div .imageHolder {
  aspect-ratio: .7;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overviewSections > div .imageHolder img {
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
}
.overviewSections > div .textHolder {
  border-radius: 10px;
}
.overviewSections > div .textHolder .quality, .overviewSections > div .textHolder h3 {
  font-size: 28px;
  font-weight: 700;
}
.overviewSections > div .textHolder .quality {
  color: var(--brandingPrimary);
}
.overviewSections > div .textHolder h3 {
  margin: 16px 0 16px;
}
.overviewSections > div .textHolder p {
  font-size: 18px;
  margin-bottom: 1rem;
}
.overviewSections > div .textHolder ul {
  padding: 0;
  font-size: 15px;
}
@media (min-width: 1000px) {
  .overviewSections > div {
    flex-direction: row;
    max-width: none;
    background-position: 100% 50%;
  }
  .overviewSections > div .imageHolder, .overviewSections > div .textHolder {
    width: 50%;
  }
  .overviewSections > div .textHolder {
    padding: 30px 0;
  }
  .overviewSections > div .imageHolder {
    margin: 0 50px 0 0;
  }
  .overviewSections > div:nth-child(2) {
    background-position: 0 50%;
  }
  .overviewSections > div:nth-child(2) .textHolder {
    order: 2;
  }
  .overviewSections > div:nth-child(2) .imageHolder{
    order: 1;
    margin: 0 0 0 50px;
  }
}
.willRefineBox {
	margin: 40px auto 120px;
	border: 1px solid var(--brandingPrimary);
	border-radius: 20px;
	background-color: rgba(var(--brandingPrimaryRGB), .025);
	overflow: hidden;
}
.willRefineBox .inner {
  margin: 0 auto;
  padding: 60px;
  max-width: 800px;
}
.willRefineBox .inner h2 {
  font-size: 2.4rem;
}
.willRefineBox .inner .intrigueSections li {
  background-color: #fff;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.willRefineBox .inner .intrigueSections li:before {
  top: 11px;
}
@media(min-width: 800px) {
  .willRefineBox .inner .intrigueSections {
    columns: 2;
  }
}
@media(max-width: 600px) {
  .willRefineBox .inner {
    padding: 60px 15px;
  }
  .willRefineBox .inner h2 {
    font-size: 1.6rem;
  }
}
.willRefineBox .webinarSeries {
  position: relative;
  border-top: 1px solid var(--brandingPrimary);
  padding: 80px 20px 0;
  background: rgba(var(--brandingPrimaryRGB), .05) url(../../images/designer/gridTexture.png);
  text-align: center;
  overflow: hidden;
}
.willRefineBox .webinarSeries h2 {
  font-size: 2rem;
  font-weight: 700;
}
.willRefineBox .webinarSeries .caveat {
  font-size: 2rem;
}
.willRefineBox .webinarSeries .caveat:hover {
  text-decoration: none;
}
@media(max-width: 700px) {
  .willRefineBox .webinarSeries .caveat {
    font-size: 1.6rem;
  }
}
@media(max-width: 600px) {
  .willRefineBox .webinarSeries .caveat {
    font-size: 1.0rem;
  }
}
@media(max-width: 500px) {
  .willRefineBox .webinarSeries .caveat {
    font-size: 0.9rem;
  }
}
.willRefineBox .webinarSeries .miniCardSet {
  margin-bottom: -20px;
}
.willRefineBox .webinarSeries .miniCardSet .miniCardRow {
  gap: 10px;
  padding-bottom: 10px;
}
.willRefineBox .webinarSeries .miniCardSet .miniCard {
  width: 210px;
  padding: 1px;
  border: 1px solid rgba(var(--brandingPrimaryRGB), .5);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .1);
}
.willRefineBox .webinarSeries .miniCardSet .miniCard:hover {
  box-shadow: 5px 10px 5px rgba(0, 0, 0, .1);
}
.willRefineBox .webinarSeries:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 100%);
}
.webinarSingleViewer {
	margin-top: -230px;
	width: 660px;
	padding: 30px 30px 40px;
}
.webinarSingleViewer img {
  display: block;
  margin: 0 auto;
}
.webinarSingleViewer .blurb {
  margin: 40px 0;
  font-size: 15px;
}
.feedbackTopHolder {
	border-top: var(--mediumDividerLine);
	border-bottom: var(--mediumDividerLine);
	background-color: rgba(var(--brandingPrimaryRGB), .05);
	padding: 100px 0 200px 0;
	margin-bottom: -200px;
}
.feedbackTopHolder h2 {
  margin: 10px 0 60px;
  font-size: 2.2rem;
  font-weight: 600;
}
.testimonialSetHolder {
	border: var(--mediumDividerLine);
	border-radius: 20px;
	padding: 80px 20px 20px;
	background: #ffffff url(../../images/designer/quoteMark.png) no-repeat 50% 30px;
	background-size: 32px auto;
}
.testimonialSetHolder .testimonialSet {
  margin: 0 auto;
  max-width: 700px;
}
.testimonialSetHolder .testimonialSet .testimonial {
  text-align: center;
}
.testimonialSetHolder .testimonialSet .testimonial .quote {
  font-size: 1.4rem;
  line-height: 1.6;
}
.testimonialSetHolder .testimonialSet .testimonial .avatar {
  display: inline-block;
  margin: 20px auto 6px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.testimonialSetHolder .testimonialSet .testimonial .customerName {
  font-size: 14px;
  font-weight: 700;
}
.testimonialSetHolder .testimonialSet .testimonial .customerSince {
  font-size: 13px;
}
.testimonialSetHolder.tight .testimonialSet .testimonial .quote {
  font-size: 1rem;
}
.navDots {
	margin: 10px auto 0;
	width: fit-content;
}
.navDots .navItem {
  display: inline-block;
  cursor: pointer;
  margin: 0 2px;
  padding: 5px;
}
.navDots .navItem .navDot {
  display: inline-block;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background-color: #e8e8e8;
}
.navDots .navItem.tabSelected {
  cursor: default;
}
.navDots .navItem.tabSelected .navDot {
  background-color: #707070;
}
.CALeafWireFrameBG.pricingPage {
	padding-bottom: 336px;
}
.pricingTypeButtons {
	margin: 0 auto 0 auto;
}
.pricingTypeButtons .button {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  padding-left: 22px;
  padding-right:22px;
}
.pricingTypeButtons .button:first-child {
  border-radius: 5px 0 0 5px;
}
.pricingTypeButtons .button:first-child:hover + .button {
  border-left-color: var(--brandingSecondary);
}
.pricingTypeButtons .button:last-child {
  border-radius: 0 5px 5px 0;
  margin-left: -1px;
}
.pricingTypeButtons .button:not(.tabSelected) {
  color: var(--brandingPrimary);
  background-color: rgba(var(--brandingPrimaryRGB), .1);
}
.pricingHolder {
	position: relative;
	max-width: 510px;
	margin: -436px auto 20px auto;
	overflow: hidden;
	z-index: 1;
	
}
.pricingHolder .pricingDisplay {
  border: var(--mediumDividerLine);
  border-radius: 10px;
  background-color: #fff;
  padding-bottom: 20px;
}
.pricingHolder .pricingDisplay .pricingListing > div {
  box-sizing: border-box;
  padding: 20px;
  border-bottom: var(--mediumDividerLine);
  display: flex;
  align-items: center;
  overflow: hidden;
  max-height: 85px;
  transition: max-height 200ms ease-in, padding 200ms ease-in;
}
.pricingHolder .pricingDisplay .pricingListing > div .subscriptionName {
  width: 120px;
  min-width: 100px;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--subtleTextColor);
}
.pricingHolder .pricingDisplay .pricingListing > div .clientLimit {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 100px;
}
.pricingHolder .pricingDisplay .pricingListing > div .clientLimit .clientsLimitNumber {
  font-size: 36px;
}
.pricingHolder .pricingDisplay .pricingListing > div .clientLimit .clientsLabel {
  color: var(--subtleTextColor);
  font-size: 13px;
}
.pricingHolder .pricingDisplay .pricingListing > div .price {
  text-align: right;
  font-size: 30px;
  min-width: 100px;
}
.pricingHolder .pricingDisplay .pricingListing > div .price span.currency {
  font-size: 16px;
  display: none;
}
.pricingHolder .pricingDisplay .pricingListing > div .perMonth {
  font-size: 14px;
  color: var(--subtleTextColor);
  padding-left: 2px;
}
@media only screen and (max-width: 480px) {
  .pricingHolder .pricingDisplay .pricingListing > div {
    padding: 20px 10px;
  }
  .pricingHolder .pricingDisplay .pricingListing > div .clientLimit .clientsLimitNumber {
    font-size: 32px;
  }
  .pricingHolder .pricingDisplay .pricingListing > div .price {
    font-size: 20px;
    min-width: 80px;
  }
}
.pricingHolder .pricingDisplay.pricingDisplay:not(.showAllPlans) .pricingListing > div.hideSometimes {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}
.pricingHolder .pricingDisplay ul.checklist {
  margin: 0;
  font-size: 1rem;
}
.FAQItem {
	padding: 15px 0 5px;
	border-bottom: var(--mediumDividerLine);
	
}
.FAQItem .question {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  padding: 10px 30px 20px 0;
  margin: 0;
}
.FAQItem .question h3 {
  color: var(--brandingPrimary);
  font-size: 16px;
  margin-bottom: 0;
}
.FAQItem .question .icon-add {
  pointer-events: none;
  position: absolute;
  top: 10px;
  right: 0px;
  transition: transform ease-in 250ms;
}
.FAQItem .question .icon-add:before {
  font-size: 20px;
}
.FAQItem .answer {
  padding: 10px 0 20px;
  color: var(--subtleTextColor);
  transition: max-height ease-in 250ms;
}
.FAQItem .answer p:last-of-type {
  margin-bottom: 0;
}
.FAQItem.open .question h3 {
  color: var(--subtleTextColor);
}
.FAQItem.open .icon-add {
  transform: rotate(45deg);
}
.featureChecklistButtonHolder {
	position: relative;
	padding-top: 20px;
	width: 100%;
	text-align: center;
	z-index: 1;
}
.featureChecklistButtonHolder .button {
  padding: 10px 24px;
  height: auto;
  font-size: 18px;
  margin: 0 20px;
}
.featureChecklistCard {
	
	margin: -60px auto 40px auto;
	
/*	max-width: 1200px;*/
	position: relative;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0);
	padding: 40px;
	transition: background-color 500ms ease-in;
	z-index: 2;
	pointer-events: none;
}
.featureChecklistCard .icon-close {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
}
.featureChecklistCard .icon-close:hover {
  text-decoration: none;
}
.featureChecklistCard .icon-close:before {
  color: #aaa;
  font-size: 26px;
}
.featureChecklistCard h3, .featureChecklistCard .helpText, .featureChecklistCard .icon-close {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.featureChecklistCard h3 {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}
.featureChecklistCard .featureChecklist {
  columns: 1;
  column-gap: 60px;
}
@media (min-width:  700px) {
  .featureChecklistCard .featureChecklist {
    columns: 2;
  }
}
@media (min-width: 1000px) {
  .featureChecklistCard .featureChecklist {
    columns: 3;
  }
}
.featureChecklistCard .featureChecklist .helpText {
  display: none;
}
.featureChecklistCard .featureChecklist .featureSection {
  break-inside: avoid;
}
.featureChecklistCard .helpText {
  padding: 20px 0;
  text-align: center;
  display: none;
}
.featureChecklistCard.open {
  pointer-events: auto;
  background-color: #f6faf2;
}
.featureChecklistCard.open .buttonHolder {
  opacity: 0;
  pointer-events: none;
}
.featureChecklistCard.open .icon-close {
  display: block;
}
.featureChecklistCard.open h3, .featureChecklistCard.open .icon-close {
  opacity: 1;
}
.featureChecklistCard.open .featureChecklistCardSlide > .helpText {
  opacity: .7;
  display: block;
}
.featureChecklistCard .featureSection {
  margin: 10px 0 30px 0;
}
.featureChecklistCard .featureSection h2 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 4px;
}
.featureChecklistCard .featureSection span[class^='icon-'] {
  position: relative;
  display: inline-block;
  top: 2px;
  margin-right: 5px;
}
.featureChecklistCard .featureSection span[class^='icon-']:before {
  color: var(--brandingPrimary);
}
.featureChecklistCard .featureSection img.icon {
  display: inline-block;
  height: 40px;
  vertical-align: middle;
  position: relative;
  top: 5px;
  margin-right: 5px;
  filter: hue-rotate(285deg) brightness(125%) grayscale(0%);
}
.featureChecklistCard .featureSection .featureListing {
  margin: 15px 0 0 0;
}
.featureChecklistCard .featureSection .featureListing .featureItem {
  position: relative;
  padding: 6px 20px 6px 0;
  font-size: 15px;
}
.featureChecklistCard .featureSection .featureListing .featureItem .unlimited {
  position: absolute;
  top: 10px;
  right: 0;
  color: #6c9c31;
  font-weight: 700;
}
.featureChecklistCard .featureSection .featureListing .featureItem .checkbox {
  position: absolute;
  top: -0px;
  right: 5px;
  height: 15px;
  width: 7px;
  border-right: 2px solid var(--brandingPrimary);
  border-bottom:2px solid var(--brandingPrimary);
  transform: rotate(45deg);
}
.tourBusinessPanel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 60px;
	gap: 20px;
}
.tourBusinessPanel.imageLeft {
  background: var(--brandingPrimary05) url(../../images/designer/brushstrokeBG-left.png) 0 calc(100% + 110px) no-repeat;
}
.tourBusinessPanel.imageLeft .textContent {
  padding-right: 40px;
}
@media (min-width:  950px) {
  .tourBusinessPanel.imageLeft .textContent {
    order: 1;
    padding: 40px 0;
  }
}
.tourBusinessPanel.imageLeft span.floatingIcon {
  right: 4%;
}
.tourBusinessPanel.imageRight {
  background: var(--brandingPrimary05) url(../../images/designer/brushstrokeBG-right.png) 100% calc(100% + 110px) no-repeat;
}
.tourBusinessPanel.imageRight .textContent {
  /*padding-left: 40px;*/
}
.tourBusinessPanel.imageRight span.floatingIcon {
  left: 4%;
}
@media (min-width:  950px) {
  .tourBusinessPanel.imageRight span.floatingIcon {
    left: 0%;
  }
}
.tourBusinessPanel .textContent {
  flex: 1 1 auto;
  padding: 40px 40px 0 40px;
  width: 50%;
  width: 400px;
}
.tourBusinessPanel .textContent h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 0px 0 6px;
}
.tourBusinessPanel .textContent h3 {
  font-size: 20px;
  font-weight: 400;
}
.tourBusinessPanel .textContent .checklist {
  margin-top: 20px;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
}
.tourBusinessPanel .imageContent {
  position: relative;
  flex: 1 1 auto;
  width: 50%;
  width: 400px;
  height: 460px;
  overflow-y: hidden;
}
.tourBusinessPanel .imageContent img.feature {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 50px);
  /*	&:not(.noShadow) {
				box-shadow: 4px 10px 15px rgba(0, 0, 0, .2);
			}*/
}
span.floatingIcon {
	position: absolute;
	display: inline-block;
	top: 150px;
	padding: 10px;
	line-height: 1px;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: 8px 10px 15px rgba(0, 0, 0, .2);
}
span.floatingIcon:before {
  font-size: 50px;
  color: var(--brandingPrimary);
}
span.floatingIcon.icon-team {
  top: 250px;
}
.floatingIcon.atTop {
	padding: 8px;
}
.floatingIcon.atTop:before {
  font-size: 35px;
}
.floatingIcon.atTop.icon-itemA {
  top: 60%;
  left: 2%;
}
.floatingIcon.atTop.icon-itemS {
  top: 90%;
  left: 10%;
}
.floatingIcon.atTop.icon-itemP {
  top: 40%;
  left: 30%;
}
.floatingIcon.atTop.icon-itemR {
  top: 80%;
  left: 54%;
}
.floatingIcon.atTop.icon-itemF {
  top: 42%;
  left: 80%;
}
.floatingIcon.atTop.icon-itemW {
  top: -35px;
  left: 87%;
}
.floatingIcon.atTop.icon-itemO {
  top: 40%;
  right: 2%;
}
.tourCardPanelListing {
	padding: 60px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	align-items: stretch;
}
.tourCardPanelListing > div {
  flex: 1 1 auto;
  width: 400px;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  background: #fff;
  padding: 35px;
  break-inside: avoid;
}
.tourCardPanelListing > div h2 {
  margin: 20px 0 14px 0;
}
.tourCardPanelListing > div h3 {
  font-size: 17px;
  font-weight: 400;
}
.tourCardPanelListing > div h3.big {
  font-size: 24px;
  font-weight: 700;
}
.tourCardPanelListing > div .checklist {
  margin: 20px 0 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}
.tourCardPanelListing > div .imageHolder {
  margin: 20px 0;
  border-radius: 10px;
  height: 300px;
  background: var(--brandingPrimary) 50% 0 no-repeat;
  background-size: auto 100%;
}
.supportGreenBox {
	position: relative;
	border-radius: 10px;
	background: var(--brandingPrimary);
	padding: 40px;
	color: #fff;
	overflow: hidden;
}
.supportGreenBox h2 {
  margin-bottom: 12px;
}
.supportGreenBox .icon-help {
  display: none;
  position: absolute;
  top: -40px;
  right: 60px;
  opacity: .3;
  transform: rotate(-20deg);
}
.supportGreenBox .icon-help:before {
  font-size: 180px;
  font-weight: 100;
}
.supportGreenBox .lifePreserver {
  position: absolute;
  top: -30px;
  right: 70px;
  height: 150px;
  transform: rotate(-15deg);
}
.supportGreenBox ul.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  opacity: .9;
}
.supportGreenBox ul.checklist li {
  flex: 1 1 auto;
  width: 450px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 5px;
  padding: 15px 10px 15px 32px;
  font-size: 14px;
}
.supportGreenBox ul.checklist li:before {
  border-color: #fff;
  left: 12px;
  top: 14px;
}
.threeCards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}
.threeCards .card {
  flex: 1 1 auto;
  width: 280px;
  border: var(--mediumDividerLine);
  border-radius: 10px;
  padding: 30px;
}
.threeCards .card .icon-forbidden {
  position: relative;
}
.threeCards .card .icon-forbidden span {
  position: absolute;
  top: 8px;
  left: 8px;
}
.threeCards .card .icon-forbidden span:before {
  font-size: 28px;
  color: #999;
}
.threeCards .card .icon-forbidden:before {
  font-size: 45px;
  color: #f00;
}
.threeCards .card h3 {
  margin: 16px 0 10px;
  white-space: nowrap;
}
.threeCards .card p {
  margin: 0;
  font-size: 14px;
}
.threeCards .card ul {
  padding: 0;
  margin: 10px 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
}
.threeCards .card ul li {
  margin-top: 10px;
}
/*==============================================================
  Section:: Team Edition Page 																*/
.pageTop.team {
	min-height: 720px;
	background: var(--brandingPrimary10) url(../../images/svg/fadingConcentricRings.svg) no-repeat 50% -320px;
}
.pageTop.team h1 {
  padding-top: 40px;
}
.pageTop.team h1, .pageTop.team p {
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .pageTop.team h1 {
    font-size: 40px;
    margin-bottom: 20px;
  }
}
@media (max-width: 850px) {
  .pageTop.team h1 {
    font-size: 30px;
  }
}
@media (max-width: 475px) {
  .pageTop.team h1 {
    font-size: 26px;
    margin-bottom: 0px;
  }
}
@media (max-width: 390px) {
  .pageTop.team h1 {
    font-size: 24px;
  }
  .pageTop.team p {
    font-size: 16px;
  }
}
.pageTop.team img.solidLeaf {
  position: absolute;
  bottom: 80px;
  left: calc(50% - 100px);
  width: 200px;
}
.headshotConstellation {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0 auto;
	
	height: 0px; background-color: rgba(255, 80, 200, .4);
	width: 680px;
	max-width: 100%;
}
.headshotConstellation img:nth-child(1) {
  inset:  10px auto auto  0%;
}
.headshotConstellation img:nth-child(2) {
  inset: 130px auto auto 14%;
}
.headshotConstellation img:nth-child(3) {
  inset:  10px auto auto 26%;
}
.headshotConstellation img:nth-child(4) {
  inset:-135px auto auto 28%;
  opacity: .3;
}
.headshotConstellation img:nth-child(5) {
  inset: 260px auto auto 38%;
}
.headshotConstellation img:nth-child(6) {
  inset: -20px auto auto 60%;
}
.headshotConstellation img:nth-child(7) {
  inset: 215px auto auto 74%;
}
.headshotConstellation img:nth-child(8) {
  inset: 120px auto auto 86.5%;
}
.headshotConstellation img:nth-child(9) {
  inset: -30px auto auto 90%;
}
.headshotConstellation img:nth-child(1) {
  inset: auto auto  280px  0%;
}
.headshotConstellation img:nth-child(2) {
  inset: auto auto  160px 14%;
}
.headshotConstellation img:nth-child(3) {
  inset: auto auto  280px 26%;
}
.headshotConstellation img:nth-child(4) {
  inset: auto auto  435px 28%;
  opacity: .3;
}
.headshotConstellation img:nth-child(5) {
  inset: auto auto   40px 38%;
}
.headshotConstellation img:nth-child(6) {
  inset: auto auto  310px 60%;
}
.headshotConstellation img:nth-child(7) {
  inset: auto auto   85px 74%;
}
.headshotConstellation img:nth-child(8) {
  inset: auto auto  180px 86.5%;
}
.headshotConstellation img:nth-child(9) {
  inset: auto auto  330px 90%;
}
img.roundHeadshot {
	position: absolute;
	height: 56px;
	width: 56px;
	border-radius: 50%;
	border: 5px solid #fff;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
}
img.roundHeadshot.bottomStraggler {
  inset: -30px auto auto 27%;
}
/*==============================================================
  Section:: Enterprise Page 																	*/
.companyLogoSet {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.companyLogoSet div {
  border: var(--mediumDividerLine);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .10);
  width: 150px;
  max-width: 220px;
  padding: 8px 24px;
  flex: 1 0 auto;
}
.companyLogoSet div img {
  width: 100%;
}
.enterpriseSecurity {
	gap: 40px;
	margin-top: 80px;
	border-radius: 20px;
	border: 1px solid rgba(var(--brandingPrimaryRGB), .5);
	padding: 40px 60px 20px 20px;
	background: rgba(var(--brandingPrimaryRGB), .05) url(../../images/designer/gridTexture.png) !important;
}
.enterpriseSecurity .intrigueSections li {
  background-color: #fff;
}
/*==============================================================
  Section:: About Page 																				*/
.pageTop.about h1 {
  padding: 20px 0 140px;
}
.aboutTopRiff {
	position: relative;
	max-width: 1000px;
	padding-bottom: 60px;
}
.aboutTopRiff .photoFrame {
  position: absolute;
  top: -210px;
  right: 60px;
  border: 10px solid #fff;
  transform: rotate(-10deg);
  box-shadow: 5px 10px 5px rgba(0, 0, 0, .1);
}
.aboutTopRiff .photoFrame img {
  display: block;
  width: 230px;
  max-width: 24vw;
}
.aboutTopRiff .riffWords {
  max-width: 600px;
  margin-right: 250px;
}
.aboutTopRiff .riffWords h2 {
  margin: -30px 0 30px;
  font-size: 22px;
}
.aboutTopRiff .riffWords p {
  font-size: 15px;
}
.aboutTopRiff .riffWords p:last-child {
  margin: 0;
}
.aboutTopRiff .signatureBlock {
  position: absolute;
  bottom: 60px;
  right: 60px;
}
@media (max-width: 700px) {
  .aboutTopRiff .photoFrame {
    top: -170px;
  }
  .aboutTopRiff .photoFrame img {
    width: 120px;
  }
  .aboutTopRiff .riffWords {
    margin: 0;
  }
  .aboutTopRiff .signatureBlock {
    position: static;
    margin-top: 30px;
  }
}
.signatureBlock {
	font-size: 13px;
	line-height: 1.6;
}
.signatureBlock img {
  display: block;
  margin-bottom: 6px;
}
.signatureBlock strong {
  font-size: 16px;
}
/*==============================================================
  Section:: Security Page 																		*/
.pageTop.security {
	padding-top: 40px;
}
.pageTop.security p {
  font-size: 22px;
  padding-bottom: 80px;
  max-width: 800px;
}
.securityNavBar {
	position: relative;
	margin: -160px auto 80px auto;
	padding: 0;
	max-width: 1000px;
	border: var(--mediumDividerLine);
	border-radius: 5px;
	background-color: #e8e8e8;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	align-items: stretch;
	z-index: 1;
}
.securityNavBar li {
  flex: 1 0 auto;
  width: 190px;
  min-width: 190px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.securityNavBar li a {
  display: block;
  /*	height: 100px;*/
  padding: 20px 10px 20px 10px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--baseColor);
  white-space: nowrap;
}
.securityNavBar li a span {
  display: block;
  margin-bottom: 10px;
}
.securityNavBar li a span:before {
  color: #969696;
  font-size: 24px;
}
.securityNavBar li a:hover {
  background-color: #fafafa;
  color: #1a1a1a;
  text-decoration: none;
}
.securityNavBar li a:hover span:before {
  color: var(--brandingPrimary);
}
.securitySection {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 0;
}
.securitySection span[class^="icon"] {}
.securitySection h2 {
  margin-top: 20px;
}
.securitySection p {
  font-size: 14px;
}
.securitySection img.hangingRight {
  position: relative;
  float: right;
  top: -60px;
  max-width: 50%;
}
@media(min-width: 1050px) {
  .securitySection img.hangingRight {
    right: -100px;
    margin-left: -80px;
  }
}
@media(max-width: 700px) {
  .securitySection img.hangingRight {
    float: none;
    max-width: 100%;
    top: 0;
  }
}
@media(min-width: 701px) {
  .securitySection img.expandOnHover {
    transform-origin: 100% 30%;
    transition: all ease-in-out 150ms;
    will-change: transform, box-shadow;
  }
  .securitySection img.expandOnHover:hover {
    transform: scale(2);
    border-radius: 10px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .1);
  }
}
.alertBox, .friendlyBox {
	border-radius: 5px;
	width: fit-content;
	max-width: 100%;
	padding: 15px 20px;
	border: 1px solid #99000066;
}
.alertBox a:link, .friendlyBox a:link {
  color: inherit;
  text-decoration: underline;
}
.alertBox .helpText, .friendlyBox .helpText {
  color: inherit;
}
.alertBox    { background-color: #ffdddd88; /*color: #99000088;*/ border-color: #99000066; }
.bugBounty ul li {
  padding-bottom: 16px;
}
.bountyHistoryWrapper {
  max-height: 700px;
  overflow: auto;
}
table.bountyHistory {
	width: 100%;
}
table.bountyHistory th:nth-child(1), table.bountyHistory th:nth-child(2) {
  width: 120px;
}
table.bountyHistory th:nth-child(3), table.bountyHistory td:nth-child(3) {
  text-align: right;
  padding-right: 20px;
  width: 95px;
}
table.bountyHistory thead tr th {
  position: sticky;
  top: 0;
}
table.bountyHistory tfoot tr th {
  position: sticky;
  bottom: 0;
}
table.bountyHistory tfoot th {
  border-top: var(--mediumDividerLine);
  padding-top: 20px;
}
/*==============================================================
  Section:: Media Assets Page																	*/
.logoVariation {
	margin: 10px 0 50px 0;
	display: flex;
	gap: 20px;
	align-items: center;
}
.logoVariation label {
  width: 120px;
  flex: 0 0 auto;
}
.logoVariation .imageHolder {
  border: var(--minorDividerLine);
  border-radius: 10px;
  padding: 10px;
}
.logoVariation .imageHolder.transparent {
  background: url(../../images/branding/transparentBGPattern.png);
}
.logoVariation .imageHolder.green {
  background-color: var(--brandingPrimary);
}
.logoVariation .imageHolder.forWhiteLogo {
  background-color: #444;
}
.colorSwatchSet {
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-bottom: 100px;
}
.colorSwatchSet > div {
  text-align: center;
}
.colorSwatchSet > div .colorChip {
  height: 150px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 4px 8px 10px rgba(0, 0, 0, .15);
  margin-bottom: 20px;
}
.colorSwatchSet > div div {
  font-size: 20px;
}
.colorSwatchSet > div code {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}
/*==============================================================
  Section:: Experts Page																			*/
.CAProfessional {
	position: relative;
	max-width: 700px;
	font-size: 16px;
	margin-bottom: 60px;
	padding: 20px 30px;
	border: var(--mediumDividerLine);
	border-radius: 15px;
	box-shadow: 2px 3px 5px rgba(0, 0, 0, .07);
}
.CAProfessional .topLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}
.CAProfessional .topLine img.avatar {
  height: 90px;
  width: 90px;
  border-radius: 50%;
}
.CAProfessional .topLine h3.name {
  font-size: 24px;
  flex-grow: 1;
}
.CAProfessional div.blurb {
  margin-bottom: 20px;
  line-height: 1.6;
}
.CAProfessional .button {
  position: relative;
  padding-right: 45px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CAProfessional .button .icon-share {
  position: absolute;
  top: 8px;
  right: 8px;
  transform: rotate(45deg);
}
.CAProfessional .button.primary .icon-share:before {
  color: #fff;
}
/*==============================================================
  Section:: Release Notes Page																*/
.releaseNotesSearch {
	position: relative;
}
.releaseNotesSearch .showCheckbox {
  display: inline-block;
}
.releaseNotesSearch .showCheckbox:not(:first-child) {
  margin-left: 15px;
}
.releaseNotesSearch .inlineBlock {
  margin-left: 10px;
  margin-top: 6px;
}
.filterInputClearHolder .filterInputClearButton:after {
  font-family: "appIconsDesigner" !important;
  content: "\51";
}
input[type=text].filterApplies {
	border-color: var(--brandingSecondary) !important;
	padding-right: 35px;
	box-shadow: inset 0 0 0 0px var(--brandingSecondary);
}
input[type=text].filterApplies + .filterInputClearHolder .filterInputClearButton {
  pointer-events: auto;
  opacity: 1;
  transition: opacity ease-out .15s;
}
.releaseNotesListing {
	margin-top: 10px;
	padding-left: 15px;
}
.releaseNotesListing .releaseNote {
  position: relative;
  border-bottom: var(--meenyDividerLine);
  padding: 16px 50px 16px 100px;
}
.releaseNotesListing .releaseNote.type-major {
  min-height: 60px;
}
.releaseNotesListing .releaseNote .theDate {
  position: absolute;
  top: 19px;
  left: 0px;
  font-size: 12px;
}
/* Logical negation of atFullUI, sometimes much easier to do overrides specific to this! */
@media (max-width: 799px), (max-height: 499px) {
  .releaseNotesListing .releaseNote .theDate {
    padding-left: 10px;
  }
}
.releaseNotesListing .releaseNote .theNote {
  font-size: 15px;
}
.releaseNotesListing .releaseNote .theIcon {
  position: absolute;
  top: 16px;
  right: 10px;
}
.releaseNotesListing .releaseNote .theIcon:before {}
.releaseNotesListing .releaseNote .theIcon.major {
  top: 8px;
  right: 5px;
}
.releaseNotesListing .releaseNote .theIcon.major:before {
  font-size: 30px;
}
.reviewListing {
	margin-right: -16px;
	margin: 0 0 40px 0;
}
@media(min-width: 1000px) {
  .reviewListing {
    columns: 2 auto;
  }
}
.review {
	border: var(--mediumDividerLine);
	border-radius: 5px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .10);
	break-inside: avoid;
	padding: 30px;
	margin: 0 0 16px 0;
	margin: 0 auto 16px;
	width: 100%;
	max-width: 600px;
	vertical-align: top;
}
.review .header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 15px;
}
.review .header .avatar {
  border-radius: 50%;
  height: 50px;
  width: 50px;
}
.review .header .byLine {
  flex-grow: 1;
  flex: 1 0 auto;
  width: calc(100% - 80px);
}
.review .header .byLine .customerName {
  font-weight: 700;
  line-height: .9;
}
.review .header .byLine span {
  font-size: .8rem;
  color: var(--subtleTextColor);
}
.review .header .dateLine {
  font-size: .9rem;
  white-space: nowrap;
}
.review .header .starRating {
  width: 105px;
  flex: 0 0 auto;
  padding-top: 4px;
}
.review .header .starRating .ratingStar {
  display: inline-block;
  width: 21px;
  height: 17px;
  background: url(../../images/public/ratingStars.png) no-repeat 0 0;
  background-size: 17px auto;
}
.review .header .starRating .ratingStar.half  {
  background-position: 0 -17px;
}
.review .header .starRating .ratingStar.empty {
  background-position: 0 -40px;
}
@media(min-width: 1000px) {
  .review .header .byLine {
    width: auto;
  }
  .review .header .dateLine {
    order: 0;
  }
  .review .header .starRating {
    flex-grow: 1;
    order: 1;
    width: 100%;
    padding-top: 0;
  }
}
.review h2 {
  margin: 15px 0 20px 0;
  font-size: 18px;
  font-weight: 700;
}
.review .theReview {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  max-height: 295px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 500ms ease-in-out;
}
.review .theReview.showingFull {
  max-height: 1000px;
}
.review .theReview.showingFull + .fullReviewLink {
  display: none;
}
.review .theReview:not(.showingFull):after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, #fff 100%);
}
.review .fullReviewLink {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
}
.featureVideoRiff {
	margin: 40px auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--brandingPrimary);
}
.videoRiffCollection {
	display: flex;
	flex-wrap: wrap;
/*	justify-content: center;*/
	gap: 30px 40px;
	margin-top: 80px;
	margin-bottom: 100px;
}
.videoRiffCollection .riffCard {
  position: relative;
  flex: 1 1 auto;
  width: 450px;
  /*	min-width: 400px;
		max-width: calc(50% - 20px);*/
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  background: #fff;
  padding: 45px 35px 60px 35px;
  overflow: hidden;
  transition: background-color 250ms ease-in;
}
.videoRiffCollection .riffCard:hover {
  border: 1px solid #ababab;
}
.videoRiffCollection .riffCard a.boxed:hover {
  text-decoration: none;
}
.videoRiffCollection .riffCard .riffFacade {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #59901c url(../../images/svg/CALeafWireFrameLight.svg) no-repeat 50% -40px;
  background-size: 400px;
  border-radius: 10px;
  overflow: hidden;
}
.videoRiffCollection .riffCard .riffFacade .title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, .5);
}
.videoRiffCollection .riffCard .riffFacade .title div {
  font-size: 20px;
}
.videoRiffCollection .riffCard .riffFacade .icon-videoPlay {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
  background-color: #fff;
  border-radius: 50%;
  padding: 20px 17px 20px 23px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .15);
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 1px;
  opacity: 0.9;
  transition: box-shadow 250ms ease-in, transform 250ms ease-in;
  transition: all 250ms ease-in;
}
.videoRiffCollection .riffCard .riffFacade .icon-videoPlay:before {
  font-size: 50px;
}
.videoRiffCollection .riffCard .riffFacade:hover .icon-videoPlay {
  transform: translateY(-5px);
  box-shadow: 1px 7px 5px rgba(0, 0, 0, .15);
  opacity: 1;
}
/*
		.duration {
			display: flex;
			margin-bottom: 16px;
			align-items: center;
			gap: 8px;
			color: #ababab;
			font-size: 15px;
			.icon-play { line-height: .8; }
		}
		*/
.videoRiffCollection .riffCard h3 {
  font-size: 1.3rem;
}
@media (max-width: 500px) {
  .videoRiffCollection .riffCard {
    padding: 25px 20px 30px 20px;
  }
  .videoRiffCollection .riffCard .riffFacade .title {
    font-size: 30px;
  }
}
@media (min-width: 1080px) {
  .videoRiffCollection .riffCard {
    max-width: calc(50% - 20px);
  }
}
.playDuration {
	display: flex;
	margin-bottom: 16px;
	align-items: center;
	gap: 8px;
	color: #ababab;
	font-size: 15px;
}
.playDuration .icon-play {
  line-height: .8;
}
.teamSet {
	text-align: center;
	margin: 70px 0 10px;
}
.teamSet img {
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  width: 125px;
  max-width: 33%;
}
.pageTop.webinars {
	
	padding-bottom: 360px;
	background: var(--brandingPrimary10) url(../../images/designer/gridTexture.png) repeat 0 100%;
	
}
.pageTop.webinars h1 {
  padding-top: 20px;
}
.pageTop.webinars:before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: url(../../images/designer/webinarCardsFadingBG.png) no-repeat 50% 100%;
}
.pageTop.webinars:after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  background: url(../../images/designer/webinarCardsBG.png) no-repeat 50% 100%;
}
.pageTop.webinars + .fadedGreenSection {
  padding: 60px 0 30px;
}
.pageTop.webinarSingle {
	padding-top: 160px;
	background: var(--brandingPrimary10) url(../../images/designer/gridTexture.png) repeat 0 calc(100% + 5px);
	border-bottom: var(--mediumDividerLine);
}
.pageTop.webinarSingle h1 {
  padding: 20px 0 20px;
}
.pageTop.webinarSingle .videowrapper {
  border: none;
  border-radius: 10px 10px 0 0;
  box-shadow: 15px 25px 20px rgba(0, 0, 0, .15);
  background-color: #fff;
  overflow: hidden;
}
.webinarSearch {
	position: relative;
	margin: -90px auto 0;
	max-width: 800px;
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}
.webinarCategoryListing {
	position: relative;
}
.webinarCategoryListing .webinarSingleViewer {
  position: absolute;
  margin-top: 0;
  border: var(--mediumDividerLine);
}
.webinarCategoryListing .webinarCategory {
  padding: 80px 0;
  border-bottom: var(--mediumDividerLine);
}
.webinarCategoryListing .webinarCategory h2 {
  text-align: center;
}
.webinarCategoryListing .webinarCategory .webinarListing {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard {
  border: var(--mediumDividerLine);
  border-radius: 5px;
  background-color: #fff;
  /*	width: 400px;*/
  min-width: 425px;
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  align-items: stretch;
}
@media(min-width: 970px) {
  .webinarCategoryListing .webinarCategory .webinarListing .webinarCard {
    max-width: calc(50% - 20px);
  }
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .diagramHolder {
  position: relative;
  border-right: var(--mediumDividerLine);
  padding: 5px;
  width: 40%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .diagramHolder img {
  width: 100%;
  height: auto;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .diagramHolder:after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../../images/designer/gridTexture.png) repeat 0 100%;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .infoHolder {
  padding: 24px;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .infoHolder .blurb {
  font-size: 12px;
  display: none;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .infoHolder h3 {
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 16px;
}
.webinarCategoryListing .webinarCategory .webinarListing .webinarCard .infoHolder .button {
  font-size: 13px;
  height: auto;
}
.webinarInfoAndNotes {
	display: flex;
	gap: 60px;
	
}
.webinarInfoAndNotes .info {
  width: 250px;
  padding-bottom: 80px;
  flex: 0 0 auto;
  font-size: 14px;
}
.webinarInfoAndNotes .info .byLine {
  display: flex;
  align-items: center;
}
.webinarInfoAndNotes .info .byLine img.avatar {
  display: inline-block;
  float: left;
  margin-right: 20px;
  width: 40px;
  border-radius: 50%;
}
.webinarInfoAndNotes .info h3.highlightsHeader {
  margin: 20px 0 10px 0;
  border-top: var(--mediumDividerLine);
  padding-top: 16px;
}
.webinarInfoAndNotes .info table.highlights {
  font-weight: 600;
}
.webinarInfoAndNotes .info table.highlights td {
  vertical-align: top;
  padding-bottom: 8px;
}
.webinarInfoAndNotes .info table.highlights td:first-child {
  color: var(--brandingPrimary);
  padding-right: 8px;
  text-align: right;
}
.webinarInfoAndNotes .showNotes .theDrawing {
  display: block;
  margin: 40px 0;
  border: var(--mediumDividerLine);
  border-radius: 5px;
}
@media(max-width: 700px) {
  .webinarInfoAndNotes {
    flex-direction: column;
  }
  .webinarInfoAndNotes .info {
    width: 100%;
  }
}
.meetJohnPage {
	padding-bottom: 260px;
}
.meetJohnPage + .readableWidth {
  position: relative;
}
.meetJohnPage + .readableWidth .heroImageHolder {
  position: relative;
  margin: -340px auto 60px;
  padding-bottom: 50px;
}
.meetJohnPage + .readableWidth .heroImageHolder img.heroImage {
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
}
.meetJohnPage + .readableWidth .heroImageHolder .smarmyCaption {
  position: absolute;
  right: -30px;
  bottom: 0;
}
@media(max-width: 550px) {
  .meetJohnPage + .readableWidth .heroImageHolder .smarmyCaption {
    right: 10px;
  }
}
.meetJohnPage + .readableWidth .heroImageHolder .smarmyCaption .caveat {
  font-size: 30px;
  font-weight: bold;
  color: var(--brandingPrimary);
}
@media(max-width: 400px) {
  .meetJohnPage + .readableWidth .heroImageHolder .smarmyCaption .caveat {
    font-size: 24px;
  }
}
.meetJohnPage + .readableWidth .heroImageHolder .smarmyCaption img {
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: 50px;
  transform: scaleY(-1) rotate(45deg);
}
img.roundedCorners {
	border-radius: 10px;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);
}
.pageTop.simpleOneTwoSpacing {
	padding-bottom: 60px;
}
.pageTop.simpleOneTwoSpacing + .fadedGreenSection {
  padding-top: 30px;
}
.pageTop.meetJohnPageTop {
	padding: 30px 0 200px;
}
.pageTop.meetJohnPageTop .greenChalkSpeechBubble {
  margin: 60px auto 0;
  width: fit-content;
  background: url(../../images/designer/greenChalkSpeechBubble.png) no-repeat;
  background-size: contain;
  padding: 25px 40px 60px;
}
.pageTop.meetJohnPageTop + .fadedGreenSection {
  padding-top: 60px;
  overflow-x: clip;
}
.meetJohnTopRiff {
	
	padding-top: 0px;
	padding-bottom: 30px;
	
}
.meetJohnTopRiff h2 {
  font-size: 1.5rem;
}
.meetJohnTopRiff img {
  position: absolute;
  bottom: 0;
  left: 55%;
  width: 400px;
}
.meetJohnTopRiff .riffWords {
  width: 70%;
  max-width: calc(100% - 400px);
}
@media(max-width: 900px) {
	.pageTop.meetJohnPageTop {
		padding-bottom: 290px;
	}
	.meetJohnTopRiff img {
    bottom: 100%;
    left: auto;
    right: 30px;
    width: 250px;
  }
	.meetJohnTopRiff .riffWords {
    width: 100%;
    max-width: 100%;
  }
}
@media(max-width: 800px) {
	.pageTop.meetJohnPageTop { padding-bottom: 280px; }
	.meetJohnTopRiff {
		overflow: hidden;
	}
	.meetJohnTopRiff img {
    width: 220px;
    right: -20px;
  }
}
.meetJohnSigns {
	position: relative;
	padding-top: 50px;
}
.meetJohnSigns img {
  position: absolute;
}
.meetJohnSigns .uncertaintyAhead {
  top: -90px;
  left: -120px;
  width: 160px;
}
.meetJohnSigns .wereGood {
  bottom: -160px;
  right: 160px;
  width: 220px;
}
.meetJohnSigns .oppositeWereGood {
  margin-right: 50%;
}
@media(max-width: 1250px) {
  .meetJohnSigns {
    padding-top: 120px;
  }
  .meetJohnSigns .uncertaintyAhead {
    left: 50px;
  }
}
@media(max-width: 750px) {
  .meetJohnSigns .wereGood {
    right: 50px;
  }
}
@media(max-width: 550px) {
  .meetJohnSigns .oppositeWereGood {
    margin-right: 0;
  }
  .meetJohnSigns .wereGood {
    position: static;
    display: block;
    margin: 0 auto -120px auto;
  }
}
.artistConundrum {
	margin-top: -150px;
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	
}
.artistConundrum img {
  width: calc(40% - 40px);
  max-width: 300px;
}
.artistConundrum div {
  margin-top: 40px;
  width: calc(55%);
}
@media(max-width: 850px) {
  .artistConundrum {
    margin-top: -70px;
    margin-bottom: 0px;
  }
  .artistConundrum img {
    width: 60%;
    margin: 0 auto;
  }
  .artistConundrum div {
    width: 100%;
  }
}
/*==============================================================
  Section:: Risk Page 																				*/
.pageTop.riskPage h1 {
  padding: 20px 0 140px;
}
.pageTop.riskPage + .fadedGreenSection {
  overflow-x: clip;
  padding: 60px 0;
}
.riskTopRiff {
	position: relative;
	max-width: 1000px;
}
.riskTopRiff img {
  position: absolute;
  top: -260px;
  right: -260px;
  display: block;
  width: 600px;
}
.riskTopRiff img.balanceScale {
  top: -220px;
  right: -100px;
  width: 400px;
}
.riskTopRiff .riffWords {
  max-width: 600px;
  margin-right: 250px;
}
.riskTopRiff .riffWords p {
  font-size: 15px;
}
.riskTopRiff .riffWords p:last-child {
  margin: 0;
}
@media (max-width: 1000px) {
  .riskTopRiff img {
    top: -160px;
    right: -100px;
    width: 420px;
  }
  .riskTopRiff img.balanceScale {
    top: -160px;
    right: 0;
    width: 300px;
  }
  .riskTopRiff .riffWords {
    margin-right: 300px;
  }
}
@media (max-width: 800px) {
  .riskTopRiff img {
    top: -170px;
    right: calc(50% - 110px);
    width: 220px;
  }
  .riskTopRiff img.balanceScale {
    top: -260px;
    right: calc(50% - 110px);
    width: 220px;
  }
  .riskTopRiff img.balanceScale + .riffWords {
    margin-top: 80px;
  }
  .riskTopRiff .riffWords {
    margin: 0;
  }
}
.riskOdds {
	border: var(--mediumDividerLine);
	border-radius: 10px;
	background-color: #fff;
	padding: 40px 35px 0 35px;
	margin-bottom: 40px;
	
	display: flex;
	
}
.riskOdds .riskHeader {
  width: 300px;
  flex: 0 0 auto;
  padding-right: 30px;
  position: relative;
}
.riskOdds .riskHeader .conicOdds {
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background: rgba(var(--brandingPrimaryRGB), .2);
}
.riskOdds .riskHeader .conicOdds:after {
  content: '';
  position: absolute;
  inset: 20%;
  background: #fff;
  border-radius: 50%;
}
.riskOdds .riskHeader .theOdds {
  padding-left: 40px;
  font-size: 30px;
}
.riskOdds .riskHeader .theOdds .caveat {
  color: var(--brandingPrimary);
}
.riskOdds .riskHeader .theRisk {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 600;
}
.riskOdds .riskBody {
  flex: 0 1 auto;
  border-left: var(--mediumDividerLine);
  padding-left: 40px;
  font-size: 14px;
}
.riskOdds .riskBody .atLabel {
  font-weight: 700;
  margin-bottom: 4px;
}
.riskOdds .riskBody .atBigCo, .riskOdds .riskBody .atCA {
  padding-bottom: 30px;
  line-height: 1.5;
}
.riskOdds .riskBody .atCA .atLabel {
  color: var(--brandingPrimary);
}
@media (max-width: 900px) {
  .riskOdds {
    flex-direction: column;
  }
  .riskOdds .riskHeader {
    width: fit-content;
    text-align: center;
    margin: 0 auto 20px auto;
    padding: 0 0 20px;
    border-bottom: var(--mediumDividerLine);
  }
  .riskOdds .riskHeader .theOdds {
    padding: 0 0px;
  }
  .riskOdds .riskBody {
    border: none;
    padding: 0;
  }
}
@media (max-width: 400px) {
  .riskOdds .riskHeader {
    width: 100%;
  }
  .riskOdds .riskHeader .theOdds {
    padding-left: 40px;
    text-align: left;
  }
}
.reasonsToAttend > div {
  padding: 50px 50px 50px 100px;
}
.reasonsToAttend > div strong {
  font-size: 26px;
}
.reasonsToAttend > div:before {
  top: 50px;
  left: 35px;
  font-size: 34px;
}
@media(max-width: 550px) {
  .reasonsToAttend > div {
    padding: 50px 30px 50px 80px;
  }
  .reasonsToAttend > div:before {
    left: 15px;
  }
}
.reasonsToAttend > div:nth-child(1):before {
  content: "\35";
}
.reasonsToAttend > div:nth-child(2):before {
  content: "\68";
}
.reasonsToAttend > div:nth-child(3):before {
  content: "\53";
}
.reasonsToAttend > div:nth-child(4):before {
  content: "\4b";
}
.upcomingOfficeHours {
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	padding: 35px 25px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	

}
.upcomingOfficeHours .when {
  flex-grow: 1;
}
.upcomingOfficeHours .when .theDate {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
}
.upcomingOfficeHours .when .theTime {
  font-size: 15px;
  color: #ababab;
}
.upcomingOfficeHours .when .theTime span {
  position: relative;
  top: 2px;
}
.upcomingOfficeHours .button, .upcomingOfficeHours input[type=submit] {
  margin: 0;
}
.upcomingOfficeHours form {
  display: flex;
  gap: 10px;
  width: 100%;
}
.upcomingOfficeHours form input[type=text] {
  flex-grow: 1;
  width: 100%;
}
.upcomingOfficeHours.next {
  margin: -140px 0 20px 0;
}
@media (min-width: 600px) {
  .upcomingOfficeHours.next {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.furtherOut {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.furtherOut > div {
  flex: 1 1 auto;
  flex-direction: column;
  width: 300px;
}
ul.listNav li a.current {
	font-weight: bold;
	color: inherit;
	pointer-events: none;
}
.pageTop.jobs {
	min-height: 380px;
	background: var(--brandingPrimary10) url(../../images/svg/fadingConcentricRings.svg) no-repeat 50% -400px;
}
.pageTop.jobs h1 {
  padding-top: 20px;
}
.pageTop.jobs .solidLeaf {
  position: relative;
  margin: 0 auto;
  margin: -10px 0 -120px 0;
}
.jobCardCollection {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 30px;
	margin-bottom: 100px;
}
@media (max-width: 600px) {
  .jobCardCollection {
    display: block;
  }
  .jobCardCollection .jobCard {
    margin-bottom: 30px;
  }
}
.jobCardCollection .jobCard {
  position: relative;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  background: #fff;
  padding: 35px 35px 35px 35px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, .1);
  transition: border 250ms ease-in;
}
.jobCardCollection .jobCard:hover {
  border: 1px solid #ababab;
}
.jobCardCollection .jobCard h2 {
  margin-bottom: 20px;
}
.jobCardCollection .jobCard .blurb {
  padding-bottom: 60px;
  line-height: 1.8;
}
.jobCardCollection .jobCard .button.primary {
  position: absolute;
  bottom: 35px;
}
.jobPosting {
	line-height: 1.8em;
}
.jobPosting p {
  margin: 0;
}
.jobPosting ol, .jobPosting ul {
  margin: 1em 0;
}
.formJA input[type=text], .formJA textarea {
  display: block;
  width: 100%;
  margin: 4px 0 20px;
  padding: 4px 8px;
  height: auto;
  font-size: 16px;
}
.formJA input[type=text] + .helpText, .formJA textarea + .helpText {
  margin: -16px 0 20px;
}
.formJA textarea[name=statement] {
  height: 500px;
}
.legalText h1 {
  margin: 1rem 0;
}
.legalText h2 {
  margin: 4rem 0 1rem 0;
}
.legalText p {
  line-height: 1.8;
}
@media (max-width: 530px) {
  .legalText ol {
    padding-left: 25px;
  }
}
.legalText ol li {
  line-height: 1.8;
  margin-bottom: .8rem;
}
.legalText ol li p {
  margin-bottom: 0;
}
.legalText ol ol {
  margin: 1rem 0 2rem;
}
.legalText ol ol li {
  list-style-type: lower-roman;
}
.signUpPage {
	
	padding: 60px 0px 100px;
	background: #fff url(../../images/svg/CALeafWireFrame.svg) no-repeat -50px 100px;
	background-size: 800px;
}
.signUpPage .inlineLink .topLogo {
  display: block;
  height: 40px;
  margin: 0 auto;
}
.signUpPage .navDots {
  margin: 40px auto 20px;
}
.signUpPage .navDots .navItem.disabled {
  pointer-events: none;
  cursor: default;
}
.signUpPage .navDots .navItem.tabSelected .navDot {
  background-color: var(--brandingPrimary);
}
.inlineLink {
	display: inline-block;
	width: fit-content;
}
.signUpSection {
	
	max-width: 750px;
	margin: 0 auto;
	
}
.signUpSection h1 {
  margin-bottom: 40px;
  font-weight: 600;
}
.signUpSection .cardOptionHolder {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  justify-content: center;
  gap: 15px;
}
.signUpSection .cardOptionHolder .card {
  flex: 1 1 auto;
  border-radius: 5px;
  background: #fff;
  width: 230px;
  max-width: 260px;
  padding: 20px 20px;
  border: 1px solid #cecece;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .15);
  text-align: center;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease-in, box-shadow 150ms ease-in;
}
.signUpSection .cardOptionHolder .card.wide {
  width: 100%;
  max-width: none;
}
.signUpSection .cardOptionHolder .card:hover {
  text-decoration: none;
}
.signUpSection .cardOptionHolder .card span {
  display: block;
  margin-bottom: 10px;
}
.signUpSection .cardOptionHolder .card span:before {
  font-size: 30px;
  color: var(--brandingPrimary);
}
.signUpSection .cardOptionHolder .card:hover {
  border-color: #999999;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, .2);
}
.signUpSection .cardOptionHolder .card.chosen {
  border: 2px solid var(--brandingPrimary);
}
.signUpSection .testimonial {
  margin-top: 100px;
  max-width: 750px;
  border: 1px solid #cecece;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  text-align: left;
}
.signUpSection .testimonial .headshot {
  height: 70px;
  border-radius: 50%;
}
.signUpSection .testimonial .byLine {
  white-space: nowrap;
}
.signUpSection .testimonial .byLine span.name {
  font-weight: 600;
}
.signUpSection .testimonial .byLine div {
  color: #bbb;
  font-size: 11px;
}
.signUpSection .testimonial p {
  flex: 1 1 auto;
  /*		min-width: 300px;*/
  width: 350px;
  margin: 0;
  line-height: 1.3;
}
.signUpSection .testimonial p strong {
  font-weight: 600;
}
@media(min-width: 600px) and (min-height: 850px) {
  .signUpSection .testimonial {
    position: fixed;
    inset: auto 40px 80px 40px;
    margin: 0 auto;
  }
}
.stackedForm {
	max-width: 500px;
	margin: 0 auto;
	text-align: left;
}
.stackedForm label {
  display: block;
  margin: 20px 0 6px;
  font-weight: 600;
}
.stackedForm label.styleCheckbox {
  margin: 5px 0 0 0;
  font-size: 13px;
  font-weight: 400;
}
.stackedForm .styleCheckboxIndent {
  margin: -2px 0 0 26px;
  font-size: 13px;
}
.stackedForm input[type=text], .stackedForm input[type=password], .stackedForm select {
  width: 100%;
}
.stackedForm .button.fullWidth {
  margin: 30px 0 15px;
  width: 100%;
}
#signUpComplete {
	padding-top: 80px;
	
}
.signUpConfirm {
	margin: 20px auto 40px auto;
	max-width: 355px;
}
.signUpConfirm input[type=text] {
  display: block;
  width: 100%;
  margin: 4px 0 15px;
  font-size: 26px;
  padding: 4px 8px;
}
.signUpConfirm .signUpConfirmForm .bigGreenButton {
  width: 100%;
  margin: 0;
}
.signUpConfirm .signUpConfirmHelp {
  margin-top: 36px;
}
.signUpConfirm .signUpConfirmHelp > div {
  text-align: center;
  font-size: 15px;
  font-style: italic;
}
.orientationHeader {
	margin-top: 60px;
}
.orientation {
	
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 0px 80px 0px;
	position: relative;
	font-size: 16px;
	color: #444444;
	text-align: left;	
}
@media only screen and (min-height: 800px) {
  .orientation {
    min-height: 580px;
  }
}
.orientation h2 {
  font-size: 36px;
  margin-bottom: 30px;
}
.orientation .button.next, .orientation .button.prev {
  position: absolute;
  bottom: 10px;
  margin: 0;
  padding: 6px 20px;
  font-size: 20px;
  border-radius: 3px;
}
.orientation .button.next:before, .orientation .button.next:after, .orientation .button.prev:before, .orientation .button.prev:after {
  font-family: "appIconsDesigner" !important;
  font-style: normal !important;
  font-weight: 100 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 20px;
  position: relative;
  top: 3px;
}
.orientation .button.next.prev, .orientation .button.prev.prev {
  left: 0px;
  padding-left: 17px;
}
.orientation .button.next.prev:before, .orientation .button.prev.prev:before {
  content: '\57';
  right: 8px;
}
.orientation .button.next.next, .orientation .button.prev.next {
  right: 0px;
  padding-right: 17px;
}
.orientation .button.next.next:after, .orientation .button.prev.next:after {
  content: '\58';
  left: 8px;
}
@media only screen and (max-width: 400px) {
  .orientation .button.next, .orientation .button.prev {
    width: calc(50% - 20px);
  }
}
@media only screen and (max-width: 400px) {
  .orientation .button.jumbo {
    width: 100%;
  }
}
.orientation input[type=file] {
  position: absolute;
  top: 0;
  left: -9999px;
}
@media only screen and (min-width: 700px) {
  .orientation .rightAtWide {
    float: right;
  }
}
@media only screen and (min-width: 700px) {
  .orientation .leftAtWide {
    float: left;
    padding-right: 40px;
    width: calc(100% - 300px);
    max-width: 500px;
  }
}
.orientation .orientationFlex {
  display: flex;
  justify-content: space-between;
}
.orientation .orientationFlex > div {
  flex: 1 1 auto;
}
.orientation .orientationFlex > div.oppositeSideImage {
  margin-right: 30px;
}
.orientation .orientationFlex > div.sideImage {
  flex-grow: 0;
  flex-shrink: 0;
}
.orientation .webinarImage {
  width: 400px;
  max-width: 100%;
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .15);
  transform-origin: 100% 0%;
  transition: transform ease-in-out 150ms;
}
@media only screen and (min-width: 700px) {
  .orientation .webinarImage:hover {
    transform: scale(1.6);
    z-index: 2;
  }
}
@media only screen and (max-width: 700px) {
  .orientation .orientationFlex {
    flex-direction: column;
  }
  .orientation .orientationFlex.oppositeSideImage {
    margin-right: 0;
  }
  .orientation .orientationFlex .sideImage {
    order: -1;
    text-align: center;
  }
}
#myProfileImage { height: 126px; width: 126px; border-radius: 50%; }
.signUpBranding {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 50px;
	
	
	transition: transform ease-in 150ms, opacity ease-in 150ms;
}
.signUpBranding.closed {
  opacity: 0;
  transform: translateY(-20px);
}
.brandingControlsDiv {
	width: 100%;
	max-width: 300px;
	padding-bottom: 30px;
	
	z-index: 1;
	
	margin: 0 auto;
	
	font-size: 16px;
	line-height: 22px;
	
}
@media only screen and (min-width: 920px) {
  .brandingControlsDiv {
    margin: 0;
    transform: translateX(300px);
    transition: transform ease-out 1s;
  }
  .brandingControlsDiv.activated {
    transform: translateX(0);
  }
}
.brandingControlsDiv input[type=text] {
  width: 100%;
  display: block;
  margin: 6px 0 26px;
  /*	font-size: 16px;
		height: auto;
		padding: 3px 5px;*/
}
.brandingControlsDiv label.button {
  position: relative;
  width: 100%;
}
.brandingControlsDiv .brandingColorControl {
  float: left;
  margin-right: 20px;
}
.brandingControlsDiv .brandingColorControl + .brandingColorControl {
  margin-right: 0;
}
.brandingControlsDiv .WL_ColorChip {
  width:					140px;
  height:					140px;
  position: relative;
  border:					6px solid #ffffff;
  box-shadow:			0 0 0 1px #e9e9e9;
  cursor:					pointer;
  text-align: center;
  padding-top: 28px;
  color: #fff;
  margin: 6px 0 10px 0;
  font-size: 28px;
  line-height: 1.3;
}
.brandingControlsDiv .WL_ColorChip > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.brandingControlsDiv.activated .WL_ColorChip > div {
  pointer-events: none;
}
.brandingControlsDiv .sampleColorSchemes {
  height: 60px;
  margin: 6px 0 0 0;
}
.brandingControlsDiv .sampleColorSchemes div {
  border: 1px solid #fff;
}
.brandingControlsDiv .sampleColorSchemes > div {
  float:					left;
  margin-right:		20px;
  margin-bottom:	20px;
  position:				relative;
  height:					40px;
  width:					54px;
  cursor:					pointer;
}
.brandingControlsDiv .sampleColorSchemes > div > div {
  position:				absolute;
  bottom: -5px;
  right: -6px;
  height:					18px;
  width:					30px;
}
#signUpBrandingPreviewDiv {
	width: 100%;
	max-width: 550px;
	position: relative;
	font-size: 13px;
	font-family: Arial;
	
	opacity: 0;
/* 	filter: blur(10px); */
	transition: ease-out 500ms;
	transition-delay: 1s;
}
#signUpBrandingPreviewDiv h3 {
  font-weight: 400;
  font-size: 20px;
  font-family: Arial;
}
.brandingControlsDiv.activated + #signUpBrandingPreviewDiv {
  opacity: 1;
  /* filter: blur(0); */
}
#signUpBrandingPreviewDiv p {
  font-size: 16px;
  line-height: 1.3em;
  font-family: Arial;
}
#signUpBrandingPreviewDiv .appBrowser {
  margin-right: 30px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader {
  background: #CBD0D7;
  border-radius: 6px 6px 0 0;
  height: 26px;
  position: relative;
  padding-top: 2px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background-color: #FB5E56;
  cursor: pointer;
  position: absolute;
  top: 8px;
  left: 8px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons:before, #signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons:after {
  content: '';
  position: absolute;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  cursor: default;
  top: 0px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons:before {
  background-color: #FFC54E;
  left: 17px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons:after {
  background-color: #8EC81A;
  left: 34px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader div.buttons .closeHotSpot {
  position: absolute;
  top: 0;
  left: 0;
  height: 11px;
  width: 11px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader .browserTab {
  position: relative;
  background: #ebeff4;
  height: 22px;
  margin: 2px 0 0 70px;
  width: calc(50% - 70px);
  min-width: 190px;
  border-radius: 4px 4px 0 0;
  padding: 4px 10px 0 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-style: italic;
  color: #555;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserHeader .browserTab img {
  position: absolute;
  top: 2px;
  left: 4px;
  height: 18px;
  width: 18px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody {
  border: 1px solid #CBD0D7;
  /*  #4488EE; */
  border-bottom: none;
  background: #ffffff;
  /* 	height: 230px; */
  padding: 80px 20px 50px 20px;
  position: relative;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  margin-bottom: 20px;
  background-color: #fff;
  color: #6c9c31;
  border-bottom: 1px solid #ababab;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar .whiteLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 1px);
  width: 154px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar .topLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 1px);
  max-width: 154px;
  max-height: 50px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar .topRight {
  position: absolute;
  top: 0;
  right: 15px;
  padding: 18px 0px 10px 50px;
  height: 60px;
  font-size: 18px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar .topRight .avatar {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
@media only screen and (max-width: 600px) {
  #signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar .topRight span {
    display: none;
  }
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody .appPageTopBar.brightTopBar {
  background-color: #fff;
  color: #6c9c31;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody h3 {
  color: #444;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserBody:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1px;
  right: -1px;
  background: linear-gradient(to top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  height: 50px;
}
#signUpBrandingPreviewDiv .appBrowser .appBrowserFade {
  height: 20px;
}
#signUpBrandingPreviewDiv .appEmailPreview {
  margin: -40px 0 0 30px;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, .2);
  background: #fff;
  padding: 20px 40px 80px 40px;
  position: relative;
  z-index: 1;
}
#signUpBrandingPreviewDiv .appEmailPreview .appEmailTop {
  position: relative;
  height: 60px;
  padding-top: 5px;
  border-bottom: 1px solid #ababab;
  text-align: center;
  /*	.appEmailLogoHolder {
				position: absolute;
				top: 5px;
				left: 20px;
				width: 195px;
				height: 100px;
				background: #ffffff;
				padding-top: 10px;
				text-align: center;
				
			}*/
  /*	.appEmailHangDown {
				position: absolute;
				top: 100%;
				left: 20px;
				width: 195px;
				height: 20px;
				box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
			}*/
}
#signUpBrandingPreviewDiv .appEmailPreview .appEmailTop img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 1px);
  max-width: 154px;
  max-height: 50px;
}
#signUpBrandingPreviewDiv .appEmailPreview .appEmailBody {
  padding: 30px 20px;
  background: #ffffff;
  border-bottom: 1px solid #ababab;
}
#signUpBrandingPreviewDiv .appEmailPreview .appEmailFooter {
  height: 20px;
}
#signUpBrandingPreviewDiv .appDevicePreview {
  /* 	position: absolute;
	top: 160px;
	right: 0; */
  margin: -60px auto 0 auto;
  position: relative;
  background-image: url(../../images/public/signUp/appDevicePreview.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  max-width: 300px;
  height: 335px;
  position: relative;
  z-index: 2;
  transition: 500ms ease-in;
}
/*		&.slideDown {
			transform: translateY(50px);
		}*/
#signUpBrandingPreviewDiv .appDevicePreview .homeScreenApp {
  position: absolute;
  top: 100px;
  left: 35px;
  width: 80px;
  text-align: center;
}
#signUpBrandingPreviewDiv .appDevicePreview .homeScreenApp img {
  border-radius: 8px;
  margin: 0 auto 2px auto;
  height: 60px;
  cursor: pointer;
}
#signUpBrandingPreviewDiv .appDevicePreview .homeScreenApp div {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
  max-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.videowrapper {position: relative;padding-bottom: 56.25%; /* 16:9 aspect ratio */border: 1px solid #6c9c31;height: 0;}
.vimeoFacade { cursor: pointer; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
/*
@import "modules/_signUp";
@import "modules/_benefitsMap";
@import "modules/_testimonial";
@import "modules/_videoRiffs";
@import "modules/_jobs";
@import "modules/_enterprise";
*/






/*# sourceMappingURL=styles.css.map */