/* Global */
:root {
	--white: #ffffff;
	--ink-base: #404446;
	--ink-light: #6C7072;
	
	--sky-dark: #979C9E;
	--sky-base: #CDCFD0;
	--sky-light: #E3E5E5;
	--sky-lighter: #F2F4F5;
	--sky-lightest: #F7F9FA;
	
	--hire-dark: #799300;
	--hire-base: #A8CD02;
	--hire-light: #C1DB4C;
	--hire-lighter: #D3E680;
	--hire-lightest: #F2FBCC;

	--lead-dark: #881F59;
	--lead-base: #AE4C83;
	--lead-light: #CE71A4;
	--lead-lighter: #DFAECA;
	--lead-lightest: #F7D2E6;
	
	--flow-dark: #B78300;
	--flow-base: #D89B02;
	--flow-light: #E0AF35;
	--flow-lighter: #F1DBA4;
	--flow-lightest: #FFF3D4;
}
/* Global reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Page Type Colors */
body{
	background-color: var(--sky-lighter);
}
body.page-hire .quiz-header .wp-element-button{
	background-color: var(--white);
	border: 1px solid var(--hire-base);
	color: var(--hire-base);
}
body.page-lead .quiz-header .wp-element-button{
	background-color: var(--white);
	border: 1px solid var(--lead-base);
	color: var(--lead-base);
}
body.page-flow .quiz-header .wp-element-button{
	background-color: var(--white);
	border: 1px solid var(--flow-base);
	color: var(--flow-base);
}
/* Buttons */
.btn{
	padding: 16px 32px;
	color: var(--white);
	
	border: 1px solid;
	border-radius: 48px;
	
	font-weight: 500;
	font-size: 16px;
	line-height: 16px;
	
	outline: none;
	box-shadow: none;
	
	text-decoration: none;
	transition: 0.3s;
	cursor: pointer;
}
.btn[disabled]{ cursor: not-allowed; }
body.page-hire .btn.btn_primary{ background: var(--hire-base); border-color: var(--hire-base);}
body.page-hire .btn.btn_secondary{ background: var(--white); color: var(--hire-base); border-color: var(--hire-base);}
body.page-flow .btn.btn_primary{ background: var(--flow-base); border-color: var(--flow-base);}
body.page-flow .btn.btn_secondary{ background: var(--white); color: var(--flow-base); border-color: var(--flow-base);}
body.page-lead .btn.btn_primary{ background: var(--lead-base); border-color: var(--lead-base);}
body.page-lead .btn.btn_secondary{ background: var(--white); color: var(--lead-base); border-color: var(--lead-base);}
.btn.btn_primary[disabled]{
	background-color: var(--sky-light)!important;
	border-color: var(--sky-light)!important;
	color: var(--sky-dark)!important;
}
.btn.btn_secondary[disabled]{
	background-color: transparent!important;
	border-color: var(--sky-base)!important;
	color: var(--sky-base)!important;
}
.btn:hover{
	transform: scale(1.05);
}
/* Quiz */
.quiz-wrapper{}
.quiz-wrapper .entry-content{
	padding: 0px!important;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* background-color: var(--white);
	overflow: auto; */
}
.quiz-header{
	background-color: var(--sky-lightest);
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	width: 100%;
	max-width: 100%;
	padding: 16px 24px;
}
.quiz-logo{
	display: flex;
}
.quiz-logo > img{
	width: 98px;
	max-width: 100%;
}
.quiz-header .quiz-header__btn{
	padding: 8px 16px;
}

/* Neuroform */
.neuroform{
	display: flex;

    width: 100%;
    max-width: 100%;

	margin: 0px;
    padding: 0px;
}
.neuroform .neuroform__form{
	width: 1080px;
	max-width: 96vw;

	height: 84vh;
	margin: 8vh auto;

	background: var(--white);
    border-radius: 32px;
	overflow: hidden;
}

/* Welcome Screen */
.neuroform__welcome{
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr 1fr;

	flex: 1;
	height: 100%;
    overflow: auto;
}
.neuroform__user-info{
	position: relative;

	display: flex;
    flex-direction: column;
	justify-content: center;
    grid-gap: 8px;

	padding: 40px;
}
.neuroform__user-info label{
	font-size: 12px;
}
.neuroform__user-info input{
	padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--sky-light);
    /* margin-top: 8px;  */
	width: 320px;
	max-width: 100%;
}
.neuroform__welcome-logo{
	margin-bottom: 40px;
}
.neuroform__welcome-logo > img{
	width: 94px;
}
.neuroform__welcome-title{
    font-size: 48px;
	line-height: 52px;
	font-weight: bold;

	width: 100%;
    max-width: 420px;

	margin-bottom: 16px;
}
body.page-hire .neuroform__welcome-image{
	background-color: var(--hire-lightest);
}
body.page-flow .neuroform__welcome-image{
	background-color: var(--flow-lightest);
}
body.page-lead .neuroform__welcome-image{
	background-color: var(--lead-lightest);
}

/* Quiz */
.neuroform .neuroform__header{
	display: flex;
	align-items: center;
}

.neuroform .neuroform__progress{
	display: flex;
	flex-direction: column;
	grid-gap: 8px;
	
	padding: 12px 24px;
	margin: 0 auto;

	width: 680px;
	max-width: 100%;
}
.neuroform .neuroform__progress-text{
	font-size: 14px;
	line-height: 14px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	grid-gap: 8px;

	color: var(--ink-light);
}
.neuroform .progress-bars{
	display: flex;
	grid-gap: 8px;
}
.neuroform .progress-bars > progress {
	width: 100%;
	height: 8px;
	appearance: none;
	-webkit-appearance: none;
	border: none;
	border-radius: 8px;
	background-color: var(--sky-lighter);
	overflow: hidden;
}
/* For the progress bar itself */
progress::-webkit-progress-bar {
	background-color: var(--sky-lighter);
	border-radius: 8px;
}
body.page-hire progress::-webkit-progress-value { background-color: var(--hire-base); }
body.page-lead progress::-webkit-progress-value { background-color: var(--lead-base); }
body.page-flow progress::-webkit-progress-value { background-color: var(--flow-base); }
body.page-hire progress::-moz-progress-bar { background-color: var(--hire-base); }
body.page-lead progress::-moz-progress-bar { background-color: var(--lead-base); }
body.page-flow progress::-moz-progress-bar { background-color: var(--flow-base); }

.neuroform .neuroform__questions{
	display: flex;
    flex-direction: column;
	height: 100%;
}
.neuroform .neuroform__questions .section{
	padding: 12px 24px;
	margin: 0 auto;

	width: 680px;
	max-width: 100%;

	overflow: auto;
}
.neuroform .neuroform__questions .section.section--hidden{
	display: none;
}


.neuroform .neuroform__nav{
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px;
	padding: 12px 24px;
	margin: 0 auto;

	width: 680px;
	max-width: 100%;
}

/* Questions */
.question{
	padding: 20px 12px;
	border-radius: 24px;
	background-color: var(--sky-lightest);
	margin-bottom: 12px;
}
.question.question--hidden{
	display: none;	
}

.question__title{
    width: 520px;
    margin: 0px auto 24px;

    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    
    text-align: center;

    /* Ink/Darkest */
    color: #090A0A;
}
.question__answers{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
}
.question__answer{
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-gap: 12px;
	
	background: #fff;
	border-radius: 16px;
	padding: 16px;
}

.question__answer input[type="radio"]{
	width: 24px;
    height: 24px;
	outline: none;
}
.answer{
	display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: space-between;

    grid-gap: 12px;
	
	flex: 1;
}
.answer .answer__label{
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	/* or 100% */
	text-align: center;

	/* Ink/Darkest */
	color: #090A0A;
}

.neuro-hero {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.neuro-hero__text { flex: 1; min-width: 0; }
.neuro-hero__meters {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.meter { text-align: center; }
.meter__label { margin-top: 8px; font-size: 16px; line-height: 1.2; }