/* import fonts */
@font-face {
font-family: 'Whitney-Book-Adv';
src: url('../fonts/Whitney-Book-Adv.otf') format("opentype");
}

@font-face {
font-family: 'Whitney-Medium-Adv';
src: url('../fonts/Whitney-Medium-Adv.otf') format("opentype");
}

* {
font-family: 'Whitney-Book-Adv';
}

span {
font-family: inherit;
}

html,
body {
width: 100%;
height: 100%;
max-width: 100%;
color: #383B3E;
}

/* Fonts for text */
.bold-text {
font-family: 'Whitney-Medium-Adv';
}

.normal-text {
font-family: 'Whitney-Book-Adv';
}

span.normal-text {
	font-size: 18px;
	color: #383b3e
}

/*Did you know? header repositioning*/
div.col-sm-12 p span.bold-text {
	position: absolute;
	margin-top: 7px;
	font-size: 24px !important;
}

/*Did you know? body text font sizing*/
div.col-sm-12 p span,
div.col-sm-12 ol li,
div.col-sm-12 ul li,
div.col-md-8 ul li{
	font-size: 19px;
}

/*override text alignment*/
.text-left {text-align:left!important;
}

/* Global CSS */
p {
	font-size: 18px;
}

a {
	color: #C41F3E; /*#057E45;*/
}

a:hover,
a:active,
a:focus {
	color: #C41F3E; /*#057E45;*/
	text-decoration: underline;
}

.bg-light-primary-text-color {
background-color: #C41F3E;
}

.left-side-bar p {
color: #ffffff;
}

.gray {
color: #707070;
}

.primary-text-color {
color: #C41F3E;
}

.d-none {
background: none !important;
}

h2.primary-text-color,
h3.primary-text-color {
color: #C41F3E;
}

.btn {
background-color: #C41F3E;
color: white;
font-size: 16px;
border: solid 1px #C41F3E;
border-radius: 0;
}


.btn-lg {
padding: 12px 32px;
}

.btn:hover {
color: white;
background-color: #d62949;
}

.btn.disabled,
.btn:disabled {
cursor: default !important;
pointer-events: none;
}

.btn-group .btn {
padding-top: 8px;
padding-bottom: 9px;
margin-right:10px;
}

.page-question-page, .page-result-page, .welcome-page {
/* background-image: url('../images/v1_Question page.png'); */
/* background-position: right 53px !important;
background-size: cover; */
background-color: #F5E3E8;

}

.based-result {
color: #C41F3E;
text-align: left;
}

.page-question-page{
/* background-image: url('../images/v1_Question page.png'); */
/* background-position: right 53px !important;
background-size: cover; */

border-bottom: 69px solid #F0D4D9;
}

/* .page-result-page {
background-image: url('../images/v1_Result page.png');
background-position: left 0px !important;
background-size: cover;

} */

.page-result-page .large-bg-shape {
/* background-image: url("../images/Background%20Shape.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center; */
background-color: #F5E3E8;

}

.question-image, .next-slide-image {
max-width: 100%;
}

@media (max-width: 768px) {

.question-image {
width: 302px;
margin: 0 auto;
display: block;
}

}

h2.questions {
font-family: 'Whitney-Medium-Adv';
}

.question-container {
width: 76%;
margin: 0 0 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}

@media (min-width: 412px) {

.question-container {
width: 100%;
margin: 0 0 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
}

@media (min-width: 768px) {

.question-container {
width: 63%;
margin: 0 0 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
}

@media (min-width: 992px) {

.question-container {
width: 76%;;
margin: 0 0 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
}

.left-side-bar ul,ol {
color: #ffffff;
}

.page-left-bar {
z-index: 99999;
}

.page-left-bar > div {
border-right: 1px solid #B4E0CB;
/* box-shadow: 5px 15px 15px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 5px 15px 15px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 5px 15px 15px 0 rgba(0, 0, 0, 0.15);
-khtml-box-shadow: 5px 15px 15px 0 rgba(0, 0, 0, 0.15); */
}

.page-left-bar a.close-btn {
display: none;
bottom: 0;
position: absolute;
font-size: medium;
text-decoration: underline;
right: 0;
color: #383B3E;
}

.page-left-bar > div {
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}

.page-left-bar > div::-webkit-scrollbar {
width: 10px;
}

.page-left-bar > div::-webkit-scrollbar-track {
background: #FFF;
}

.page-left-bar > div::-webkit-scrollbar-thumb {
background: #d43d58;
}

.page-left-bar > div::-webkit-scrollbar-thumb:hover {
background: #d43d58;
}

input.labelauty+label {
width: 100%;
margin-bottom: 15px;
}

.page-nav-bar {
display: inline;
}

/* Labelauty overriden css */
input.labelauty+label {
font-size: 18px;
padding: 20px;
color: #383B3E;
border: 1px solid #C41F3E;

border-radius: 0;
}

input.labelauty+label:hover,
input.labelauty:checked+label {
background-color: #C41F3E !important;
color: white !important;
}

input.labelauty+label>span.labelauty-unchecked-image,
input.labelauty+label>span.labelauty-checked-image {
width: 0px;
}

input.labelauty+label>span.labelauty-unchecked,
input.labelauty+label>span.labelauty-checked {
display: inline-block;
line-height: 25px;
vertical-align: middle;
}

/* medium screen, before small screen break point */
@media (min-width: 768px) {
.page-left-bar {
left: -57%;
}
}

/* large screen, before medium screen break point */
@media (min-width: 992px) {
.page-left-bar {
left: -74%;
}
}

/* small screen breakpoint */
@media (max-width: 767px) {

.page-result-page {
background-image: url('../images/v1_Result page Mobile.png');
background-size: cover;
}

.page-result-page .large-bg-shape {
background: none;
}

.page-result-page .small-bg-shape {
background-image: url("../images/Background%20Shape%20-%20mb.png");
background-size: 90%;
background-repeat: no-repeat;
background-position: center;
}

.page-result-page .large-bg-shape.small-bg-shape {
background-size: contain;
}

.page-left-bar a.close-btn {
display: block;
}

.page-left-content {
max-height: calc(100vh - 64px);
}

.page-left-content img {
width: 64px;
margin-left: -1.25rem;
}
}

.navbar {
background-color: #F8F8F8;
border-bottom: .5px solid #DADADA;
}

.custom-switch .custom-control-label {
margin-top: -4px;
cursor: pointer;
}

.custom-switch .custom-control-label::before {
animation: none;
left: -2.25rem;
width: 48px;
height: 25px;
pointer-events: all;
border-radius: 12px;
content: ' EN \A0\A0\A0\A0 FR';
font-size: 10px;
background-color: #DCDCDC !important;
border-color: #DCDCDC !important;
border-width: 6px;
border-left-width: 7px;
border-right-width: 7px;
color: black !important;
}

.custom-control-label::after {
width: 22px!important;
height: 20px!important;
left: calc(-2.25rem + 3px) !important;
content: 'EN';
font-size: 10px;
background-color: white !important;
border-width: 4px;
border-top-width: 3px;
border-left-width: 4.5px;
border-color: white;
border-style: solid;
border-radius: 9px !important;
margin-top: .5px;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
content: 'FR';
width: 22px!important;
left: -25px !important;
border-left-width: 5.5px;
}

/* Additional animation delay timings */
.animate__animated.animate__delay-p25s {
-webkit-animation-delay: .25s;
animation-delay: .25s;
-webkit-animation-delay: calc(var(--animate-delay)*.25);
animation-delay: calc(var(--animate-delay)*.25);
}
.animate__animated.animate__delay-p5s {
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-animation-delay: calc(var(--animate-delay)*.5);
animation-delay: calc(var(--animate-delay)*.5);
}
.animate__animated.animate__delay-p75s {
-webkit-animation-delay: .75s;
animation-delay: .75s;
-webkit-animation-delay: calc(var(--animate-delay)*.75);
animation-delay: calc(var(--animate-delay)*.75);
}
.animate__animated.animate__delay-1p25s {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
-webkit-animation-delay: calc(var(--animate-delay)*1.25);
animation-delay: calc(var(--animate-delay)*1.25);
}
.animate__animated.animate__delay-1p5s {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-delay: calc(var(--animate-delay)*1.5);
animation-delay: calc(var(--animate-delay)*1.5);
}
.animate__animated.animate__delay-1p75s {
-webkit-animation-delay: 1.75s;
animation-delay: 1.75s;
-webkit-animation-delay: calc(var(--animate-delay)*1.75);
animation-delay: calc(var(--animate-delay)*1.75);
}
.animate__animated.animate__delay-2p25s {
-webkit-animation-delay: 2.25s;
animation-delay: 2.25s;
-webkit-animation-delay: calc(var(--animate-delay)*2.25);
animation-delay: calc(var(--animate-delay)*2.25);
}
.animate__animated.animate__delay-2p5s {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
-webkit-animation-delay: calc(var(--animate-delay)*2.5);
animation-delay: calc(var(--animate-delay)*2.5);
}
.animate__animated.animate__delay-2p75s {
-webkit-animation-delay: 2.75s;
animation-delay: 2.75s;
-webkit-animation-delay: calc(var(--animate-delay)*2.75);
animation-delay: calc(var(--animate-delay)*2.75);
}

.animate__animated.animate__speed-p3s {
animation-duration: 0.3s;
}

#loading-overlay {
cursor: wait;
z-index: 100000;
top: 0;
left: 0;
}

.no-click {
pointer-events: none !important;
}

/* For Pop-up Test Button*/
.popup-wrapper {
position: relative;
background-color: #0000;
overflow: auto;
top: 30%;
position: fixed;
background: #ffffff;
padding: 30px 20px;
z-index: 200000;
left: 0;
right: 0;
margin: auto;
width: 70%;
display: none;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}

.popup-content {
width: 100%;
text-align: center;
}

.pop-overlay {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.5);
display: none;
}

.is-visible {
display: block;
}

.button-content {
margin: 6px;
}

.test-btn {
position: absolute;
right: 0;
z-index: 10000;
bottom: 0;
margin: 20px;

}

#button-test {
display: none;
}

.btn-bck, .btn-continue{
	min-width: 150px !important;
	border-radius:8px;
}

.btn.page-next-nav{
	background-color: #881d41;
	border: solid 1px #881d41;
}

.btn.page-next-nav.disabled{
	border: solid 1px #881d41;
}