/*Start Screen*/

.gp-test-series-container .quiz-form, .gp-test-series-container .quiz-section {
	background: #fff;
}
.gp-test-series-container .start-screen img, .gp-test-series-container .error-screen img {
	margin: 0 auto;
}
.gp-test-series-container h1, .gp-test-series-container h2, .gp-test-series-container h3 {
	font-family: "Montserrat", Sans-serif;
	font-weight: 700;
	color: #021731;
}
.gp-test-series-container p {
	color: #000;
	font-family: "Roboto", Sans-serif;
}

.gp-test-series-container .start-screen, .gp-test-series-container .error-screen {
	padding: 10px;
}

.gp-test-series-container .start-screen .img-cont img {
	width: 80%;
}

.gp-test-series-container .error-screen h1 {
	font-size: 26px;
}

/*Quiz Form */

.gp-test-series-container .quiz-form .col-lg-6:first-child {
   width: 100%;
   margin: auto;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   padding: 20px;
   border-radius: 20px;
}

.gp-test-series-container .form-control::placeholder {
    font-size: 14px; 
    font-weight: 500; 
}

.gp-test-series-container .quiz-form label.required::after {
	content: "*";
	color: red;
	padding-left: .4em;
	vertical-align: middle;
}

.gp-test-series-container .quiz-form h2 {
	text-align: center;
}

.gp-test-series-container .start-screen button, .gp-test-series-container .quiz-form button {
	font-weight: 600;
	background-color:#ffc107;
	color: #000;
}
.gp-test-series-container .start-screen button:hover, .gp-test-series-container .quiz-form button:hover{
	background-color: #181D23;
	color: #fff;
}

.gp-test-series-container .quiz-form label {
	font-weight: 600;  
}
.gp-test-series-container .quiz-section h2 {
	text-align: center;
}
.gp-test-series-container .quiz-section {
	margin: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	padding: 20px;
	border-radius: 20px;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer:not(:last-child) {
	margin-bottom: 10px;
}

.gp-test-series-container .quiz-section h1 {
	font-size: 24px;
}
.gp-test-series-container .quiz-section .question {
	font-family: "Montserrat", Sans-serif;
	font-weight: 700;
	color: #021731; 
	font-size: 18px;
}

.gp-test-series-container .quiz-section .answer-wrapper {
	padding: 10px 0;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer {
	width: 100%;
	height: 60px;
	padding: 20px;
	border-radius: 10px;
	color: #021731;
	border: 1px solid #f4cd0d;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: 0.3s linear;
	font-family: "Poppins", Sans-serif;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer.correct {
	border-color: #0cef2a;
	background: #e6fde9;
}
.gp-test-series-container .quiz-section .answer-wrapper .answer.wrong {
    border-color: #fc3939;
    background: #feebeb;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer .checkbox {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #f4cd0d;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer .checkbox i {
    color: #fff;
    font-size: 10px;
    opacity: 0;
    transition: all 0.3s;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer:hover:not(.checked) .checkbox,
.gp-test-series-container .quiz-section .answer-wrapper .answer.selected .checkbox {
  background-color: #f4cd0d;
}

.gp-test-series-container .quiz-section .answer-wrapper .answer.selected .checkbox i {
  opacity: 1;
}

.gp-test-series-container .form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.gp-test-series-container .invalid-feedback {
	font-weight: 600;
}

.gp-test-series-container .quiz-form .error-message {
	color: red;
    font-weight: 500;
    font-size: 15px;
}

.gp-test-series-container .quiz-section .number {
	color: #021731;
	font-size: 25px;
	font-weight: 600;
	margin: 20px 0;
	text-align: center;
}
.gp-test-series-container .quiz-section .number .total {
	color: #576081;
	font-size: 18px;
}

/*Score Card*/

.gp-test-series-container .scorecard {
    padding: 0;
    margin: auto;
    width: 100%;
	text-align: center;
}

.gp-test-series-container .scorecard img {
	margin: auto;
}

.gp-test-series-container .scorecard .section.status .card {
	text-align: center;
	padding: 15px;
}

.gp-test-series-container .scorecard .section.status.pass .card {
	border: 1px solid #0cef2a;
	background: #e6fde9;
}

.gp-test-series-container .scorecard .section.status.fail .card {
	border: 1px solid #fc3939;
	background: #feebeb;
}

.gp-test-series-container .scorecard .section.status h5 {
	margin: 0;
	text-align: justify;
}

.gp-test-series-container .scorecard .section:not(:last-child) {
	margin-bottom: 10px;
}

.gp-test-series-container .scorecard .section .card {
    border-radius: 10px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.19);
	flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
	text-align: center;
}

.gp-test-series-container .scorecard .section:nth-of-type(2) .card {
	padding: clamp(1.875rem, 1.6071rem + 1.4286vw, 2.5rem);
}

.gp-test-series-container .scorecard .section .row {
    justify-content: space-between;
}

.gp-test-series-container .scorecard .section .row .col-6 {
}

.gp-test-series-container .scorecard .section .row .card {
	padding: clamp(0.5rem, 0.1786rem + 1.7143vw, 1.25rem);
	flex-direction: column;
    text-align: center;
	height: 100%;
}

.gp-test-series-container .scorecard .section .card h5 {
	font-family: "Montserrat", Sans-serif;
    font-weight: 700;
    color: #021731;
}

.gp-test-series-container .scorecard .section .card div span {
	font-size: 18px;
}



@media (max-width: 768px) {
	.gp-test-series-container .start-screen h1, .gp-test-series-container .error-screen h1 {
		font-family: "Montserrat", Sans-serif;
		font-weight: 700;
		font-size:1.6rem;
		text-align: center;
	}
    .gp-test-series-container .quiz-form h2 {
        text-align: center;
    }
	.gp-test-series-container .quiz-section h1 {
		text-align: center;
	}
	.gp-test-series-container .quiz-section {
		width: 100%;
	}
	.gp-test-series-container .quiz-section .answer-wrapper {
		width: 100%;
	}
	.gp-test-series-container .error-screen h1 {
		font-size: 18px;
	}
}
@media (min-width:768px){
	.gp-test-series-container .scorecard {
		flex-direction: row-reverse;
	}
  
	.gp-test-series-container .start-screen .img-cont {
		text-align: end;
	}
	.gp-test-series-container .start-screen button {
		font-weight: 600;
		background-color:#ffc107; 
   }
	.gp-test-series-container .quiz-form button {
		text-align: center;
	}
    .gp-test-series-container .start-screen button:hover {
		background-color: #181D23;
		color: #fff;
    }
}

@media (max-width: 560px) {
	.gp-test-series-container .scorecard {
		padding: 0px 10px 20px 10px;
	}
	.gp-test-series-container .quiz-form .col-lg-6:first-child {
		box-shadow: none;
		border-radius: 0;
	}
	.gp-test-series-container  .quiz-section {
		box-shadow: none;
		border-radius: 0;
	}
}


@media (max-width: 600px) {
	.gp-test-series-container .start-screen .img-cont {
		text-align: center;
	}
}


@media (max-width: 320px) {
	.gp-test-series-container .scorecard .section .card div {
		width: 100%;
	}
	
	.gp-test-series-container .scorecard .section .card {
		padding: 10px!important;
	}
	
	.gp-test-series-container .scorecard .section:first-child .card div:first-child, .gp-test-series-container .scorecard .section .row .col-6:first-child {
		margin-bottom: 10px;
	}
	
	.gp-test-series-container .scorecard .section .row .col-6 {
		max-width: 100%;
		flex: auto;
	}
}