/* CSS Document */
/*adrian 7/23/14 */
@charset "UTF-8";

.sky-form .col-12 {
	width: 100%;
}
.sky-form {
    border: 0px solid #eee;
}
.button-padding{
	padding-right: 1px !important;
    padding-left: 1px !important;
	cursor:pointer;
}
.margin-top-20{
	margin-top: 20px !important;
}
.margin-bottom-20{
	margin-bottom: 20px !important;
}
.color-red {
    color: #D52D1A !important;
}
.color-green {
    color: #4C811D !important;
}
.matchingLabel{
	font-weight: 400;
	font-size: 15px;
	color: #404040;
}
.sky-form .input input:focus,
.sky-form .select select:focus,
.sky-form .textarea textarea:focus {
 	border-color: #3498db;
  box-shadow: 0 0 2px #3498db;
}

.sky-form .radio input:focus + i,
.sky-form .checkbox input:focus + i,
.sky-form .toggle input:focus + i {
  border-color: #3498db;
  box-shadow: none;
}
.sky-form .input:hover input,
.sky-form .select:hover select,
.sky-form .textarea:hover textarea {
	border-color: #3498db;
}
.sky-form .radio:hover i,
.sky-form .checkbox:hover i,
.sky-form .toggle:hover i,
.sky-form .ui-slider-handle:hover {
  border-color: #3498db;
}
#questions{
	font-size: 15px;
}
#q_, #q_ p, #q_ h5{
	font-size: 18px;
	margin-bottom: .1em;
}
input[type='radio'], input[type='checkbox']{
	height: 18px;
}
@media (max-width: 768px) {
	.u-heading-v6__title{
		padding: 0px!important;
	}
	.u-heading-v6__title::before{
		width: 0px!important;
	}
	.u-heading-v6__title::after{
		width: 0px!important;
	}
}
.g-absolute-top--y {
position: absolute !important;
top: 0 !important;
-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
				transform: translateY(0);
-webkit-backface-visibility: hidden; }

/*style quizWrapper to give some space*/
.quizWrapper {
  position: relative;
}

/*style label to give some more space*/
.quizWrapper label {
  display: block;
}

/*style and hide original checkbox*/
.quizWrapper input {
  height: 20px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 20px;
}

/*position new box*/
.radioWrapper input + label::before {
  border: 2px solid #919191;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: 4.5px;
  width: 20px;
border-radius: 50%;
}

/*radio pseudo element styles*/
.radioWrapper input + label::after {
  content: "";
  opacity: 0;
  border: 4px solid #a61d37;
  border-radius: 50%;
  position: absolute;
  left: 6px;
  top: 10.5px;
  transition: opacity 0.2s ease-in-out;
}

/*reveal check for 'on' state*/
.radioWrapper input:checked + label::after {
  opacity: 1;
}
.radioWrapper input:checked + label::before {
  border: 2px solid #a61d37;
}

/*focus styles*/
.radioWrapper input:focus + label::before {
  outline: 3px #a61d37 dashed !important;
}

/*style and hide original checkbox*/
.boxWrapper input {
  height: 20px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 20px;
}

/*position new box*/
.boxWrapper input + label::before {
  border: 2px solid #919191;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: 3.5px;
  width: 20px;
}

/*create check symbol with pseudo element*/
.boxWrapper input + label::after {
  content: "";
  border: 2px solid #a61d37;
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 6.5px;
  transform: rotate(45deg);
  transition: opacity 0.2s ease-in-out;
  width: 6px;
}

/*reveal check for 'on' state*/
.boxWrapper input:checked + label::after {
  opacity: 1;
}
.boxWrapper input:checked + label::before {
  border: 2px solid #a61d37;
}
.boxWrapper input:focus + label::before {
  outline: 3px #a61d37 dashed !important;
}
.incompleteCk {
  float: left;
  position: absolute;
  left: -3px;
  font-size: 1.25rem;
  color: #a61d37;
}

.incompleteOL {
  outline: 1.5px dotted #a61d37;
}

#topicSelect.col-12, [id^="input"].form-control.col-12, [id^="select"].form-select.col-12 {
  width: 100% !important;
}

@media (min-width: 768px) {
  #topicSelect.col-md-8, [id^="input"].form-control.col-md-8, [id^="select"].form-select.col-md-8 {
    width: 66.6666666667% !important;
  }
}

.remainingAttempts {
  position: absolute;
  right: 10%;
  top: -31px;
  background: #26304d;
  color: white;
  padding: 5px 25px 3px 25px;
  border-radius: 5px 5px 0 0;
  font-weight: 600;
}

div#quiz_blueCard {
  margin-top: 60px !important;
}

.g-brd-primary{
  border-width: 2px;
}

#quiz_blueCard{
  border-color: #26304d;
}