/* radar*/
.radarChart{
	margin: auto;
	padding: 1rem 0 0 0;
	width: 80%;
	position: relative;
	/*background: rgba(var(--bs-light-rgb),.6);*/
}


section.result.bg-result-1 {
	min-height: 25%;
	width: 100%;
	margin: 0;
	padding: 0 0 0 0;
	position: relative;
	overflow-x: hidden;
}

.bg-spider h4 {
	font-size: 18pt;
	margin: 2rem 0 0 0;
	color: var(--light)
}

.totalScorePct {
	font-weight: 600;
	color: var(--bs-green);
}

.bg-spider .svg-inline--fa{
	color: var(--light);
}

/* archetype matrix*/
.avgScore{
	margin: .4rem 0 .2rem 0;
	font-size: 32pt;
	line-height: 28pt;
	font-weight: 500;
}

.badge-score {
	display: none;
	font-size: 18px;
	line-height: 50px;
	height: 54px;
	width: 54px;
	padding: 0;
	text-align: center;
	letter-spacing: -0.025em;
	position: absolute;
	margin-top: 10px;
  top: calc(50% + 8px);
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
	background: rgba(var(--bs-green-rgb),0.9);
	color: var(--bs-white);
	border: 2px solid rgba(var(--bs-white), 0.9);
	-webkit-border-radius: 50%;
		 -moz-border-radius: 50%;
				  border-radius: 50%;
}
	
#legend{
	float: right;
	position: relative;
	width: 20%;
	margin: 15px 0 0 0;
}	

#legend td{vertical-align: top;}	

/* likert-schaal*/
.likert {
	position:relative;
	display: flex;
  flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
  list-style:none;
 	padding: 0;
	margin: 1rem 0 0 0;
	z-index: 1;
}


.likert li {
 	display: flex;
  flex-direction: column;
	width: 20%;
	align-items:center;
	padding: 0 0;
	margin: 0;
}

.likert:before {
  content: '';
  position: absolute;
	z-index: 1;
  top: 13px;
  left:0;
  height:6px;
  width: calc(100% - 12px);
	background: linear-gradient(90deg, rgba(var(--bs-green-rgb),.4) 0%, rgba(255,255,255,0.6) 50%, rgba(var(--bs-danger-rgb),.4) 100%);
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
			    border-radius: 2px;
}

:root[color-mode="dark"] .likert:before  {
	background: linear-gradient(90deg, rgba(var(--bs-green-rgb),1) 0%, rgba(39,36,42,0.6) 50%, rgba(var(--bs-danger-rgb),1) 100%);
	}


.likert li input[type=radio] {
  appearance: none;
	border-radius: 50%;
  height: 30px;
  width: 30px;
  transition: all 0.15s ease-out 0s;
  background: var(--bs-light);
  border: 1px solid var(--bs-green-m);
  cursor: pointer;
  display: inline-block;
  outline: none;
  z-index: 1;
	-webkit-appearance: none;
  	 -moz-appearance: none;
  		-ms-appearance: none;
  		-o-appearance: none;
	box-shadow:
	  0.1px 0.1px 2.1px rgba(0, 0, 0, 0.0251),
	  0.3px 0.3px 5.1px rgba(0, 0, 0, 0.043),
	  0.6px 0.6px 9.5px rgba(0, 0, 0, 0.09),
	  1.1px 1.1px 17px rgba(0, 0, 0, 0.067),
	  2.1px 2.1px 31.8px rgba(0, 0, 0, 0.099),
	  2px 2px 76px rgba(0, 0, 0, 0.18);
}


/*
.likert li:first-child input[type=radio] {
	left:0;
}
.likert li:last-child input[type=radio] {
	left:  calc(100% - 10px);
}
*/

.likert li input[type=radio]:focus, .likert li input[type=radio]:hover {
	outline: none;
	border: 1px solid var(--bs-green);
	box-shadow:
	  0.1px 0.1px 2.1px rgba(0, 0, 0, 0.051),
	  0.3px 0.3px 5.1px rgba(0, 0, 0, 0.073),
	  0.6px 0.6px 9.5px rgba(0, 0, 0, 0.09),
	  1.1px 1.1px 17px rgba(0, 0, 0, 0.187),
	  2.1px 2.1px 31.8px rgba(0, 0, 0, 0.189),
	  5px 5px 76px rgba(0, 0, 0, 0.18);
}

.likert li input[type=radio]:checked::before, .likert li input[type=radio]:hover::before {
  width: 2em;
  height: 2em;
  display:flex;
  position: absolute;
  align-items:center;
  justify-content:center;
}

.likert li input[type=radio]:checked {
	border-color: var(--bs-green);
	background: var(--bs-green);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");

}



.likert li input[type=radio]:checked:focus {
	outline: none;
}

.likert li label {
	width: 100%;
	padding: 10px 0 0 0;
	font-size: 12.5pt;
	line-height: 12pt;
	text-align: center;
}

/*
.likert li:first-child label {
	text-align: left;
}
.likert li:last-child label {
	text-align: right;
}
*/

.likert li label:hover {
	cursor: pointer;
}

.badge-lewis{
	margin: 35px auto;
	min-width: 120px;
	color: #fff;
	font-size: 48px;
	line-height: 48px;
	padding: 40px  24px;
	border: 2px solid rgba(255,255,255,0.4);
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			    border-radius: 50%;
}

.pie-legend{
	display: none;
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
			    border-radius: 4px;
}

ul.pieChartLegend {
	margin: 0;
	padding: 0;
	display: inline;
}

ul.pieChartLegend li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}

ul.pieChartLegend li > span {
	width: 60px;
	white-space: nowrap;
	font-weight: bold;
}



section.result.bg-onboarding{
	background-color: #4b953a;
	background-image: url(/gfx/scan.noscore.jpg); 

	padding: 4rem 0 2rem 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
		 -moz-background-size: cover;
			 -o-background-size: cover;
					background-size: cover;
}
	
/* piechart */
.pieCharts{
	font-family: 'Heebo', arial, sans-serif;
	float: left;
	position: relative;
	width: 23%;
	margin: 0 0 0 0;
}
.resultchart {
  position: relative;
  text-align: center;
  margin: 20px 0 20px 0;
	height: 90px;
}

.scorepart{
	font-size: 18pt;
  position: absolute;
	left: 0;
	line-height: 90px;
	width: 90px;
	text-align:center;
	letter-spacing: -0.045em;
	font-weight: 400;
}

.resultchart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.resulttext {
	position: relative;
  padding: 0 0 0 105px;
	font-size: 12pt;
	line-height: 16pt;
	font-weight: 400;
	margin: 10px 0 10px 0;
	text-align: left;
}

.resulttext h3{
	font-size: 14pt;
	line-height: 18pt;
}

.group-tag {
	margin: 0 0 1rem 0;
}
.group-tag h4{
	font-size: 14pt;
}
.group-tag .svg-inline--fa{
	color: var(--bs-green);
}

	
/* gauge charts */
.card-gauge{
	background: none;
	border: none;
	padding: 0 0 2rem 0;
}

.gauge-chart{
  position: relative;
	width: 100%;
	margin: auto;
	text-align: left;
}

.gauge {
	padding: 0 0 0 0;
	width: 100%;
  transform: translate3d(0, 0, 0);
}

.gauge-text {
	text-transform: uppercase;
	font-size: 14pt;
	line-height: 12pt;
	font-weight: 500;
	position: relative;
	top: 5px;
	left: 0;
	right: 0;
	letter-spacing: 0.025em;
	text-align: center;
	padding:0;
	color: #fff;
}

.result-box-1 .result-text {
	margin: 1em 0 3em 0;
}

/* piechart leerpad */
.pieCharts-lp {
	position: relative;
}
.pieCharts-lp .resultchart {
   position: relative;
  float: left;
  width: 45%;
  height: 100px;
  text-align: center;
  margin: 20px 3% 20px 0;
}

.pieCharts-lp .scorepart{
	font-size: 14pt;
  position: absolute;
	left: 0;
	line-height: 90px;
	width: 90px;
	text-align:center;
	letter-spacing: -0.045em;
	font-weight: 300;
}



.pieCharts-lp .resulttext {
	position: relative;
  padding: 0 0 0 105px;
	font-size: 12pt;
	line-height: 16pt;
	font-weight: 400;
	margin: 10px 0 10px 0;
	text-align: left;
}


.resultGroup {
  position: absolute;
  text-align: center;
  margin:0;
  top: 5em;
	left: 40px;
}

.scoreGroup{
	font-size: 14pt;
  position: absolute;
	left: 0;
	line-height: 70px;
	width: 70px;
	text-align:center;
	letter-spacing: -0.045em;
	font-weight: 400;
}

.resultGroup canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.spaceline {clear: both;border-bottom: 1px solid #666;height: 1px;margin:5px 1px 20px 1px;overflow: hidden;}



.bg-result-box td a:not(.btn), .bg-result-box td a:not(.btn):visited  {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
  border-bottom: 1px solid #f8f8f8;
  box-shadow: 0 -1px 0 #f8f8f8 inset;
  color: inherit;
	padding: 1px 2px;
  transition: background 0.55s cubic-bezier(0.33, 0.66, 0.66, 1) 0s;
}

.bg-result-box td a:not(.btn):hover, .bg-result-box td a:not(.btn):active {
	text-decoration: none;
	background: rgba(0, 0, 0, 0.4);
}

.gauge-text a:not(.btn), .gauge-text a:not(.btn):visited  {
	color: #3b60ac;
	text-decoration: none;
  border-bottom: none;
  box-shadow: none;
  color: inherit;
	padding: 3px 5px;
  transition: background 0.55s cubic-bezier(0.33, 0.66, 0.66, 1) 0s;
}

.gauge-text a:not(.btn):hover, .gauge-text a:not(.btn):active {
	text-decoration: none;
	background: rgba(0, 0, 0, 0.4);
}

a.go-to, a.go-to:visited {
	color: #00aaa6 !important;
	text-decoration: none;
	opacity: 1;
}
a.go-to:hover, a.go-to:active, a.go-to:focus {color: #fff;opacity: 1;text-decoration: none;outline: none;}


a.btn-top, a.btn-top:visited {
	color: #fff;
	text-decoration: none;
	position: absolute;
	left: -25px;
	top: -25px;
	opacity: 0.6;
	font-size:19px;
}
a.btn-top:hover, a.btn-top:active, a.btn-top:focus {color: #00aaa6;opacity: 1;text-decoration: none;outline: none;}

/* ----------------------------------------------------------------------------- 
  jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
  Version 0.1.38
  Copyright (c)2017 Lajpat Shah
  Contributors : https://github.com/nehakadam/DateTimePicker/contributors
  Repository : https://github.com/nehakadam/DateTimePicker
  Documentation : https://nehakadam.github.io/DateTimePicker
 ----------------------------------------------------------------------------- */
.dtpicker-overlay{z-index:2000;display:none;min-width:300px;background:rgba(0,0,0,.2);font-size:12px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dtpicker-mobile{position:fixed;top:0;left:0;width:100%;height:100%}.dtpicker-overlay *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-ms-box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.dtpicker-bg{width:100%;height:100%;font-family:Arial}.dtpicker-cont{border:1px solid #ECF0F1}.dtpicker-mobile .dtpicker-cont{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);border:0}.dtpicker-content{margin:0 auto;padding:1em 0;max-width:500px;background:#fff}.dtpicker-mobile .dtpicker-content{width:97%}.dtpicker-subcontent{position:relative}.dtpicker-header{margin:.2em 1em}.dtpicker-header .dtpicker-title{color:#2980B9;text-align:center;font-size:1.1em}.dtpicker-header .dtpicker-close{position:absolute;top:-.7em;right:.3em;padding:.5em .5em 1em 1em;color:#FF3B30;font-size:1.5em;cursor:pointer}.dtpicker-header .dtpicker-close:hover{color:#FF3B30}.dtpicker-header .dtpicker-value{padding:.8em .2em .2em;color:#FF3B30;text-align:center;font-size:1.4em}.dtpicker-components{overflow:hidden;margin:1em;font-size:1.3em}.dtpicker-components *{margin:0;padding:0}.dtpicker-components .dtpicker-compOutline{display:inline-block;}.dtpicker-comp2{width:50%}.dtpicker-comp3{width:33.3%}.dtpicker-comp4{width:25%}.dtpicker-comp5{width:20%}.dtpicker-comp6{width:16.66%}.dtpicker-comp7{width:14.285%}.dtpicker-components .dtpicker-comp{margin:2%;text-align:center}.dtpicker-components .dtpicker-comp>*{display:block;height:30px;color:#2980B9;text-align:center;line-height:30px}.dtpicker-components .dtpicker-comp>:hover{color:#2980B9}.dtpicker-components .dtpicker-compButtonEnable{opacity:1}.dtpicker-components .dtpicker-compButtonDisable{opacity:.5}.dtpicker-components .dtpicker-compButton{background:#FFF;font-size:140%;cursor:pointer}.dtpicker-components .dtpicker-compValue{margin:.4em 0;width:100%;border:0;background:#FFF;font-size:100%;appearance:none;-moz-appearance:none}.dtpicker-overlay .dtpicker-compValue:focus{outline:0;background:#F2FCFF}.dtpicker-buttonCont{overflow:hidden;margin:.2em 1em}.dtpicker-buttonCont .dtpicker-button{display:block;padding:.6em 0;width:47%;background:#FF3B30;color:#FFF;text-align:center;font-size:1.3em;cursor:pointer}.dtpicker-buttonCont .dtpicker-button:hover{color:#FFF}.dtpicker-singleButton .dtpicker-button{margin:.2em auto}.dtpicker-twoButtons .dtpicker-buttonSet{float:left}.dtpicker-twoButtons .dtpicker-buttonClear{float:right}

.dtpicker-cont {
	border: 1px solid #d1d1d1;
	border-top: none;
	padding: 0;
}
.dtpicker-content {
	max-width: 100%;
	background: none;
}

.dtpicker-components .dtpicker-compButton {background: none;font-size: 100%;}
.dtpicker-components .dtpicker-compButton.increment {border-bottom: 1px solid #ddd;}
.dtpicker-components .dtpicker-compButton.decrement {border-top: 1px solid #ddd;}
.dtpicker-components .dtpicker-compValue {
	background: none;
	font-family: 'Heebo', arial, sans-serif;
	font-size: 18pt;
	line-height: 22pt;
	font-weight: 500;
	}

.dtpicker-components .dtpicker-comp > * {color: #333;}
.dtpicker-components .dtpicker-comp.hour > *, .dtpicker-components .dtpicker-comp.minutes > * {color: var(--bs-green)}


/* portrait phones */
@media (max-width: 320px) {
	
	.radarChart{display: none;}
	
	.radarChart{
		position: relative;
		left: 0;
		right: 0;
		clear: both;
	}

	.pieCharts{
		float: none;
		position: relative;
		width: 100%;
		margin: 10px 0 0 0;
	}
	
	.resultchart {
	  float: mone;
	  height: 90px;
	  margin: 10px;
	  padding: 10px;
	  position: relative;
	  text-align: center;
	  width: 90%;
	}
	
	.scorepart{
		font-size: 14pt;
	  position: absolute;
		padding: 10px 20px;
		line-height: 70px;
		width: 90px;
		text-align:center;
		letter-spacing: -0.045em;
		font-weight: 400;
	}
	
	.total-score{background: #333;}
	
	.resultchart canvas {
	  position: absolute;
	  top: 10px;
	  left: 10px;
	}
	
	.pieCharts-lp .resultchart {
	  height: 100px;
	  margin: 10px 0;
	  width: 100%;
	}
	
	.result-box {padding: 1em 1em;}
	.gauge-charts .gauge-chart-container {
	  margin:  0 0 25px 0;
		height: 120px;
		width: 100%;
	}
	
	.matrix-row, .supplement-row{flex-wrap: wrap;}
	.matrix-item, .supplement-item{
		margin: 0 0 10px 0;
		flex-basis: 100%;
		max-width: 100%;
	}
	
	
	.bg-group, .bg-finish, .bg-learningpath, .bg-learningpath-finish {
		padding: 1em 0 1em 0;
	}

	
	table {width:100%;}
	thead {display: none;}
	tr:nth-of-type(2n) {background-color: inherit;width:100%;}
	tr td:first-child {width:100%;}
	tbody td {display: block;}
	tbody td:before { 
    content: attr(data-th); 
    display: block;
  }
	td:nth-child(2) {width: 100%;}
	
	.spaceline {display: none;}
	
	.likert {
		flex-wrap: wrap;
	}

	.likert::before {
		height: 90%;
		width: 6px;
		top: 0;
		left: 0;
		background: linear-gradient(to bottom, rgba(var(--bs-danger-rgb),.4) 0%, rgba(255,255,255,0.6) 50%, rgba(var(--bs-green-rgb),.4) 100%);

	}
	
	.likert li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding: 0 0 20px 0;
		margin: 0;
	}
	
	.option-input-label span {
		line-height: 1;
		font-size: 1.2rem;
	}

}

/* Landscape phone */
@media (min-width: 321px) and (max-width: 767px) {
	
	.radarChart{display: none;}
	
	.radarChart{
		position: relative;
		left: 0;
		right: 0;
		clear: both;
	}

	.pieCharts{
		float: none;
		position: relative;
		width: 100%;
		margin: 10px 0 0 0;
	}
	
	.resultchart {
	  float: mone;
	  height: 90px;
	  margin: 10px;
	  padding: 10px;
	  position: relative;
	  text-align: center;
	  width: 90%;
	}
	
	.scorepart{
		font-size: 14pt;
	  position: absolute;
		padding: 10px 20px;
		line-height: 70px;
		width: 90px;
		text-align:center;
		letter-spacing: -0.045em;
		font-weight: 400;
	}
	
	.total-score{background: #333;}
	
	.resultchart canvas {
	  position: absolute;
	  top: 10px;
	  left: 10px;
	}
	
	.pieCharts-lp .resultchart {
	  height: 100px;
	  margin: 10px 0;
	  width: 100%;
	}
	
	.result-box-1 .result-text {
	  max-width: 100%;
		margin: 1em 1em 3em 1em;
	}
	
	.gauge-charts .gauge-chart-container {
		height: 120px;
		width: 45%;
	}
	
	.matrix-row, .supplement-row{flex-wrap: wrap;}
	.matrix-item, .supplement-item{
		margin: 0 0 10px 0;
		flex-basis: 100%;
		max-width: 100%;
	}
	
		
	.bg-group, .bg-finish, .bg-learningpath, .bg-learningpath-finish {
		padding: 1em 0 1em 0;
	}
		
	table {width:100%;}
	thead {display: none;}
	tr:nth-of-type(2n) {background-color: inherit;width:100%;}
	tr td:first-child {width:100%;}
	tbody td {display: block;}
	tbody td:before { 
    content: attr(data-th); 
    display: block;
  }
	td:nth-child(2) {width: 100%;}
	

	.spaceline {display: none;}
	
	.likert {
		flex-wrap: wrap;
	}

	.likert::before {
		height: 90%;
		width: 6px;
		top: 0;
		left: 0;
		background: linear-gradient(to bottom, rgba(var(--bs-danger-rgb),.4) 0%, rgba(255,255,255,0.6) 50%, rgba(var(--bs-green-rgb),.4) 100%);

	}
	
	.likert li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		text-align: center;
		align-items: center;
		justify-content: center;
		padding: 0 0 20px 0;
		margin: 0;
	}
	
	.option-input-label span {
		line-height: 1;
		font-size: 1.2rem;
	}


}
  
/* Portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
	
	.radarChart{
		position: relative;
		left: 0;
		right: 0;
		clear: both;
	}

	.pieCharts{
		float: none;
		position: relative;
		width: 100%;
		margin: 10px 0 0 0;
	}
	
	.resultchart {
		float: left;
		width: 30%;
	  position: relative;
	  margin: 10px;
		padding: 10px;
		text-align:center;
		height: 150px;
	}
	
	.scorepart{
		font-size: 14pt;
	  position: absolute;
		padding: 10px 20px;
		line-height: 70px;
		width: 90px;
		text-align:center;
		letter-spacing: -0.045em;
		font-weight: 400;
	}
	
	.total-score{background: #333;}
	
	.resultchart canvas {
	  position: absolute;
	  top: 10px;
	  left: 10px;
	}
	
	.resulttext {
		float: none;
		font-size: 16pt;
		line-height: 18pt;
		font-weight: 300;
		bottom: 10px;
		position: absolute;
		padding:5px 0 0 5px;
		margin: 0;
		text-align: left;
	}
	
	.gauge-charts .gauge-chart-container {
		height: 120px;
		width: 32%;
	}

	
	.spaceline {display: none;}

}
 
/* landscape tablet */
@media (min-width: 769px) and (max-width: 1199px) {


}
 
/* desktop */
@media (min-width: 1200px) {

	}