/*new css from here*/
/*Added by Dorithy on 14/11/2022*/
.role-question-image {
	width: 100px;
}
.role-question-circle-image {
	position: relative;
	width: 60px;
	height: 60px;
	left: 1140px;
	bottom: 110px;
}
.explanation-gray-bg {
	background-color: #f7f7f7;
	padding: 25px 50px;
	border-radius: 20px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.submit-title {
	padding-block: 5px;
}
.submit-section-logo {
	position: relative;
	width: 60px;
	height: 60px;
	left: 1140px;
	bottom: 110px;
}
.submit-result-circle-logo {
	position: relative;
	width: 60px;
	height: 60px;
	left: 1140px;
	bottom: 110px;
}

.submit-section-circle-logo {
	position: relative;
	width: 60px;
	height: 60px;
	left: 1140px;
	bottom: 110px;
}
.graph-title {
	padding: 20px;
}
.explanation-main-title {
	padding: 10px;
	height:70px;
}
.button-back-question {
	color:#ff6347;
	background-color:#fff;
}
.button-submit-question {
	color:#fff;
	background-color:#ff6347;
}
.main-bg-blue{
	background-color:#055686;
	color:#ffd618;
	text-align: center;
	border-radius: 50px;
	font-family: 'Lato', sans-serif;
	margin-bottom: 50px;
	font-size: 2vw;
}
.welcome-section-logo {
	position: relative;
	top: 80px;
	width: 70px;
	left: 20px;
	height: 70px;

}
.welcome-section-circle-logo {
	position: relative;
	width: 60px;
	height: 60px;
	bottom: 130px;
	left: 1150px;
	top:-130px;
}
.btn_next_question {
	color:#fff;
	background-color:#ff6347;
	border: 1px solid #ff6347;
}
.btn_next_question:hover {
	background: #fff;
	color:#ff6347;
	border:1px solid red;
 	transform: translateY(-7px);	
}
.btn_back_question {
	color:#ff6347;
	background-color:fff;
	border: 1px solid #ff6347;
}
.btn_back_question:hover {
	background-color:#ff6347;
	color:#fff;
	border:1px solid #ff6347;
	transform: translateY(-7px);
}

.form-question-circle-image {
 	width: 90px;
  	position: relative;
	bottom: 110px;
 	left: 1150px;
}
.form-question-role-image {
  width: 100px;
  position: relative;
  left: 20px;
  top: 85px;
}
.survey-section-image {
  width: 100px;
  height: 100px;
  position: relative;
  right: 200px;

}
.item-wrap-yellow {
  padding: 1em;
  position: relative;
  height: 100%;
}
/*Text when active*/
.item-wrap-yellow p {
       color: #055686;
}
.item-wrap-yellow:before, .item-wrap-yellow:after {
  position: absolute;
  left: 0;
  content: " ";
  width: 100%;
  height: 40%;
  background-color: #FBC64F;
  margin-block: 10px;
}
.item-wrap-yellow:before {
  top: 0;
  transform: skew(20deg);
  border-radius: 0.2em 0.2em 0 0;
}
.item-wrap-yellow:after {
  bottom: 0;
  transform: skew(-20deg);
  border-radius: 0 0 0.2em 0.2em;
}
.item-wrap {
  padding: 1em;
  position: relative;
  height: 100%;
}

/*text when not active*/
.item-wrap p {
	color: #E0FFFF;
}
.item-wrap:before, .item-wrap:after {
  position: absolute;
  left: 0;
  content: " ";
  width: 100%;
  height: 50.5%;
}
.item-wrap:before {
  top: 0;
  transform: skew(20deg);
  border-radius: 0.2em 0.2em 0 0;
}
.item-wrap:after {
  bottom: 0;
  transform: skew(-20deg);
  border-radius: 0 0 0.2em 0.2em;
}
.role-label-container {
	column-count: 2;
}
.blue-circle-background {
    /*width: 100px;*/
    height: 100px;
    /*background: #0F4593;*/
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; 
    font-size: 28px;
    /*border: 8px solid #4F77AF;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-direction: column;
    cursor: pointer;
}
.blue-circle-background p {
    font-size: 14px;
    margin-bottom: 0;
    z-index: 1;	
    text-align: center;
    font-family:'Lato', sans-serif;
    width: 50px;
  }


.step-title {
    color: #fff;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: bold;
}
/*Edited by Dorithy on 14/11/2022*/
.yellow-circle-background {
    /*width: 110px;*/
    height: 110px;
    /*background: #efc23a;*/
    color: #FFFFFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 28px;
    /*border: 8px solid #fce292;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-direction: column;
    cursor: pointer;
}
.yellow-circle-background p {
    font-size: 14px;
    margin-bottom: 0;	
    z-index: 1;
    text-align: center;
    position: relative;
    top: -15px;
    margin-top: 25px;
    width: 50px;
}

.background-color-blue-button {
    background-color: #0F4593;
    color: #FFFFFF;
}

.background-color-yellow {
    background-color: #fdcd3b;
}

.step-line-blue {
    border-top: 4px solid #0F4593;
    margin-top: 4rem;
}

.step-line-yellow {
    border-top: 4px solid #fdcd3b;
    margin-top: 4rem;
}

input[type=radio]:checked+div {
    background-color: #0F4593;
    color: #FFFFFF;
    display: block !important;
}

input[type=radio]:checked+div+div {
    display: none !important;
}

.blue-text {
    color: #0F4593;
}

.yellow-text {
    color: #fdcd3b;
}

.radio_select {
    display: block;
}

.booking_selected_border {
    border: 1px solid #0F4593 !important;
}

.radio_not_selected_text {
    background-color: #C4C4C4;
    color: #FFFFFF;
}

.w-100px{
    width:100px;
}
/*Edited by Dorithy 14/11/2022*/
.form-step-wrapper {
    width: 100%;
    background-color: #005284;
    padding-inline: 150px;
    border-radius: 70px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    /*width: 70%;*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 25px;
}

.form-step-wrapper .step-2 {
    display: flex;
    align-items: center;
}

.form-step-wrapper .step-3 {
    display: flex;
    align-items: center;
}
/*Edited by Dorithy on 15/11/2022*/
.progress-line {
   /*content: '';*/
   /* display: inline-block;*/
   /* align-items: center;*/
   /*height: 2px;*/
   /*width: 8vw;*/
   /* background-color: #f3f3f3;*/
    margin-right: 10px;
    margin-left: 10px;
}

.progress-line-blue {
    background-color: #d5d7d9;
}

.form-step-wrapper .step-4 {
    display: flex;
    align-items: center;
}



.form-step-wrapper .step-2 .wrapper,
.form-step-wrapper .step-1,
.form-step-wrapper .step-3 {
    text-align: center;
}

.survey-wrapper {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.survey-box {
    background-color:#FAF8E5;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
}

.question {
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 10px;
    background: #e9eaed;
    border-radius: 70px;
    
}

.survey-title {
    margin:100px;
}
.sr-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color:#005284;

}
.sr-text {
    font-size: 16px;
    text-align: center;
    color:#005284;
    font-weight: 600;
    margin-block: 15px; 

}
/*Radio button*/
.sr-container {
    padding: 100px;

}


.rb {
    padding: 16px 0;
    text-align: center;
    background-color: rgba(255, 255, 255, .03);
    border-radius: .3em;
}

.sr-text{
	display: block;
	text-align: center;
	margin-bottom: 15px;
	padding-inline: 60px;
}

.rating-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap
}


.rb-tab.answer_click{
	font-size: 18px;
	width: 45px;
	height: 45px;
	border: 1px solid #474747;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 10px;
	cursor: pointer;
	transition: 0.15s;
	font-weight:600;
}

 .rb-start{
	 margin-right: 10px;
	 font-size: 18px;
	 color:#ff6347;
	 font-weight: 600;
 }

 .rb-end{
	margin-left: 10px;
	font-size: 18px;
	 color:#ff6347;
	font-weight: 600;

}

.rb-tab.answer_click:hover, .rb-tab-active{
	border-color: #0F4593;
	background-color: #0F4593;
	color: #fff;
}

.question-btn-wrap {
  
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-question-submit {
    margin:20px;
    width: 140px;
    height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    border-radius: 45px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    border: none;
	white-space: nowrap;
   }

/*.btn-question-submit:hover {
    background-color: #0f4593;
    box-shadow: 0 15px 20px rgb(123, 167, 209);
    color: white;
    transform: translateY(-7px);
}*/
@media(max-width:1699px) {
	.submit-section-circle-logo {
		left:1150px;
	}
	
	.welcome-section-circle-logo {
		top: -120px;
	}
	.welcome-section-logo {
		top: 75px;
	}
}
@media screen and (max-width: 1489px) {
  
    .wrap {
        width: 100%;
    }
}
@media screen and (max-width: 980px) {
  
    .wrap {
        width: 100%;
    }
}

@media screen and (max-width: 320px) {

    .survey-box {
        width:600px;
        margin:0 50px auto 50px;
    }
    .wrap {
        width: 800px;
    }


}


body{
	color: #474747;
	background-color: #FAF8E5;
}

body .wrapper{
	background-color: #FAF8E5;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 25px 25px;
	border-radius: 20px;
}


.role-section h1{
	text-align: center;
	font-weight: bold;
	margin-bottom: 25px;
	color:#FFD618;
	background-color:#005284;
	border-radius: 100px;
}

.role-section h2{
	font-size: 26px;
	font-weight: bold;
	color:#ffd618;
	background-color:#005284;
	padding: 10px;
	text-align: center;
}

.gray-bg{
	background-color: #f7f7f7;
	padding: 25px 50px;
	border-radius: 20px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.role-section .role-label{
	display: block;
	margin-right: 25px;
}

.btn_question_role,  .btn_submit_result, .btn_welcome_page, .btn_question_role_back, .btn_submit_back{
    margin-top:25px;
    margin-bottom: 15px;
    height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    color:#fff;
    background-color: #FF6347;
    border:none;
    border-radius: 45px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    width: 200px;
    white-space: nowrap;
    
}

/*Added by dorithy on 10/11/2022*/
.btn_question_role_back {
    margin-top:25px;
    margin-bottom: 15px;
    width: 200px;
    height: 45px;
    font-family: 'Roboto Mono', monospace;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    color:#FF6347;
    background-color: #ffffff;
    border: 1px solid #FF6347;;
    border-radius: 45px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;

}
/*.btn_question_role:hover, .btn_submit_result:hover, .btn_welcome_page:hover, .btn_question_role_back:hover, .btn_submit_back:hover {
    background-color: #0f4593;
    box-shadow: 0 15px 20px rgb(123, 167, 209);
    color: white;
    transform: translateY(-7px);
}*/

.graph-title{
	font-size: 30px;
	text-align: center;
	margin-top: 15px;
}

.chart-content{
	margin-left: auto;
	margin-right: auto;
}
@media(max-width: 2880px) {
.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

   .role-question-image {
	position: relative;
	top: 85px;
	left: 20px;
  }
  .role-question-circle-image {
	width: 80px;
	position: relative;
	left: 1150px;
	bottom: 105px;
  }
.btn_question_role_back {
	margin-inline: 30px;

	}
.submit-result-circle-logo {
	position: relative;
	width: 50px;
	height: 50px;
	left: 1150px;
	bottom: 100px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -70px;
	left: 20px;
	}

}


}
@media (max-width: 1699px) {
.submit-result-circle-logo {
	position: relative;
	width: 50px;
	height: 50px;
	left: 1150px;
	bottom: 110px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -70px;
	left: 20px;
	}

}

.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

.role-question-image {
	position: relative;
	top: 85px;
	left: 20px;
  }
  .role-question-circle-image {
	width: 80px;
	position: relative;
	left: 1150px;
	bottom: 105px;
  }
.btn_question_role_back {
	margin-inline: 30px;

	}


}
@media (max-width: 1599px) {
 .role-question-image {
	position: relative;
	top: 85px;
	left: 20px;
  }
  .role-question-circle-image {
	width: 80px;
	position: relative;
	left: 1150px;
	bottom: 105px;
  }
.btn_question_role_back {
	margin-inline: 30px;

	}


.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}
.submit-result-circle-logo {
	position: relative;
	width: 50px;
	height: 50px;
	left: 1150px;
	bottom: 110px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -70px;
	left: 20px;
	}

}


}
@media(max-width: 1499px) {
	.main-bg-blue {
		padding-block: 5px;
		
	}
	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

 .role-question-image {
	position: relative;
	top: 85px;
	left: 20px;
  }
  .role-question-circle-image {
	width: 80px;
	position: relative;
	left: 1150px;
	bottom: 105px;
  }
	.btn_question_role_back {
	margin-inline: 30px;

	}

.result_wrapper {
		position: relative;
		left: 150px;
	}
.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

.submit-result-circle-logo {
	position: relative;
	width: 50px;
	height: 50px;
	left: 1150px;
	bottom: 110px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -70px;
	left: 20px;
	}

	.welcome-section-logo {
		width: 30px;
	}

}
@media(max-width:1399px) {
	.main-bg-blue {
		padding-block: 5px;
		
	}
	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

   .btn_question_role_back {
	margin-inline: 30px;

	}

  .role-question-image {
	position: relative;
	top: 85px;
	left: 20px;
  }
  .role-question-circle-image {
	width: 80px;
	position: relative;
	left: 970px;
	bottom: 105px;
  }
  .survey-section-image {
	position: relative;
	right: 120px;
  }
  .form-question-role-image {
	position: relative;
        right: 160px;
	width: 100px;
	height: 70px;
	top:  80px;
  }
 .form-question-circle-image {
	width: 80px;
	height: 60px;
	position: relative;
	left: 970px;
  	bottom: 110px;

 }
 .welcome-section-logo {
	 top: 70px;
 }
	.welcome-section-circle-logo {
		left: 985px;
		top: -115px;
		width: 50px;
		height: 50px;
	}
	.submit-section-circle-logo {
		left: 980px;
		bottom: 110px;
	}
	.result_wrapper {
		position: relative;
		left: 70px;
	}
	.submit-result-circle-logo {
		position: relative;
		width:40px;
		height: 40px;
		left: 1000px;
		bottom: 75px;
	}

	.submit-section-logo {
		position: relative;
		width: 50px;
		height: 50px;
		bottom: -53px;
		left: 20px;
	}

}
@media (max-width: 1299px) {
	.main-bg-blue {
		padding-block: 5px;
		padding-inline: 0;
	}
	.submit-result-circle-logo {
		position: relative;
		width: 40px;
		height: 40px;
		left: 1000px;
		bottom: 75px;
	}

	.submit-section-logo {
		position: relative;
		width: 50px;
		height: 50px;
		bottom: -54px;
		left: 20px;
	}

	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 70px;
	}
	.btn_question_role_back {
		margin-inline: 30px;

	}

	.role-question-image {
		position: relative;
		width: 80px;
		top: 60px;
		left: 20px;
	}
	.role-question-circle-image {
		position: relative;
		width: 70px;
		left: 990px;
		height: 45px;
		bottom: 85px;
	}
	.role-section h1 {
	
		text-align: center;
	}
	.submit-section-circle-logo {
		left: 980px;
		bottom: 100px;

	}
	.welcome-section-logo {
		top: 70px;
	}
	.welcome-section-circle-logo {
		top: -111px;
		left: 980px;
		width: 50px;
		height: 50px;
	}
	.form-question-role-image {
		position: relative;
		right: 160px;
		width:80px;
		height: 60px;
		top: 65px;
	}

	.form-question-circle-image {
		width:70px;
		left: 990px;
		bottom: 85px;	
		height: 45px;
	}
	
}
@media(max-width:1199px) {
	.submit-result-circle-logo {
	position: relative;
	width: 45px;
	height: 45px;
	left: 800px;
	bottom: 105px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -70px;
	left: 20px;
	}

.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

  .result_wrapper {
		position: relative;
		left: 30px;
	}

  .btn_question_role_back {
	margin-inline: 30px;

	}

 .submit-section-circle-logo {
	left: 800px;

 }

  .survey-section-image {
	position: relative;
	right: 40px;
  }
  .form-question-role-image {
	position: relative;
	left: 20px;
	top: 65px;
	width:80px;
	height: 60px;

  }
.form-question-circle-image {
	left: 810px;
	bottom: 87px;
	width: 80px;
	height: 50px;
  }
 .welcome-section-circle-logo {
	left: 800px;

 }
 .role-question-circle-image {
	position: relative;
	left :820px;
}

}
@media (max-width:1024px) {
	.main-bg-blue {
		padding-block: 5px;
		font-size: 25px;
	}
	.welcome-section-circle-logo{
		left: 810px;
		top: -110px;
		width: 50px;
		height: 50px;
	}
	.sr-text {
		padding-inline: 30px;
	}
	.submit-result-circle-logo {
		position: relative;
		width: 50px;
		height: 50px;
		left: 800px;
		bottom: 95px;
	}

	.submit-section-logo {
		position: relative;
		width: 50px;
		height: 50px;
		bottom: -60px;
		left: 20px;
	}

	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 10px;
	}

	.btn_question_role_back {
	margin-inline: 30px;

	}

	.welcome-section-logo {
		top: 70px;
	}
	.submit-section-circle-logo {
		left: 800px;
		bottom: 100px;
	}
	.role-question-image {
		position: relative;
		top: 64px;
		width: 80px;
		left: 20px;
	}
	.role-question-circle-image {
		left: 810px;
		width: 70px;
		height: 45px;
		bottom: 85px;
	}
	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

}
@media (max-width:991px){
	.main-bg-blue {
		padding-inline: 0;
		padding-block: 0;
		font-size: 30px;
	}
	.submit-result-circle-logo {
		position: relative;
		width: 50px;
		height: 50px;
		left: 550px;
		bottom: 100px;
	}

	.submit-section-logo {
		position: relative;
		width: 50px;
		height: 50px;
		bottom: -65px;
		left: 25px;
	}

	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

	.result_wrapper {
		position: relative;
		left: 100px;
	}

	.btn_question_role_back {
	margin-inline: 30px;

	}

	.role-question-image {
		width: 100px;
		position: relative;
		top: 80px;
		left: 20px;
	}
	.role-question-circle-image {
		width: 80px;
		position: relative;
		left: 555px;
		bottom: 95px;
	}
	.submit-section-circle-logo {
		bottom: 85px;
		width: 45px;
		height: 45px;
		left: 570px;
	
	}
	.welcome-section-logo {
		top:60px;
		width: 50px;
		heighT: 50px;
	}
	.welcome-section-circle-logo {
		left: 580px;
		width: 50px;
		height: 50px;
		top: -112px;
  	}

        .form-question-role-image {
		position: relative;
        	right: 70px;
        	top: 60px;
  	}
	.form-question-circle-image {
		left: 570px;
		top: -80px;
		width:70px;
		height: 45px;
	}

	.role-section h1 {
		font-size: 25px;
		line-height: 40px;
	}
	.form-step-wrapper{
		display: none;
	}

	.sr-title{
		font-size: 18px;
	}

	.sr-text{
		font-size: 16px;
		padding-inline: 30px;
	}
	
	.rb-tab.answer_click{
		font-size: 14px;
		width: 30px;
		height: 30px;
		margin: 5px 6px;
		cursor: pointer;
		transition: 0.15s;
	}

	.rb-start{
		margin-right: 8px;
		font-size: 14px;
	}
   
	.rb-end{
	   margin-left: 8px;
	   font-size: 14px;
  	 }	
	/*Edit by Dorithy 22/08/22*/
  	 body .wrapper {
		width: 100%;
	}
	/*Edit by Dorithy 22/08/22*/
	.col-main {
		position: relative;
		bottom: 0;
		margin: 30px;
	}
	.chart-container {
		margin-block: 20px;
	}
}
/*Added by Dorithy 15/11/22*/
@media (max-width: 843px) {
	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

    .btn_question_role_back {
	margin-inline: 30px;

	}

    .form-question-role-image {
	position: relative;
        right: 130px;
        top: 25px;
	width: 60px;
	height: 60px;
  }
  .role-section h1 {
	font-size: 20px;
 }
  .form-question-circle-image {
	width: 60px;
	height: 60px;
	position: relative;
	left: 200px;
  	top: -30px

 }

}
@media (max-width: 821px) {
	.main-bg-blue {
		padding-inline:0;
	}
	.sr-text {
		padding-inline: 30px;
	}
	.submit-result-circle-logo {
	position: relative;
	width: 50px;
	height: 50px;
	left: 570px;
	bottom: 85px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -55px;
	left: 20px;
	}

	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}

    .btn_question_role_back {
	margin-inline: 30px;

	}
    .role-section h1 {
	line-height: 30px;
	}
    .role-question-image {
	width: 60px;
	position: relative;
	top: 45px;
	left: 20px;
     }
    .role-question-circle-image {
	left: 580px;
	width: 60px;
	height: 30px;
	bottom: 70px;
     }
    .form-question-circle-image {
 	top:-65px;
	left: 590px;
	width: 60px;
	height: 30px;
}
    .form-question-role-image {
      	right: 120px;
	top: 40px;
	width: 60px;
	height: 30px;
}
	.explanation-main-title{
		padding: 20px;
	}
	
	.submit-section-circle-logo {
		width: 40px;
		height: 40px;
		bottom: 75px;
		left: 580px;
	}
	.welcome-section-logo {
		width: 60px;
		height: 50px;
		top: 60px;
	}
	.welcome-section-circle-logo {
		width: 50px;
		height: 50px;
		top: -115px;
	}
}
@media (max-width: 767px) {
  .submit-section-circle-logo {
	left:  420px;
	width: 30px;
	height: 30px;
	bottom: 70px;

	}
  
  .form-question-circle-image {
	left: 410px;
	bottom: 30px;
	width: 60px;
	height: 30px;
      }
.
.form-question-role-image {
       right: 40px;
       top: 20px;
	width: 50px;
	height: 50px;

}

.welcome-section-circle-logo {
	left: 415px;
	width: 30px;	
	height: 30px;	
	top: -95px
}

.welcome-section-logo {
	left:15px;
	height: 40px;
	width: 40px;	
	top: 45px;
	
}
.graph-title{
	padding: 15px;
}
.role-question-circle-image {
		left: 400px;
		position: relative;
	}
.main-bg-blue {
		padding-inline: 0;
		padding-block: 5px;
		font-size: 18px;
	}
}
@media (max-width: 699px) {
	.main-bg-blue {
		padding-block: 5px;
		font-size: 18px;
	}
	.welcome-section-logo {
		top: 40px;
	}
	.welcome-section-circle-logo {
		top: -88px;
		left: 415px;
	}
	.submit-section-circle-logo {
		left: 410px;
		width: 35px;
		height: 35px;
		bottom: 76px;
	}
	.form-question-role-image {
		width: 60px;
		height: 30px;
		top: 40px;
		left: 20px;
           }
	.form-question-circle-image {

		width: 55px;
		height: 30px;
		top: -65px;
		left: 415px;
	}
	.role-question-circle-image {
		left: 400px;
		position: relative;
	}
	.question {
		border-radius: 20px;
	}
}
@media(max-width: 599px) {
	.main-bg-blue {
		padding-inline: 100px;
		padding-block: 0;
		font-size: 16px;
	}
	.question {
		border-radius: 20px;
	}
  .role-question-circle-image {
	left: 400px;
  }
  .role-section h1 {
	font-size: 18px;
 }
  .form-question-role-image {
	right: 60px;
	top: 35px;
  }
  .form-question-circle-image {
	left: 420px;
	top:-60px;
	width: 50px;
	height: 25px;
  }
  .welcome-section-logo {
	left: 15px;
	top:35px;
	width: 35px;
	height: 35px;
   }
  .welcome-section-circle-logo {
	top: -85px;
	}
  .submit-section-circle-logo {
		left: 420px;	
		bottom: 69px;
		width: 30px;
		height: 30px;
	}
.submit-result-circle-logo {
	position: relative;
	width: 45px;
	height: 45px;
	left: 390px;
	bottom: 85px;
	}

	.submit-section-logo {
	position: relative;
	width: 50px;
	height: 50px;
	bottom: -57px;
	left: 20px;
	}

}
@media(max-width:517px) {
	.question {
		border-radius: 20px;
	}
	.form-question-role-image {
        right: 50px;
	}
	.form-question-circle-image {
		left: 120px;
	}
	.welcome-section-logo {
		top: 50px;
	}
	.welcome-section-circle-logo {
		left: 390px;
		top: -100px;
	}
	.submit-section-circle-logo {
		left: 380px;
	}
}

@media(max-width:499px) {
	.main-bg-blue {
		padding-inline: 50px;
		padding-block: 0;
		font-size: 18px;
	}
	.question {
		border-radius: 20px;
	}
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
       .form-question-role-image {
        	right: 40px;
	}
	.form-question-circle-image {
		left: 115px;
		width: 40px;
		height: 40px;
	}
	.role-section h1 {
		font-size: 14px;
		
	}
	 
	.explanation_wrapper .explanation-main-title {
		font-size: 14px;
		line-height: 0;
	}
	.submit-section-circle-logo{
		left: 370px;
		bottom: 63px;
	}
	.welcome-section-logo {
		top:40px;
	}
	.welcome-section-circle-logo {
		left: 350px;
		top: -89px;
	}
	.explanation-main-title {
		height:30px;
		line-height: 0;
	}

	.role-question-circle-image {
		left: 350px;
	}
}

@media(max-width:461px) {
	.main-bg-blue {
		padding-inline: 0;
		padding-block: 10px;
		font-size: 16px;
	}
	.question {
		border-radius: 20px;
	}
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
	.role-question-image {
		width: 50px;
		height: 20px;
		position: relative;
		top: 25px;
		left:15px;
	}
	.role-question-circle-image {
		width: 50px;
		height: 20px;
		left: 335px;
		bottom: 54px;
	}
        .form-question-role-image {
                 right: 40px;
	}
	.form-question-circle-image {
		left: 115px;
		width: 40px;
		height: 40px;
	}
	.role-section h1 {
		font-size: 14px;	
        }
	.submit-section-circle-logo {
		left:335px;
		bottom: 64px;
	}
	.welcome-section-logo {
		width: 35px;
		height: 35px;
		top: 48px;
	}
	.welcome-section-circle-logo {
		left: 305px;
		top: -95px;
	}
	.explanation-main-title {
		height: 30px;
		line-height: 0;
	}
	
}
@media (max-width: 420px) {
	.question {
		border-radius: 20px;
	}
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
	.form-question-role-image {
		top: 30px;
		left: 15px;
	}
	.form-question-circle-image {
		width: 50px;
		height:20px;
		left: 300px;
		top: -55px
	}
        
	.role-section h1 {
		line-height: 0;
	}
.submit-result-circle-logo {
	position: relative;
	width: 25px;
	height: 25px;
	left: 270px;
	bottom: 70px;
	}

	.submit-section-logo {
	position: relative;
	width: 30px;
	height: 30px;
	bottom: -45px;
	left: 10px;
	}
	
}
@media (max-width:414px) {
	.sr-text {
		padding-inline: 20px;
	}
	.question {
		border-radius: 20px;
	}
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
    .submit-result-circle-logo {
		position: relative;
		width: 25px;
		height: 25px;
		left: 290px;
		bottom: 65px;
	}

	.submit-section-logo {
		position: relative;
		width: 30px;
		height: 30px;
		bottom: -38px;
		left: 10px;
	}

	.btn_submit_back {
		background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}
	.result_wrapper {
		position: relative;
		left: 20px;
		display: flex;
		flex-direction: column-reverse;
	}

	.btn_question_role {
		margin-inline: 50px;
	}
	.btn_question_role_back {
		margin-inline: 50px;
	}
	.role-section h2 {
		font-size: 18px;
	}
	.role-question-image {
		top: 35px;	
		width: 60px;
		height: 30px;
	}
	.role-question-circle-image {
		left: 290px;
		bottom:55px;
	}
	.role-section h1 {
		font-size: 14px;
	 	line-height: 20px;
	}
	.form-question-role-image {
		width: 50px;
		height: 30px;
		top: 30px;
		left: 20px;
           }
	.form-question-circle-image {
		width: 45px;
		height: 20px;
		top: -55px;
		left: 300px;
	}
	.welcome-section-logo {
		top: 35px;
		width: 30px;
		height: 30px;
	}
	.welcome-section-circle-logo {
		top: -85px;
		width: 20px;
		height: 20px;
		left:300px;
	}
	.explanation-main-title {
		height: 35px;
		line-height: 0;
	
	}
	.main-bg-blue {
		height: 40px;
		font-size: 12px;
		line-height: 15px;
		padding-inline: 40px;
		padding-block: 5px;
	}
	.submit-section-circle-logo {
		left: 300px;
		width: 25px;
		height: 25px;
		bottom: 65px;
	}
	.btn_question_role_wrapper {
		display: inline-flex;
		flex-direction: column-reverse;
		margin-inline: -30px;
	}


}
@media (max-width:394px) {
	.question-btn-wrap {
		flex-direction: column-reverse;
	}
	.submit-result-circle-logo {
		position: relative;
		width: 25px;
		height: 25px;
		left: 270px;
		bottom: 65px;
	}

	.submit-section-logo {
		position: relative;
		width: 30px;
		height: 30px;
		bottom: -40px;
		left: 10px;
	}

	.btn_question_role {
		margin-inline: 10px;
	}
	.btn_question_role_wrapper {
		display: inline-flex;
		flex-direction: column-reverse;
		margin-inline: -30px;
	}
	.form-question-circle-image {
		left: 285px;
		top: -52px;
	}
	.form-question-role-image {
		left: 10px;
	}
	.explanation-main-title {
		height: 35px;
	
	}
	.welcome-section-circle-logo {
		left: 285px;
		width: 20px;
		height: 20px;		
	}

	.welcome-section-logo {
		left: 10px;
		top: 35px;
	}
	.submit-section-circle-logo {
		left: 280px;
		width: 25px;
		height: 25px;
		bottom: 60px;
	}
	.role-section h2 {
		font-size: 14px;
	
	}
	.role-question-circle-image {
		left: 275px;
	}
	.btn_question_role_back {
		margin-inline: 10px;
	}
}
/*Edit by Dorithy 22/08/22*/
@media (max-width:375px) {
	.text-red {
		font-size: 14px;
	}
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
	.question {
		border-radius: 20px;
		
	}
	.submit-result-circle-logo {
		position: relative;
		width: 25px;
		height: 25px;
		left: 230px;
		bottom: 65px;
	}

	.submit-section-logo {
		position: relative;
		width: 30px;
		height: 30px;
		bottom: -40px;
		left: 10px;
	}

	.btn_submit_back {
	background:#fff;
		color:#ff6347;
		border: 1px solid #ff6347;
		margin-inline: 10px;
	}
	.result_wrapper {
		position: relative;
		left: 0px;
		display: flex;
		flex-direction: column-reverse;
	}

	.btn_welcome_page {
		position: relative;
		left: -10px;
	}
	.role-section h2 {
		font-size: 12px;
		line-height: 20px;
	}
	.role-question-circle-image {
		width: 45px;
		position: relative;
		bottom: 57px;
		left: 238px;
	}
	.explanation-gray-bg {
		padding: 0;
	}
	.chart-content {
		width: 350px;
	}
	body .wrapper {
		width: auto;
		padding:40px;
		margin-block: 20px;
		margin-inline:0;
		overflow-x: hidden;
	}
	
	.col-main {
		position: relative;
		right: 50px;
		margin:50px;
	}

	.role-section h1 {
		font-size: 12px;
		line-height: 20px;
	
	}
	.form-question-role-image {
		width: 50px;
                height: 25px;
                left: 10px;
                top: 27px;
	}
	.form-question-circle-image {
		left:230px;
		width: 40px;
		top:-40px;
		height: 15px;
	}

	.main-bg-blue {
		width: 100%;
		font-size: 12px;
		padding-block:5px;
		padding-inline: 20px;
		line-height: 15px;
	}
	
	.welcome-section-logo {
		width: 30px;
		height: 30px;
		position: relative;
		top: 35px;
		left: 10px;
	}
	
	.welcome-section-circle-logo {
		width: 20px;
		height: 20px;
		position: relative;
		top: -85px;
		left: 235px;

	}
	.submit-title h1 {
		line-height: 20px;
	}
	.submit-section-circle-logo {
		left: 230px;
		width: 25px;
		height: 25px;
		bottom: 65px;
	}
	
	.sr-text {
		padding-inline: 10px;
	}
}
@media(max-width: 360px) {
	.question-btn-wrap {
		flex-direction: column-reverse;
		
	}
	.submit-result-circle-logo {
	position: relative;
	width: 25px;
	height: 25px;
	left: 220px;
	bottom: 70px;
	}

	.submit-section-logo {
	position: relative;
	width: 30px;
	height: 30px;
	bottom: -45px;
	left: 10px;
	}

	.btn_welcome_page {
		position: relative;
		left: -20px;
	}

	.btn_question_role {
		margin-inline: 10px;
	}
	.btn_question_role_back {
		margin-inline: 10px;
	}

	.submit-section-circle-logo {
		left: 225px;
		width:20px;
		height: 20px;
		bottom: 60px;
	}
	.explanation-main-title {
		height: 30px;
		
	}
	.role-section h1 {
	 	font-size: 12px;
		line-height: 25px;
	}
	.welcome-section-logo {
	 	top: 30px;
	 	width: 20px;
	 	height: 20px;
	}
	.welcome-section-circle-logo {
		left: 226px;
		width: 20px;
		height: 20px;
		top: -85px;
	}
	.role-question-circle-image {
		left: 220px;
		bottom: 60px;
	}
	.role-section h2 {
		font-size: 12px;
		line-height: 20px;
	}
	.role-question-image {
		top: 35px;
		width: 50px;
		height: 25px;
	}
}

@media(max-width:325px) {
	.main-bg-blue {
		font-size: 10px;
	}
	.welcome-section-circle-logo {
		width: 20px;
		height: 20px;
		left: 190px;
	}
}
/* 2021-07-19 add by j footer share */
.share-trigger {
    position: fixed;
    bottom: 75px;
    right: 15px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.share-trigger svg path {
    fill: #fff;
}

.share-popup {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
}

.share-popup.show {
    visibility: visible;
    opacity: 1;
}

.share-button-wrapper {
    display: flex;
    flex-direction: column;
}

.share-input-link {
    display: flex;
    align-items: center;
}

.share-input-link input {
    padding: 10px;
    border-radius: 0;
    border: 1px solid #222222;
    margin: 0;
}

.copy-clipboard {
    height: 100%;
    font-size: 20px;
    background-color: #333;
    color: #fff;
    min-height: 46px;
    min-width: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.share-popup .social-media {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.share-popup .social-media .fa-facebook-square {
    color: #3b5998;
    font-size: 38px;
    cursor: pointer;
}

.share-popup .social-media .fa-linkedin {
    color: #3b5998;
    font-size: 38px;
    cursor: pointer;
}


.share-popup .social-media .fa-twitter-square {
    color: #00b8ff;
    font-size: 38px;
}

.share-popup .social-media .fa-whatsapp-square {
    color: #25D366;
    font-size: 38px;
}

.share-popup .social-media .btn-sm-telegram{
    background-color: #54A9EB;
    padding : 10px 8px 5px 8px;
    border-radius : 5px;
}

.share-popup .social-media .fa-telegram-plane {
    color: white;
    margin-top : 2px;
    font-size: 20px;
}

.share-popup .close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 28px;
    cursor: pointer;
}

.share-close-icon {
    position: absolute;
    top: 30px;
    right: 30px;
}

.share-close-icon a {
    transition: 0.6s;
}

.share-close-icon a i {
    font-size: 40px;
    color: #333333;
}

.share-close-icon a:hover {
    transform: rotate(90deg);
}

.noscroll {
    overflow-y: hidden;
    height : 100vh;
}

.mobile-share-fixed {
    display: none;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
}



.mobile-share-fixed ul {
    display: flex;
    list-style-type: none;
    width: 100%;
    flex-grow: 1;
    justify-content: space-around;
    padding: 0;
    margin: 0;
}

.mobile-share-fixed ul li {
    flex-grow: 1;

}

.mobile-share-fixed ul .fb-share-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
}


.mobile-share-fixed ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    height: 55px;
    padding: 10px;
    transition: 0.15s;
    text-align: center;
}

.mobile-share-fixed ul li:last-child {
    background-color: #333;
    color: #fff;
}

.mobile-share-fixed ul li:nth-child(2) {
    background-color: #3b5998;
    color: #fff;
    padding: 10px;
}

.mobile-share-fixed ul li:nth-child(3) {
    background-color: #00b8ff;
    color: #fff;
    
}

.mobile-share-fixed ul li:nth-child(4) {
    background-color: #54A9EB;
    color: #fff;
    
}

.mobile-share-fixed ul li:nth-child(1) {
    background-color: #25D366;
    color: #fff;
}

.mobile-share-fixed ul li:first-child a:hover {
    color: #fff;
}

.mobile-share-fixed ul li:nth-child(2) a:hover {
    color: #fff;
}

.mobile-share-fixed ul li:nth-child(3) a:hover {
    color: #fff;
}
.mobile-share-fixed ul li:nth-child(4) a:hover {
    color: #fff;
}
/* 2021-07-19 add by j footer share */

.explanation-title{
    font-size: 20px;
    margin-top: 15px;
    font-weight: bold;
}

.btn-get-your-result{
    white-space: nowrap;
    margin-inline: -30px;
    margin-top:25px;
    margin-bottom: 15px;
    height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    color:#fff;
    background-color: #ff6347;
    border:none;
    border-radius: 45px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    padding: 0 25px 0 25px;
}

.btn-get-your-result:hover {
    background-color: #0f4593;
    box-shadow: 0 15px 20px rgb(123, 167, 209);
    color: white;
    transform: translateY(-7px);
}

body .explaination-wrapper{
    padding: 25px 25px;
    border-radius: 20px;
}