/* +++++++++++++++++++++++++++++++++++++++++++ */
/*

0. COLOURS
1. LAYOUT
2. BUTTONS
3. TYPOGRAPHY
4. BORDERS
5. BADGES & LABELS
6. FORM ELEMENTS
7. ALERTS
8. LISTS
9. ACCORDIONS
10. FLEXBOX & GRID
11. MENUS
12. SIZING
13. TABS
14. ACCORDIANS
15. CARDS
16. COMPONENTS
17. DATEPICKER (Air Datepicker)
18. WIDGETS
19. RESEARCH DETAILS SUMMARY 
20. CALLOUTS
21. ICONS
22. SPACING (RESPONSIVE)
23. TABLES
24. JS Datepicker (generic)
25. SURVEY CLASSES
26. MESSAGE BOX
27. MEDIA


MEDIA QUERY CLASSES
DEBUGGING :: HIDE

*/

/* +++++++++++++++++++++++++++++++++++++++++++ */

/* @import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,500,600,700,800&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500&display=swap');

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 0. COLOURS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

:root {
	--Primary: rgb(30,100,140);  /* #1E648C */
	--PrimaryDark: rgb(40,80,110);  /* #28506E */
	--PrimaryLight: rgb(23,121,186);   /* #1779BA */
	--PrimaryHeader: rgb(68,88,115); /*  #445873 */
	--PrimaryLightBgnd: rgb(239,249,255);   /* #EFF9FF */
	
	--Secondary: rgb(60,138,160);  /* #3C8AA0 */
	--SecondaryLight: rgb(75,160,190);  /* #4BA0BE */
	--SecondaryLightBgnd: rgb(225,248,250);  /* #E1F8FA */

	--Pale: rgb(250,250,250);  /* #FAFAFA */
	--White: #FFFFFF;
	--Default: rgb(51,51,51);  /* #333 */

	--LighterGrey: rgb(242,242,242);  /* #ECF4F2 */
	--LightGrey: rgb(230,230,230);  /* #E6E6E6 */
	--MediumGrey: rgb(119,119,119);  /* #777 */
	--MediumLightGrey: rgb(138,138,138);  /* #8a8a8a */
	--MediumLighterGrey: rgb(160,160,160);  /* #A0A0A0 */
	--MediumLighterGreyPlus: rgb(190,190,190);  /* #BEBEBE */
	
	--Grey: rgb(102,102,102);  /* #666 */
	--DarkGrey: rgb(76,76,76);  /* #4C4C4C */
	--DarkerGrey: rgb(68,68,68);   /* #444 */
	--Light: rgb(217,217,217);  /* #D9D9D9 */

	--Active: rgb(228,240,248);
	--ActiveMedium: rgb(220,240,240);
	--ActiveDark: rgb(190,220,220);
	
	--Info: rgb(7,44,157);
	
	--adminPrimary: rgb(85,18,148);  /* #611AA4 */
	--adminPrimaryDark: rgb(60,25,100);  /* #3C1964 */

	--Success: rgb(30,170,160);
	--SuccessLight: rgb(175,227,227);
	--SuccessDark: rgb(39,129,119);	
	
	--Confirm: rgb(25,145,75);  /* #19914B	 */
	--ConfirmDark: rgb(0,120,50);  /* #007832 */
	--ConfirmLight: rgb(75,175,95);  /* #4BAF5F	 */
	--ConfirmLightest: rgb(245,255,235);  /* #F5FFEB */
	--ConfirmUltraLight: rgb(249,255,243);  /* #F9FFF3 */
	
	--Warning: rgb(255, 186, 42);   /* #E6AE3A */
	--WarningLightBgnd: rgb(255,248,232);  /* #FFF8E8 */
	--WarningDark: rgb(143,110,67);  /* #8F6E43 */
	
	--Error:  rgb(140,20,0);  /* #8C1400 */
	--ErrorBackground: rgb(255,250,250);  /* #FFFAFA */
	--Alert: rgb(180,70,50);   /* #B44632 */
	
	--General: rgb(40,145,150);  /* #289196 */
	--GeneralMedium: rgb(70,165,170);  /* #46A5AA */
	--GeneralLight: rgb(90,195,200);  /* #5AC3C8 */
	--GeneralLighter: rgb(215,245,250);  /* #D7F5FA */
	--GeneralLightest: rgb(230,250,255);  /* #E6FAFF */
	--GeneralDark: rgb(10,115,120);  /* #0A7378 */
		
	--alpha: rgba(250,250,250,0.3);
	--semiOpaque: rgba(255,255,255,0.88);
	
	--Code: rgb(20,60,110);  /* #143C6E */
	
	--SurveyLogoColour: rgb(4,99,128);  /* #046380 */
	
	--Quote: rgb(249,247,252);  /* #F9F7FC */
	
	--Verbatim: rgb(120,20,160);  /* #7814A0 */
	
	--LoginBackground: rgb(10,70,106);  /* #0A466A */
		
	--TestCardHeader: rgb(90,70,181);  /* #5A46B5 */
	--TestCardBody: rgb(234,245,251);  /* #EAF5FB */
	--TestCard: rgb(135,110,191);  /* #876EBF */
	--TestCardLight: rgb(230,225,245);  /* #E6E1F5 */
	
	--InsightCardBody: rgb(240,255,246);  /* #F0FFF6 */
	
	--Note: rgb(225,235,189);  /* #E1EBBD */
	--NoteMedium: rgb(204,209,182);  /* #CCD1B6 */
	--NoteLight: rgb(240,245,222);  /* #F0F5DE */
	
	--CanvasGreen: rgb(61,167,142);  /* #3DA78E */
	--CanvasOrange: rgb(247,146,38);  /* #F79226 */
	--CanvasRed: rgb(230,30,37);  /* #E61E25 */
	
	--base-measurement: 14px;
	
	--fontsize-half: calc(1rem * 0.5);
	--fontsize-three-quarter: calc(1rem * 0.75);
	--fontsize-1: calc(1rem * 1);
	--fontsize-2: calc(1rem * 1.25);
	--fontsize-3: calc(1rem * 1.5);
	--fontsize-4: calc(1rem * 1.75);
	--fontsize-5: calc(1rem * 2);
	--fontsize-6: calc(1rem * 2.25);
	--fontsize-7: calc(1rem * 2.5);
	--fontsize-8: calc(1rem * 2.75);
	--fontsize-9: calc(1rem * 3);
	--fontsize-10: calc(1rem * 3.25);
	--fontsize-11: calc(1rem * 3.75);
	--fontsize-12: calc(1rem * 4);
	
	--fontsize-1-and-eight: calc(1rem * 1.125);
	--fontsize-1-and-12: calc(1rem * 1.0833);
	
	--fontsize-1-less-eight: calc(1rem * 0.875);
	--fontsize-1-less-sixth: calc(1rem * 0.825);
	

	--fontsize-065: calc(1rem * 0.65);
	--fontsize-07: calc(1rem * 0.7);

	--fontsize-08: calc(1rem * 0.8);

	--fontsize-085: calc(1rem * 0.85);	
	--fontsize-09: calc(1rem * 0.9);
	--fontsize-0925: calc(1rem * 0.925);
	--fontsize-095: calc(1rem * 0.95);

	--font-weight-300: 300;  /* Light */
	--font-weight-400: 400;  /* Normal */
	--font-weight-500: 500;  /* Medium */
	--font-weight-600: 600;  /* Semi-bold */
	--font-weight-700: 700;  /* Bold */

	--measurement-quarter: calc(1rem * 0.25);
	--measurement-half: calc(1rem * 0.5);
	--measurement-three-quarter: calc(1rem * 0.75);
	--measurement-1-and-eight: calc(1rem * 1.125);
	
	--measurement-015: calc(1rem * 0.15);
	--measurement-02: calc(1rem * 0.2);
	--measurement-03: calc(1rem * 0.3);
	--measurement-035: calc(1rem * 0.35);
	--measurement-04: calc(1rem * 0.4);
	--measurement-045: calc(1rem * 0.45);
	--measurement-065: calc(1rem * 0.65);
	--measurement-08: calc(1rem * 0.8);
	--measurement-085: calc(1rem * 0.85);
	--measurement-0875: calc(1rem * 0.875);	

	--measurement-1077: calc(1rem * 1.077);
	--measurement-120: calc(1rem * 1.2);
	--measurement-135: calc(1rem * 1.35);
	--measurement-1375: calc(1rem * 1.375);
	--measurement-145: calc(1rem * 1.45);
	--measurement-155: calc(1rem * 1.55);
	--measurement-165: calc(1rem * 1.65);
	--measurement-235: calc(1rem * 2.35);

	--measurement-1: calc(1rem * 1);
	--measurement-2: calc(1rem * 1.25);
	--measurement-3: calc(1rem * 1.5);
	--measurement-4: calc(1rem * 1.75);
	--measurement-5: calc(1rem * 2);
	--measurement-6: calc(1rem * 2.25);
	--measurement-7: calc(1rem * 2.5);
	--measurement-8: calc(1rem * 2.75);
	--measurement-9: calc(1rem * 3);
	--measurement-10: calc(1rem * 3.25);
	--measurement-11: calc(1rem * 3.5);
	--measurement-12: calc(1rem * 3.75);
	--measurement-13: calc(1rem * 4);
	--measurement-14: calc(1rem * 4.25);
	--measurement-15: calc(1rem * 4.5);
	--measurement-16: calc(1rem * 4.75);
	--measurement-17: calc(1rem * 5);
	--measurement-18: calc(1rem * 5.25);
	--measurement-19: calc(1rem * 5.5);
	--measurement-20: calc(1rem * 5.75);
	--measurement-21: calc(1rem * 6);
	--measurement-22: calc(1rem * 6.25);
	--measurement-23: calc(1rem * 6.5);
	--measurement-24: calc(1rem * 7);	
	--measurement-25: calc(1rem * 7.25);

}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 1. LAYOUT */
/* +++++++++++++++++++++++++++++++++++++++++++ */


.avatar {
	border-radius: 50%;
	height: var(--measurement-5);
	width: auto;
	padding: 0;
	margin: 0 auto;
	display: flex;
	font-size: var(--fontsize-1);
	text-align: center;
}

.avatar-img {
	height: var(--measurement-5);
  width: var(--measurement-5);
	max-width: 100%;
	float: left;
	border: none;
	position: relative;
	top: 0;
	margin-right: var(--measurement-quarter);
}

.avatar-text {
	height: var(--measurement-2);
  width: auto;
	float: right;
	max-width: 100%;
	position: relative;
	top: var(--measurement-half);
	margin: 0 auto;
	color: var(--White);
}

.brand-logo,
.brand-logo img {
	height: auto;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--measurement-1);
}
	
.hero-full-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url("../images/reme-bgnd.jpg") center center no-repeat;
	-webkit-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	width: 100%;
  height: 100vh;
}

.hero-full-screen-central {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url("../images/HubCentral-bgnd.jpg") center center no-repeat;
	-webkit-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	width: 100%;
  height: 100vh;
}

.hero-full-screen .middle-content-section,
.hero-full-screen-central .middle-content-section {
	color: var(--Pale);
	padding: var(--measurement-1);
	background: var(--alpha);
}

.hero-full-screen .h1, .hero-full-screen h1 {
	font-size: var(--fontsize-8);
	color: var(--White);
}

.hero-full-screen .top-content-section {
  width: 100%;
  margin-bottom: var(--measurement-5);
}

.hero-full-screen .bottom-content-section {
  padding: var(--measurement-1);
}

.hero-full-screen .bottom-content-section svg {
  height: var(--measurement-11);
  width: var(--measurement-11);
}


/* Participant diary study form */
.research-login-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
}

.research-login-screen .middle-content-section {
	color: var(--Default);
	width: 60%;
	padding: var(--measurement-1);
	background: var(--White);
	margin-top: var(--measurement-5);
	box-shadow: 0 0 12px 3px var(--Light);
}

.research-login-screen .h1, 
.research-login-screen h1 {
	color: var(--Default);
}

.page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.page-title {
  margin: var(--measurement-1) 0 0 0;
}

.page-header .header-button {
  margin: var(--measurement-3) var(--measurement-1) 0 0;
}


.question_container .component-area,
.question_container .component-area:last-child  {
	border: none;
}

.question_container .component-body {
	padding: 0;
}

.question_container {
	margin: var(--measurement-1) var(--measurement-5);
	border: none;
}

.question_container .component-action {
	background-color: var(--LightGrey);
	color: var(--PrimaryDark);
	font-weight: 600;
	margin: 0;
	flex: 1 0 0;
	width: var(--measurement-9);
	height: auto;
	align-self: stretch;
}

.question_container .component-title {
	background-color: var(--Pale);
	color: var(--Primary);
	width: 80%;
}

.question_container .component-title a {
	color: var(--Primary);
	text-transform: none;
	line-height: var(--measurement-145);
	padding: var(--measurement-2);
}

.question_marker {
	text-align: center;
	width: 100%;
	align-self: center;
}


.login-screen,
.middle-content-section.login-screen {
	width: 480px;
}

.top-bar {
	background-color: var(--Secondary);
	padding: var(--measurement-half) var(--measurement-1);
}

.admin .top-bar {
	background-color: var(--Code);
}

.admin-top-bar {
	background-color: var(--Code);
}

.strapline {
	display: flex;
	font-size: var(--fontsize-2);
	color: var(--White);
	font-family: "Roboto Slab","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	padding: 0 0 0 var(--measurement-quarter);
	height: 100%;
	position: relative;
	top: var(--measurement-half);
	font-weight: 600;
	margin: 0;
}


header {
	background: var(--PrimaryDark);
	padding: var(--measurement-1);
	text-align: left;
}

.cell-main {
	padding: 0 var(--measurement-1) var(--measurement-5) var(--measurement-5);
}

.cell.compact {
	font-size: var(--fontsize-09);
}

.cell.compact label,
.cell.compact p,
.cell.compact [type="text"], 
.cell.compact [type="password"], 
.cell.compact [type="date"], 
.cell.compact [type="datetime"], 
.cell.compact [type="datetime-local"], 
.cell.compact [type="month"], 
.cell.compact [type="week"], 
.cell.compact [type="email"], 
.cell.compact [type="number"], 
.cell.compact [type="search"], 
.cell.compact [type="tel"], 
.cell.compact [type="time"], 
.cell.compact [type="url"], 
.cell.compact [type="color"],
.cell.compact textarea {
	font-size: var(--fontsize-09);
}

.cell.compact .button {
	padding: var(--measurement-035) var(--measurement-three-quarter);
}

.cell.compact-left {
	padding-left: var(--measurement-half);
}

.cell.compact-right {
	padding-right: var(--measurement-half);
}

.row {
	max-width: 90%;
	padding: 0;
	margin: 0 auto;
	border: 1px solid var(--White);
}

body.blog {
	background: var(--LighterGrey);
}

.blog-post {
	margin: 0 0 var(--measurement-5) 0;
	box-shadow: 0 0 10px var(--MediumLighterGreyPlus);
	background: var(--White);
	margin: var(--measurement-1);
	padding: var(--measurement-1);
	border-radius: 0;
	border: none;
}

.blog-post-feature {
	background: var(--PrimaryLight);
	font-size: 115%;
	color: var(--White);
	border: 1px solid var(--Light);
}

.blog-post-feature h3 {
	font-size: var(--fontsize-4);
	color: var(--White);
	margin-bottom: var(--measurement-1);
}

.blog-post-feature .credit p, 
.blog-post-feature .credit a,
.blog-post-feature  a {
	color: var(--White);
}

.blog-post.blog-post-feature img, 
.blog-post-feature img {
	margin: 0;
	border: 1px solid var(--White);
}

.blog-post img {
	width: 100%;
	margin: var(--measurement-1) 0;
}

.blog-post a {
	text-decoration: underline;
}

.blog-post .label,
.blog-post .label.survey {
	border-radius: 0.45rem;
}

.thumbnail {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--measurement-1);
	border: 5px solid var(--White);
	border-radius: 0;
	box-shadow:0 0 0 2px var(--LightGrey);
	line-height: 0;
}

.credit {
	border: none;
	margin: 0;
	padding: 0;
	color: var(--MediumGrey);
}

.credit p, .credit a {
	color: var(--Primary);
	margin: 0;
	padding: var(--measurement-half) 0;
	font-size: var(--fontsize-09);
}


/* background colours */

.background-primary {background-color: var(--Primary) !important;}
.background-primary-dark {background-color: var(--PrimaryDark) !important;}
.background-primary-light {background-color: var(--PrimaryLight) !important;}
.background-primary-header {background-color: var(--PrimaryHeader) !important;}
.background-primary-light-bgnd {background-color: var(--PrimaryLightBgnd) !important;}

.background-secondary {background-color: var(--Secondary) !important;}
.background-secondary-light {background-color: var(--SecondaryLight) !important;}
.background-secondary-light-bgnd {background-color: var(--SecondaryLightBgnd) !important;}


.background-white {background-color: var(--White) !important;}
.background-pale {background-color: var(--Pale) !important;}
.background-default {background-color: var(--Default) !important;}

.background-grey {background-color: var(--Grey) !important;}
.background-lighter-grey {background-color: var(--LighterGrey) !important;}
.background-light-grey {background-color: var(--LightGrey) !important;}
.background-md-grey {background-color: var(--MediumGrey) !important;}
.background-md-grey-light {background-color: var(--MediumLightGrey) !important;}
.background-md-grey-lighter {background-color: var(--MediumLighterGrey) !important;}
.background-md-grey-lighter-plus {background-color: var(--MediumLighterGreyPlus) !important;}
.background-dark-grey {background-color: var(--DarkGrey) !important;}
.background-darker-grey {background-color: var(--DarkerGrey) !important;}
.background-light {background-color: var(--Light) !important;}

.background-active {background-color: var(--Active);}
.background-active-med {background-color: var(--ActiveMedium);}
.background-info {background-color: var(--Info) !important;}
.background-success {background-color: var(--Success);}
.background-success-light {background-color: var(--SuccessLight);}
.background-success-dark {background-color: var(--SuccessDark) !important;}

.background-confirm {background-color: var(--Confirm) !important;}
.background-confirm-dark {background-color: var(--ConfirmDark) !important;}
.background-confirm-light {background-color: var(--ConfirmLight) !important;}
.background-confirm-lightest {background-color: var(--ConfirmLightest) !important;}

.background-warning {background-color: var(--Warning) !important;}
.background-warning-light-bgnd {background-color: var(--WarningLightBgnd) !important;}
.background-warning-dark-bgnd {background-color: var(--WarningDark) !important;}

.background-error {background-color: var(--Error) !important;}
.background-error-bgnd {background-color: var(--ErrorBackground) !important;}
.background-alert {background-color: var(--Alert) !important;}

.background-general {background-color: var(--General) !important;}
.background-general-medium {background-color: var(--GeneralMedium) !important;}
.background-general-light {background-color: var(--GeneralLight) !important;}
.background-general-lighter {background-color: var(--GeneralLighter) !important;}
.background-general-lightest {background-color: var(--GeneralLightest) !important;}
.background-general-dark {background-color: var(--GeneralDark) !important;}

.background-alpha {background-color: var(--alpha);}
.background-code {background-color: var(--Code);}

.background-survey-logo-colour {background-color: var(--SurveyLogoColour);}
.background-quote {background-color: var(--Quote);}
.background-verbatim {background-color: var(--Verbatim);}

.background-login {background-color: var(--LoginBackground);}

.background-TestCardHeader {background-color: var(--TestCardHeader);}
.background-TestCardBody {background-color: var(--TestCardBody);}
.background-TestCard {background-color: var(--TestCard);}
.background-TestCardLight {background-color: var(--TestCardLight);}
.background-InsightCardBody {background-color: var(--InsightCardBody);}

.background-note-medium {background-color: var(--NoteMedium);}
.background-note {background-color: var(--Note);}
.background-note-light {background-color: var(--NoteLight);}

.background-canvas-green {background-color: var(--CanvasGreen);}
.background-canvas-orange {background-color: var(--CanvasOrange);}
.background-canvas-red {background-color: var(--CanvasRed);}

.background-admin {background-color: var(--adminPrimary);}
.background-admin-dark {background-color: var(--adminPrimaryDark);}

.full-height {
	height: calc(100vh);
}

.auto-blocks {
	width: auto;
	flex: 1 1 0px;
}

/* Panel scroller */
.research-panel-scroller {
	overflow-y: auto;
	height: 100vh;
}


/* Research summary */

.progress-panel {
	background-color: var(--White);
	padding: var(--measurement-half);
	border: none;
	box-shadow: none;
}

.progress-panel-scroller {
	height: 700px;
	overflow: scroll;
}

.progress-panel-scroller-small {
	height: 560px;
}

.progress-panel .progress-panel-header {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-style: normal;
	color: var(--PrimaryHeader);
	padding: var(--measurement-quarter) 0;
	font-weight: 400;
	text-transform: uppercase;
}

.panel-heading {
  line-height: 1;
  font-size: var(--fontsize-4);
  margin-bottom: var(--measurement-08);
}

.progress-panel .progress-panel-main {
	margin: var(--measurement-1) 0 0 0;
	padding: 0 0 var(--measurement-1) 0;
	border-bottom: 1px solid var(--NoteMedium);
	width: 100%;
}

.progress-panel .progress-container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.progress-panel .research-details {
	padding: 0 var(--measurement-1);
}

.progress-panel .research-details .research-ref,
.progress-panel .research-details .research-ref a {
	color: var(--Primary);
	margin: 0 0 var(--measurement-1) 0;
	font-size: var(--fontsize-1);
}

.research-ref {
	text-transform: uppercase;
}

.progress-panel .research-details .research-dates {
	color: var(--DarkGrey);
	margin: var(--measurement-half) 0;
	font-size: var(--fontsize-085);
}

.progress-panel .action {
	margin: var(--measurement-1) 0 0 0;
	text-transform: uppercase;
}

.progress-panel .view-more {
	margin: var(--measurement-1) 0;
	text-align: center;
}

.progress-panel .view-more a {		
	color: var(--PrimaryDark);
	font-size: var(--fontsize-09);
}

/* Progress graph */
.progress-graph {
	padding: 0;
	border: none;
	width: 150px;
	height: 150px;
	display: flex;
}

.circle-graph {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: transparent;
	position: relative;
}

.circle-graph-progress {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: 5px;
	top: 5px;
	width: 130px;
	height: 130px;
	clip: rect(0, 150px, 150px, 65px);
}

.circle-graph-progress .circle-graph-progress-fill {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 64px);
	top: calc(50% - 64px);
	width: 135px;
	height: 135px;
	clip: rect(0, 140px, 140px, 0);
	background: var(--Success);
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

.circle-graph-progress-60 {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: 5px;
	top: 5px;
	width: 130px;
	height: 130px;
	clip: rect(0, 140px, 140px, 50px);
	transform: rotate(10deg);
}

.circle-graph-progress-60 .circle-graph-progress-fill {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 64px);
	top: calc(50% - 64px);
	width: 135px;
	height: 135px;
	clip: rect(0, 140px, 140px, 0);
	background: var(--Success);
	transform: rotate(0deg);
}	

.circle-graph-percents {
	content: "";
	position: absolute;
	border-radius: 50%;
	left: calc(50% - 120px/2);
	top: calc(50% - 120px/2);
	width: 128px;
	height: 128px;
	background: var(--White);
	text-align: center;
	display: table;
	z-index: 4;
	border: 1px solid var(--GeneralMedium);
}

.circle-graph-percents .circle-graph-percents-number {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	display: block;
	font-size: var(--fontsize-5);
	font-weight: 300;
	color: var(--PrimaryLight);
	margin: var(--measurement-half) var(--measurement-035);
}

.circle-graph-percents .circle-graph-percents-units {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	display: block;
	font-size: var(--fontsize-08);
	text-transform: uppercase;
	font-weight: 400;
	color: var(--PrimaryLight);
}

.circle-graph-percents-wrapper {
	display: table-cell;
	vertical-align: middle;
	line-height: 0;
}

.circle-graph-percents-wrapper span {
	line-height: 1;
}

hr {
	clear: both;
	max-width: 100%;
	height: 0;
	margin: var(--measurement-2) auto;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid var(--Light);
	border-left: 0;
}

.float-none {float: none !important;}

.rounded-1 {
	border-radius: var(--measurement-quarter) !important;
}

.rounded-2 {
	border-radius: var(--measurement-half) !important;
}

.rounded-3 {
	border-radius: var(--measurement-three-quarter) !important;
}

.rounded-4 {
	border-radius: var(--measurement-1) !important;
}


/* COLOUR INPUT */
.input-group-colour {
	margin-bottom: var(--measurement-quarter);
	border: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex: 0 1 auto;
}

.input-group-colour .colour-input {
	width: auto;
	border: 1px solid var(--MediumLighterGreyPlus);
}

.input-group-colour input {
	font-size: var(--fontsize-1);
	color: var(--Default);
	margin: 0;
}

.input-group-colour input, 
.input-group-colour .input-group-field, 
.input-group-colour .input-group-button,
.input-group-colour .input-group-button input,
.cell.compact .input-group.input-group-colour [type="text"] {
	height: var(--measurement-7);
	max-height: var(--measurement-7);
	font-size: var(--fontsize-1);
	color: var(--Default);
	width: 100%;
}

.input-group-prefix {
	border: 1px solid var(--MediumLighterGreyPlus);
	border-right: none;
}

.input-group-colour .colour-cell-narrow {
  max-width: var(--measurement-21);
  top: 0px;
}

.input-group-colour .input-group-button .button,
.input-group-colour .input-group-button button {
	margin: 0;
	top: -1px;
	height: 100%;
	max-height: var(--measurement-7);
	line-height: 1;
	font-size: var(--fontsize-1);
	padding: 0;
}

.input-group-colour .input-group-field .colour-tile,
.input-group-colour .colour-tile {
	top: 1px;
	width: var(--measurement-7);
	border: none;
}

.colour-chip-group {
	border: 1px solid var(--Light);
	margin-right: var(--measurement-half);
}

/* Used for sidebar colour picker (tags) */
.colour-chip-array {
	display: flex;
	margin: 0 auto;
	width: 100%;
	flex-flow: row wrap;
	border: none;
	padding: 0;
}

.colour-chip-array .colour-chip {
	height: var(--measurement-3);
	border: 1px solid var(--MediumLighterGreyPlus);
	margin: 0 0.45rem 0.45rem 0;
	align-self: auto;
	flex: 1 0 12.5%;
}

.input-group-colour .colour-prefix {
	border: 1px solid var(--Light);
	height: var(--measurement-7);
	background: var(--LighterGrey);
	border-right: none;
	min-width: var(--measurement-7);
	text-align: center;
	line-height: var(--measurement-6);
	border-top-left-radius: var(--measurement-035);
	border-bottom-left-radius: var(--measurement-035);
}

.colour-chip {
	width: var(--measurement-5);
	height: var(--measurement-5);
	float: left;
	display: inline-block;
}

.colour-cell-array {
	padding: var(--measurement-1);
}

.colour-cell,
.cell.colour-cell {
	border: 1px solid var(--Light);
	margin: 0 var(--measurement-quarter) var(--measurement-quarter) 0;
	padding: var(--measurement-half);
	min-width: 90px;
}

.colour-picker {
	display: inline-block;
	font-size: var(--fontsize-09);
}

.colour-title {
	color: var(--DarkGrey);
	margin-bottom: var(--measurement-035);
	font-size: var(--fontsize-09);
}

.colour-tile {
	width: var(--measurement-7);
	height: var(--measurement-7);
	padding: 0;
	margin: 0;
	border: 1px solid var(--MediumLighterGreyPlus);
	border-left: none;
}

.colour-tile:hover,
.colour-tile:focus {
	border: 1px solid var(--PrimaryLight);
	cursor: pointer;
}

.colour-tile-selected,
.button.colour-tile-selected {
	background-color: var(--Light);
	width: var(--measurement-7);
	height: 100%;
	padding: var(--measurement-1);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-left: none;
	border-top-right-radius: var(--measurement-035);
	border-bottom-right-radius: var(--measurement-035);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group .input-group-button .button.colour-tile-selected:hover,
.input-group .input-group-button .button.colour-tile-selected:focus {
  top: 0;
  margin: 0;
  position: relative;
  border: 1px solid;
  padding: 0;
}

.colour-tile-reference {
	padding: 0;
}

.colour-cell-array .colour-cell-prefix {
	height: 34px;
	max-height: 34px;
	background: var(--LighterGrey);
	width: var(--measurement-6);
	text-align: center;
	font-weight: 600;
	color: var(--MediumGrey);
	top: -6px;
	position: relative;
	font-size: var(--fontsize-2);
	padding: var(--measurement-quarter);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-right: none;
}

.colour-cell-array .label,
.colour-cell-array label {
	position: relative;
	top: -5px;
}

.no-shadow {
	box-shadow: none !important;
}


/* image formats */
.img-box {
	background: var(--White);
	border: 1px solid var(--MediumLighterGrey);
	border-radius: var(--measurement-035);
	padding: var(--measurement-half);
	margin: var(--measurement-1) 0 var(--measurement-5) 0;
	max-width: 600px;
}

/* Tag popup window */
.observation_tag_window .callout-inline {
	min-height: var(--measurement-13);
}


/* Rotate */

.rotate-0 {transform: rotate(0deg);}
.rotate-90 {transform: rotate(90deg);}
.rotate-180 {transform: rotate(180deg);}
.rotate-270 {transform: rotate(270deg);}


.link-bar {
	margin: 0 var(--measurement-1) 0 0;
	list-style: none;
	white-space: nowrap;
}

.link-bar li {
	display: inline;
	list-style-type: none;
}

.link-bar .button {
	font-size: var(--fontsize-085);
	padding: var(--measurement-035) var(--measurement-half);
	line-height: var(--measurement-1);
	margin: 0;
	border-radius: 0;
}

.link-bar .button .icon {
	width: 1rem;
  height: 1rem;
  top: 2px;
  margin-right: var(--measurement-quarter);
}

.new-activity-container {
	background: var(--Pale);
	padding: var(--measurement-2);
	border: 1px solid var(--Light);
	border-radius: var(--measurement-half);
}

.new-activity-container .button {
	padding: var(--measurement-three-quarter) var(--measurement-1);
	margin-right: var(--measurement-1);
}

.new-activity-container .button .button-label {
	position: relative;
	top: -3px;
}

.new-activity-container .icon {
	top: var(--measurement-01);
	width: 1.25rem;
	height: 1.25rem;
}


.content-highlight {
  padding: var(--measurement-1);
  background: var(--Pale);
  border-radius: var(--measurement-half);
  border: 1px solid var(--LightGrey);
}

.note {
  display: inline-block;
  overflow: visible;
  background: var(--White);
  padding: 0;
  border-radius: var(--measurement-half);
  border: 1px solid var(--PrimaryLight);
  margin-bottom: var(--measurement-1);
}

.note-header {
  background: var(--PrimaryLight);
  color: var(--White);
  padding: var(--measurement-02) var(--measurement-04);
  display: inline-block;
  width: 100%;
}

.note-content {
  margin: var(--measurement-half) var(--measurement-1);
  font-size: var(--fontsize-09);
  line-height: 1;
  color: var(--DarkGrey);
}


/* Exemplars */

.exemplar {
  padding: var(--measurement-1);
  border: none;
  border-radius: var(--measurement-08);
  margin: var(--measurement-2) var(--measurement-1);
  box-shadow: 0 0 var(--measurement-three-quarter) var(--MediumLighterGreyPlus);
}

.exemplar_link {}

.exemplar_content {
	display: none;
}

exemplar_content:focus {
  border: 1px solid var(--PrimaryLight);
}

/* Preference test classes */


/* Classes for TAG reorder */
.roundel {
  background: var(--White);
  border-radius: 50%;
  padding: 1px;
  height: var(--measurement-1);
  width: var(--measurement-1);
}

.roundel .icon,
.label .roundel .icon {
	left: 0;
	right: 0;
	top: 0;
}

.label.moved {
  border: 2px solid var(--White);
  box-shadow: 0 0 4px var(--Grey);
}



/* Archived items */
ul.archived {
	background: var(--Pale);
}

.flex-data-group .flex-data .list-group-data.archived {
  border: 1px solid var(--Light);
}

.archived .circle-graph-percents {
	border: 1px solid var(--Light);
}

.archived .circle-graph-percents .circle-graph-percents-number {
  color: var(--MediumGrey);
}

.archived .circle-graph-percents .circle-graph-percents-units {
  color: var(--MediumGrey);
}

.archived .label.secondary,
.archived .label.project {
  background: var(--MediumLighterGreyPlus);
  color: var(--White);
}

.archived .listing-title a {
  color: var(--MediumGrey);
}

.archived .listing-title {
  color: var(--Grey);
  font-weight: var(--font-weight-400);
}

.archived .listing-client {
  color: var(--MediumGrey);
  font-weight: 400;
}



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */



 
/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 2. BUTTONS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.button {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 var(--measurement-1) 0;
	padding: var(--measurement-1) var(--measurement-120);
	border: none;
	border-radius: var(--measurement-half);
	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-size: var(--fontsize-1);
	-webkit-appearance: none;
	line-height: var(--measurement-1);
	text-align: center;
	cursor: pointer;
	background-color: var(--MediumGrey);
	color: var(--White);
	text-decoration: none;
	font-weight: 400;
	font-family: 'Helvetica Neue', arial, verdana, sans-serif;
}

.button.button-icon {
  padding-top: var(--measurement-half);
}

.button:hover, 
.button:focus {
	background: var(--DarkGrey);
	color: var(--White);
}

.button.tiny {
  font-size: var(--fontsize-three-quarter);
  line-height: 1;
  padding: var(--measurement-quarter);
  border-radius: var(--measurement-02);
}

.button.tiny .icon {
  width: 1rem;
  height: 1rem;
  top: 0;
}

 a.button {
	text-decoration: none;
	color: var(--White);
}

a.button.disabled, 
a.button[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
	background-color: var(--Pale);
	border: 1px solid var(--Light);
	color: var(--MediumGrey);
}

a.button.disabled .icon, 
a.button[disabled] .icon {
	opacity: 0.5;
}

.anchor {
  border: none;
  background: transparent;
  height: 1px;
  width: 1px;
  display: block;
}

.button.disabled, 
.button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.button-group {
	margin: 0;
	display: flex;
}

.button-group-wide .button {
	white-space: nowrap;
	display: inline-block;
	width: auto;
}

.button-group-padded {
	padding: 0 var(--measurement-1);
}

.button-group.hollow .button, 
.button-group.hollow .button:hover, 
.button-group.hollow .button:focus, 
.button-group.hollow .button.disabled, 
.button-group.hollow .button.disabled:hover, 
.button-group.hollow .button.disabled:focus, 
.button-group.hollow .button[disabled], 
.button-group.hollow 
.button[disabled]:hover, 
.button-group.hollow .button[disabled]:focus {
	background-color: transparent;
}

.button-group.hollow .button.primary {
	border: 1px solid var(--PrimaryLight);
	color: var(--PrimaryLight);
}

.button-group.hollow .button.primary:hover,
.button-group.hollow .button.primary:focus {
	background-color: var(--PrimaryLight);
	color: var(--White);
}

.button-group.hollow .button.primary.is-active {
	background-color: var(--PrimaryLight);
	color: var(--White);
}

.button.primary {
	background: var(--PrimaryLight);
	color: var(--White);
	border: 1px solid var(--PrimaryLight);
}

.button.secondary {
	background: var(--LighterGrey);
	color: var(--Default);
	border: 1px solid var(--Light);
}

.button.secondary:hover {
	background: var(--MediumLighterGreyPlus);
	color: var(--White);
}

.button.clear.secondary {
	background: transparent;
}

.button.hollow.primary {
  border: 1px solid var(--Primary);
	color: var(--Primary);
	background: var(--White);
}
 
.button.hollow.primary:hover,
.button.hollow.primary:focus {
	border: 1px solid var(--PrimaryDark);
	color: var(--Primary);
	background: var(--Light);
}

.button.hollow.secondary {
  border: 1px solid var(--MediumLightGrey);
	color: var(--DarkerGrey);
	background: var(--White);
}
 
.button.hollow.success {
	border: 1px solid var(--Success);
	color: var(--Success);
	background: var(--White);
}

.button.hollow.success:hover {
	border: 1px solid var(--PrimaryDark);
	color: var(--Primary);
	background: var(--White);
}

.button.grey {
	background: var(--Light);
	color: var(--DarkGrey);
}

.button.white {
	background: var(--White);
	color: var(--DarkGrey);
	border: 1px solid var(--MediumLighterGreyPlus);
}

.button.white:hover,
.button.white:focus {
	background: var(--MediumGrey);
	color: var(--White);
}

.button.default {
	background: var(--White);
	color: var(--Grey);
	border: 1px solid var(--MediumLighterGreyPlus);
}

.button.default:hover,
.button.default:focus {
	background: var(--LighterGrey);
	color: var(--DarkerGrey);
	border: 1px solid var(--MediumLightGrey);
}

.button.alert {
	background: var(--Alert);
	color: var(--White);
	border: 1px solid var(--Alert);
}

.button.alert:hover, 
.button.alert:focus {
	background: var(--Error);    
	color: var(--White);
	border: 1px solid var(--Error);
}

.button.hollow.alert {
	border: 1px solid var(--Alert);
	color: var(--Alert);
	background-color: transparent;
}

.button.hollow.alert:hover, 
.button.hollow.alert:focus {
	background-color: transparent;
	border: 1px solid var(--Error);
	color: var(--Error);    
}

.button.clear {
	text-decoration: none;
	color: var(--PrimaryDark);
}

.button.clear:hover,
.button.clear:focus {
	text-decoration: underline;
	color: var(--Default);
}

.button.circle {
	border-radius: 50%;
	line-height: var(--measurement-1);
	margin: 0 0 var(--measurement-035) var(--measurement-035);
	position: relative;
	top: 1px;
}

.button.circle .icon {
	padding: 0;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	top: 0;
	width: var(--measurement-2);
	height: var(--measurement-2);
}

.button.circle-small {
	padding: 0.3rem;
}

.button.circle-small .icon {
	width: var(--measurement-1-and-eight);
	height: var(--measurement-1);
	top: -1px;
}

.button-group .button.default {
	border-right: none;
}

/* Used for style formatting menu with textarea */
.button-group.button-menu .button {
	font-size: var(--fontsize-1);
	margin: 0;
	padding: var(--measurement-half) var(--measurement-half) var(--measurement-quarter) var(--measurement-half);
}

.button-group .button.default:last-child {
	border-right: 1px solid var(--MediumLighterGreyPlus);
	border-bottom-right-radius: var(--measurement-035);
	border-top-right-radius: var(--measurement-035);
}

.button-group .button.default:first-child {
	border-bottom-left-radius: var(--measurement-035);
	border-top-left-radius: var(--measurement-035);
}

.button-group .default {
	margin: 0;
	font-size: var(--fontsize-09);
}

/* Button group toggle buttons */
.button-group.button-toggle .button {
	background: var(--White);
	color: var(--Primary);
	margin-bottom: 0;
	padding: var(--measurement-three-quarter);
}

/* Inline page navigation button group */
.button-group.button-group-inline .button {
	background: var(--White);
	color: var(--Primary);
	margin: 0;
  margin-bottom: 0;
	font-size: var(--fontsize-09);
	margin-bottom: var(--measurement-1);
}

.button-group.button-group-inline .button,
.button-group.button-group-inline .button:first-child,
.button-group.button-group-inline .button:last-child {
	border-radius: 0;
	border: none;
	border-top: 1px solid var(--LightGrey);
	border-bottom: var(--measurement-half) solid var(--White);
	margin-right: var(--measurement-quarter);
}

.button-group.button-group-inline .button:last-child {
	margin-right: 0;
}

.button-group.button-group-inline .button.is-active,
.button-group.button-group-inline .button.is-active:hover,
.button-group.button-group-inline .button.is-active:focus {
	border-top: 1px solid var(--Success);
	border-bottom: var(--measurement-04) solid var(--Success);
	background: var(--LighterGrey);
}

.button-group.button-group-inline .button.is-active:hover,
.button-group.button-group-inline .button.is-active:focus {
	background: var(--LighterGrey);
}

.button-group.button-group-inline .button:hover,
.button-group.button-group-inline .button:focus {
	background: var(--LighterGrey);
	border-top: 1px solid var(--Light);
	border-bottom: var(--measurement-half) solid var(--White);
}

.button-toggle .button.is-active {
	background: var(--PrimaryLight);
	color: var(--White);
}

.button-group-array {
	width: auto;
	flex-wrap: wrap;
	flex-direction: row;
	background: var(--White);
	padding: 0;
	margin: 0;
	border: none;
}

.button-group-array .button {
	width: var(--measurement-8);
	border-radius: 0;
	margin: 0 2px 2px 0;
	border: none;
	padding: var(--measurement-035);
	font-size: var(--fontsize-08);
	line-height: var(--measurement-1);
	overflow: hidden;
	background: var(--Pale);
	color: var(--Primary);
	border: 1px solid var(--Light) !important;
}

.button-group-array .button:hover,
.button-group-array .button:focus {
	background: var(--Light);
	color: var(--LoginBackground);
}

.button-group-array .button.default:last-child,
.button-group-array .button.default:first-child {
	border-radius: 0;
	border-color: var(--Light);
}

.button-group-array .icon {
	height: var(--measurement-2);
}

.no-margin-array .component-button {
	margin: 0 -5px 0 0;
	height: var(--measurement-7);
}

.button-group-medium .button {
  padding: var(--measurement-1) var(--measurement-3);
  font-size: var(--fontsize-1-and-12);
}

.button-group-rounded .button,
.button-group-rounded .button.default {
	border-radius: 0;
	/* border-right: none; */
}

.first-button-rounded,
.button-group-rounded .button:first-child,
.button-group-rounded .button.default:first-child {
	border-top-left-radius: var(--measurement-half) !important;
	border-bottom-left-radius: var(--measurement-half) !important;
}

.button-group-rounded .button:last-child,
.button-group-rounded .button.default:last-child {
	border-top-right-radius: var(--measurement-half);
	border-bottom-right-radius: var(--measurement-half);
}

.button.primary:hover, 
.button.primary:focus {
	background: var(--PrimaryDark);
	color: var(--White);
}
 
.button.success {
	background: var(--Success);
	color: var(--White);
	border: 1px solid var(--Success);
}

.button.success:hover, 
.button.success:focus {
	background-color: var(--SuccessDark);
	color: var(--White);
}

.button.warning {
	background: var(--Warning);
	color: var(--Default);
	border: 1px solid var(--Warning);
}

.button.warning:hover, 
.button.warning:focus {
	background-color: var(--WarningDark);
	color: var(--White);
	border: 1px solid var(--WarningDark);
}

.button.hollow.warning {
	background: var(--White);
	color: var(--WarningDark);
	border: 1px solid var(--Warning);
}

.button.hollow.warning:hover, 
.button.hollow.warning:focus {
	background-color: var(--WarningLightBgnd);
	color: var(--WarningDark);
	border: 1px solid var(--WarningDark);
}

.button.disabled.success, 
.button.disabled.success:hover, 
.button.disabled.success:focus, 
.button[disabled].success, 
.button[disabled].success:hover, 
.button[disabled].success:focus {
  background-color: var(--LightGrey);
  color: var(--Grey);
  opacity: 0.45;
	cursor: not-allowed;
}

.button.small {
	font-size: var(--fontsize-085);
	padding: var(--measurement-035) var(--measurement-half);
	line-height: var(--measurement-120);
}

.button.medium {
  font-size: var(--fontsize-09);
  padding: var(--measurement-half);
  line-height: var(--measurement-135);
}

.input-group-button input.form-button {
	height: 2.4375rem;
}

.input-group-label {
	height: var(--measurement-8);
}

.dropdown-pane {
	position: absolute;
	z-index: 10;
	display: none;
	width: 400px;
	padding: var(--measurement-1);
	visibility: hidden;
	border: none;
	border-radius: 0;
	background-color: var(--White);
	font-size: var(--fontsize-1);
}

/* Profile dropdown buttons */
.profile-button {
  padding: var(--measurement-half);
  background-color: var(--Secondary);
  border: none;
  margin-right: var(--measurement-1);
  width: max-content;
}

.admin-top-bar .admin-profile-button {
	padding: var(--measurement-half);
  background-color: var(--Code);
  border: none;
}

.admin-top-bar .admin-button {
  padding: var(--measurement-three-quarter);
  background-color: var(--Code);
  border: none;
  font-size: var(--fontsize-1);
  display: inline;
}

.admin-top-bar .admin-button  a {
 	position: relative;
 	top: 2px;
}

.admin-top-bar .admin-button:hover,
.admin-top-bar .admin-button:focus {
  background-color: var(--PrimaryLight);
  cursor: pointer;
}

.profile-button:hover,
.profile-button:focus {
  cursor: pointer;
}

.profile-button:hover .avatar-text,
.profile-button:focus .avatar-text {
  text-decoration: underline;
}

.admin-top-bar .admin-profile-button:hover, 
.admin-top-bar .admin-profile-button:focus {
  background-color: var(--PrimaryLight);
  cursor: pointer;
}

.profile-link {
	padding: var(--measurement-1) !important;
	margin-bottom: 0;
	line-height: var(--measurement-3);
	border: none;
	border-bottom: 1px solid var(--Light);
	color: var(--Primary) !important;
	background: var(--White);
}

.profile-link:hover,
.profile-link:focus {
	background: var(--LightGrey);
}

.profile-link:first-child {
	border-top: 1px solid var(--Light);
}

.close-button {
  position: relative;
  /* position: absolute; */
  color: var(--DarkGrey);
  cursor: pointer;
  right: 0;
	top: 0;
	font-size: var(--fontsize-1);
	line-height: var(--measurement-1);
	border: 1px solid var(--PrimaryLight);
	border-radius: 50%;
	background: var(--White);
	padding: 0 1px;
}

.close-button-large {
	font-size: var(--fontsize-5);
}
 
/* Button array for flexbox array of wrapped buttons */
.button-array {
	display: flex;
	flex-wrap: wrap;
}

.button-array .button {
	line-height: 1.5;
  flex: 1 0 19.88%;
}
 
.mobile-button-toggle {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	overflow: hidden;
	margin-bottom: var(--measurement-1);
}

.mobile-button-toggle .button {
	border-radius: var(--measurement-half);
	margin-bottom: 0;
	-webkit-flex: 1 0 0;
	-ms-flex: 1 0 0px;
	flex: 1 0 0;
}

.mobile-button-toggle .button:first-child {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.mobile-button-toggle .button:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.mobile-button-toggle .button.is-active,
.button-toggle .button.is-active {
	background: var(--PrimaryLight);
	color: var(--White);
	/* border: none; */
	border: 1px solid var(--PrimaryLight);
}
														
/* Inner navigation buttons to move to Previous and next record */
.selection-array {
	height: var(--measurement-9);
	background: var(--White);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 0;
}

.selection-array-header {
	background: var(--Pale);
	color: var(--Primary);
	flex-grow: 2;
	height: var(--measurement-9);
	width: auto;
	padding: var(--measurement-half) var(--measurement-1);
	margin: 0;
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: 400;
	font-size: var(--measurement-135);
	text-align: center;
}

.selection-array-btn {
	flex-basis: var(--measurement-9);
	flex-grow: 0;
	height: var(--measurement-9);
	width: var(--measurement-9);
	padding: 0;
	margin: 0 0.15rem;
}

.selection-array-btn:first-child {
	margin-left: 0;
}

.selection-array-btn:last-child {
	margin-right: 0;
}

.selection-array-btn {
	flex-basis: var(--measurement-9);
	flex-grow: 0;
	height: var(--measurement-9);
	width: var(--measurement-9);
	padding: 0;
	margin: 0 var(--measurement-015);
}

.previous-btn,
.next-btn,
.back-btn {
	height: var(--measurement-9);
	width: var(--measurement-9);
	padding: var(--measurement-quarter) 0;
	background: var(--LighterGrey);
}

.previous-btn:hover,
.next-btn:hover,
.previous-btn:focus,
.next-btn:focus {
	background: var(--Light);
}

.back-btn {
	background: var(--GeneralLight);
}

.back-btn:hover,
.back-btn:focus {
	background: var(--General);
}


/* Change clicked button to a spinner */
.spinnerState .icon,
.spinnerStateCancel .icon,
.spinnerStateDelete .icon,
.spinnerStateOption .icon,
.spinnerStateTest .icon {
	background: url("../icons/refresh-black.svg") no-repeat center center;
	width: var(--measurement-2);
	height: var(--measurement-2);
	-webkit-animation: spinning 2s infinite linear;
	animation: spinning 2s infinite linear;
}

.small.spinnerState .spinner,
.small.spinnerStateCancel .spinner,
.small.spinnerStateDelete .spinner,
.spinnerStateOption .spinner,
.small.spinnerStateTest .spinner {
	width: var(--measurement-1);
	height: var(--measurement-1);
	display: inline-block;
}

.button.spinnerState .spinner, 
.spinnerState .spinner, 
.spinnerStateCancel .spinner, 
.spinnerStateDelete .spinner,
.spinnerStateOption .spinner,
.spinnerStateTest .spinner {
	width: var(--measurement-2);
	height: var(--measurement-2);
	-webkit-animation: spinning 2s infinite linear;
	animation: spinning 2s infinite linear;
	display: inline-block;
	position: relative;
}


@keyframes spinning {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.button.button-option {
	border: none;
	background: var(--White);
	color: var(--Primary);
	border-bottom: var(--measurement-035) solid var(--White);
	padding: var(--measurement-half);
	font-size: var(--fontsize-085);
	line-height: var(--measurement-2);
	margin-right: var(--measurement-1);
}

.button.button-option:hover,
.button.button-option:focus {
	background: var(--LighterGrey);
}

.button.button-option.active {
	border-bottom: var(--measurement-035) solid var(--GeneralLight);
	font-weight: 600;
}


.read-wrapper-ui {
	margin-top: var(--measurement-half);
	margin-bottom: var(--measurement-1);
}



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 3. TYPOGRAPHY */
/* +++++++++++++++++++++++++++++++++++++++++++ */

html {
	font-size: var(--base-measurement);
}

body {
	font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	font-weight: normal;
	font-size: var(--fontsize-1);
	line-height: 1.65;
	margin: 0;
	padding: 0;
	background: var(--White);
}

blockquote {
	color: var(--Primary);
	font-size: var(--fontsize-1-and-12);
	font-style: italic;
	border-left: 2px solid var(--PrimaryLight);
	line-height: 1.8;
	padding: var(--measurement-half) var(--measurement-0875);
}

blockquote p {
	color: var(--Primary);
	font-size: var(--fontsize-1-and-12);
	font-style: italic;
	line-height: 1.8;
}


.size-12 {font-size: 12px;}
.size-14 {font-size: 14px;}
.size-16 {font-size: 16px;}
.size-18 {font-size: 18px;}
.size-21 {font-size: 21px;}
.size-24 {font-size: 24px;}
.size-36 {font-size: 36px;}
.size-48 {font-size: 48px;}
.size-60 {font-size: 60px;}
.size-72 {font-size: 72px;}


.font-weight-300 {font-weight: 300;}  /* Light */
.font-weight-400 {font-weight: 400;}  /* Normal */
.font-weight-500 {font-weight: 500;}  /* Medium */
.font-weight-600 {font-weight: 600;}  /* Semi-bold */
.font-weight-700 {font-weight: 700;}  /* Bold */


.fontsize-065 {font-size: var(--fontsize-065) !important;}
.fontsize-07 {font-size: var(--fontsize-07) !important;}

.fontsize-08 {font-size: var(--fontsize-08) !important;}
.fontsize-085 {font-size: var(--fontsize-085) !important;}
.fontsize-09 {font-size: var(--fontsize-09) !important;}
.fontsize-0925 {font-size: var(--fontsize-0925) !important;}
.fontsize-095 {font-size: var(--fontsize-095) !important;}

.fontsize-1-and-eight {font-size: var(--fontsize-1-and-eight) !important;}
.fontsize-1-and-12 {font-size: var(--fontsize-1-and-12) !important;}

.fontsize-1-less-eight {font-size: var(--fontsize-1-less-eight) !important;}
.fontsize-1-less-sixth {font-size: var(--fontsize-1-less-sixth) !important;}

.fontsize-half {font-size: var(--fontsize-half) !important;}
.fontsize-three-quarter {font-size: var(--fontsize-three-quarter) !important;}
.fontsize-1 {font-size: var(--fontsize-1) !important;}
.fontsize-2 {font-size: var(--fontsize-2) !important;}
.fontsize-3 {font-size: var(--fontsize-3) !important;}
.fontsize-4 {font-size: var(--fontsize-4) !important;}
.fontsize-5 {font-size: var(--fontsize-5) !important;}
.fontsize-6 {font-size: var(--fontsize-6) !important;}
.fontsize-7 {font-size: var(--fontsize-7) !important;}
.fontsize-8 {font-size: var(--fontsize-8) !important;}
.fontsize-9 {font-size: var(--fontsize-9) !important;}
.fontsize-10 {font-size: var(--fontsize-10) !important;}
.fontsize-11 {font-size: var(--fontsize-11) !important;}
.fontsize-12 {font-size: var(--fontsize-12) !important;}
	
	
h1, h2, h3, h4, h5, h6 {
	font-style: normal;
	line-height: 1.75;
	color: var(--Primary);
}

h1, h2 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: 300;
}

h3, h4 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: 400;
}


h1 small, 
.h1 small, 
h2 small, 
.h2 small, 
h3 small, 
.h3 small, 
h4 small, 
.h4 small, 
h5 small, 
.h5 small, 
h6 small, 
.h6 small {
	font-size: 75%;
	line-height: 0;
	color: var(--Primary);
}

h5, h6 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: 500;
	line-height: 1.5;
}

h1 {font-size: var(--fontsize-7);}
h2 {font-size: var(--fontsize-5);}
h3 {font-size: var(--fontsize-3);}
h4 {font-size: var(--fontsize-2);}
h5 {font-size: var(--fontsize-1-and-eight);}
h6 {font-size: var(--fontsize-1-and-12);}

h2.small, h3.small {
    font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
    font-weight: normal;
    line-height: var(--measurement-1375);
    color: inherit;
    font-size: 85%;
}

h4.small {
	font-size: var(--fontsize-1-and-eight);
	line-height: var(--measurement-3);
	color: var(--PrimaryHeader);
}

.encapsulated {
	background: var(--GeneralLight);
	padding: 0.65rem var(--measurement-2);
	border-radius: var(--measurement-1) var(--measurement-quarter);
	display: inline-block;
	color: var(--White);
	margin-bottom: var(--measurement-3);
	font-weight: bold;
}

.encapsulated-outline {
	background: var(--White);
	border: 1px solid var(--GeneralMedium);
	color: var(--GeneralMedium);
	font-weight: 500;
}

.intro {
	font-size: var(--fontsize-1);
	line-height: var(--measurement-165);
	color: var(--DarkGrey);
	margin: var(--measurement-1) 0 var(--measurement-5) 0;
	background: var(--TestCardBody);
	padding: var(--measurement-1);
	border-radius: var(--measurement-045);
}

.intro-admin {
	color: var(--ConfirmDark);
	background: var(--ActiveMedium);
}

.intro p {
	margin: var(--measurement-045) 0;
}

.intro p:first-child {
	font-size: var(--fontsize-1-and-eight);
}

small, .row small, .small  {
	font-size: 80% !important;
	line-height: inherit;
}
 
.text-large {
	font-size: 125%;
	line-height: inherit;
}

.text-bold {
	font-weight: bold;
}

/* Text colours */
.text-primary {color: var(--Primary) !important;}
.text-label {color: var(--PrimaryLight) !important;}
.text-secondary {color: var(--Secondary) !important;}
.text-confirm {color: var(--Confirm) !important;}
.text-info {color: var(--Info) !important;}
.text-warning {color: var(--WarningDark) !important;}
.text-error {color: var(--Error) !important;}

.text-dark {color: var(--SurveyLogoColour) !important;}

.text-light {color: var(--Light) !important;}
.text-light-grey {color: var(--MediumLightGrey) !important;}
.text-grey {color: var(--Grey) !important;}
.text-dark-grey {color: var(--DarkGrey) !important;}
.text-default {color: var(--Default) !important;}

body .text-white, .text-white {color: var(--White) !important;}


/* Text formatting */
.text-uppercase {text-transform: uppercase !important;}
.text-lowercase {text-transform: lowercase !important;}

.text-padded {
	padding: var(--measurement-035) var(--measurement-half);
	margin: 0;
}

.text-nowrap {white-space: nowrap !important; }

a.text-nowrap, 
a.text-nowrap span, 
button.text-nowrap, 
button.text-nowrap span {
	display: inherit;
}
  
a {
	line-height: inherit;
	color: var(--Info);
	text-decoration: none;
	font-size: inherit;
}

a:hover,
a:focus {
	color: var(--PrimaryDark);
	text-decoration: underline;
}

a.underline, .underline {
	text-decoration: underline;
}

a.disabled,
.icon.disabled {
  color:var(--Default);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.5;
  pointer-events: none;
}

a.disabled {
  background: transparent;
}

.text-flip {
	direction: rtl;
	unicode-bidi: bidi-override;
	display:inline-block; 
	-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
}

::placeholder {
	color: var(--MediumGrey);
}

code {
	background-color: var(--LighterGrey);
	border: none;
	color: var(--Code);
	font-family: Courier, Times, Monaco, monospace;
	font-weight: normal;
	padding: var(--measurement-quarter);
	display: inline-block;
	font-size: var(--fontsize-1-less-eight);
	line-height: var(--measurement-2);
}

pre {
	font-family: Courier, Times, Monaco, monospace;
	font-size: var(--fontsize-1);
	padding: 0;
	margin: 0;
}

.prompt {
	font-size: var(--fontsize-09);
	font-style: italic;
	margin: 0 0 var(--measurement-half) 0;
	color: var(--PrimaryDark);
	display: inline-block;
}

.prompt-outline {
	background: var(--LighterGrey);
	border: 1px solid var(--LighterGrey);
	margin: 0 0 var(--measurement-1);
	padding: var(--measurement-quarter) var(--measurement-half);
}

.prompt-green {
	color: var(--Confirm);
}

.title {
	text-transform: uppercase;
	color: var(--Primary);
	font-size: var(--fontsize-1-less-eight);
}

.title-sub,
.list-group.compact .list-group-item .title-sub {
	font-size: var(--fontsize-08);
	font-weight: var(--font-weight-600);
}

.logo {
	float: left;
	padding: 0;
	margin: 0;
	min-height: 3rem;
	height: 3rem;
	line-height: 3rem !important;
	top: -2px;
	position: relative;
}

/* Custom survey logo */
.logo-container {
	width: 100%; 
	height: 100%;
	text-align: center;
	display: block;
}

.logo-custom {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: block;
}

.logo-container img {
  width: auto;
  height: 100%;
}


#customPreview .image-inline-preview {
  height: 120px;
}



.brand-title {
	float: left;
	font-family: 'Roboto Slab', Courier, Times, Monaco, monospace;
	font-size: var(--fontsize-5);
	font-weight: 400;
	letter-spacing: -1px;
	color: var(--White);
	padding: 0 var(--measurement-three-quarter);
	margin: 0;
	min-height: 40px;
	height: 40px;
	line-height: 40px !important;
}

.help-text {
	margin-top: -0.4rem;
	font-size: var(--fontsize-1-less-eight);
	font-style: italic;
	color: var(--Default);
}

.link-copy {
	background: var(--LighterGrey);
	padding: var(--measurement-045);
	position: relative;
	top: -3px;
}

/* INSIGHT FORMATTING */

.insight-format h1,
.insight-format h2,
.insight-format h3,
.insight-format p {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.insight-format h1,
.insight-format h2,
.insight-format h3 {
	font-weight: bold;
}

.insight-format h1 {
	font-size: var(--fontsize-3);
}

.insight-format h2 {
	font-size: var(--fontsize-2);
}

.insight-format h3 {
	font-size: var(--fontsize-1-and-eight);
}

.insight-format ul {
	list-style: inside;
	padding: 0 0 0 var(--measurement-1);
}

.insight-format li {
	margin: var(--measurement-035) 0;
}

.category-group {
	margin: var(--measurement-3) 0;
	padding: 0;
}

.category-item {
	border: 1px solid var(--MediumLighterGreyPlus);
	background: var(--White);
	padding: var(--measurement-035) var(--measurement-three-quarter);
	display: inline-block;
	margin: 0;
	flex-grow: 2;	
}

.metric {
	float: right;
}

.font-medium {
	font-weight: 500;
}

.font-roman {
	font-style: normal;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 4. BORDERS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.bordered {
	border-style: solid;
	border-width: 1px;
}

.bordered-input {
	border: 1px solid var(--MediumLighterGreyPlus) !important;
}

.bordered.bordered-dashed,
.bordered-dashed,
.callout.bordered-dashed,
.card.bordered-dashed {
	border-style: dashed;
}

.bordered-right {border-right: 1px solid var(--Light);}

.bordered-left {border-left: 1px solid var(--Light);}

.bordered-top {border-top: 1px solid var(--Light);}

.bordered-top-primary {border-top: 1px solid var(--PrimaryLight);}

.bordered-bottom,
body .bordered-bottom {
	border-bottom: 1px solid var(--NoteMedium);
}

.bordered-bottom-primary {border-bottom: 1px solid var(--PrimaryLight);}

.bordered-sides {
  border-left: 1px solid var(--Light);
  border-right: 1px solid var(--Light);
}

.bordered.bordered-primary,
.bordered-primary {
	border-color: var(--Primary);
}

.bordered-bottom-primary {border-bottom: 1px solid var(--Primary);}

.bordered.bordered-secondary,
.bordered-secondary {
	border-color: var(--Secondary);
}

.bordered-top-secondary {border-top: 1px solid var(--SecondaryLight);}

.bordered-bottom-secondary {border-bottom: 1px solid var(--Secondary);}

.bordered.bordered-light,
.bordered-light {
	border-color: var(--Light);
}

.bordered-white {
	border-color: var(--White);
}

.bordered-individual {
	border-left: var(--measurement-035) solid var(--PrimaryLight);
}

.bordered-bottom-individual {
	border-bottom: var(--measurement-035) solid var(--PrimaryLight);
}


.bordered-right-none {
    border-right: none !important;
}

.bordered-left-none {
	border-left: none !important;
}

.bordered-top-none {
	border-top: none !important;
}

.bordered-bottom-none {
	border-bottom: none !important;
}


/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 5. BADGES & LABELS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.badge {
	font-weight: 700;
	font-size: var(--fontsize-065);
	padding: var(--measurement-02);
	min-width: var(--measurement-3);
	background: var(--General);
	color: var(--White);
	position: relative;
	top: -2px;
}

.badge-medium {
  width: var(--measurement-11);
  height: var(--measurement-11);
  padding: var(--measurement-035);
  font-size: var(--fontsize-2);
}

.badge.secondary {
	background: var(--Secondary);
	color: var(--Pale);
}

.badge.success {
	background: var(--Success);
	color: var(--White);
}

.badge.grey {
	background: var(--LightGrey);
	color: var(--PrimaryDark);
}

.badge.default {
	background: var(--White);
	border: 1px solid var(--Light);
	margin-right: var(--measurement-half);
}

.badge.active {
	background: var(--PrimaryLight);
	border: 1px solid var(--PrimaryLight);
}

label, .label {
	background: none;
	color: var(--PrimaryLight);
	font-size: var(--fontsize-1);
	display: inline-block;
	line-height: 1;
	font-weight: 400;
}
    
label {
  padding: var(--measurement-half) 0;
}

.label {
  padding: var(--measurement-035) var(--measurement-065);
	border-radius: var(--measurement-035);
	font-size: var(--fontsize-1);
	line-height: var(--measurement-1);
	margin: 0 0 var(--measurement-035) 0;
}


label.disabled,
.label.disabled,
[type="checkbox"] + label.disabled[for], 
[type="radio"] + label.disabled[for] {
	cursor: not-allowed;
	color: var(--DarkerGrey);
}

.label-para {
	padding-left: 0;
	padding-right: 0;
}

.label-survey {
	font-size: var(--measurement-135);
	color: var(--Primary);
	margin-bottom: var(--measurement-three-quarter);
	line-height: var(--measurement-165);
}

.label-tag {
	border-radius: var(--measurement-035);
	font-size: var(--fontsize-09);
	line-height: var(--measurement-0875);
	margin: 0 0 var(--measurement-035) 0;
	padding: var(--measurement-quarter) var(--measurement-half) 0.3rem;
}

.label-tag-highlight {
	border: 1px solid var(--Default);
}

.label-tag:hover,
.label-tag:focus {
	cursor: grab;
}

.callout-inline .label-tag:hover,
.callout-inline .label-tag:focus {
	cursor: pointer;
}

.label-tag a {
	font-size: var(--fontsize-09);
	padding: 0;
	margin: 0;
}

.label-tag.primary a {
	color: var(--White);
}

.label.primary {
	background: var(--PrimaryLight);
	color: var(--White);
}

.label.secondary {
	background: var(--SecondaryLight);
	color: var(--White);
}

.label.project {
	background: var(--General);
	color: var(--White);
}

.label.success {
	background: var(--Success);
	color: var(--White);
}

.label.confirm {
	background: var(--Confirm);
	color: var(--White);
}

.label.alert {
	background: var(--Alert);
	color: var(--White);
}

.label.warning {
	background: var(--Warning);
	color: var(--Default);
}

.label.default {
	background: var(--LightGrey);
	color: var(--Default);
	border-radius: 3px;
}

.label.confirm-light {
	background: var(--ConfirmLight);
	color: var(--White);
}

.label.survey {
	background: var(--White);
	color: var(--PrimaryDark);
	border-radius: 0;
	border: 1px solid var(--MediumLighterGreyPlus);
	display: inline-block;
	width: max-content;
}

.label.grey {
	background: var(--LighterGrey);
	color: var(--DarkGrey);
}

.label.verbatim-label {
	background: var(--Verbatim);
	color: var(--White);
}

.label.participant {
	background: var(--White);
	color: var(--PrimaryLight);
	border-radius: var(--measurement-035);
	border: 1px solid var(--Light);
	display: flex;
  width: fit-content;
  padding: var(--measurement-04);
}

.participant span {
  line-height: 1;
  margin: 0;
}


.identifier {
	font-weight: bold;
}

.label.small {
	padding: var(--measurement-02) var(--measurement-04);
  font-size: var(--fontsize-1-less-eight);
}

.label.label-flag {
	float: right;
	text-transform: uppercase;
	height: 100%;
	min-width: var(--measurement-9);
	text-align: center;
	font-size: var(--fontsize-09);
	line-height: 1;
	padding: var(--measurement-quarter) 0;
}

.label.rounded-right {
	border-top-right-radius: var(--measurement-035);
	border-bottom-right-radius: var(--measurement-035);
}

.label.rounded-left {
	border-top-left-radius: var(--measurement-035);
	border-bottom-left-radius: var(--measurement-035);
}

.label-group {
	margin: var(--measurement-quarter) 0;
	padding: 0;
}

.label-group.small .label,
.label-group.small .label-tag {
	font-size: var(--fontsize-three-quarter);
}

.label-group .label, 
.label-group .label-tag, 
.callout.compact .label-group .label-tag {
    margin: 0 var(--measurement-quarter) var(--measurement-quarter) 0;
}

.label-group-block {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	text-align: center;
}

.label-group-block .label {
	margin: var(--measurement-quarter) 0;
	padding: var(--measurement-half) var(--measurement-065);
}

.label.hollow {
	background: var(--White);
	border: 1px solid var(--Light);
	color: var(--Default);
	border-radius: 3px;
}


.label.hollow.primary {
	background: transparent;
	border: 1px solid var(--PrimaryLight);
	color: var(--Primary);	
}

.label.hollow.secondary {
	background: transparent;
	border: 1px solid var(--Secondary);
	color: var(--Secondary);	
}

.label.hollow.success {
	background: transparent;
	border: 1px solid var(--Success);
	color: var(--SuccessDark);	
}

.label.hollow.alert {
	background: transparent;
	border: 1px solid var(--Alert);
	color: var(--Alert);	
}

.label.hollow.warning {
	background: transparent;
	border: 1px solid var(--Warning);
	color: var(--WarningDark);	
}

.label.hollow.confirm {
	background: transparent;
	border: 1px solid var(--Confirm);
	color: var(--Confirm);	
}

.label.hollow.verbatim {
	background: transparent;
	border: 1px solid var(--Verbatim);
	color: var(--Verbatim);	
}

.label.feature {
	padding: var(--measurement-half) var(--measurement-three-quarter);
	border: none;
	border-top-left-radius: var(--measurement-three-quarter);
	border-bottom-right-radius: var(--measurement-three-quarter);
}

.hanging-label {
  display: inline-block;
  position: relative;
  float: left;
  height: 100%;
  width: 2.5rem;
  border: none;
  top: 5px;
  left: -2rem;
  text-align: center;
  margin: 0 auto;
}

.hanging-label .badge {
	height: 1.65rem;
	width: 1.65rem;
	font-size: 0.75rem;
	padding: 0;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */






/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 6. FORM ELEMENTS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

[type="text"], 
[type="password"], 
[type="date"], 
[type="datetime"], 
[type="datetime-local"], 
[type="month"], 
[type="week"], 
[type="email"], 
[type="number"], 
[type="search"], 
[type="tel"], 
[type="time"], 
[type="url"], 
[type="color"], 
textarea, select {
	margin: 0 0 var(--measurement-half);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-top: transparent;
	border-left: 1px solid var(--MediumLighterGreyPlus);
	border-right: transparent;
	box-shadow: none;
	background-color: var(--White);
	background-color: var(--semiOpaque);
}
 
[type='text']:focus, 
[type='password']:focus, 
[type='date']:focus, 
[type='datetime']:focus, 
[type='datetime-local']:focus, 
[type='month']:focus, 
[type='week']:focus, 
[type='email']:focus, 
[type='number']:focus, 
[type='search']:focus, 
[type='tel']:focus, 
[type='time']:focus, 
[type='url']:focus, 
[type='color']:focus,
input[type="search"]:focus,
[type].bordered-input:focus,
.bordered-input:focus,
textarea:focus,
select:focus {
	outline: none;
	border: 1px solid var(--Confirm) !important;
	background-color: var(--Pale);
	-webkit-box-shadow: 0 0 5px var(--Light);
	box-shadow: 0 0 5px var(--Light);
	-webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
	transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
	transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
	transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; 
}

textarea.medium {
  min-height: 8rem;
}

[type].bordered-input,
textarea.bordered-input,
select.bordered-input   {
	border: 1px solid var(--MediumLighterGreyPlus) !important;
}

input {
	position: relative;
	top: -1px;
}

input.is-invalid-input {
	position: relative;
	top: -2px;
}

label, 
.is-invalid-label {
	color: var(--PrimaryLight);
}


.switch-toggle-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--measurement-1);
}

.switch-toggle-wrapper .switch {
  margin-bottom: 0;
  margin-right: var(--measurement-1);
}

.switch-group {
	margin: 0 0 var(--measurement-1) 0;
	border: 1px solid var(--Light);
	border-radius: var(--measurement-035);
	padding: var(--measurement-three-quarter);
}

.switch-group .switch {
	margin-bottom: var(--measurement-035);
}

.switch-group .switch:last-child {
	margin-bottom: 0;
}

.switch-compact {
	padding: var(--measurement-half) var(--measurement-three-quarter);
}

.switch-compact .switch {
	height: var(--measurement-3);
	margin-bottom: var(--measurement-quarter);
}

.switch-compact [type="checkbox"] + label, [type="radio"] + label {
	margin-left: var(--measurement-half);
}

.switch.tiny .switch-paddle {
	border-radius: var(--measurement-three-quarter);
}

[type="checkbox"]:focus + .switch-paddle {
	border: 1px solid var(--White);
	box-shadow: 0 0 5px 3px var(--ConfirmLight);
}

.switch.small .switch-paddle {
	width: var(--measurement-12);
	height: var(--measurement-4);
	font-size: var(--fontsize-08);
}

.switch.small input:checked ~ .switch-paddle::after {
	left: var(--measurement-6);
}

.switch.small .switch-paddle::after {
	top: var(--measurement-quarter);
	left: var(--measurement-quarter);
	width: var(--measurement-120);
	height: var(--measurement-120);
}

.switch.large .switch-paddle {
	width: var(--measurement-17);
	height: var(--measurement-7);
	font-size: var(--fontsize-1);
	border-radius: var(--measurement-3);
}

.switch-paddle {
	background: var(--MediumLighterGrey);
}

.switch-paddle::after {
	background: var(--Pale);
	border-radius: var(--measurement-1);
}


/* Wide switch */
.switch.switch-wide .switch-paddle {
	width: var(--measurement-15);
}

.switch.switch-wide input:checked ~ .switch-paddle::after {
	left: 2.85rem;
}

.switch.switch-wide .switch-paddle:after {
	left: var(--measurement-quarter);
}

.switch-title-after {
	border: none;
	display: inline-block;
	padding: 0;
	position: relative;
	top: -8px;
	font-weight: normal;
	font-size: var(--fontsize-09);
	left: 0.4rem;
	font-style: italic;
	color: var(--Primary);
}

.switch-title-after-plain {
	font-style: normal;
	color: var(--Default);
	left: var(--measurement-quarter);
}

.switch-input.disabled {
	border: 1px solid transparent;
	opacity: 0;
	cursor: not-allowed;
	user-select: none;
	pointer-events: none;
}


input + .switch-paddle {
	margin: 0;
	border-radius: var(--measurement-1);
}

input:checked ~ .switch-paddle {
	background: var(--General);
}

input:checked + label > .switch-active {
	display: block;
	color: var(--White);
}

.switch-active {
	left: 11%;
	display: none;
}


.form-error {
	display: none;
	margin: -0.25rem 0 var(--measurement-half) 0;
	font-size: var(--fontsize-09);
	font-weight: normal;
	color: var(--Error);
}

.form-error.is-visible {
	display: block;
}

.is-invalid-input:not(:focus) {
	border-color: var(--Error) !important;
	background-color: var(--ErrorBackground);
}

.is-invalid-input:not(:focus)::placeholder {
	color: var(--Error);
}

.input-group-field, 
.input-group-button,
.input-group-button input, 
.input-group-button button {
	height: 40px;
}

select.input-group-field {
	margin-top: -1px;
}

.input-group-button input, 
.input-group-button button {
	border: 1px solid var(--PrimaryLight);
}

.input-group .input-group-button .button {
	border-radius: 0;
	border: 1px solid var(--PrimaryLight);
	margin: 0;
	top: -1px;
	position: relative;
}

.input-group .input-group-button .button.disabled {
	border: none;
	cursor: not-allowed;
	user-select: none;
	pointer-events: none;
}


/* Mask/unmask input groups */

.input-group.input-group-masked .input-group-button .button {
	position: relative;
  top: 47%;
  transform: translateY(-50%);
  text-indent: -9999px;
  width: 3rem;
  height: 40px;
  background: url("../icons/view-black.svg") no-repeat center center;
  background-size: 60%;
  cursor:pointer; 
  border: 1px solid var(--MediumLighterGreyPlus);
  border-left: none;
  -webkit-appearance:none;
}

.input-group.input-group-masked .input-group-button .button.mask {
  background: url("../icons/view-disabled-black.svg") no-repeat center center;
  background-size: 60%;
}



/* IMAGES */

.image-preview-container {
	margin-bottom: var(--measurement-1);
}

.image-preview {
	padding: var(--measurement-half);
	border: 1px dashed var(--SecondaryLight);
	width: 100%;
	max-height: 160px;
	height: 160px;
	border-radius: var(--measurement-035);
	text-align: center;
}

.image-preview img {
	width: auto;
	height: auto;
	max-height: 150px;
}


.image-preview-large {
	height: 70%;
	max-height: 70%;
	width: auto;
	border: none;
	margin-bottom: var(--measurement-1);
}

.image-preview-large img {
  width: auto;
  height: 100%;
  max-height: fit-content;
}


/* Sample tiled background image */
#imagePreview {
	background: #f4f4f4;
	background-size: 50%;
}

#imagePreview2 {
	background: #f4f4f4;
	background-size: 50%;
}

.inline-label {
	top: -0.45rem;
	position: relative;
}

.thumbnail {
	border: none;
	float: left;
	width: 200px;
	height: auto;
	margin: 0 var(--measurement-three-quarter) 0 0;
	overflow: hidden;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	background: var(--White);
}

.thumbnail img {
	border: none;
	color: var(--Grey);
	display: inline-block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	padding: 0;

}


/* FILE UPLOADER */
.form-group {
	max-width: 100%;
	margin: 0;
	margin-bottom: auto;
	margin-bottom: 1.8rem;
}

.file-area {
	width: auto;
	position: relative;
}

.file-area input[type="file"] {
	cursor: pointer;
	text-align: center;
	width: auto;
}

.file-area .file-button {
	opacity: 0;
  width: 0;
  position: fixed;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.file-area.file-styled input[type="file"] {
	opacity: 0;
  width: 0;
  position: fixed;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.file-area.file-styled .button-label {
	cursor: pointer;
	padding: var(--measurement-03);
	background-color: var(--White);
	display: inline-block;
	border-radius: 50%;
	border: none;
	border: 1px dashed var(--PrimaryLight);
}

.file-area.file-styled .focusClass,
.file-area.file-styled .button-label:hover,
.file-area.file-styled .button-label:focus {
	transform: scale(1.125);
	outline: 2px dotted var(--Primary);
}



.file-area .file-uploader {
  width: 100%;
  padding: var(--measurement-3);
  background: var(--PrimaryLightBgnd);
  outline: 1px dashed var(--SecondaryLight);
  text-align: center;
  transition: background 0.3s ease-in-out;
  border-radius: var(--measurement-035);
  outline-offset: -0.65rem;
  margin: 0;
}

.file-area .file-uploader .success {
	display: none;
}

.file-area .file-uploader .default {
	color: var(--PrimaryLight);
	text-align: center;
}

.file-area .file-uploader .success {
	display: none;
}

/* Displays name of file selected with input=file */
.file_feedback .label {
	/* display: flex; */
	flex-wrap: wrap;
	white-space: break-spaces;
	line-height: 1.5;
}




body .top-bar input {
  max-width: 90%;
  width: auto;
  margin-right: 0;
}

.searchbar form {
  width: 60%;
  margin: 0 auto;
  text-align: center;
}



/* Expanded search bar */
.search-row {
	width: 100%;
	background: none;
	margin: 0;
	position: relative;
	top: var(--measurement-half);
}

/* 
.searchbar.search-row {
  margin: 0;
}
 */

.search-row .search-field {
	margin: 0;
  padding: 0 var(--measurement-half);
  margin-left: var(--measurement-1);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--MediumLighterGreyPlus);
  width: 90%;
  display: inline-block;
}

.search-row .expand-search {
  border: 1px solid var(--Light);
  padding: var(--measurement-three-quarter);
  margin: 0;
  height: auto;
}

.search-row .searchbar svg {
	width: var(--measurement-2);
	height: var(--measurement-1);
	top: 2px;
	position: relative;
}

.search-row .input-group {
	justify-content: flex-end;
}

.search-row.search-row-left .input-group {
	justify-content: flex-start;
}

.search-row .input-group-button {
	height: auto;
	margin: 0;
}

.search-row .input-group.searchbar .button {
  border-radius: 50px;
  background: var(--GeneralLight);
  border: none;
  margin: 0 var(--measurement-half) 0 0;
}


textarea {
	min-height: 12rem;
	resize: vertical;
	font-size: 1.067rem;
	color: var(--DarkGrey);
	line-height: 1.65;
	padding: var(--measurement-three-quarter);
}

textarea.deep {
	min-height: 20rem;
}

.comment-field {
	border: 1px solid var(--Info) !important;
	border-radius: var(--measurement-1);
	padding: var(--measurement-1);
	margin: 0 0 var(--measurement-1);
	height: var(--measurement-9);
}

.input-group-comment .comment-field {
	margin-right: var(--measurement-1);
}

.input-group-comment .button.rounded {
    line-height: 250%;
}


.input-select-none,
.input-select-none:focus {
	border: none;
	outline: none;
	user-select: none;
	box-shadow: none;
	background: none;
}



/* Toggle view classes from Read to Edit */

.readDisplayMode {}

.editDisplayMode {}


/* Radio button group */
.radio-button-group,
.test-button-group {
	list-style: none !important;
	display: block;
	padding: 0 !important;
}

.radio-button-group input[type="radio"],
.test-button-group .test-button {
	opacity: 0;
	position: fixed;
	width: 0;
	margin: 0;
	padding: 0;
	white-space: normal;
}

.radio-button-group li {
	float: left;
	border: 1px solid var(--Light);
	border-right: none;
	padding: 0;
	margin: 0;
	white-space: normal;
	line-height: 1;
}

.radio-button-group li:last-child {
  border-right: 1px solid var(--Light);
}


.radio-button-group label,
.test-button-group label {
  display: inline-block;
  padding: var(--measurement-half) var(--measurement-three-quarter);
	margin: 0;
	font-size: var(--fontsize-1);
	border-radius: 0;
	background: var(--Pale);
	color: var(--Primary);
	cursor: pointer;
	white-space: normal;
}


.test-button-group label {
  padding: var(--measurement-three-quarter) var(--measurement-1);
  border-radius: var(--measurement-half);
  border: 1px solid var(--Grey);
}


.radio-button-group  input[type="radio"]:hover+label,
.radio-button-group input[type="radio"]:focus+label,
.test-button-group .test-button:hover+label,
.test-button-group .test-button:focus+label {
	background: var(--LightGrey);
	border-color: var(--Light);
	box-shadow: 0 0 1px 1px var(--SecondaryLight);
}

.radio-button-group input[type="radio"]:checked+label,
.radio-button-group .Checked+label {
	background: var(--PrimaryLight);
	color: var(--White);
}

.test-button-group .test-button:checked + label {
  border: 1px solid var(--Primary);
	background: var(--PrimaryLight);
	color: var(--White);  
  padding: var(--measurement-half) var(--measurement-1) var(--measurement-three-quarter)
}


.test-button-group .test-button + label .icon {
	display: none;
}

.test-button-group .test-button.checked + label .icon,
.test-button-group .test-button:checked + label .icon {
	display: inline-block;
}


.radio-button-group.small label {
  padding: var(--measurement-half) var(--measurement-08);
	font-size: var(--fontsize-1-less-sixth);
}

.test-button-group .test-button .icon.icon-small {
  width: 1.125rem;
  height: 1rem;
  top: 2px;
  line-height: 1;
}




.radio-button-group.small input[type="radio"]:hover+label,
.radio-button-group.small input[type="radio"]:focus+label {
	background: var(--PrimaryLight);
	border-color: var(--Light);
	color: var(--White);
	box-shadow: none;
}

.radio-button-group.button-group-medium label {
  padding: var(--measurement-1) var(--measurement-3);
  font-size: var(--fontsize-1-and-12);
}

.radio-button-group.button-group-rounded li:first-child,
.radio-button-group.button-group-rounded li:first-child label {
	border-top-left-radius: var(--measurement-quarter);
	border-bottom-left-radius: var(--measurement-quarter);
}

.radio-button-group.button-group-rounded li:last-child,
.radio-button-group.button-group-rounded li:last-child label {
	border-top-right-radius: var(--measurement-quarter);
	border-bottom-right-radius: var(--measurement-quarter);
}

/* Checked radio button class */
input.checked + label, 
.checked + label,
.test-button.checked + label
 {
  background: var(--PrimaryLight);
  color: var(--White);
}


.disabled {
	background-color: var(--LightGrey);
	cursor: not-allowed;
	opacity: 0.25;
	user-select: none;
	pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

input[type="radio"].disabled+label {
	cursor: not-allowed;
	user-select: none;
	pointer-events: none;
	opacity: 0.25;
}

input[type="checkbox"].disabled+label {
	cursor: not-allowed;
	opacity: 0.25;
}

.no-selection {
	cursor: not-allowed;
	user-select: none;
	pointer-events: none;
	border: none;
}

/* Remove grey background when button group is disabled */
.buttonOptions.disabled {
	background-color: transparent;
}

/* URL copy link group */
.input-group.input-group-styled {
	height: var(--measurement-9);
	border: none;
	overflow: hidden;
}

.input-group-styled .input-group-label {
	height: var(--measurement-9);
	border: none;
}

.input-group-styled .input-group-field {
	height: var(--measurement-9);
	border: none;
	padding: var(--measurement-quarter) var(--measurement-half);
	background: var(--LightGrey);
}

.input-group-styled .input-group-button {
	height: var(--measurement-9);
	border: none;
	min-height: var(--measurement-9);
	line-height: 1.5;
}

.input-group-styled .input-group-button .button {
	height: var(--measurement-9);
}

.input-group .input-group-button .button {
	border-radius: 0;
	border: none;
	margin: 0;
	top: -1px;
	position: relative;
}

.top-bar .input-group .input-group-button .button {
	border: 1px solid var(--MediumLighterGreyPlus);
	border-left: none;
}

.top-bar .search-row .search-field {
  background: var(--Pale);
}

/* Used to highlight input field */
.input-highlight {
  border: 1px solid var(--SecondaryLight);
  background-color: var(--PrimaryLightBgnd);
}


/* Input field widths */
.input-width-small {width:50%}
.input-width-medium {width:70%}
.input-width-large {width:90%}


/* Focus area for survey questions */
.focusArea {
  padding: var(--measurement-half) var(--measurement-three-quarter);
  border: 1px solid var(--LightGrey);
  border-radius: var(--measurement-035);
  margin: var(--measurement-quarter) 0 var(--measurement-half) 0;
  display: inline-block;
  background: var(--White);
}

.focusArea.is-invalid {
  border-color: var(--Error) !important;
	background-color: var(--ErrorBackground);
}

.focusArea input {
  margin: 0;
}

.focusArea.is-invalid legend {
  padding: var(--measurement-half) var(--measurement-three-quarter);
  background: var(--White);
  border-radius: var(--measurement-quarter);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 7. ALERTS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.alert-callout-subtle {
  width: auto;
  background: var(--LighterGrey);
  color: var(--Error);
  border: 0;
  border-left: 0.3125rem solid var(--MediumLightGrey);
}

.alert-callout-subtle.primary {
  background: var(--LighterGrey);
  color: var(--MediumLightGrey);
  border-left: 0.3125rem solid var(--Primary);
}

.alert-callout-subtle.success {
  background: var(--LighterGrey);
  color: var(--MediumLightGrey);
  border-left: 0.3125rem solid var(--Secondary);
}

.alert-callout-subtle.info {
  background: var(--Pale);
  color: var(--DarkGrey);
  border-left: 0.3125rem solid var(--PrimaryLight);
}

.alert-callout-subtle.info p strong {
  color: var(--Primary);
}

.alert-callout-subtle.alert {
  background: var(--LighterGrey);
  color: var(--Error);
  border-left: 0.3125rem solid var(--Alert);
}	

.alert-callout-subtle.small {
  font-size: 85%;
}

.alert-callout-subtle.small .close-button {
  font-size: var(--fontsize-3);
}

.alert-callout-subtle.large {
  font-size: 150%;
}

.alert-callout-subtle.large .close-button {
  font-size: var(--fontsize-9);
}

.alert-callout-subtle .close-button {
  font-size: var(--fontsize-5);
  position: absolute;
  top: 50%;
  right: var(--measurement-035);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.alert-callout-subtle.radius {
  border-radius: 0.6rem;
}

.alert-message {
	color: var(--Error);
	padding: var(--measurement-half);
	background-color: var(--ErrorBackground);
	border-radius: var(--measurement-half);
	display: inline-block;
	border: 1px solid var(--Alert);
	padding: var(--measurement-1) var(--measurement-2);
	margin:var(--measurement-1) 0;
}

.info-message {
	padding: var(--measurement-half);
	background-color: var(--PrimaryLightBgnd);
	border-radius: var(--measurement-half);
	display: inline-block;
	border: 1px solid var(--SecondaryLight);
	padding: var(--measurement-1) var(--measurement-2);
	margin:var(--measurement-1) 0;
}


/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 8. LISTS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

ul ul, ol ul, ul ol, ol ol {
	margin: 0;
}

ul {
	margin-left: 0;
}

ul.profile-dropdown-pane {
	list-style: none;
}

.readDisplayModeDetails ul {
	margin-left: var(--measurement-2);
}

.list-indent {
	list-style: disc;
	margin: 0 var(--measurement-1);
}

.list-indent li {}

ul.profile-dropdown-pane li .profile-link:first-child,
ul.profile-dropdown-pane li .profile-link {
	border-top: none;
	margin-bottom: 0;
}

.menu ul.profile-dropdown-pane li {
	margin-left: 0;
	margin-bottom: 0;
}

li {
	font-size: inherit;
	line-height: var(--measurement-4);
	margin-bottom: var(--measurement-quarter);
}

ul.unordered,
.summary-panel ul {
	list-style-position: inside;
	font-size: var(--fontsize-1);
}

.list-group,
.summary-panel .list-group {
	/* margin-bottom: var(--measurement-1); */
	border: none;
	border-radius: 0;
	background: var(--White);
	box-shadow: none;
	overflow: hidden;
	color: var(--Default);
	list-style: none;
}

.list-group.striped .list-group-item:nth-child(2n) {
	background-color: var(--Pale);
}

.list-group.striped .list-group-item h4 {
	color: var(--PrimaryDark);
	font-weight: 500;
}

.list-group.striped .list-group-item {
	padding: var(--measurement-1) var(--measurement-three-quarter);
	margin: 0;
	border-top: 1px solid var(--Light);
}

.list-group.striped .list-group-item:last-child {
	border-bottom: 1px solid var(--Light);
}

.list-group.compact  {
	font-size: var(--fontsize-09);
}

.list-group.compact [type="file"], 
.list-group.compact [type="checkbox"], 
.list-group.compact [type="radio"] {
	margin: 0;
}

.list-group.compact.compact-space .list-group-item {
  margin: var(--measurement-quarter) 0;
  padding: var(--measurement-three-quarter);
}

.list-group.compact-right  {
	padding-right: var(--measurement-half);
}

.list-group.compact-left  {
	padding-left: var(--measurement-half);
}

.list-group.compact .list-group-item {
	/* padding: var(--measurement-three-quarter); */
	padding: 0;
	margin: 0;
}

.list-group.compact .list-group-item p, 
.list-group.compact .listing-header-toggle, 
.list-group.compact .switch label,
.list-group.compact .link-group a {
  font-size: var(--fontsize-095);
  line-height: var(--measurement-3);
}

.list-group.compact .list-group-item li {
	line-height: var(--measurement-3);
}

.list-group.compact .list-group-item .list-para {
  font-size: var(--fontsize-0925);
  line-height: var(--measurement-3);
	margin: var(--measurement-half) 0;
}

.list-group.compact .list-group-item .verbatim .list-para {
  font-size: 1.067rem;
  line-height: var(--measurement-4);
  margin: var(--measurement-half) var(--measurement-3);
}

.list-group.compact .list-group-item h4 {
	margin-bottom: var(--measurement-quarter);
	font-size: var(--fontsize-1-and-eight);
	line-height: var(--measurement-2);
}

.list-group.compact .list-group-item .fontsize-1-and-eight {
	font-size: var(--fontsize-1-and-eight);
}

.list-group.compact .list-group-item .fontsize-1 {
	font-size: var(--fontsize-1);
}



.list-group.list-group-data .list-group-item {
  padding: var(--measurement-half) 0;
  margin: 0;
  border-bottom: 1px solid var(--NoteMedium);
}

.list-group.list-group-data .list-group-item:first-child {
  border-top: 1px solid var(--NoteMedium);
}


/* For list group items with checkbox selections */

.list-group-selection {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  border-top: 1px solid var(--Light);
}

.list-group-selection .list-group-item {
  padding: var(--measurement-half) !important;
  border-bottom: 1px solid var(--Light);
  margin: 0;
  display: flex;
}

.list-group-selection .list-group-item.selected,
.list-group-selection .list-group-item:nth-child(2n).selected {
  background: var(--ConfirmLightest);
}

.list-group-selection .list-group-item .list-control {
	width: 6%;
	text-align: center;
}

.list-group-selection .list-group-item .list-description {
	width: 92%;
	align-self: auto;
}


.list-group-padding {
	padding: var(--measurement-1);
}

.list-group.compact .list-group-padding .list-group-item {
	border-radius: var(--measurement-half);
	margin: 0 0 var(--measurement-8) 0;
	border: 1px solid var(--Light);
/* 	box-shadow: 0 0 6px var(--MediumLighterGreyPlus); */
}



/* Used to toggle list group data to a Card View */
.list-group-card {
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--measurement-1);
}

.list-group-card.striped .list-group-item:nth-child(2n) {
  background-color: var(--White);
}

.list-group-card .list-group-item,
.list-group-card.striped .list-group-item {
	border: 1px solid var(--GeneralLight);
  border-radius: var(--measurement-1);
  padding: var(--measurement-1);
  margin: 0;
  height: auto;
  flex: 0 1 31.5%;
  background-color: var(--White);
}

.list-group-card.striped .list-group-item:last-child {
  border-bottom: 1px solid var(--GeneralLight);
}


/* Stretch reorder panel when viewed in a card group */
.list-group.list-group-card .callout.width-50 {
	width: 100% !important;
}


.flex-data-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--measurement-1);
}

.flex-data-group .flex-data {
	flex: 0 1 32%;
	padding: var(--measurement-half);
	margin: 0;
}

.flex-data-group .flex-data-three {
	flex: 1 0 31%;
}

.flex-data-group .flex-data-four {
	flex: 0 1 25%;
}

.cell.flex-data.flex-data-auto {
  flex: 0 1 24%;
}

.cell.flex-data.flex-data-split {
  flex: 0 1 50%;
}

.flex-data-group .flex-data .list-group-data {
  border: 1px solid var(--GeneralLight);
  border-radius: var(--measurement-1);
  padding: 0 var(--measurement-1);
  height: 100%;
  margin: 0;
}

.flex-data-group .flex-data-padded .list-group-data {
	padding: var(--measurement-1);
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* INSIGHTS TOGGLE */

/* Interviews */

/* Change carded view to plain list */
.flatten-view .flex-data-group {
	display: block;
}

.flatten-view  .card.flex-card {
  display: block;
  border-radius: 0;
  border: 0;
  margin: 0;
}

.flatten-view  .card.flex-card div {
  margin-bottom: var(--measurement-045) !important;
  padding: 0 !important;
}

.flatten-view .card.flex-card .label,
.flatten-view .card.flex-card .label-group,
.flatten-view .card.flex-card .comment-card {
  display: none;
}


/* Observations */

.flatten-view .label-group,
.flatten-view .label.participant,
.flatten-view .date-group,
.flatten-view .comment-card {
  display: none;
}

.flatten-view .list-group-item,
.flatten-view .list-group-item div {
  padding: 0 !important;
  margin: 0 !important;
}


.flatten-view li {
  line-height: 1.5;
  margin-bottom: 0;
}

.flatten-view .list-group-item .verbatim {
	background: transparent;
}

.flatten-view .list-group-item .verbatim .list-para {
  font-family: inherit;
  font-size: var(--fontsize-1);
  font-style: normal;
  line-height: 1.5;
  color: var(--Default);
}

.flatten-view .list-group-item .verbatim .list-para::before,
.flatten-view .list-group-item .verbatim .list-para::after {
  content: "";
  margin: 0;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




.flex-data .list-group-data .listing-title {
	margin-top: var(--measurement-1);
}

.flex-data .preview-group-data {
	border: 1px solid var(--Light);
  border-radius: var(--measurement-half);
  padding: var(--measurement-2);
  height: 100%;
  margin-right: var(--measurement-half);
  align-items: stretch;
  display: flex;
  flex-direction: column;
}

.flex-preview-img {
	border: none;
	padding: var(--measurement-half);
	margin: 0 auto;
	height: 280px;
	max-height: 280px;
	min-height: 280px;
	overflow: hidden;
	text-align: center;
}

.flex-preview-img .previewImageModal {
	box-shadow: 0 0 6px 0 var(--MediumLighterGreyPlus);
	display: inline-block;
}

.flex-preview-img .previewImageModal:hover,
.flex-preview-img .previewImageModal:focus {
	border: 1px dashed var(--PrimaryLight);
}

body .flex-preview-img img {
	height: auto;
  max-height: calc(280px - 1rem);
}

.flex-preview-content {
	flex: 1 0 auto;
}

.flex-preview-data {
  height: auto;
  margin-top: var(--measurement-3);
}



.card.flex-card {
  display: flex;
  border-radius: var(--measurement-1);
  align-self: auto;
  flex: 0 1 31.5%;
  margin: 0;
}

.card.flex-card.compact,
.card.flex-card.compact .list-para {
	font-size: var(--fontsize-09);
  line-height: var(--measurement-145);
}

.card.flex-card.compact .list-para {
  margin-bottom: var(--measurement-0875);
}
.card.flex-card.compact .label-tag {
	font-size: var(--fontsize-08);
}

/* Classes for responses */
/* 
.flex-data-group-responses .flex-data .preview-group-data {
  border-radius: var(--measurement-quarter);
  padding: var(--measurement-three-quarter);
}

.flex-data-group-responses .flex-data {
  flex: 0 1 20%;
  padding: 0;
  margin: 0 0 var(--measurement-half) 0;
}

.flex-data-group-responses .flex-preview-content h5 {
	font-size: var(--fontsize-1);
}

.flex-data-group-responses .flex-preview-content {
	font-size: 80%;
}
 */



.flex-data-group-responses {
	flex-flow: row nowrap;
	margin-bottom: var(--measurement-5);
	width: 100%;
	padding: var(--measurement-1);
}

.flex-data-group-responses.high-vote-flag {
  border: 1px solid var(--ConfirmLight);
/*   background: var(--ConfirmUltraLight); */
  border-radius: var(--measurement-half);
}

.flex-data-group-responses .responses-left {
	border-right: 1px solid var(--SecondaryLight);
	flex-basis: 40%;
}

.flex-data-group-responses .responses-right {
	flex-basis: 60%;
	padding-left: var(--measurement-3);
}

.flex-data-group-images .responses-left {
	flex-basis: 25%;
}

.flex-data-group-images .responses-right {
	flex-basis: 75%;
}


.responses-right h6 {
  border-bottom: 1px dashed var(--PrimaryLight);
  padding-bottom: var(--measurement-half);
  display: inline-block;
}

.flex-data-group-responses .flex-preview-img {
  height: 140px;
  max-height: 140px;
  min-height: 140px;
  padding: 0;
  background: var(--LighterGrey);
}

body .flex-data-group-responses .flex-preview-img img {
  height: auto;
  max-height: 140px;
}


/* Scrolling list container */
.scroll-list {
	border: 1px solid var(--Light);
	padding: var(--measurement-half) var(--measurement-1);
	overflow: scroll;
	height: 7rem;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++ */
/* Preview test classes */
/* +++++++++++++++++++++++++++++++++++++++++++++++ */

.preference-test .flex-preview-img {
  height: autopx;
  min-height: 260px;
  max-height: 260px;
}

.preference-test .flex-data-group .flex-data {
  flex: 1 1 32%;
  padding: var(--measurement-half);
  margin: 0 0 var(--measurement-half) 0;
}

.preference-test .flex-preview-content {
	padding: var(--measurement-2);
}

body.preference-test .flex-preview-img img {
  height: auto;
  max-height: calc(260px - 1rem);
}


/* +++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++ */




.list-group.compact .label.small {
	font-size: var(--fontsize-08);
}

.list-group.compact .category-item {
	padding: var(--measurement-quarter) 0.65rem;
	line-height: var(--measurement-135);
	font-size: var(--fontsize-09);
}

.list-group.compact .category-item .help-text {
	font-size: var(--fontsize-08);
}

 .list-group.tight {
	font-size: var(--fontsize-08);
}

.list-group.tight > .list-group-item {
	padding: var(--measurement-quarter);
}

.list-group-array {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	border-top: 1px solid var(--Light);
}

.list-group-array .list-group-item {
	flex-grow: 0;
	width: 33.33333%;
	border-bottom: 1px solid var(--Light);
}

.list-group-array .list-group-item:first-child {
	border-top: none;
}

.list-group-array .list-group-item:hover,
.list-group-array .list-group-item:focus-within {
	cursor: pointer;
	background: var(--Active);
}

.list-group > :last-child {
  margin-bottom: 0;
}

.list-group.tight .label.small {
	font-size: var(--fontsize-08);
	padding: var(--measurement-quarter) 0.4rem;
}

.list-group-item.header,
.list-group-item.header:hover {
	color: var(--White);
	background-color: var(--PrimaryLight);
	border-color: 1px solid var(--PrimaryLight);
	font-size: var(--fontsize-2);
	cursor: default;
	text-transform: uppercase;
}

.list-group .listing-header-toggle {
	margin: 0 0 var(--measurement-half) 0;
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-size: var(--fontsize-1);
}

.list-group .listing-header-toggle:hover,
.list-group .listing-header-toggle:focus {
	cursor: pointer;
	text-decoration: underline;
}

.link-group-block {
	margin: 0 0 var(--measurement-1) 0;
}

.link-group-block a {
	display: flex;
	border-top: 1px solid var(--Light);
	border-bottom: none;
	text-align: center;
	padding: var(--measurement-three-quarter) 0;
}

.link-group-block a:last-child {
	border-bottom: 1px solid var(--Light);
}

.link-group-block.icon-circle .badge {
	margin-right: var(--measurement-half);
	top: -1px;
}

.list-group.compact .icon-circle .badge {
	top: 2px;
}

.list-group.compact .list-group-item .icon-circle .icon {
	top: 0px;
}

.list-group-item {
	padding: var(--measurement-1);
	border-bottom: none;
}

.list-group-item-bordered {
	border: 1px solid var(--Light);
	border-radius: var(--measurement-half);
}

.list-group-item-bordered-bottom {
	border-bottom: 1px solid var(--Light);
}

.list-group-plain .list-group-item:first-child {
  border-top: none;
}

.list-group-item .border-box, 
.list-group-item:last-child .border-box {
	border: 1px solid var(--Primary) !important;
	border-bottom: 1px solid var(--Primary) !important;
}

.list-group-item > :last-child {
	margin-bottom: 0;
}

.list-group-item.active {
	color: var(--White);
	background-color: var(--PrimaryLight);
	border-color: 1px solid var(--PrimaryLight);
}

.list-group-item:hover.active, 
.list-group-item:focus.active {
	background-color: var(--PrimaryLight);
}

.list-group-item.disabled, 
.list-group-item.disabled:hover, 
.list-group-item.disabled:focus, 
.list-group-item[disabled], 
.list-group-item[disabled]:hover, 
.list-group-item[disabled]:focus {
	color: var(--MediumGrey);
	cursor: not-allowed;
	background-color: var(--Pale);
	user-select: none;
	pointer-events: none;	
}

.list-group-item.disabled .icon {
	opacity: 0.3 !important;
}

.list-group-item.disabled .label,
.list-group-item.disabled p,
.list-group-item.disabled a,
.list-group-item.disabled badge {
	font-style: italic;
	color: var(--MediumLightGrey);
	cursor: not-allowed;
	opacity: 0.8;
	user-select: none;
	pointer-events: none;
}

.list-group-item.disabled .label {
	background-color: var(--Pale);
}

.list-group-item.disabled .label-tag {
	background-color: var(--White);
	border: 1px solid var(--Light);
}

.list-group-item.disabled .label .icon,
.list-group-item.disabled .badge .icon {
	opacity: 0.4;
}

.list-group-item.disabled .link-group .force-enabled,
.list-group-item.disabled .link-group .force-enabled a,
.list-group-item.disabled .link-group .force-enabled .active,
.list-group-item.disabled .force-enabled .badge .icon  {
	cursor: pointer !important;
	font-style: normal !important;
	color: var(--PrimaryLight) !important;
	opacity: 1 !important;
}

.list-group-item .verbatim {
  background: var(--Quote);
  margin-top: var(--measurement-015);
}

.list-group-item .verbatim .perspective {
  margin-left: var(--measurement-3);
}

/* Standard list setting */
.list-para {
	font-size: var(--fontsize-1);
	font-style: normal;
}

.list-group-item .verbatim .list-para {
	font-family: 'Merriweather', 'Times new Roman', Times, serif;
	font-size: var(--fontsize-1-and-eight);
	font-style: italic;
	margin: 0 var(--measurement-3) var(--measurement-half) var(--measurement-3);
	line-height: 1.8rem;
	color: var(--Primary);
	margin-top: var(--measurement-1);
}

.list-group-item .verbatim .list-para p {
	font-size: 1.075rem;
	display: inline-block;
	color: var(--PrimaryLight);
}

.list-group-item .verbatim .list-para:before {
	content: '\201C';
	font-family: 'Times new Roman', Times, serif;
	font-size: var(--fontsize-9);
	font-style: italic;
	margin: 0 0 0 -1.5rem;
	line-height: var(--measurement-3);
	color: var(--General);
	position: relative;
	right: var(--measurement-quarter);
	top: var(--measurement-three-quarter);
}

.list-group-item .verbatim .list-para:after {
	content: '\201E';
	font-family: 'Times new Roman', Times, serif;
	font-size: var(--fontsize-9);
	font-style: italic;
	margin: 0 0 0 -0.5rem;
	line-height: var(--measurement-half);
	color: var(--General);
	position: relative;
	left: var(--measurement-three-quarter);
	top: -0.65rem;
}

.list-group-flex {
	display: flex;
	flex-direction: row;
	margin-top: var(--measurement-half);
	padding-bottom: var(--measurement-half);
}

.list-group-flex.verbatim {
	margin-top: 0rem;
	padding-bottom: 0;
}

.list-group-item-left {
	flex: 1 1 0;
	width: auto;
	padding: var(--measurement-1);
}

.list-group-item-right {
	width: 36%;
	border-left: 1px solid var(--Light);
	padding: var(--measurement-1) var(--measurement-1) var(--measurement-1) var(--measurement-2);
	overflow: hidden;
}

.verbatim .list-group-item-right {
	background-color: var(--White);
}

.list-group-item-right-wide {
	width: 70%;
}


.list-group-item-right-hide, .list-group-item-right.list-group-item-right-hide {
  width: var(--measurement-8);
  padding: var(--measurement-1) var(--measurement-half);
}

/* Gets added to reorderPanel to hide collasped panel */
.list-group-item-right-hide .togglePanelHide {
	display: none !important;
}


/* Marked as Interviewer */
.list-group-item.interviewer {
	color: var(--MediumGrey);
	background: var(--Pale);
}

.list-group-item.interviewer a,
.list-group-item.interviewer .fetchManageName {
	color: var(--MediumGrey) !important;
}

.list-group-item.interviewer .label.hollow.primary {
  border: 1px solid var(--MediumLighterGreyPlus);
  color: var(--MediumGrey);
}




.list-spinner-state .readDisplayMode,
.list-spinner-state .editDisplayMode {
	opacity: 0.3;
	cursor: not-allowed;
}

.list-spinner-state-msg {
	position: relative;
	z-index: 10001;
	display: inline-block;
	width: 30%;
	border: 1px solid var(--Light);
	text-align: center;
	opacity: 1.0;
	margin: 0 25%;
	background: rgba(255,255,255,0.6);
	padding: var(--measurement-1);
	border-radius: var(--measurement-1);
	top: -50%;
	left: 10%;
}

.listing-title,
.listing-round, 
.listing-hypothesis,
.listing-summary {
	display: inline-block;
	width: 100%;
	border: none;
	margin-bottom: var(--measurement-half);
	font-size: var(--fontsize-09);
	line-height: var(--measurement-2);
}

.listing-title {
	font-size: var(--fontsize-1-and-12);
	color: var(--PrimaryDark);
	margin-bottom: var(--measurement-half);
	font-weight: var(--font-weight-600);
}

.listing-title a {
	color: var(--Primary);
}

.listing-round {
	color: var(--DarkGrey);
	font-size: var(--fontsize-08);
	text-transform: uppercase;
	display: flex;
	background: var(--LighterGrey);
	border-radius: var(--measurement-quarter);
	width: min-content;
}

.listing-round-project {
    color: var(--White);
    background: var(--GeneralLight);
}

.listing-client {
	color: var(--Primary);
	text-transform: uppercase;
	font-weight: 500;
	font-size: var(--fontsize-085);
	line-height: 1.35;
}

.listing-summary {
	color: var(--Grey);
}
													
.footer-list {
	list-style: none;
	margin: 0;
}

.list-note {
	padding: 0 0 0 var(--measurement-3);
	background: url("../icons/note.svg");
	background-size: var(--measurement-2) var(--measurement-2);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

.insights-list li {
	margin: var(--measurement-half) 0 var(--measurement-1) 0;
	line-height: var(--measurement-145);
	border-bottom: 1px solid var(--Light);
	padding-bottom: var(--measurement-1);
}

.insights-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.insights-list.nested {
	list-style-position: outside;
	padding: var(--measurement-half) 0 0 var(--measurement-5);
	border-top: 1px solid var(--Light);
}

.insights-list.nested li {
	margin-left: 0;
	padding: 0 var(--measurement-035);
}

.insights-list.nested li a {
	line-height: var(--measurement-135);
}

/* Styling for question options list */
.option-list {
	list-style: none;
	font-size: var(--fontsize-09);
}

.option-list li {
	padding: var(--measurement-quarter) var(--measurement-half);
	border: none;
	border-bottom: 1px solid var(--MediumLighterGrey);
}

.option-list li:first-child {
	border-top: 1px solid var(--MediumLighterGrey);
}


/* List for research response metrics */
.stats-list {
	list-style-type: none;
	clear: left;
	margin: 0;
	padding: 0;
	text-align: center;
}

.stats-list .stats-list-positive {
	color: var(--Confirm);
}

.stats-list .stats-list-negative {
	color: var(--Error);
}

.stats-list > li {
	display: inline-block;
	margin: 0;
	padding: 0 var(--measurement-1);
	border-right: 1px solid var(--Light);
	text-align: center;
	font-size: 1.375em;
	font-weight: 300;
	color: var(--Info);
	background: var(--alpha);
}

.stats-list > li:last-child {border: none;}

.stats-list > li .stats-list-label {
	display: block;
	margin-top: 2px;
	font-size: var(--fontsize-three-quarter);
	font-weight: 500;
	text-transform: uppercase;
}


@media only screen and (max-width:420px) {
	.stats-list > li {padding: 0 var(--measurement-half);}
}



/* Classes for hiding client filtered listing */
.cell.filterClientHide	{
	display: none;
}


/* +++++++++++++++++++++++ */
/* BAR CHART METRICS */
/* +++++++++++++++++++++++ */

.cell.bar-summary, 
.cell.bar, 
.cell.bar-metric {
  height: var(--measurement-135);
}

.bar-graph {
	list-style: none;
	margin: 0;
}

.bar-graph-horizontal {
	max-width: 100%;
	height: 100%;
	margin-bottom: var(--measurement-three-quarter);
}

.bar-graph .bar {
	display: block;
	padding: 2px;
	position: relative;
	text-align: center;
	background: var(--Pale);
	border: 1px solid var(--Light);
	border-radius: var(--measurement-035);
	overflow: hidden;
	margin-bottom: var(--measurement-1);
}

.bar-graph .bar * {
	min-height: 0.8rem;
	height: 100%;
	margin: 0;
	border-radius: var(--measurement-quarter);
}


/* Large bar */
.bar-graph.large .bar {
  padding: 3px;
  border-radius: var(--measurement-half);
}

.bar-graph.large .bar * {
  min-height: var(--measurement-2);
  border-radius: var(--measurement-035);
}


.bar-graph .bar .bar-positive {
	background: linear-gradient(to right, var(--ConfirmDark),var(--ConfirmLight));
}

.bar-graph .bar .bar-negative {
	background: linear-gradient(to right, var(--Error),var(--Alert));
}

.bar-graph .bar .bar-neutral {
	background: linear-gradient(to right, var(--MediumLightGrey),var(--MediumLighterGreyPlus));
}

.bar-graph .bar-summary,
.bar-graph .bar-summary label {
	color: var(--Primary);
	font-size: var(--fontsize-1);
	margin: var(--measurement-1) 0 var(--measurement-quarter) 0;
}

.bar-graph .bar-summary label {
	display: inline;
	margin: 0;
}

.bar-graph .bar-number {
	color: var(--DarkGrey);
	font-size: var(--fontsize-1-less-eight);
}

.bar-graph [type="file"], 
.bar-graph [type="checkbox"], 
.bar-graph [type="radio"] {
	margin: 0;
}

.cell .bar-graph .bar-metric {
	color: var(--Primary);
	text-align: center;
}

.cell .bar-graph .label-rank {
	color: var(--Primary);
	text-align: center;
	background: var(--Active);
	border-radius: var(--measurement-035);
	width: 6rem;
	display: inline-block;
}

.cell .bar-graph .label-rank-plain {
	color: var(--Default);
	background: transparent;
}

.cell .bar-graph .label-count {
	width: 4rem;
	display: inline-block;
}

.cell .bar-graph .label-action {
	width: 2rem;
	display: inline-block;
}



.cell .bar-graph .bar-metric-blank .label {
	color: var(--Default);
}


.cell .bar-graph .bar-metric-primary {
	color: var(--White);
	background: var(--PrimaryLight);
}

.cell .bar-graph .bar-metric-secondary {
	color: var(--White);
	background: var(--MediumLightGrey);
}

.cell .bar-graph .bar-metric-success {
	color: var(--White);
	background: var(--Success);
}

.cell .bar-graph .bar-metric-warning {
	color: var(--Default);
	background: var(--Warning);
}

.cell .bar-graph .bar-metric-grey {
	color: var(--White);
	background: var(--MediumLightGrey);
}

.cell .bar-graph .bar-metric-verbatim {
	color: var(--White);
	background: var(--Verbatim);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 9. ACCORDIONS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.accordion-header {
	color: var(--White);
	background-color: var(--Primary);
	padding: var(--measurement-2) var(--measurement-1);
}

.accordion-header h1,
.accordion-header h2 {
	color: var(--White);
	font-size: var(--measurement-165);
	text-transform: uppercase;
	line-height: var(--measurement-1);
	padding: 0;
	margin: 0;
}

.accordion-title {
	position: relative;
	display: block;
	padding: var(--measurement-135) var(--measurement-1);
	border-top: 1px solid var(--LightGrey);
	border-top: 1px solid var(--LightGrey);
	border-left: none;
	border-right: none;
	font-size: var(--fontsize-1-and-eight);
	line-height: var(--measurement-1);
	color: var(--Primary);
	text-decoration: none;
}

.accordion-title::before {
	position: absolute;
	top: 50%;
	right: var(--measurement-1);
	margin-top: -0.5rem;
	content: '+';
	font-size: var(--fontsize-2);
}

.accordion-compact {}

.accordion-compact li {
	margin-bottom: 0;
}

.accordion-compact .accordion-title {
	padding: var(--measurement-1) var(--measurement-1) var(--measurement-three-quarter) var(--measurement-1);
}


.accordion-title:hover, 
.accordion-title:focus,
.accordion-title > .accordion-title:hover {
	background-color: var(--Pale);
	text-decoration: none;
}


.accordion-item.is-active,
.accordion-item.is-active:hover,
.accordion-item.is-active:focus,
.accordion .is-active a.accordion-title,
.is-active:focus a.accordion-title,
.accordion .is-active:hover .accordion-title {
	border-left: none;
	border-right: none;
	text-decoration: none;
	background-color: var(--Active) !important;
}

.accordion-item.is-active > .accordion-title {
	border-top: none;
}

.tabs-content .accordion-item.is-active {
	border-left: none;
	border-right: none;
	border-top: 1px solid var(--MediumLighterGrey);
	border-bottom: 1px solid var(--MediumLighterGrey);
}



.accordion-content {
	border: 0;
}

.accordion-read-content .grid-x {
	margin-bottom: var(--measurement-1);
}

 
.toggle-header {
	background-color: var(--PrimaryLight);
	color: var(--White);
	display: block;
	padding: var(--measurement-135) var(--measurement-1);
	border: none;
	font-size: var(--fontsize-1-and-eight);
	line-height: var(--measurement-1);
}

.toggle-header::after {
	content: '+';
	color: var(--White);
	float: right;
}

.toggle-header.is-active::after {
	content: '\2013';
	color: var(--White);
	float: right;
}
    
.toggle-header:hover,
.toggle-header:focus {
	color: var(--White);
	background-color: var(--Primary);
}


.responses-header,
.tabs-content .responses-header,
.tabs-content .is-active .responses-header  {
	background-color: var(--Active);
	color: var(--PrimaryLight);
	display: block;
	padding: var(--measurement-135) var(--measurement-1);
	border: none;
	font-size: var(--fontsize-1-and-eight);
	line-height: var(--measurement-1);
	border-radius: var(--measurement-half);
	margin-bottom: var(--measurement-1);
}

.responses-header.is-active::before {
	content: '\2013';
	color: var(--Primary);
	float: right;
}

.responses-header::before {
	content: '+';
	color: var(--Primary);
	float: right;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 10. FLEXBOX & GRID */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.flex-wrap-row {
	flex-wrap:	wrap;
	flex-direction: row;
}

.display-inline-flex {display:inline-flex !important;}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 11. MENUS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

#responsive-menu .icon {
	top: var(--measurement-04);
	width: 1.75rem;
	height: 1.75rem;
}

.menu-toggle {
  display: none;
}


#topbar-responsive .dropdown-pane.display-profile-menu {
	visibility: visible !important;
	display: block !important;
	top: var(--measurement-10);
	right: 0.1rem;
	min-width: 200px;
	background: var(--White);
}

#topbar-responsive .dropdown-pane.display-profile-menu .profile-link,
#topbar-responsive .profile-dropdown-pane.display-profile-pane {
	visibility: visible !important;
	display: block !important;
}


.dropdown-pane.display-profile-menu {
	visibility: visible !important;
	display: block !important;
	top: var(--measurement-19);
	right: 2rem;
	min-width: 200px;
	background: var(--White);
}

.dropdown-pane.display-profile-menu .profile-link,
.profile-dropdown-pane.display-profile-pane {
	visibility: visible !important;
	display: block !important;
}


.top-bar, .top-bar ul {
  /* background-color: var(--White); */
}

/* Dashboard menu */
.multilevel-accordion-menu a {
  color: var(--Primary);
  background: var(--White);
  box-shadow: none;
  border-bottom: 1px solid var(--Light);
  font-size: var(--fontsize-09);
  padding: var(--measurement-1);
}

.menu .is-active > a,
.menu .active > a {
	background: var(--White);
	color: var(--Primary);
	border-left: var(--measurement-035) solid var(--Verbatim);
	font-weight: bold;
}

/* Reset normal menus with no extra Active border */
.menu-plain .is-active > a,
.menu-plain > a {
	border-left: 0;
	color: var(--White);
	background: var(--PrimaryLight);
}


.menu .is-active a .icon,
.menu .is-active a .menu-label,
.menu .active a .icon,
.menu .active a .menu-label {
	position: relative;
  left: -0.35rem;
}

.menu.small {
	font-size: var(--fontsize-085);
}

.menu.small li {
	border: 1px solid var(--PrimaryLight);
	margin-right: 1px;
	margin-bottom: 1px;
	padding: 0;
}

.menu.small a, .menu.small .button {
	line-height: 1;
	text-decoration: none;
	display: block;
	padding: var(--measurement-half) var(--measurement-three-quarter);
}

.menu a, .menu .button {
	line-height: 1;
	text-decoration: none;
	display: block;
	padding: var(--measurement-three-quarter) var(--measurement-1) var(--measurement-120) var(--measurement-1);
	line-height: var(--measurement-1);
	margin: 0;
}

.menu a.menu-button {
  margin: var(--measurement-1) var(--measurement-half);
  display: block;
  padding: var(--measurement-quarter) var(--measurement-1);
  line-height: 1;
  border: none;
  border-radius: var(--measurement-03);
  height: var(--measurement-7);
}

.menu .menu-button .icon {
  top: 2px;
}

.menu-collapsed .menu .menu-button .icon {
	top: -8px;
	left: -7px;
}

.menu .menu-button .menu-label {
  padding: 0;
  top: -5px;
  position: relative;
}


#mainMenu li {
  margin-bottom: 0;
}

.menu-collapsed #collapseSideMenu {
	display: none;
}

#expandSideMenu {
	display: none;
}

.menu-collapsed #expandSideMenu {
	display: block;
}



.multilevel-accordion-menu .is-accordion-submenu a {
  background: var(--White);
  border-bottom: 1px solid var(--LightGrey);
  color: var(--DarkGrey);
}

.multilevel-accordion-menu .sublevel-1 {
  text-indent: var(--measurement-1);
}

.multilevel-accordion-menu .sublevel-2 {
  text-indent: var(--measurement-5);
}

.multilevel-accordion-menu .sublevel-3 {
  text-indent: var(--measurement-9);
}

.multilevel-accordion-menu .sublevel-4 {
  text-indent: var(--measurement-13);
}

.multilevel-accordion-menu .sublevel-5 {
  text-indent: var(--measurement-17);
}

.multilevel-accordion-menu .sublevel-6 {
  text-indent: var(--measurement-21);
}

.multilevel-accordion-menu .menu > li:not(.menu-text) > a {
  padding: var(--measurement-2) 0;
}

.is-accordion-submenu-parent > a {
  position: relative;
}

.is-accordion-submenu-parent > a::after {
  display: block;
  width: 0;
  height: 0;
  border: solid 6px var(--PrimaryLight);
  content: '';
  border-bottom-width: 0;
  border-right-style: solid;
  border-color: var(--PrimaryLight) transparent transparent;
  position: absolute;
  top: 50%;
  margin-top: 0;
  right: var(--measurement-035);
}

/* Clear chevron when menu is collapsed */
.menu-collapsed .is-accordion-submenu-parent > a::after,
.menu-collapsed .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
  display: none;
  content: ' ';
}

.menu-collapsed .sublevel-1 {
  display: none !important;
}

.menu-collapsed .menu-label {
	height: 1px;
	width: 1px;
	position: absolute !important;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
	clip: rect(0,0,0,0);
	margin: 0;
}


.is-accordion-submenu-parent[aria-expanded='true'] > a::after {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
	border-color: var(--PrimaryLight) transparent transparent;
	border-style: solid;
}

.is-accordion-submenu-parent.collapsed[aria-expanded='true'] > a::after {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
	border-color: var(--PrimaryLight) transparent transparent;
}

.multilevel-accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] > a {
    background: var(--White);
    color: var(--Primary);
}

.is-submenu-item.is-active a {
	background: var(--TestCardBody);
	color: var(--Default);
	border-left: var(--measurement-three-quarter) solid var(--TestCardHeader);
	font-weight: 500;
}


/* Collapse menu icon */
.multilevel-accordion-menu .list-special {
	padding: 0;
	margin: 0;
	border: none;
	line-height: var(--measurement-three-quarter);
	background: var(--White); 
}

.multilevel-accordion-menu .list-special a {
	background: var(--White); 
	color: var(--White);
	font-size: var(--fontsize-1);
	padding: var(--measurement-three-quarter) !important;
	border: none;
	border-bottom: 1px solid var(--Light);
	width: 100%;
	line-height: var(--measurement-1);
	margin: 0;
	display: inline-block !important;
}

.multilevel-accordion-menu .list-special a:hover,
.multilevel-accordion-menu .list-special a:focus {
  background: var(--LighterGrey); 
  color: var(--White);
	cursor: pointer;
}

.icon-menu-listing .list-special .icon {
	top: 3px;
	float: right;
}

.menu-collapsed ,
.menu-collapsed .multilevel-accordion-menu {
	width: 45px !important;
}

.menu-collapsed .multilevel-accordion-menu li.list-special,
.menu-collapsed .multilevel-accordion-menu li.list-special a {
	display: block;
	text-align: center;
}

.menu-collapsed .multilevel-accordion-menu a {
	font-size: var(--fontsize-1);
	padding: var(--measurement-1) var(--measurement-1) var(--measurement-1) var(--measurement-three-quarter);
}


.menu-mini {}

.menu-mini li {
  line-height: 1;
  border: 1px solid var(--Light);
  margin: 0 var(--measurement-02) var(--measurement-quarter) 0;
	padding: 0;
}

.menu-mini a {
  line-height: 1;
  text-decoration: none;
  display: block;
  padding: var(--measurement-half) var(--measurement-065);
  margin: 0;
  font-size: var(--fontsize-three-quarter);
}


.menu-mini a.is-active {
  background: var(--PrimaryLight);
  color: var(--White);
  font-weight: var(--font-weight-700);
}

.menu-mini a:hover,
.menu-mini a:focus {
  background: var(--PrimaryLight);
  color: var(--White);
}

.menu .button.hollow {
  border: none;
  margin: 1px 2px 2px 0;
  border: 1px solid var(--Light);
}


.topbar-responsive .topbar-responsive-logo {
	vertical-align: middle;
}

.topbar-responsive .menu {
	background: transparent;
	font-size: var(--fontsize-09);
}

.top-bar-right .menu.simple {
  background: none;
}

.topbar-responsive .menu li:last-of-type {
	margin-right: 0;
}

.topbar-responsive .menu a {
	color: var(--Pale);
}

.topbar-responsive .menu a:hover {
	color: var(--White);
}

.top-bar .menu .topbar-responsive-button,
.topbar-responsive .menu .topbar-responsive-button {
	color: var(--White);
	border-color: var(--White);
	background: var(--Secondary);
}

.topbar-responsive .menu .topbar-responsive-button:hover,
.topbar-responsive .menu .topbar-responsive-button:focus {
	color: var(--White);
	border: 1px solid var(--White);
	background: var(--SurveyLogoColour);
}

@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 12.  SIZING */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.width-tiny {
	max-width: 60px !important;
}

.width-xsmall {
	max-width: 100px !important;
}

.width-small {
	max-width: 150px !important;
}

.width-medium {
	max-width: 320px !important;
}

.width-large {
	max-width: 400px !important;
}

.width-xlarge {
	max-width: 600px !important;
}


.height-small {height: 4rem;}
.height-medium {height: 8rem;}
.height-large {height: 12rem;}


/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 13.  TABS  */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.tabs {
	margin: 0;
	border:  none;
	background: var(--White);
	list-style-type: none;
}

.tabs-large,
.tabs.tabs-large {
	width: 100%;
	display: flex;
}

.tabs-large .tabs-title {
	flex: 1 1 auto;
	text-align: center;
}

.tabs-center {
	display: flex;
	text-align: center;
	align-content: center;
}

.tabs-large .tabs-title > a {
	display: block;
	padding: var(--measurement-3) var(--measurement-5);
	font-size: var(--fontsize-1);
	line-height: 1;
	color: var(--Primary);
	width: auto;
}


.tabs-group-inline .tabs-title.is-active, 
.tabs-group-inline .tabs-title.is-active:hover, 
.tabs-group-inline .tabs-title.is-active:focus {
  background: var(--White);
  text-decoration: none;
}

.tabs-group-inline > a:focus, 
.tabs-group-inline .tabs-title > a[aria-selected="true"] {
  background: var(--White);
  color: var(--Primary);
  font-weight: bold;
  border-top: 1px solid var(--Success);
  border-bottom: 0.4rem solid var(--Success);
}

.tabs-group-inline .tabs-title > a {
  padding: var(--measurement-2) var(--measurement-3);
  font-size: var(--fontsize-09);
}

.tabs-group-inline .tabs-title > a:hover,
.tabs-group-inline .tabs-title > a:focus {
  text-decoration: none;
}

.tabs-group-inline .tabs-title:hover, 
.tabs-group-inline .tabs-title:focus {
  background: var(--LighterGrey);
  border-top: 1px solid var(--Light);
  border-bottom: var(--measurement-half) solid var(--White);
}

.tabs-group-inline .tabs-title, 
.tabs-group-inline .tabs-title:first-child, 
.tabs-group-inline .tabs-title:last-child {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--LightGrey);
  border-bottom: var(--measurement-half) solid var(--White);
  margin-right: var(--measurement-quarter);
}

.tabs-group-inline .tabs-title {
  background: var(--White);
  color: var(--Primary);
  margin: 0;
  margin-bottom: var(--measurement-1);
}

.tabs-group-inline.expanded {
	display: flex;
	width: 100%;
}

.tabs-group-inline.expanded .tabs-title {
	flex: 1 1 0px;
	text-align: center;
}


.tabs-panel-flush-top {
	padding-top: 0;
	margin-top: 0;
}

.tabs-content {
	border: 1px solid var(--Light);
	background: var(--White);
	color: var(--Default);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.tabs-content-plain,
.tabs-content-plain.is-active,
.tabs-content-plain .tabs-panel,
.tabs-content-plain .tabs-panel.is-active {
	border: none;
}

.tabs-content .is-active {
	border: 1px solid var(--Light);
}

.tabs-content:not(.is-active) {
	border: none;
}

.tabs-content.compact,
.tabs-content.compact label {
	font-size: var(--fontsize-09);
}

.tabs-content.compact .tabs-panel {
	padding: var(--measurement-1);
}

.tabs-content .grid-container.fluid,
.tabs-content.compact .grid-container.fluid {
	padding: 0;
}

.tabs-content.compact .bar,
.tabs-content.compact .bar-summary,
.tabs-content.compact .bar-metric {
	margin: 0;
}

.tabs-content.compact .bar {margin-right: 0.15rem;}



/* Non padded TABS */
.tabs-content.tab-content-reset {
	border: none;
	padding: 0;
}

.tabs-content.tab-content-reset .is-active {
	border: none;
}

.tab-content-reset .tabs-panel {
  padding: 0;
}

/* Observation READER VIEW */
.tabs-panel .tab-content-reader {
	margin: 0 0 var(--measurement-1) 0;
	padding: 0 var(--measurement-half);
}

/* Observation READER VIEW verbatim */
.tabs-panel .tab-content-reader.verbatim,
.tabs-panel .tab-content-reader .verbatim {
	font-family: 'Merriweather', 'Times new Roman', Times, serif;
	font-size: var(--fontsize-1-and-12);
	font-style: italic;
	line-height: var(--measurement-4);
	color: var(--Primary);
}


.tabs-panel .tab-content-reader .verbatim:before,
.tabs-panel .tab-content-reader.verbatim:before,
.tabs-panel .tab-content-reader .verbatim:after,
.tabs-panel .tab-content-reader.verbatim:after {
	font-family: 'Times new Roman', Times, serif;
	font-size: var(--fontsize-3);
	font-style: italic;
	color: var(--General);
}


.tabs-panel .tab-content-reader .verbatim:before,
.tabs-panel .tab-content-reader.verbatim:before {
	content: '\201C';
	margin-right: var(--measurement-quarter);
	margin-left: -0.25rem;
}

.tabs-panel .tab-content-reader .verbatim:after,
.tabs-panel .tab-content-reader.verbatim:after {
	content: '\201E';
	position: relative;
	top: -1rem;
	margin-left: var(--measurement-quarter);
}

.tab-content-flex {
  display: flex;
  flex-direction: row;
}

.tab-content-left {
  flex: 1 1 0;
  width: auto;
  padding: var(--measurement-1);
}

.tab-content-right {
	width: 36%;
	border-left: 1px solid var(--Light);
	padding: var(--measurement-1);
}


.tabs-title > a {
	display: block;
	padding: var(--measurement-1) var(--measurement-3);
	font-size: var(--fontsize-three-quarter);
	line-height: 1;
	color: var(--Primary);
}

.tabs-title {
	border: 1px solid var(--Light);
	border-left: 0;
	margin-bottom: -1px;
}

.tabs-title.is-active a {
	background: var(--Secondary);
	color: var(--White);
	font-weight: bold;
}

.tabs-title:first-child {
	border-left: 1px solid var(--Light);
	border-top: 1px solid var(--Light);
}

.tabs-title:last-child {
	border-left: none;
}



#nav-tabs .tabs-title {
	border-top: 0;
}

#nav-tabs .tabs-title:first-child {
	border-top: 1px solid var(--Light);
}


/* Inline page section naigation */
.nav-tabs .tabs-title > a:focus, 
.nav-tabs .tabs-title > a[aria-selected="true"] {
	background: var(--Active);
	color: var(--PrimaryDark);
	font-weight: bold;
	text-decoration: none;
}

/* Inline page section naigation */
.nav-tabs .tabs-title > a:hover, 
.nav-tabs .tabs-title > a:hover[aria-selected="true"] {
	text-decoration: none;
}

.tabs-title > a:focus, 
.tabs-title > a[aria-selected="true"] {
	background: var(--Secondary);
	color: var(--White);
	font-weight: bold;
}

.tabs-title > a:hover {
	background: var(--LighterGrey);
	color: var(--PrimaryDark);
	cursor: pointer;
}

.tabs-title.tabs-title-plain a {
	background: var(--White) !important;
}


/* Canvas Tabs */

.tab-green a,
.tab-orange a,
.tab-red a {
	background: var(--LightGrey);
	color: var(--Grey);
	text-decoration: none;
}

.tab-green a:hover, 
.tab-green a:focus,
.tab-orange a:hover, 
.tab-orange a:focus,
.tab-red a:hover, 
.tab-red a:focus {
	text-decoration: underline;
}


.is-active .tab-green a,
.tab-green > a[aria-selected="true"] {
	background: var(--CanvasGreen);
	color: var(--White);
}

.is-active .tab-orange a,
.tab-orange > a[aria-selected="true"] {
	background: var(--CanvasOrange);
	color: var(--White);
}

.is-active .tab-red a,
.tab-red > a[aria-selected="true"] {
	background: var(--CanvasRed);
	color: var(--White);
}


.tab-green,
.tab-orange,
.tab-red {
	border: 1px solid var(--White);
}

.tab-red {
	border-right: 1px solid var(--Light);
}

.tab-green a,
.tab-orange a,
.tab-red a {
	font-size: var(--fontsize-1);
	font-weight: 400;
	border: none;
	padding: var(--measurement-3) var(--measurement-1);
	line-height: 1.25;
}

.tab-green.is-active a,
.tab-orange.is-active a,
.tab-red.is-active a {
	border-bottom: var(--measurement-035) solid var(--DarkerGrey);
	font-weight: 600;
}


/* Fullscreen KS Canvas */
/* ++++++++++++++++++++++ */

.fullscreen .tab-green, 
.fullscreen .tab-orange, 
.fullscreen .tab-red {
	font-size: var(--fontsize-1-and-eight);
	font-weight: 700;
	border: none;
	padding: var(--measurement-1);
	line-height: 1.25;
	color: var(--White);
}

.fullscreen .tab-green h3,
.fullscreen .tab-orange h3,
.fullscreen .tab-red h3 {
	font-size: var(--fontsize-3);
	font-weight: 700;
	line-height: 1.5;
	color: var(--White);
	margin: 0;
}

.fullscreen .tab-green {
	background: var(--CanvasGreen);
}

.fullscreen .tab-orange {
	background: var(--CanvasOrange);
}

.fullscreen .tab-red {
	background: var(--CanvasRed);
}

/* ++++++++++++++++++++++ */

.vertical .tabs-title,
.vertical .tabs-title:first-child {
	border-left: none;
	border-right: none;
	text-transform: uppercase;
	font-size: var(--fontsize-085);
}

.vertical .tabs-title a {
  font-size: var(--fontsize-1-less-sixth);
  line-height: var(--measurement-3);
}

.subMenu .tabs-title > a, 
.subMenu .tabs-title > a[aria-selected="false"] {
	background: var(--White);
	color: var(--PrimaryDark);
	font-weight: normal;
}

.subMenu .tabs-title > a:focus, 
.subMenu .tabs-title > a[aria-selected="true"] {
	background: var(--Pale);
	color: var(--PrimaryDark);
	font-weight: bold;
}

.subMenu .sub-title.is-active a:after {
	display: inline-block;
	width: 0;
	height: var(--measurement-4);
	border: solid 6px var(--PrimaryLight);
	content: '';
	border-bottom-width: 0;
	border-right-style: solid;
	border-color: var(--PrimaryLight) transparent transparent;
	position: absolute;
	right: var(--measurement-1);
	transform: rotate(-90deg);
}

.tabs.collapsed {
	margin: 0 var(--measurement-5) 0 0;	
}

.vertical.collapsed .tabs-title a,
.vertical.collapsed .tabs-title, .vertical.collapsed .tabs-title:first-child {
	font-size: var(--fontsize-1-less-sixth);
	line-height: var(--measurement-3);
}

.vertical.collapsed .tabs-title a {
	display: block;
	padding: var(--measurement-1) 0;
	color: var(--Primary);
}

/* Nested side menu */
.nested.subMenu {
	margin: 0;
	padding: 0;
}

.nested.subMenu li {
	border-bottom: 1px solid var(--Light);
}

.nested.subMenu li:first-child {
	border-top: 1px solid var(--Light);
}

.nested.subMenu li a:hover,
.nested.subMenu li a:focus {
	background: var(--LighterGrey);
}

.nested.subMenu li a {
	padding-left: var(--measurement-5);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 14. ACCORDIANS  */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.accordion-content {
	color: var(--Default);
}

.tab-content-header {}

.tab-content-reveal {
	display: none;
}

.tab-item.is-active, 
.tab-item.is-active:hover, 
.tab-item.is-active:focus, 
.is-tab > .accordion-title {
  text-decoration: none;
  background-color: var(--LighterGrey);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 15. CARDS  */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.card {
	margin-bottom: var(--measurement-1);
	border: 1px solid var(--Light);
	background: var(--White);
	color: var(--Default);
}

.card.disabled, .card.disabled:hover, .card.disabled:focus, 
.card[disabled], .card[disabled]:hover, .card[disabled]:focus {
	color: var(--MediumLighterGrey);
	cursor: not-allowed;
	background-color: var(--Pale);
}

.card.disabled a, .card.disabled a:hover, .card.disabled a:focus, 
.card[disabled] a, .card[disabled] a:hover, .card[disabled] a:focus,
.card.disabled a.text-underline,
.card.disabled p {
	color: var(--MediumLighterGrey);
	cursor: not-allowed;
	text-decoration: none !important;
	user-select: none;
	pointer-events: none;
}

.card.disabled .icon {
	opacity: 0.3;
}

.card-body {
	width: 100%;
}

.card-footer {
	width: 100%;
}

.comment-card {
	display: inline-block;
	margin-top: var(--measurement-1);
	margin-bottom: var(--measurement-1);
	border-radius: var(--measurement-half);
	padding: var(--measurement-half) var(--measurement-three-quarter);
}


.cell.cell-list {
	flex: 0 1 50%;
	margin: 0 0 var(--measurement-3) 0;
}

.cell.cell-left,
.cell.cell-right {
	flex: 1 1 40%;
	padding: var(--measurement-1);
}

.card.listing-card {
  border-radius: var(--measurement-half);
  height: 100%;
}

.listing-card .card-header {
	background: var(--LighterGrey);
	color: var(--Primary);
	margin-bottom: var(--measurement-2);
	font-size: var(--fontsize-2);
	padding: var(--measurement-1);
	height: auto;
	border-bottom: 1px solid var(--Light);
}


.activity-card.disabled .card-header,
.activity-progress.disabled .card-header,
.activity-complete.disabled .card-header,
.card.disabled .card-header {
	background: var(--LighterGrey) !important;
	color: var(--MediumLighterGrey) !important;
	border-top-color: var(--Light) !important;
}
    
.card.disabled .label.grey,
.card.disabled .label.project,
.card.disabled .label.confirm,
.card.disabled .label.success,
.card.disabled .label.survey,
.card.disabled .label.default,
.card.disabled .label.warning,
.card.disabled .label.primary,
.card.disabled .label.secondary,
.card.disabled .label.alert {
	background: var(--LighterGrey);
	color: var(--MediumLighterGrey);
}

.card-divider {
	padding: var(--measurement-half) var(--measurement-1);
	background: var(--LightGrey);
	color: var(--DarkGrey);
}

.border-left-callout {
	border: 1px solid var(--Light);
	border-left: 3px solid var(--SecondaryLight) !important;
}

.todo-list-card {
	border-radius: 0 0 0.875rem 0;
}

.todo-list-card-encapsulated li {
	background-color: var(--Pale);
	margin: var(--measurement-quarter) 0;
	border: none !important;
	padding: var(--measurement-1) var(--measurement-three-quarter) var(--measurement-quarter) !important;
}

.todo-list-card .card-divider {
	background-color: var(--Secondary);
	color: var(--White);
}

.card-header {
	padding: 0;
	margin: 0;
	background: var(--Pale);
	border: none;
	height: 50px;
	overflow: hidden;
	line-height: 1;
	margin-bottom: var(--measurement-1);
}

.card-header .header {
	padding: var(--measurement-half) var(--measurement-1);
	background: var(--Pale);
	margin: 0;
	position: relative;
	top: -8px;
	font-family: "Open Sans",  "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: 300;
	font-size: var(--measurement-135);
}


/* Diary study Post cards */
.post-card,
.card.post-card {
	background: var(--White);
	padding: var(--measurement-1);
	border: none;
	margin-bottom: 0;
}

.post-card:last-child,
.card.post-card:last-child {
	margin-bottom: var(--measurement-5);
}

.post-card .selection-array-header {
	background: var(--PrimaryLight);
	color: var(--White);
	font-size: var(--fontsize-2);
}

.post-card .previous-btn, 
.post-card .next-btn {
	background: var(--White);
	padding: var(--measurement-quarter) 0;
}

.post-card .previous-btn {
	border-right: var(--measurement-quarter) solid var(--LighterGrey);
}

.post-card .next-btn {
	border-left: var(--measurement-quarter) solid var(--LighterGrey);
}

.post-card .toggle-post {
	font-size: var(--fontsize-1);
	padding: 0.3rem 0.4rem;
	line-height: 1;
	margin-top: var(--measurement-quarter);
}

.post-card .card-header {
	background: transparent;
	height: var(--measurement-6);
}

.post-card .card-body {
	background: var(--White);
	padding: var(--measurement-1);
	margin-bottom: var(--measurement-1);
	border-radius: var(--measurement-half);
	box-shadow: 0 0 6px var(--MediumLighterGreyPlus);
}

/* Toggle class for collapsing .post-body */
.post-rollup {
	height: 3.15rem;
	overflow: hidden;
} 

.post-header.is-active {
	border: none;
}


/* Linked Activity cards */
.activity-card {
	box-shadow: 0 3px 4px -1px var(--Light);
	width: 45%;
	margin-left: var(--measurement-1);
	flex: 0 1 auto;
	border-bottom-left-radius: var(--measurement-half);
	border-bottom-right-radius: var(--measurement-half);
}

.activity-card-wide {
	width: 100%;
	margin: 0;
}

.activity-card .card-header {
	padding: 0.65rem var(--measurement-1);
	margin: 0;
	background: var(--Success);
	color: var(--White);
	border: none;
	height: var(--measurement-8);
	overflow: hidden;
	line-height: 1;
	margin-bottom: var(--measurement-half);
	font-size: var(--fontsize-1-and-eight);
}

.activity-card .card-header a {
  color: var(--White);
}

.activity-card.activity-progress .card-header {
	background: var(--NoteLight);
	border-top-color: var(--Confirm);
}

.activity-card.activity-completed .card-header {
	background: var(--TestCardBody);
  border-top-color: var(--PrimaryLight);
}

.activity-card.activity-progress .card-header a,
.activity-card.activity-completed a {
  color: var(--PrimaryDark);
}

.activity-card .card-body {
	padding: var(--measurement-half) var(--measurement-1);
	height: 10rem;
	overflow: clip;
}

.activity-card .card-body-auto {
	height: auto;
	padding: 0;
}

.activity-card .card-body p {
	line-height: 1.5;
	margin-bottom: var(--measurement-half);
}

.activity-card .card-body .label,
.activity-card .card-body label {
	line-height: 1.5;
}

.activity-card .card-body .label-group {
	margin: var(--measurement-1) 0 var(--measurement-half) 0;
}

.activity-card .card-body .label-group .label-tag {}

.activity-card .card-footer {
	padding: var(--measurement-1);
	border-top: 1px solid var(--MediumLighterGreyPlus);
}

.card-group {
	margin-top: var(--measurement-1);
	flex-wrap: nowrap;
}

.card-group .card {
	border: 1px dashed var(--PrimaryLight);
	border-radius: var(--measurement-1);
	margin-right: var(--measurement-1);
	font-size: var(--fontsize-1);
	padding: var(--measurement-035) 0;
	text-align: center;
}

.card-group .card:last-child {margin-right: 0;}

.card-icon .icon,
.card .card-icon .icon {
	width: var(--measurement-5);
	height: var(--measurement-3);
	top: 1px;
}

.card-group .card p {
	margin: var(--measurement-half) 0 0 0;
}

.media-list .card {
	padding: var(--measurement-1);
	border: none;
	border-radius: var(--measurement-half);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0px 0px 6px var(--MediumLighterGreyPlus);
	margin-bottom: var(--measurement-4);
	flex: 1 1 44%;
}

.media-list .card:last-child {
	flex: 0 1 48.375%;
}

.media-list .card .media {
	flex-basis: auto;
	flex-grow: 1;
	height: var(--measurement-9);
}

.media-list-auto .card .media {
	flex-basis: auto;
	flex-grow: 1;
	height: auto;
}

/* 
.media-list-auto .card {
	padding: var(--measurement-three-quarter);
}
 */


.media-list .list-group-item {
  border-bottom: 1px solid var(--Light);
}

.media-list .list-group-item:first-child {
  border-top: 1px solid var(--Light);
}

.media-icon,
.media-menu {
	width: var(--measurement-9);
	display: flex;
	align-items: center;
}

.media-menu-list {
	margin: 0;
	padding: var(--measurement-half);
}

.media-menu-list ul {
	margin: 0;
	padding: 0;
}

.media-menu-list li {
	border-bottom: 1px solid var(--Light);
	padding: 0;
}

.media-menu-list li:first-child {
	border-top: 1px solid var(--Light);
}

.media-menu-list li > a {
	padding: var(--measurement-three-quarter) var(--measurement-quarter);
	line-height: 1;
	display: block;
}

.media-menu-list li > a:hover{
	cursor: pointer;
	background: var(--Active);
}

.media-menu-buttons {
	display: none;
}

.media-menu .button {
	padding: var(--measurement-half) var(--measurement-1);
	margin: 0;
	line-height: 1;
}														

.media-file,
.media-date,
.media-details {
	width: 40%;
	display: flex;
	align-items: center;
}

.media .file-size ,
.media-date {
	color: var(--MediumGrey);
	font-style: italic;
	font-size: var(--fontsize-09);
}

.media.media-details {
	color: var(--Default);
	font-style: normal;
	font-size: var(--fontsize-1);
}								

.media-settings .media-file, 
.media-settings .media-date {
  width: 15%;
  max-width: 15%;
}

.media-settings .media-details {width: 60%;}

.media-settings .colour-chip-group {
  height: auto;
  margin-right: var(--measurement-half);
  border: 1px solid var(--MediumLighterGreyPlus);
  display: inline-block;
  padding: var(--measurement-035);
  border-radius: var(--measurement-quarter);
}

.card-title {
	color: var(--DarkerGrey);
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto;
	font-size: var(--fontsize-3);
	font-weight: 600;
}

.card-intro {
	font-size: var(--fontsize-1-and-eight);
	line-height: 1.8rem;
}

.card-section-title {
	color: var(--Primary);
	font-weight: 600;
	font-size: var(--fontsize-3);
	text-align: center;
	border-bottom: 1px solid var(--MediumLighterGreyPlus);
	padding: var(--measurement-1);
	margin-bottom: var(--measurement-5);
}

.card-breadcrumb {
	text-transform: uppercase;
	color: var(--Default);
	font-weight: 400;
	font-size: var(--fontsize-09);
	padding: var(--measurement-035) var(--measurement-half);
	background: var(--Pale);
	border-radius: var(--measurement-quarter);
	display: table;
	margin-bottom: var(--measurement-1);
}

.card-ui {
	text-align: center;
	margin: 0 auto;
	padding-top: var(--measurement-3);
	margin-top: var(--measurement-1);
}

.card-ui-spaced .button {
  margin: 0 var(--measurement-half);
}

.fixed-item {
	position: fixed;
	width: inherit;
}


/* TEST CARDS */
.test-card {
	background: var(--White);
	max-width: 75%;
	border: 1px solid var(--Light);
	border-radius: var(--measurement-3);
}

.test-card-header h3 {
	background: var(--GeneralLight);
	color: var(--White);
	text-transform: uppercase;
	border-radius: var(--measurement-1) var(--measurement-quarter);
	padding: 0.65rem var(--measurement-2);
	margin-top: var(--measurement-half);
}

.test-card .card-divider {
	background: transparent;
	padding: var(--measurement-1) var(--measurement-5);
}

.test-card-header * {
	color: var(--White);
	font-weight: 600;
}

.test-card .h5 {
	color: var(--Primary);
	font-size: var(--fontsize-1-and-eight);
	margin-top: var(--measurement-three-quarter);
}

.test-card-content {
	background: var(--Pale);
	padding: var(--measurement-three-quarter) 0.85rem;
	border-radius: var(--measurement-half);
}

/* INSIGHT CARDS */
.post-card.selection-array {
	height: auto;
	margin-bottom: 0;
}

.post-card .selection-array-header {
	padding: var(--measurement-035) var(--measurement-1);
	width: 100%;
	height: auto;
}

.post-card .selection-array-btn {
	flex-basis: 50%;
	width: 50%;
	height: auto;
	margin: 0;
}

.post-card .selection-array-btn .previous-btn, 
.post-card .selection-array-btn .next-btn {
	border: none;
	padding: 0;
	border: 1px solid var(--Light);
	height: auto;
	line-height: 1;
	margin: 0;
	width: 100%;
}

.post-card .selection-array-btn .icon-lg, 
.post-card .selection-array-btn .icon.icon-lg, 
.post-card .selection-array-btn .label .icon.icon-lg, 
.post-card .selection-array-btn .component-button {
	width: var(--measurement-5);
}

.post-card .card-header label,
.post-card .card-header .label {
	margin-top: var(--measurement-quarter);
}

.post-question-number {
	color: var(--PrimaryLight);
	font-weight: 500;
	text-transform: uppercase;
	margin-right: var(--measurement-half);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */







/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 16.  COMPONENTS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* Parent DIV */
.component-container {
	border: none;
	padding: 0;
	display: block;
	width: 100%;
	margin: 0;
}

.component-content {}

.component-panel {}

.component-array.component-array-small {}


.component-area {
	border: none;
	padding: 0;
	border-bottom: none;
	border-top: 1px solid var(--Light);
}

.component-area:last-child {
	border-bottom: 1px solid var(--Light);
}

.component-header {
	width: 100%;
	display: flex;
	align-items: flex-start;
	border-top: none;
}

.component-options .component-header {
	background: var(--Pale);
	padding: var(--measurement-three-quarter);
}

.component-header.is-active,
.tabs-content .component-header.is-active {
	border: none;
	border-bottom: 1px solid var(--Light);
	background: var(--PrimaryLightBgnd);
}

.component-title {
	display: flex;
	flex-grow: 1;
	font-size: var(--fontsize-1-and-eight);
}

.component-title.highlight {
  background: var(--PrimaryLightBgnd);
}

.component-title a {
	width: 100%;
	text-align: left;
	color: var(--Primary);
	font-weight: 400;
	line-height: var(--measurement-3);
	padding: var(--measurement-135);
	display: inline-block;
}

.component-title a:hover,
.component-title a:focus {
	background: var(--LighterGrey);
	cursor: pointer;
}

.component-title-indicator {
	font-weight: 500;
}

.component-action {
	color: var(--General);
	height: auto;
	display: flex;
	flex-basis: content;
	flex-grow: 0;
	float: right;
}

.component-action-first,
.component-action-last {
	margin: 0;
	border-right: 1px solid var(--LightGrey);
	height: 100%;
	font-size: var(--fontsize-2);
	padding: var(--measurement-1-and-eight);
}

.component-action-first {
	border: none;
	padding-left: 0;
	border-right: 1px solid var(--LightGrey);
}

.component-action-last {
	border: none;
	padding-right: 0;
}

.component-mover {
	margin: 0 auto;
	z-index: 2000;
	flex-basis: content;
}

.component-mover .button-mover {
	color: var(--DarkGrey);
	font-size: var(--fontsize-085);
	width: 24px;
	height: 24px;
	border: 1px solid var(--MediumLightGrey);
	border-radius: var(--measurement-quarter);
	padding: 0;
	margin: 0;
	background: var(--Pale);
	line-height: 1;
}

.component-mover .button-mover .icon {
	position: relative;
	top: 2px;
}


.component-mover .button-mover:hover,
.component-mover .button-mover:focus {
	background: var(--PrimaryLight);
	border: 1px solid var(--Primary);
	color: var(--White);
	cursor: pointer;
}

.component-mover .button-mover:hover .icon-arrow-down-black,
.component-mover .button-mover:focus .icon-arrow-down-black {
	background: url("../icons/arrow-down-white.svg") no-repeat center center;
}

.component-mover .button-mover:hover .icon-arrow-up-black,
.component-mover .button-mover:focus .icon-arrow-up-black {
	background: url("../icons/arrow-up-white.svg") no-repeat center center;
}

.component-mover a.button.disabled,
.component-mover a:hover.button.disabled {
	opacity: 0.65;
	cursor: not-allowed;
	background-color: var(--Pale);
	border: 1px solid var(--Light);
	color: var(--MediumGrey);
	user-select: none;
	pointer-events: none;
}




/* Option LIST inline mover */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

.option-mover-inline {
  display: inline-block;
  margin: 0 var(--measurement-1) 0 0;
  border-right: 1px solid var(--MediumLighterGrey);
  padding: 0 var(--measurement-1) 0 0;
}

.option-item {
	border: none;
	padding: 0;
	border-bottom: none;
	border-top: 1px solid var(--Light);
}

.option-item:last-child {
	border-bottom: 1px solid var(--Light);
}

.option-mover-inline .button-mover {
  color: var(--DarkGrey);
  font-size: var(--fontsize-08);
  width: 18px;
  height: 18px;
  border: 1px solid var(--MediumLightGrey);
  border-radius: var(--measurement-quarter);
  padding: 0;
  margin: 0;
  background: var(--White);
  line-height: 0.8rem;
}

.option-question-list li {
  padding: 0;
  margin: 0;
}

.option-list .option-title {
  display: inline-block;
  font-size: var(--fontsize-1);
  margin: 0;
  padding: var(--measurement-quarter) var(--measurement-half);
  width: 100%;
  height: auto;
}

.option-list .option-title a {
  width: auto;
  padding: 0;
  font-size: var(--fontsize-09);
}

.option-mover-inline .button-mover:first-child {
	margin-right: var(--measurement-half);
}

.option-title.highlight {
  background: var(--PrimaryLightBgnd);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */



.component-body {
	width: 100%;
	text-align: left;
	display: inline-block;
	padding: var(--measurement-1);
}

.component-body label {
    color: var(--Primary);
}

.component-button {
	width: var(--measurement-8);
	border-radius: 0;
	margin: 0 2px 2px 0;
	border: none;
	padding: var(--measurement-035);
	font-size: var(--fontsize-08);
	line-height: var(--measurement-1);
	overflow: hidden;
	background: var(--Pale);
	color: var(--Primary);
	border: 1px solid var(--Light);
}

.component-button-small {
	width: 1.75rem;
	height: 1.75rem;
	padding: var(--measurement-02);
}

.component-button-lg {
	width: 2.75rem;
	height: 2.75rem;
}

button, .component-button:hover {
	cursor: pointer;
}

.component-button-labelled {
	min-width: var(--measurement-21);
	width: auto;
}

.component-button-labelled-small {
	min-width: 3.5rem;
	width: auto;
}


.component-button.component-button-medium {
	width: var(--measurement-9);
	height: var(--measurement-6);
	font-size: var(--fontsize-2);
}

.component-button.component-button-large {
	width: var(--measurement-10);
	height: var(--measurement-7);
	font-size: var(--fontsize-3);
}

.component-button.is-active {
	color: var(--White);
	background: var(--PrimaryLight);
	border: 1px solid var(--PrimaryLight);
}

.component-button .icon {
	display: block;
	width: 100%;
	top: 0;
}

.component-button:hover,
.component-button:focus {
	cursor: pointer;
	border: 1px solid var(--PrimaryLight);
}


/* Component list for adding multi-choice/multi-option questions  */
.component-list {
	width: 100%;
	line-height: 1;
	-webkit-user-select: none;
		 -moz-user-select: none;
			-ms-user-select: none;
					user-select: none;
}

.component-list-array {
	border: none;
}

.component-list a {
	width: 100%;
	padding-top: var(--measurement-1);
	padding-bottom: var(--measurement-1);
	color: var(--PrimaryLight);
}

.component-list ul {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 0;
}

.component-list ul li {
	height: auto;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
		       justify-content: space-between;
		        -ms-flex-pack: justify;
	-webkit-align-items: center;
			-ms-flex-align: center;
				align-items: center;
}

.component-list li {
	position: relative;
	padding: var(--measurement-half) var(--measurement-2);
	background: var(--Pale);
	border-bottom: 1px solid var(--Light);
}

.component-list li:first-child {
	border-top: none;
}

.component-list li input, 
.component-list li select {
	margin: 0;
}

.component-list li label {
	color: var(--Primary);
	font-size: var(--fontsize-085);
	letter-spacing: 0;
	margin: 0;
}

.component-list li > a,
.component-list li > span,
.component-list li > label {
	margin-bottom: 0;
}


/* STAR RATING CLASSES */
.rating-block {
  padding: 2px 5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.rating-block .ratings-type {
  margin-right: var(--measurement-1);
  margin-bottom: 0;
}

.rating-block .rating-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--measurement-5);
}

.rating-block .rating-block-rating {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.rating-block .star {
  cursor: pointer;
  stroke: var(--PrimaryLight);
}

.rating-block .rating-block-rating .star.selected polygon {
  fill: var(--PrimaryLight);
}

.rating-block .rating-block-rating.is-voted .star polygon {
  fill: var(--PrimaryLight);
}

.rating-block .rating-block-rating.is-voted .star.selected ~ .star polygon {
  fill: transparent;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 17.  DATEPICKER (Air Datepicker) */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.datepickers-container .datepicker {
	background: var(--White);
	border: 1px solid var(--Light);
	box-shadow: 0 4px 0.8rem var(--MediumLighterGrey);
	border-radius: 0.275rem;
	box-sizing: content-box;
	font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	font-size: var(--fontsize-09);
	color: var(--DarkGrey);
	width: 280px;
	position: absolute;
	left: -100000px;
	opacity: 0;
	transition: opacity .3s ease,left 0s .3s,-webkit-transform .3s ease;
	transition: opacity .3s ease,transform .3s ease,left 0s .3s;
	transition: opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease;
	z-index: 100;
}

.datepickers-container .datepicker--content {
	box-sizing: content-box;
	padding: var(--measurement-035);
}

.datepickers-container .datepicker--cell {
	height: var(--measurement-5);
	border-radius: 0;
}

.datepickers-container .datepicker--cell.-current- {
	color: var(--Default);
	background: var(--LightGrey);
}

.datepickers-container .datepicker--cell.-focus- {
	background: var(--LightGrey);
}

.datepickers-container .datepicker--cell.-disabled- {
	cursor: default;
	color: var(--MediumLightGrey);
}

.datepickers-container .datepicker--cell.-disabled-.-focus- {
	color: var(--MediumLightGrey);
}

.datepickers-container .datepicker--cell.-disabled-.-in-range- {
	color: var(--MediumLightGrey);
}

.datepickers-container .datepicker--cell.-disabled-.-current-.-focus- {
	color: var(--MediumLightGrey);
}

.datepickers-container .datepicker--cell-day.-other-month-,
.datepickers-container .datepicker--cell-year.-other-decade- {
	color: var(--MediumLighterGrey);
}

.datepickers-container .datepicker--cell.-selected-,
.datepickers-container .datepicker--cell.-selected-.-current- {
	color: var(--White);
  background: var(--Light);
}

.datepickers-container .datepicker--day-name {
	color: var(--GeneralDark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	text-align: center;
	text-transform: uppercase;
	font-size: var(--fontsize-09);
}

.datepickers-container .datepicker--nav-action path {
	fill: none;
	stroke: var(--PrimaryLight);
	stroke-width: 2px;
}

.datepickers-container .datepicker--nav-title {
	border-radius: 4px;
	padding: 0 8px;
	text-transform: uppercase;
	color: var(--PrimaryLight);
}

.datepickers-container .datepicker--nav-title i {
	font-style: normal;
	color: var(--PrimaryLight);
	margin-left: 5px;
	font-weight: 500;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 18. WIDGETS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* http://t1m0n.name/air-datepicker/docs/ */

.widget-wrapper {
  background: var(--White);
	border: 1px solid var(--Light);
  overflow: hidden;
  padding: 5px 10px;
}

.widget-wrapper-tight {
	height: 190px;
}

.widget-wrapper-compact {
	height: 300px;
}

.widget-wrapper-medium {
	height: 400px;
}

.widget-wrapper-large {
	height: 800px;
}



/* Modals */
.reveal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10001;
	display: none;
	background-color: rgba(10, 10, 10, 0.65);
	overflow-y: auto;
}

.reveal {
	z-index: 10001;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: none;
	padding: var(--measurement-3);
	border: var(--measurement-035) solid var(--Light);
	border-radius: var(--measurement-half);
	background-color: var(--White);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	overflow-y: auto;
	box-shadow: 0 0 var(--measurement-08) var(--MediumLighterGrey);
}

.reveal.print {
  width: 60%;
  max-width: 1024px;
}

.reveal.medium {
  width: 70%;
  max-width: 70%;
}


.reveal.large {
	width: 90%;
	max-width: 90%;
}

.reveal.tall {
	height: 85%;
}

.reveal.full {
	border: var(--measurement-1) solid var(--White);
	padding: var(--measurement-half);
}

.reveal.full.auto {
	height: auto;
}

.reveal-bordered,
.reveal.reveal-bordered {
	border: var(--measurement-1) solid var(--Light);
	padding: var(--measurement-1);
}

.reveal h1, 
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
	line-height: var(--measurement-5);
	margin-bottom: var(--measurement-1);
	font-family: 'Roboto Slab';
	font-weight: 400;
}

.reveal .lead {
  font-size: 135%;
  line-height: 1.7;
  color: var(--Primary);
}

.reveal.preview-modal {}

.frame {
  border: 1px solid var(--Light);
  padding: var(--measurement-2);
  /* margin: var(--measurement-1); */
  margin: 0;
}


/* Popups */

.dropdown-pane {
	position: absolute;
	z-index: 100;
	display: none;
	width: 150px;
	padding: var(--measurement-1);
	visibility: hidden;
	border: none;
	border-radius: var(--measurement-half);
	background-color: var(--White);
	font-size: var(--fontsize-1);
	border: 1px solid var(--Light);
	box-shadow: 0px 0px 5px var(--MediumLighterGreyPlus);
	margin: 0;
	padding: 0;
}

.dropdown-pane::before {
	position: absolute;
	display: block;
	content: "";
	border-color: transparent;
	border-bottom-color: transparent;
	border-bottom-color: transparent;
	border-style: solid;
	top: 1px;
	right: var(--measurement-2);
	border-bottom-color: var(--MediumLighterGreyPlus);
	position: absolute;
	display: block;
	width: var(--measurement-1);
	height: var(--measurement-1);
	margin: 0;
	top: calc((1rem + 1px) * -1);
	border-width: 0 var(--measurement-half) var(--measurement-half) var(--measurement-half);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 19. RESEARCH DETAILS SUMMARY */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* Research details & summary panel */
.summary-panel {
	border: 1px solid var(--Light);
	margin: 0 0 var(--measurement-1) 0; 
	padding: var(--measurement-2);
	background: var(--White);
}

.summary-panel-slim {
	padding: var(--measurement-035) var(--measurement-1);
}

.summary-panel-slim .hide-summary {
	position: relative;
	top: var(--measurement-half);
}

.summary-panel .summary-panel-container {
	text-align: center;
}

.summary-panel .summary-panel-intro {
	text-align: center;
}

/* block reset for alt version of Reseach Summary reveal */
.summary-panel .summary-summary-block {
	text-align: left;
	padding-bottom: 0;
}

.summary-panel .summary-summary-block h3:hover,
.summary-panel .summary-summary-block:hover {
	cursor: pointer;
	text-decoration: underline;
}


.summary-panel-intro-content {
	display: inline-block;
	width: 100%;
}

.summary-panel-intro-content h3 {
	line-height: 1.5;
	margin-top: var(--measurement-035);
	margin-bottom: var(--measurement-035);
}

.summary-panel-intro-content .expand-link {
	margin-top: var(--measurement-065);
	display: inline-block;
}


.summary-panel .expand-link .icon {
	top: 0;
}

.summary-panel .summary-panel-intro-content p {
	color: var(--Grey);
}

.summary-panel .summary-panel-intro-content p:last-child {
	margin: 0;
	display: flex;
}

.summary-panel .summary-panel-statistic {
	margin: 0 0 var(--measurement-1) 0;
	color: var(--Grey);
	display: inline-block;
	width: 20%;
	margin: 0 var(--measurement-1);
}

.summary-panel .summary-panel-statistic p {
	font-size: var(--fontsize-09);
}

.summary-panel .summary-panel-statistic p:last-child {
	margin: 0;
}

.summary-panel  .stat {
	font-size: var(--fontsize-5);
	line-height: 1;
	color: var(--PrimaryLight);
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
}

.summary-panel .summary-panel-more .summary-panel-more-link {
	margin: 0;
	text-align: center;
	font-size: var(--fontsize-1);
	line-height: 1;
	color: var(--DarkGrey);
	padding: 0;
	cursor: pointer;
}

.summary-panel .summary-panel-more .summary-panel-more-content {
	line-height: var(--measurement-4);
}

/* Class for responses count */
.response-count {
	margin: var(--measurement-1) 0 0 0;
	font-size: var(--fontsize-1-less-eight);
	padding-top: 0;
	font-weight: 600;
	text-transform: uppercase;
}
 
 /* Reset margin grid for cells */
 .grid-margin-reset .cell {
 	margin: 0;
 }

.chart-container {
  width: 100%;
	height: auto;
  border: none;
}



.grid-x .toggleAreaFull.full,
.toggleAreaFull.full {
  width: 100%;
}
 
 
      
@media print, screen and (min-width: 64em) {

  .summary-panel .summary-panel-intro {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: left;
  }

  .summary-panel .summary-panel-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */






/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 20. CALLOUTS */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.callout h3 {font-size: var(--fontsize-2);}
.callout h4 {font-size: var(--fontsize-1-and-eight);}
.callout h5 {font-weight: 500;}

.language {font-size: var(--fontsize-1-and-eight);}

.callout-intro {
	border-radius: var(--measurement-half);
	padding: var(--measurement-3);
	border: 1px solid var(--LightGrey);
}

.callout-note {
	margin-left: var(--measurement-5);
	position: relative;
}

.callout {
	position: relative;
	margin: 0 0 var(--measurement-1) 0;
	padding: var(--measurement-1);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-radius: 0;
	background-color: var(--White);
	color: var(--Default);
	line-height: var(--measurement-3);
}

.callout > :first-child {margin-top: 0;}
.callout > :last-child {margin-bottom: 0;}
    
.callout.primary {
	background-color: var(--PrimaryLightBgnd);
	color: var(--Default);
	border: 1px solid var(--ActiveDark);
}

.callout.secondary {
	background-color: var(--Pale);
	color: var(--Default);
	border: 1px solid var(--Light);
}

.callout.success {
	background-color: var(--ConfirmLightest);
	color: var(--Default);
	font-size: var(--fontsize-1-and-eight);
}

.callout.warning {
	background-color: var(--WarningLightBgnd);
	border-color: var(--Warning);
	color: var(--Default);
}

.callout.alert {
	background-color: var(--ErrorBackground);
	color: var(--Default);
	border: 1px solid var(--Alert);
	border-radius: var(--measurement-half);
	padding: var(--measurement-half) var(--measurement-1);
}

.callout.alert h1,
.callout.alert h2,
.callout.alert h3 {
	color: var(--Error);
}

.callout.alert h4,
.callout.alert h5,
.callout.alert h6 {
	color: var(--Default);
}

.callout.alert a {
	text-decoration: underline;
}

.callout.alert .button {
	font-size: var(--fontsize-085);
	padding: var(--measurement-035) var(--measurement-half);
	line-height: var(--measurement-2);
}

.callout.alert .callout-body {
	background: transparent;
	border: none;
}

.callout.alert-icon {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.callout.alert-icon .callout-body {
	flex-basis: 95%;
	border: none;
}

.callout #themeFeedContainer {
  overflow: hidden;
}

/* Icon container */
.callout.alert-icon .callout-icon {
	flex-basis: var(--measurement-3);
	border: none;
	content: "";
	width: auto;
	height: auto;
	margin-top: var(--measurement-three-quarter);
}


/* Different alert icons */
.alert-icon.alert-icon-red .callout-icon {
	background: url("../icons/alert-red.svg") no-repeat;
}

.alert-icon.alert-icon-hand .callout-icon {
	background: url("../icons/survey-intro-red.svg") no-repeat;
}

.alert-icon.alert-icon-shield .callout-icon {
	background: url("../icons/shield-red.svg") no-repeat;
}

.alert-icon.alert-icon-stop .callout-icon {
	background: url("../icons/stop-red.svg") no-repeat;
}
/* End Different alert icons */


.callout-grey {
	background-color: var(--LighterGrey);
}

.callout-white {
	background-color: var(--White);
}

.callout.active {
	background-color: var(--Active);
}

.callout.general {
	background-color: var(--General);
	color: var(--White);
}

.callout.small {
	padding: var(--measurement-three-quarter);
}

.callout.large {
	padding-top: var(--measurement-9);
	padding-right: var(--measurement-9);
	padding-bottom: var(--measurement-9);
	padding-left: var(--measurement-9); 
}

.callout-settings {
	background-color: var(--White);
	color: var(--Default);
	border: none;
	margin: var(--measurement-half) 0 var(--measurement-half) var(--measurement-half);
	padding: 0;
}

.callout-settings:first-child {
	margin-top: 0;
}

.callout-header {
	display: block;
	padding: var(--measurement-half);
	border: 1px solid var(--MediumLighterGreyPlus);
	margin:  0;
	background-color: var(--Pale);
	line-height: var(--measurement-5);	
}

.callout-title {
  display: block;
  padding: var(--measurement-half);
  border: none;
  margin: 0;
  background-color: transparent;
  line-height: var(--measurement-5);
  color: var(--PrimaryLight);
}

.callout-header h5 {
	margin-bottom: 0;
}

.callout-header.is-active {
	background-color: var(--PrimaryLight);
	color: var(--White);
}

.callout-header.is-active h5,
.callout-header.is-active .callout-header-rollup,
.callout-header.is-active a {
	color: var(--White);
}

.callout-header.is-active > .callout-header-rollup::after {
	border-color: var(--White) transparent transparent !important;
	border: 5px solid white;
}

.callout p {
	line-height: var(--measurement-3);
}


/* Style Labels in categories to look like H6 headings in TAGS panel */
.callout-group-title {
	font-size: var(--measurement-1077);
	line-height: 1.75;
	color: var(--PrimaryHeader);
	margin-top: 0;
	margin-bottom: var(--measurement-half);
	padding: 0;
}

.callout-body {
	background-color: var(--White);
	padding: var(--measurement-half);
	border-left: 1px solid var(--MediumLighterGreyPlus);
	border-right: 1px solid var(--MediumLighterGreyPlus);
	border-bottom: 1px solid var(--MediumLighterGreyPlus);
}

.callout-body-8 {
	min-height: 8rem;
}

.callout-body-10 {
	min-height: 10rem;
}

.callout-body-12 {
	min-height: 12rem;
}


.callout-group {
	border-bottom: 1px solid var(--MediumLighterGreyPlus);
	margin-bottom: var(--measurement-half);
}

.callout-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.callout-footer {
	display: block;
	padding: var(--measurement-1);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-top: none;
	border-bottom-left-radius: var(--measurement-035);
	border-bottom-right-radius: var(--measurement-035);
	margin: 0;
	background-color: var(--White);
	font-size: var(--fontsize-09);
}

.callout-inline {
	border: none;
	background-color: var(--White) !important;
	border-radius: var(--measurement-035);
	border: 1px solid var(--MediumLighterGreyPlus);
	padding: var(--measurement-half);
}

.callout-inline .callout-header,
.callout-inline .callout-body,
.callout-inline .callout-footer {
	border: none;
}

.callout-inline .callout-footer {
	padding: 0;
	margin: 0;
}

.callout-inline .callout-group {
	padding-bottom: var(--measurement-quarter);
}

.callout-arrow-top {
	position: relative;
	background: var(--Light);
	margin-top: var(--measurement-3);
}

.callout-arrow-top:before {
	left: var(--measurement-5);
	bottom: 100%;
	content: " ";
	position: absolute;
	pointer-events: none;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-bottom: 15px solid var(--MediumLighterGreyPlus);
}

.callout-arrow-top-offset:before {
	left: 10rem;
}

.callout-arrow-bottom {
	margin-bottom: var(--measurement-5);
}

.callout-arrow-bottom:before {
  left: var(--measurement-5);
  bottom: -15px;
  content: " ";
  position: absolute;
  pointer-events: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid var(--MediumLighterGreyPlus);
}


.callout.compact {
	margin: 0 0 var(--measurement-half) 0;
}

.callout.compact-left {
	padding-left: var(--measurement-half);
}

.callout.compact-right {
	padding-right: var(--measurement-half);
}

.callout.compact .icon-med {
	width: var(--measurement-135);
	height: var(--measurement-135);
}

.callout.compact .button.small {
	font-size: var(--fontsize-08) !important;
	padding: var(--measurement-035) var(--measurement-04);
	line-height: var(--measurement-2);
}

.callout.compact .callout-body {
	font-size: var(--fontsize-09);
	padding: 0.1rem var(--measurement-half);
}

.callout.compact .callout-group-title,
.callout.compact h6 {
	font-size: var(--fontsize-09);
}

.callout.compact .label-tag {
	font-size: var(--fontsize-1-less-sixth);
	margin: 0 0 var(--measurement-03) 0;
}

.callout.compact select {
	height: var(--measurement-5);
	font-size: var(--fontsize-09);
	line-height: 1;
}

.callout.compact .list-note {
	font-size: var(--fontsize-09);
	line-height: 1.35;
}

.callout-settings.callout-reset {
	margin: var(--measurement-1) 0;
}

.callout-reset .callout-header {
	padding: var(--measurement-half) 0;
	border: none;
	border-top: 1px solid var(--MediumLighterGreyPlus);
	border-bottom: 1px solid var(--MediumLighterGreyPlus);
	background: var(--White);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */






/* Icons moved to dedicated stylesheet */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 22. SPACING (RESPONSIVE) */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.line-1 {line-height: var(--measurement-1);}
.line-125 {line-height: var(--measurement-2);}
.line-15 {line-height: var(--measurement-3);}
.line-175 {line-height: var(--measurement-4);}
.line-2 {line-height: var(--measurement-5);}

.padding-quarter {padding: var(--measurement-quarter);}
.padding-top-quarter {padding-top: var(--measurement-quarter);}
.padding-bottom-quarter {padding-bottom: var(--measurement-quarter);}
.padding-left-quarter {padding-left: var(--measurement-quarter);}
.padding-right-quarter {padding-right: var(--measurement-quarter);}

.padding-half {padding: var(--measurement-half);}
.padding-top-half {padding-top: var(--measurement-half);}
.padding-bottom-half {padding-bottom: var(--measurement-half);}
.padding-left-half {padding-left: var(--measurement-half);}
.padding-right-half {padding-right: var(--measurement-half);}

.padding-three-quarter {padding: var(--measurement-three-quarter) !important;}
.padding-top-three-quarter {padding-top: var(--measurement-three-quarter) !important;}
.padding-bottom-three-quarter {padding-bottom: var(--measurement-three-quarter) !important;}
.padding-left-three-quarter {padding-left: var(--measurement-three-quarter) !important;}
.padding-right-three-quarter {padding-right: var(--measurement-three-quarter) !important;}

.padding-top-4 {padding-top: var(--measurement-13) !important;}
.padding-top-5 {padding-top: var(--measurement-17) !important;}  


.padding-top-only {
	padding: 0;
	padding-top: var(--measurement-1);
}

.padding-bottom-only {
	padding: 0;
	padding-bottom: var(--measurement-1);
}


.margin-0 {margin: 0 !important;}
.margin-top-4 {margin-top: var(--measurement-13) !important;}
.margin-top-5 {margin-top: var(--measurement-17) !important;}  

.margin-quarter {margin: var(--measurement-quarter) !important;}
.margin-top-quarter {margin-top: var(--measurement-quarter) !important;}
.margin-bottom-quarter {margin-bottom: var(--measurement-quarter) !important;}
.margin-left-quarter {margin-left: var(--measurement-quarter) !important;}
.margin-right-quarter {margin-right: var(--measurement-quarter) !important;}

.margin-half {margin: var(--measurement-half) !important;}
.margin-top-half {margin-top: var(--measurement-half) !important;}
.margin-bottom-half {margin-bottom: var(--measurement-half) !important;}
.margin-left-half {margin-left: var(--measurement-half) !important;}
.margin-right-half {margin-right: var(--measurement-half) !important;}

.margin-three-quarter {margin: var(--measurement-three-quarter) !important;}
.margin-top-three-quarter {margin-top: var(--measurement-three-quarter) !important;}
.margin-bottom-three-quarter {margin-bottom: var(--measurement-three-quarter) !important;}
.margin-left-three-quarter {margin-left: var(--measurement-three-quarter) !important;}
.margin-right-three-quarter {margin-right: var(--measurement-three-quarter) !important;}

.margin-top-1px {margin-top: 1px !important;}
.margin-top-2px {margin-top: 2px !important;}
.margin-top-3px {margin-top: 3px !important;}
.margin-top-4px {margin-top: 4px !important;}

.indent {
  margin-left: var(--measurement-1);
}

.indent-horizontal {
	padding-left: var(--measurement-2) !important;
	padding-right: var(--measurement-2) !important;
}

.indent-horizontal-large {
	padding-left: var(--measurement-5) !important;
	padding-right: var(--measurement-5) !important;
}


.indent-vertical {
	padding-top: var(--measurement-2) !important;
	padding-bottom: var(--measurement-2) !important;
}

.indent-vertical-large {
	padding-top: var(--measurement-5) !important;
	padding-bottom: var(--measurement-5) !important;
}


@media only screen and (max-width:840px) {	

	.mobile-margin-bottom-1 {margin-bottom: var(--measurement-1) !important;}

	.mobile-margin-bottom-2 {margin-bottom: var(--measurement-5) !important;}

	.mobile-margin-bottom-3 {margin-bottom: var(--measurement-9) !important;}

	.mobile-margin-top-1 {margin-top: var(--measurement-1) !important;}

	.mobile-margin-top-2 {margin-top: var(--measurement-5) !important;}

	.mobile-margin-top-3 {margin-top: var(--measurement-9) !important;}
	
	.mobile-padding-horz-0 {padding-left: 0; padding-right: 0 !important;}
	.mobile-padding-vert-0 {padding-top: 0; padding-bottom: 0 !important;}
	.mobile-padding-all-0 {padding: 0 !important;}
	
	.button-group .button .icon {
		display: block;
		margin: 0 auto;
	}


	.media-list .card,
	.media-list .card:last-child {
		flex: 1 1 100%;
	}

}


/* Positioning for Relative items */
.top-0 {top: 0px;}
.top-1 {top: 1px;}
.top-2 {top: 2px;}
.top-3 {top: 3px;}
.top-4 {top: 4px;}
.top-5 {top: 5px;}
.top-6 {top: 6px;}
.top-7 {top: 7px;}
.top-8 {top: 8px;}
.top-9 {top: 9px;}
.top-10 {top: 10px;}

.top-minus-1 {top: -1px;}
.top-minus-2 {top: -2px;}
.top-minus-3 {top: -3px;}
.top-minus-4 {top: -4px;}
.top-minus-5 {top: -5px;}
.top-minus-6 {top: -6px;}
.top-minus-7 {top: -7px;}
.top-minus-8 {top: -8px;}
.top-minus-9 {top: -9px;}
.top-minus-10 {top: -10px;}

.left-minus-1 {left: -1px !important;}
.left-minus-2 {left: -2px !important;}
.left-minus-3 {left: -3px !important;}
.left-minus-4 {left: -4px !important;}
.left-minus-5 {left: -5px !important;}
.left-minus-6 {left: -6px !important;}
.left-minus-7 {left: -7px !important;}
.left-minus-8 {left: -8px !important;}
.left-minus-9 {left: -9px !important;}
.left-minus-10 {left: -10px !important;}

.right-minus-1 {right: -1px !important;}
.right-minus-2 {right: -2px !important;}
.right-minus-3 {right: -3px !important;}
.right-minus-4 {right: -4px !important;}
.right-minus-5 {right: -5px !important;}
.right-minus-6 {right: -6px !important;}
.right-minus-7 {right: -7px !important;}
.right-minus-8 {right: -8px !important;}
.right-minus-9 {right: -9px !important;}
.right-minus-10 {right: -10px !important;}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */







/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 23. TABLES */
/* +++++++++++++++++++++++++++++++++++++++++++ */

table {
	width	: 100%;
	table-layout: fixed;
}

caption {
  padding: var(--measurement-04) 0;
  font-weight: bold;
  text-align: left;
  font-size: var(--fontsize-2);
}

thead th, thead td, tfoot th, tfoot td {
  padding: var(--measurement-half);
  font-weight: bold;
  text-align: left;
}

thead, tbody, tfoot {
	border: 1px solid var(--Light);
}

tbody {
	background-color: var(--White);
}

thead {
  background: var(--LighterGrey);
  color: var(--Primary);
  font-size: var(--fontsize-085);
}

tfoot {
	background: var(--Active);
	color: var(--PrimaryDark);
}

tbody tr:nth-child(2n) {
	border-bottom: 0;
	background-color: var(--Pale);
}

th {
	white-space: nowrap;
}


tbody th, 
tbody td {
	padding: var(--measurement-half);
	vertical-align: top;
}

/* Activity lists for Research Plan table */
table ol {}

table ol li {
	width: 100%;
	display: inline-block;
	border-bottom: 1px solid var(--Light);
}

table ol li .icon {
	float: right;
}

.table-bordered th,
.table-bordered td {
	border: 1px solid var(--Primary);
}

.table-bordered-white th,
.table-bordered-white td {
	border: 1px solid var(--White);
	border-bottom: 1px solid var(--Light);
}

.table-shade-1 {background: var(--GeneralLighter);}

.table-shade-2 {background: var(--TestCardLight);}


table.compact tbody td {
	font-size: var(--fontsize-09);
	border: 1px solid var(--Light);
}
/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */




/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 24 JS Datepicker (generic) */
/* +++++++++++++++++++++++++++++++++++++++++++ */

body .ui-datepicker {
  width: 18rem;
  padding: var(--measurement-02) var(--measurement-02) 0;
  display: none;
  text-align: center;
  box-shadow: 0 0 var(--measurement-half) var(--MediumLighterGreyPlus);
}

body .ui-datepicker table {
  font-size: var(--fontsize-1);
  border-collapse: collapse;
}

body .ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: var(--measurement-02) 0;
  font-size: var(--fontsize-1);
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

body .ui-widget-header {
	border: none;
  border-bottom: 1px solid var(--MediumLighterGreyPlus);
  background: var(--White);
  color: var(--PrimaryLight);
  font-weight: 400;
  margin-bottom: var(--measurement-quarter);
  text-transform: uppercase;
}

body .ui-widget.ui-widget-content {
  border: 1px solid var(--MediumLighterGrey);
  padding: var(--measurement-035);
}

body .ui-widget-content {
  border: 1px solid var(--MediumLighterGrey);
  background: var(--White);
  color: var(--Default);
}

body .ui-widget-content a {
  color: var(--Default);
}

body .ui-datepicker .ui-datepicker-prev, 
body .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 3px;
  width: var(--measurement-5);
  height: var(--measurement-5);
}

body .ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

body .ui-datepicker .ui-datepicker-next {
  right: 2px;
}

body .ui-datepicker .ui-datepicker-prev span, 
body .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -12px;
}

body .ui-icon {
  width: 20px;
  height: 20px;
}

body .ui-datepicker .ui-datepicker-prev .ui-icon.ui-icon-circle-triangle-w {
  background: url("../icons/chevron-left.svg") no-repeat center center;
  color: transparent; /* Visually hides chevron text label */
}

body .ui-datepicker .ui-datepicker-next .ui-icon.ui-icon-circle-triangle-e {
  background: url("../icons/chevron-right.svg") no-repeat center center;
  color: transparent; /* Visually hides chevron text label */
}

body .ui-widget {
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  font-size: var(--fontsize-1);
}

body .ui-datepicker th {
  padding: var(--measurement-035);
  text-align: center;
  font-weight: 400;
  border: none;
  background: var(--White);
  font-size: var(--fontsize-08);
  text-transform: uppercase;
  color: var(--PrimaryLight);
}

body .ui-datepicker td {
  border: none;
  padding: 1px;
  box-shadow: none;
}

body .ui-datepicker td span, 
body .ui-datepicker td a {
  display: block;
  padding: var(--measurement-quarter);
  text-align: right;
  text-decoration: none;
  box-shadow: none;
  border: none;
}

body .ui-datepicker thead {
  background: var(--White);
  color: var(--PrimaryLight);
  border: none;
}

body .ui-datepicker tbody {
  background-color: var(--White);
  border: none;
}


body .ui-datepicker tbody tr:nth-child(2n) {
  border: none !important;
  background-color: var(--White) !important;
}


body .ui-corner-all, 
body .ui-corner-bottom, 
body .ui-corner-right, 
body .ui-corner-br {
  border-bottom-right-radius: 0;
}

body .ui-corner-all, 
body .ui-corner-bottom, 
body .ui-corner-left, 
body .ui-corner-bl {
  border-bottom-left-radius: 0;
}

body .ui-corner-all, 
body .ui-corner-top, 
body .ui-corner-right, 
body .ui-corner-tr {
  border-top-right-radius: 0;
}

body .ui-corner-all, 
body .ui-corner-top, 
body .ui-corner-left, 
body .ui-corner-tl {
  border-top-left-radius: 0;
}

body .ui-state-active, 
body .ui-widget-content .ui-state-active, 
body .ui-widget-header .ui-state-active, 
body a.ui-button:active, 
body .ui-button:active, 
body .ui-button.ui-state-active:hover {
  border: 1px solid var(--Confirm) !important;
  background: var(--Confirm) !important;
  font-weight: 600 !important;
  color: var(--White) !important;
}

/* Current selected date */
body .ui-state-default, 
body .ui-widget-content .ui-state-default, 
body .ui-widget-header .ui-state-default, 
body .ui-button, html .ui-button.ui-state-disabled:hover, 
html body .ui-button.ui-state-disabled:active {
  border: none;
	background: var(--White);
	font-weight: normal;
	color: var(--Default);
	text-align: center;
	box-shadow: none;
}

/* Today indicator */
body .ui-state-highlight, 
body .ui-widget-content .ui-state-highlight, 
body .ui-widget-header .ui-state-highlight {
  border: 1px solid var(--LighterGrey);
  background: var(--LighterGrey);
  color: var(--Default);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 25. SURVEY CLASSES */
/* Used for surveys and previews */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.survey {
	width: 100%;
	height: auto;
}

.survey .prompt {
	font-size: var(--fontsize-1);
}

.survey [type="text"], 
.survey [type="password"], 
.survey [type="date"], 
.survey [type="datetime"], 
.survey [type="datetime-local"], 
.survey [type="month"], 
.survey [type="week"], 
.survey [type="email"], 
.survey [type="number"], 
.survey [type="search"], 
.survey [type="tel"], 
.survey [type="time"], 
.survey [type="url"], 
.survey [type="color"], 
.survey textarea, 
.survey select {
	border: 1px solid var(--MediumLighterGreyPlus);
}

.survey-header {
	height: 100px;
}

.survey-body {
	width: 100%;
	margin: 0;
	padding: var(--measurement-1) var(--measurement-5);
	position: relative; 
	top:0; 
	bottom:0; 
	right:0; 
	left:0;
}

.card-survey {
	margin: var(--measurement-5) var(--measurement-13);
}

.card-survey .card-divider {
	padding: var(--measurement-half) var(--measurement-1);
	background: var(--Secondary);
}

.card-survey.rounded {
	border-radius: var(--measurement-three-quarter) !important;
}

.survey .card-title {
	color: var(--White);
}

/* Survey inline preview */
.survey-header-preview {
	height: 60px;
}

.survey-header-preview .image-inline-preview {
	height: 60px;
	width: auto;
	text-align: center;
	margin: 0 auto;
}

.survey-question-text {
  display: inline-block;
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 26. MESSAGE BOX */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.message-box {
	border: none;
	border-radius: 0;
	color: var(--DarkGrey);
	border-left: var(--measurement-035) solid var(--SecondaryLight);
	border-right: 1px solid var(--Light);
	position: relative;
	margin: var(--measurement-half) 0;
	padding: var(--measurement-1) var(--measurement-3);
	line-height: var(--measurement-4);
}

.message-box .message-heading,
.message-box .message-heading a {
	color: var(--GeneralDark);
	font-size: var(--fontsize-2);
}

.message-box .message-body {
	color: var(--DarkGrey);
	font-size: var(--fontsize-09);
}

.message-box .message-body a {
	color: var(--DarkGrey);
	text-decoration: underline;
}

.message-box .message-image {
	width: 200px;
	height: auto;
	float: left;
	margin-right: var(--measurement-1);
}

.message-box-plain {
	border: none;
}


/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */


@media only screen and (max-width:1800px){
	.survey .card-survey-wide,
	.card.card-survey-wide {
		width: 80%;
	}
}




@media only screen and (max-width:1400px){

	.survey .card-survey {
		width: 60%;
		margin: 0 auto;
	}

	.survey .card-survey-wide {
		width: 80%;
		max-width: 1200px;
	}
		
}


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

	.survey .card-survey {
		width: 60%;
		margin: 0 auto;
	}

	.survey .card-survey-wide {
		width: 80%;
	}
		
}


@media only screen and (max-width:1180px) {

	.survey .card-survey {
		width: 70%;
		margin: 0 auto;
	}

	.survey .card-section {
		padding: var(--measurement-5);
	}

	.cell.flex-data.flex-data-auto {
		flex: 0 1 33%;
	}

}


@media only screen and (max-width:802px) {

	.survey .card-survey {
		width: 90%;
		margin: 0 auto;
	}

}


/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */





/* +++++++++++++++++++++++++++++++++++++++++++ */
/* 27. MEDIA */
/* +++++++++++++++++++++++++++++++++++++++++++ */


.media-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
}

.media-container {
	border-radius: var(--measurement-1);
	flex: 0 1 22.5%;
	padding: var(--measurement-1);
}

.media-container-img {
	border-radius: var(--measurement-quarter);
}

.media-container-img img {

}

.media-container-body {
	padding: var(--measurement-half) var(--measurement-quarter);
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++ */






/* +++++++++++++++++++++++++++++++++++++++++++ */
/* MEDIA QUERY CLASSES */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* 64em x 14px base = 896px */
@media only screen and (min-width: 64em) {	

	.grid-margin-x > .large-6 {width: calc(50% - 2rem);}
	
}

@media only screen and (max-width:780px) {	

	.row, .row.collapse {
    margin-left: var(--measurement-1);
  	margin-right: var(--measurement-1);
	}
	
	h1 {line-height: var(--measurement-135);}

	h2, h3, h4, h5, h6 {
		line-height: var(--measurement-3);
		margin-bottom: var(--measurement-2);
	}

	header h1 {
		text-align: center;
		margin-left: 0;
    margin-right: 0;
	}
	
	.small-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	.progress-panel {margin-bottom: var(--measurement-5);}

	.summary-panel .summary-panel-statistic {
		margin: 0 0 var(--measurement-1) 0;
	}	
		
	.component-header .close-button {left: -0.5rem;}

	.component-tag {
		height: var(--measurement-3);
		font-size: var(--fontsize-1);
		top: var(--measurement-quarter);
		left: var(--measurement-quarter);
	}

	.component-title a {
		line-height: var(--measurement-155);
		padding: var(--measurement-135) 0 var(--measurement-135) var(--measurement-half);
		font-size: var(--fontsize-1);
	}

	.fixed-item {
		position: unset;
		width: 100%;
	}

	.callout-settings {margin: var(--measurement-half) 0 var(--measurement-1) 0;}

	.card-survey {margin: var(--measurement-1);}

	.cell .bar-graph .bar-metric {
		margin-left: 0;
		margin-right: 0;
	}
	
	.prompt {margin: 0 0 var(--measurement-three-quarter) 0;}

	.summary-panel {
		margin: 0;
		padding: var(--measurement-three-quarter);
	}
	
	.summary-panel-slim {
		margin: 0;
		padding: var(--measurement-1) var(--measurement-1) var(--measurement-035) var(--measurement-1);
	}

	.cell .bar-graph .bar-metric {margin-left: 0;}

	.colour-cell, .cell.colour-cell {
		margin: 0 0 var(--measurement-quarter) 0;
		padding: var(--measurement-half);
		border-left: none;
	}

	.colour-cell:first-child, .cell.colour-cell:first-child {
		margin: 0 0 var(--measurement-quarter) 0;
		padding: var(--measurement-half);
		border-left: 1px solid var(--Light);
	}

	.test-card {
		max-width: 100%;
	}

}



@media only screen and (max-width:1180px) {
	
	.button-group.formatting-menu {
		flex-wrap: wrap;
	}

	.button-group.formatting-menu .button.default {
		width: auto;
		border: 1px solid var(--MediumLighterGreyPlus);
		margin: 0 2px 2px 0;
	}

	.button-group.formatting-menu .button.default:first-child,
	.button-group.formatting-menu .button.default:last-child {
		border-radius: 0;
	}
	
	.button-group.formatting-menu .button.default .icon {
		top: 1px;
	}

	.button-group-wrap button, 
	.button-group-wrap .component-button {
		width: 24.33%;
	}

	.media-list .card .media {
		flex-wrap: wrap;
	}

	.button-array .button {
		flex: 1 0 49.5%;
	}

	.list-group-card .list-group-item, .list-group-card.striped .list-group-item {
		flex: 0 1 49%;
		padding: var(--measurement-half) var(--measurement-1);
	}
			
}


@media only screen and (max-width:960px) {

	.link-bar {
		margin-right: 0;
	}
	
	.summary-panel .stat {
  	font-size: var(--fontsize-5);
	}

	.summary-panel-statistic p {
		font-size: var(--fontsize-1-less-eight);
	}

	.summary-panel .summary-panel-statistic {
		width: 16%;
		margin: 0 var(--measurement-half);
	}

	.flex-data-group .flex-data {
		flex: 1 1 100%;
	}

	.identifier {
		font-weight: bold;
		display: block ruby;
		margin-bottom: var(--measurement-half);
	}
		
}


@media only screen and (max-width:820px) {

	.mobile-right {float:right;}
	.mobile-left {float:left;}
	
	.label, label, label.middle {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.label-tag {
		padding: var(--measurement-035) var(--measurement-half);
		margin-bottom: var(--measurement-half);
		font-size: var(--fontsize-085);
		line-height: 1;
	}

	h1 {
		font-size: var(--fontsize-5);
		line-height: 1.25;
	}

	.selection-array-btn {
		flex-basis: var(--measurement-5);
		height: var(--measurement-5);
		width: var(--measurement-5);
	}

	.button-group-array {
		flex-wrap: wrap;
	}

	.button-group-wrap button, 
	.button-group-wrap .component-button {
		width: 32.78%;
	}
	
		
	.icon-lg, .icon.icon-lg, 
	.label .icon.icon-lg, 
	.component-button {
		width: var(--measurement-5);
		height: var(--measurement-5);
	}

	.previous-btn, 
	.next-btn, 
	.back-btn {
		height: var(--measurement-5);
		width: var(--measurement-5);
		padding: 0;
	}

	.selection-array-header {
		height: var(--measurement-5);
		padding: 0;
		font-size: var(--fontsize-1-and-eight);
	}
	
	.mobile-card {border: none;}
	
	.mobile-card .card-section {padding: 0;}
	
	.mobile-card .list-group-item {
		padding: var(--measurement-half);
		border: 1px solid var(--Light);
		margin-bottom: var(--measurement-065);
	}
	
	.mobile-bordered-left-reset .bordered-left {
		border: none;
		margin: 0;
		padding: 0;
	}
	
	.mobile-padding-left-reset .padding-left-1 {
		padding-left: 0;
	}
	
	.mobile-all-reset .bordered-left,
	.mobile-all-reset .bordered-right,
	.mobile-all-reset .bordered-top,
	.mobile-all-reset .bordered-bottom,
	.mobile-all-reset .padding-left-1,
	.mobile-all-reset .padding-right-1,
	.mobile-all-reset .margin-left-1,
	.mobile-all-reset .margin-right-1 {
		border: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.progress-panel .mobile-panel {
		border: none; 
		padding: 0;
	}

	.mobile-panel .list-group.compact .list-group-item,
	.mobile-panel .list-group-item {
		padding: 0;
	}


	.survey-question-text {
		min-width: 70%;
	}

	/*  Reset classes like FLOAT when in mobile view */
	/* +++++++++++++++++++++++++++++++++++++++++++++ */
		.mobile-block-reset {
		display: block !important;
		float: none !important;
		width: 100%;
		margin: var(--measurement-half) 0;
	}
	
	.mobile-button-reset {
		background: var(--White);
		color: var(--Primary);
		border: 1px solid var(--MediumLighterGreyPlus);
		font-size: var(--fontsize-085);
		padding: var(--measurement-035) var(--measurement-half);
		line-height: var(--measurement-2);
		display: inline-block;
	}
		
	.mobile-position-reset {
		position: relative;
		top: -12px;
	}
	
	.mobile-float-reset {
		float: none !important;
	}
	
	.mobile-remove-margin {margin: 0 !important}
	.mobile-remove-padding {padding: 0 !important}
	
	.mobile-width-reset, .width-25.mobile-width-reset, .width-50.mobile-width-reset, .width-75.mobile-width-reset {width: 100% !important;}

	.cell.cell-list {
		flex: 1 1 100%;
		margin: 0 0 var(--measurement-2) 0;
	}

	.cell.cell-left, .cell.cell-right {
		flex: 1 1 100%;
		flex-direction: column;
	}
	
}



@media only screen and (max-width:768px) {

	.list-group-array .list-group-item {
		width: calc(50% - 1.25rem);
	}

	.list-group-card .list-group-item, .list-group-card.striped .list-group-item {
		flex: 0 1 48.5%;
		padding: var(--measurement-half) var(--measurement-1);
	}
	
	/* Full width modal */
	.reveal.full h1 {
		font-size: var(--fontsize-3);
		margin-bottom: var(--measurement-5);
		line-height: 1.35;
	}

	.mobile-button-50 .button {
		flex-basis: 50%;
		margin-right: 0;
		border-right: 1px solid var(--White);
	}

	.activity-card {
		width: 100%;
		margin-left: 0;
	}

	.card.flex-card {
		flex: 0 1 48%;
	}
	
}




@media only screen and (max-width:667px) {
	
	#timer {display: none;}

	.hero-full-screen .middle-content-section {width: 80%;}
	
	.brand-title {display: none;}
	
	.page-title {
		text-align: center;
		padding: 0 0 var(--measurement-half) 0;
		margin: 0;
	}
	
	.research-title {display:inline-block; margin-top: var(--measurement-1);}
	
	.grid-x > .small-12 {
		width: 100%;
		padding-left: var(--measurement-1);
		padding-right: var(--measurement-1);
	}
	
	.row {
    margin-left: var(--measurement-1);
    margin-right: var(--measurement-1);
	}
	
	.row {margin-top: 0;}

	.row .row {
		margin-left: 0;
		margin-right: 0;
	}

	.column, .columns {
		padding-left: 10px;
		padding-right: 10px;
	}

	.profile-button {
		padding: var(--measurement-1);
		background-color: var(--Secondary);
		border: none;
		width: 100%;
	}
		
	.button {width: 100%;}
	
	.button.small {width: auto;}	

	.button-group .button {flex-shrink: 1; flex-grow: 1; flex-basis: content;}

	.button-group-padded .default .icon {top: 0;}
		
	.button.circle {
		width: 26px;
		position: relative;
		top: 1px;
	}
	
	.search-bar {
		padding: 0;
		margin: 0;
	}

	.search-bar .grid-x,
	.search-bar .grid-x > .small-12 {
		padding: 0;
		margin: 0;
	}
	
	label.middle {
		margin: 0;
		padding: var(--measurement-quarter) 0;
	}

	.tabs-title > a {padding: var(--measurement-three-quarter);}
	
	.progress-panel {margin-bottom: var(--measurement-5);}

	.progress-panel .progress-panel-main {
		margin: 10px 0 0 0;
		padding: var(--measurement-three-quarter) 0;
	}

	.progress-panel .progress-container {display: block;}

	.progress-graph {
		padding: 0;
		width: 100%;
		height: 150px;
		display: inline-block;
	}
	
	.progress-panel .research-details {
    padding: 0;
    width: 100%;
    display: block;
    margin-top: 10px;
	}

	.circle-graph {margin: 0 auto;}
		
	.component-title {
		font-size: var(--fontsize-1); 
		height: 100%;
		padding: 0;
		display: flex;
  	flex-direction: row;
	}

	.component-title a {padding: var(--measurement-235)var(--measurement-085);}

	.component-title a::after {left: var(--measurement-04);}

	.component-action {
		width: auto;
		font-size: var(--fontsize-1);
	}
	
	.component-action-first {font-size: var(--fontsize-1);}
	
	.component-mover {
		width: 35px;
		display: table;
	}

	.component-mover .button-mover {
		font-size: var(--fontsize-1-less-eight);
		height: 28px;
	}	

	.component-mover .button-mover:first-child {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}	

	.component-mover .button-mover:last-child {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-top: none;
	}
	
	.component-mover .button-retain-border:last-child {
		border-top: 1px solid var(--MediumLightGrey);
	}	
			
	.component-header .close-button {left: -0.75rem;}

	.component-tag {
		width: var(--measurement-145);
		height: var(--measurement-135);
		font-size: var(--fontsize-1-less-eight);
		top: var(--measurement-quarter);
		left: var(--measurement-quarter);
	}	

	.component-footer a {
		color: var(--MediumGrey);
		font-size: var(--fontsize-08);
		text-decoration: underline;
		margin: 0 var(--measurement-half) 0 0;
	}
	
	.tag-container .callout-inline {
		padding: var(--measurement-035) var(--measurement-quarter);
	}

	.list-group-item {padding: var(--measurement-1) 0;}
	
	.link-group {display: block;}

	.link-group a {
		display: flex;
		border-top: 1px solid var(--LighterGrey);
		border-bottom: 1px solid var(--LighterGrey);
		text-align: center;
		padding: var(--measurement-three-quarter) var(--measurement-half);
	}

	.category-item {
		padding: var(--measurement-quarter) var(--measurement-half);
		line-height: var(--measurement-135);
	}

	h2 span.small {
		display: block;
		margin-top: var(--measurement-half);
	}
	
	.icon-feature {
		display: block;
		text-align: center;
		top: 0;
		width: auto;
		margin-bottom: var(--measurement-half);
	}

	.icon-circle .badge {
		margin-right: var(--measurement-half);
		top: 0px;
	}

	.cell.compact-left,
	.cell.compact-right,
	.list-group.compact-left,
	.list-group.compact-right,
	.callout.compact-left,
	.callout.compact-right {
		padding-left: 0;
		padding-right: 0;
	}

	.list-group.compact .list-group-item {
		padding: var(--measurement-half) 0;
	}

	.list-group-card .list-group-item, .list-group-card.striped .list-group-item {
		flex: 0 1 100%;
		padding: var(--measurement-half) var(--measurement-1);
	}
	
	.hide-for-small-only {display: none !important;}
	
	.accordion-content-mobile,
	.tabs-panel-mobile,
	.tabs-panel-mobile .grid-x > .small-12 {padding: var(--measurement-1) 0;}
	
	.accordion-content-mobile .grid-x > .small-12 {padding: 0;}
 
	.button-group-padded {padding: 0;}

	.media-list .card {
		flex-direction: column;
	}

	.media-list .card {
		flex-direction: column;
		/* flex: 1 0 85%; */
		flex: 0 1 94%;
	}
	
	.media-list .card .media {
		height: auto;
		width: 100%;
		word-break: break-word;
	}

	.cell.media.media-icon {
		justify-content: center;
		padding: 0 0 var(--measurement-half) 0;
	}

	.media-menu-buttons {
		display: inline-block;
		width: 100%;
	}

	.reveal {
		margin: var(--measurement-3);
	}

	.reveal .close-button {
		display: block;
		width: auto;
		text-align: right;
	}

	.reveal h1, 
	.reveal h2, 
	.reveal h3, 
	.reveal h4, 
	.reveal h5, 
	.reveal h6 {
		line-height: var(--measurement-5);
		margin-bottom: var(--measurement-1);
	}

	.tabs-group-inline.expanded {
		flex-wrap: wrap;
	}

	.summary-panel-slim .hide-summary {
		position: relative;
		top: var(--measurement-quarter);
	}
	
	.summary-panel .stat {font-size: var(--fontsize-5);}

	.summary-panel .summary-panel-more .summary-panel-more-link {
		font-size: var(--fontsize-3);
		padding: 0;
	}

	.summary-panel-slim {
		padding: var(--measurement-1) var(--measurement-1) var(--measurement-035) var(--measurement-1);
		margin-bottom: var(--measurement-1);
	}
	
	.summary-panel .summary-panel-statistic {
		display: block;
		width: auto;
		margin: 0 0 var(--measurement-1) 0;
	}	

	.radio-button-group label {
		padding: var(--measurement-half) var(--measurement-065);
		font-size: var(--fontsize-09);
	}

	.border-none-mobile {
		border: none !important;
	}

}	



@media only screen and (max-width:430px) {

	.topbar-responsive .button.menu-button {
		color: var(--White);
		width: 60%;
	}
	
	.topbar-responsive .button.menu-button .icon {top: -0.6rem !important;}
	
	.topbar-responsive .button.menu-button .menu-label {
		top: -1.1rem;
		text-transform: uppercase;
	}

	.searchbar form {width: 80%;}

	.searchbar.search-row {
		background: var(--Secondary);
		display: block;
		top: var(--measurement-1);
	}

	.search-row .search-field {
		margin: 0;
		width: 100%;
	}

	.cell-main {margin-top: var(--measurement-3);}

	.closeNewActivities {margin-bottom: var(--measurement-1);}

	span.small.research-title,
	.research-title {
		margin-top: var(--measurement-half);
		margin-bottom: var(--measurement-half);
		line-height: 1.2;
	}

	.page-header {flex-direction: column;}

	.page-title {width: 100%;}

	.page-header .header-button {
		margin: 0;
		width: 100%;
	}

	.flex-data-group .flex-data {
		flex-basis: auto;
	}

	.flex-data-group .flex-data .list-group-data {
		height: auto;
	}
	
	.flex-data-group {
		flex-direction: column;
		flex-wrap: nowrap;
		display: block;
	}

	.progress-panel {padding: 0;}

	.link-bar,
	.link-bar.float-right {
		margin-right: 0;
		float: none !important;
		display: block;
	}

	.link-bar li {
		display: inline-block;
		list-style-type: none;
		width: 15%;
		margin: var(--measurement-half) 0;
	}

	.mediaLinks,
	.float-right.mediaLinks {
		float: none !important;
		display: inline-block;
	}

	.list-group-flex {flex-direction: column;}
	
	.list-group-flex.verbatim {
		margin-top: -0.5rem;
	}

	.list-group-item-left {
		width: 100%;
		border-left: none;
	}

	.list-group-item-right {
		width: 100%;
		border-left: none;
	}

	.profile-button {
		width: 100%;
		margin: 0;
	}

	h3 {font-size: var(--measurement-135);}

	.callout-settings {margin: var(--measurement-half) 0;}

	.callout-arrow-top:before {left: 45%;}

	.text-large {
		font-size: 125%;
		line-height: inherit;
	}
	
	.colour-chip {
		width: var(--measurement-5);
		height: var(--measurement-5);
		float: none;
		display: inline-block;
	}

	.colour-chip-group {
		height: 2rem;
		border: none;
	}

	.colour-chip-group label {
		margin-top: 0;
	}
	
	.colour-chip-group .colour-chip {
		float: none;
		width: var(--measurement-4);
		height: var(--measurement-4);
		border: 1px solid var(--Light);
	}

	.colour-cell, .cell.colour-cell {
		margin: 0;
		padding: var(--measurement-half);
		border: none;
		border: 1px solid var(--White);
		background: var(--Pale);
	}

	.colour-cell:first-child, 
	.cell.colour-cell:first-child {
		margin: 0;
		padding: var(--measurement-half);
		border-left: 1px solid var(--White);
	}

	.colour-picker {padding: var(--measurement-quarter) var(--measurement-half);}
	
	.component-title a {
		padding: var(--measurement-3) 0 var(--measurement-3) var(--measurement-035);
		font-size: var(--fontsize-09);
	}

	.component-title a.component-title-link {
		font-size: var(--fontsize-1);
	}

	
	.component-action-first, .component-action-last {padding: var(--measurement-1-and-eight) 0;}
	
	.component-action-first {border: none;}

	.component-body {padding: var(--measurement-half) 0;}

	.button-array .button {flex: 1 0 100%;}

	.button-group.button-group-inline .button {
		padding: var(--measurement-1) var(--measurement-quarter);
		margin-top: var(--measurement-1);
	}

	.button-group-wrap button, 
	.button-group-wrap .component-button {
		width: 49.33%;
	}
		
	.grid-margin-x > .cell {width: calc(100% - 0.65rem);}
	
	.grid-padding-x > .cell {
		padding-right: 0;
		padding-left: 0;
	}

	.width-small, 
	.width-medium,
	.width-25,
	.width-50 {
		/* max-width: 100% !important; */
		width: 100% !important;
		display: block;
	}
	
	.label, label, label.middle {
		margin-top: var(--measurement-half); 
		margin-bottom: 0;
	}
	
	.colour-chip {margin-right: -5px;}

	.colour-chip:last-child {margin-right: var(--measurement-quarter);}

	.switch-toggle-wrapper .switch {margin-right: var(--measurement-half);}

	.colour-cell-array .label, .colour-cell-array label {top: -16px;}

	.test-card .card-divider {padding: var(--measurement-1);}

	.cell .bar-graph .bar-metric {max-height: var(--measurement-3);}

	.label.label-flag {
		margin: 0;
		padding: var(--measurement-quarter) 0.45rem;
	}
	
	.label-status {margin-top: var(--measurement-quarter);}
	
	.switch-compact [type="checkbox"] + label, [type="radio"] + label {margin-top: 0;}

	.list-group-array .list-group-item {width: 100%;}

	.list-group-array .list-group-item [type="checkbox"] + label, 
	.list-group-array .list-group-item[type="radio"] + label {margin-top: 0;}

	.button-group {flex-wrap: wrap;}

	.button-group .button.default,
	.button-group .button.default:first-child {
		border-radius: 0 !important;
		border: 1px solid var(--MediumLighterGreyPlus);
		margin: 0 var(--measurement-035) var(--measurement-035) 0;
		flex: 1 0 0;
	}
	
	.tabs-panel .tab-content-reader {
		flex-direction: column;
	}
	
	.tabs-panel .tab-content-reader .tab-content-right {
		width: auto;
		border: 0;
		padding: var(--measurement-half) var(--measurement-1);
	}

	.responses-header, 
	.tabs-content .responses-header, 
	.tabs-content .is-active .responses-header {
		font-size: var(--fontsize-1);
		line-height: var(--measurement-135);
	}
	
	.tabs-large,.tabs.tabs-large {flex-direction: column;}

	.radio-group {
		display: flex;
		margin: 0  0 var(--measurement-half) 0;
	}
	
	.radio-group [type="file"], .radio-group [type="checkbox"], .radio-group [type="radio"] {margin: 0;}

	.radio-group label {
		flex-basis: auto;
		flex: 1 1 auto;
		margin-left: var(--measurement-1);
	}

	.blog .grid-margin-x > .cell {
		margin-left: 0;
		margin-right: 0;
		margin: 0 auto;
		padding: var(--measurement-1);
		margin-bottom: var(--measurement-3);
	}

	.blog .grid-margin-x > .cell:last-child {margin-bottom: 0;}

	.activity-card {box-shadow:  none;}
		
	/* Responsive menu	*/
	.dropdown-pane::before {
		content: "";
		border: none;
		top: 0;
		right: 0;
		position: unset;
		display: inline;
		width: 0;
		height: 0;
		padding: 0;
		margin: 0;	
	}

	.profile-dropdown-pane {width: 100%;}

	#topbar-responsive .dropdown-pane.display-profile-menu {
		visibility: visible !important;
		display: block !important;
		top: 0;
		right: 0;
		width: 100%;
		position: relative;
		box-shadow: none;
	}
	
	.dropdown-pane {border-radius: 0;}
	
	.callout.alert-icon {
		flex-wrap: wrap;
		justify-content:	revert;
	}

	.callout.alert-icon .callout-body {
		flex-basis: 100%;
		border: none;
	}

	/* Icon container */
	.callout.alert-icon .callout-icon {
		flex-basis: 100%;
		height: var(--measurement-5);
		margin-top: 0;
	}
	
	.alert-icon.alert-icon-red .callout-icon,
	.alert-icon.alert-icon-hand .callout-icon,
	.alert-icon.alert-icon-shield .callout-icon,
	.alert-icon.alert-icon-stop .callout-icon {background-position: center;}

	.tabs-content.compact .bar {margin-right: 0;}

	.cell .bar-graph .bar-metric {
		max-height: var(--measurement-3);
		height: 3rem;
		display: inline-block;
		margin: var(--measurement-half) 0 var(--measurement-quarter) 0;
		padding: 0;
		text-align: left;
	}

	.cell .bar-graph .label-count {
		width: auto;
		display: inline-block;
		height: 1.5rem;
		margin: 0;
		text-align: center;
		font-size: var(--fontsize-09);
		padding: 3px 6px;
		line-height: 1rem;
	}

	.cell .bar-graph .label-rank {
		color: var(--Primary);
		text-align: center;
		background: var(--Active);
		border-radius: var(--measurement-035);
		width: auto;
		display: inline-block;
		height: 1.5rem;
		margin: 0;
		font-size: var(--fontsize-09);
		padding: 3px 6px;
		line-height: 1rem;
	}

	.radio-button-group label {font-size: var(--fontsize-085);}

	.list-group-selection .list-group-item .list-control {
		position: relative;
		top: var(--measurement-quarter);
	}
	
	.button-group-mobile {
		display: flex;
		flex-wrap: wrap;
	}

	.button-group-mobile li {	
		flex: 1 1 auto;
		float: none;
		border: 1px solid var(--Light);
		margin: 2px;
	}

	.button-group-mobile label {
		display: flex;
		justify-content: center;
	}

	.reveal.print {width: auto;}

	body thead th, body thead td, tbodyable tfoot th, body tfoot td {
		white-space: break-spaces;
	}

	body th {
		white-space: break-spaces;
	}

	.media-grid {
		flex-direction: column;
	}
	
	.media-grid .media-container {
		flex: 1 1 auto;
		padding: var(--measurement-half);
	}


	.message-box .message-body {
		display: inline-block;
		margin-top: var(--measurement-half);
	}

	/* A-Z listing on media page */
	.menu-mini li {
		flex: 1 1 auto;
	}
	
	.menu-mini a {
		text-align: center;
	}

	.media-group,
	.radio-button-group.media-group {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: 97%;
	}
	
	.media-group li,
	.radio-button-group.media-group li {
		border: 1px solid var(--Light);
		display: flex;
		margin: 0 var(--measurement-035) var(--measurement-quarter) 0;
		flex: 1 1 auto;
	}

	.media-group li label,
	.radio-button-group.media-group li label {
		width: 100%;
	}

	.flex-data-group-responses {
		flex-flow: column;
		border-bottom: 1px solid var(--PrimaryLight);
		margin: var(--measurement-1) 0;
	}
	
	.flex-data-group-responses .responses-left,
	.flex-data-group-responses .responses-right {
  	border: none;
		flex-basis: 100%;
	}



	.card.flex-card {
		width: 98%;
		margin: 0 0 1rem 0;
	}


}



@media only screen and (max-width:375px) {

	.label-para {
		display: block;
		margin: var(--measurement-035) 0;
	}

	.auto-blocks {
		width: auto;
		flex: 1 1 100%;
		border-top: 1px solid var(--White);
		border-bottom: 1px solid var(--white);
	}

}


/* 39.9375em x 14px base = 559.125px */
@media screen and (max-width: 39.9375em) {

	.link-bar {
		margin-right: 0;
	}
	
	.topbar-responsive .brand-title {display: none;}
	.topbar-responsive .logo {margin-left: var(--measurement-1);}
	
	.topbar-responsive {
		padding: 0;
		/* height: 8rem; */
		z-index: 10001;
		margin-bottom: var(--measurement-1);	
	}

	.topbar-responsive .top-bar-title {
		position: relative;
		width: 100%;
		margin: var(--measurement-065) var(--measurement-1) 0 0;
	}	

	.topbar-responsive .menu,
	.topbar-responsive .menu.simple {
		background: var(--White);
		z-index: 20001;
		border-bottom: 1px solid var(--White);
		box-shadow: none;
	}

	.topbar-responsive .menu li,
	.topbar-responsive .menu.simple li {display: contents;}
	
	.topbar-responsive .menu a {
		font-size: var(--fontsize-09);
		color: var(--PrimaryDark);
		padding: var(--measurement-1);
		width	: 100%;
		border-bottom: 1px solid var(--SecondaryLight);
		line-height: 2;
		border-radius: 0;
	}

	.topbar-responsive .menu a:hover,
	.topbar-responsive .menu a:focus {
		color: var(--White);
		background-color: var(--Primary);
		border-bottom: 1px solid var(--White);
	}
			
	.topbar-responsive .menu .topbar-responsive-button {
		width: 100%;
		margin: var(--measurement-three-quarter) 0;
		border: 1px solid var(--MediumLightGrey);
		width: 90%;
		margin: var(--measurement-1) auto;
		border-radius: 5px;
	}

	.topbar-responsive .menu .topbar-responsive-button:hover,
	.topbar-responsive .menu .topbar-responsive-button:focus {
		color: var(--White);
		background-color: var(--Primary);
		border: 1px solid var(--PrimaryLight);
	}
	
	.avatar-text {
		margin: 0 0 0 0.5rem;
	}
		
	.topbar-responsive .top-bar-title .menu-toggle {
		position: absolute;
		right: 0;
		border: 0;
		background: transparent;
		border-radius: 0;
		padding: 0;
		margin-right: var(--measurement-1);
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.topbar-responsive .top-bar-title .menu-toggle:hover,
	.topbar-responsive .top-bar-title .menu-toggle:focus {
		cursor: pointer;
		border: 2px solid var(--SecondaryLight);
	}
 
	.topbar-responsive .top-bar-title span .menu-icon {margin-bottom: 2px;}

	/* Mobile menu hamburger icon */
	.menu-icon {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: var(--measurement-3);
		height: var(--measurement-3);
		cursor: pointer;
		top: var(--measurement-035);
	}

	.topbar-responsive-links {
		width: 100%;
		position: relative;
		top: var(--measurement-1);
	}
   
  .progress-panel {margin-bottom: var(--measurement-5);}
	
	.brand-logo,
	.brand-logo img {
		height: 40px;
		width: auto;
		margin-bottom: var(--measurement-5);
	}
	
}

/* +++++++++++++++++++++++++++++++++++++++++++ */
/* DEBUGGING :: HIDE */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* 
.cell {
	border: 1px dashed var(--MediumLightGrey);
}

div {
	border: 1px dashed var(--General);
}

.strapline, .searchbar, .profile-button {
	border: 1px dashed yellow;
}

 */