:root {
  --red: #9b1306;
	--yellow: #FFBD13;
	--blue: #4383FF;
	--blue-d-1: #3278FF;
	--light: #F5F5F5;
	--grey: #AAA;
	--white: #FFF;
	--shadow: 8px 8px 30px rgba(0,0,0,.05);
}

* {
  box-sizing: border-box;
}

hr {
  border-top: 1px solid var(--red) !important;
  margin: 20px 0px;
} 

body {
  /* background-color: grey; */
  font-family: Raleway !important;
  background-image: url("../img/BG.jpg");
  /* background-size: cover; */
  background-position: center;
}
#regForm {
  background-color: #ffffff;
  margin: 10px auto;
  /* font-family: Raleway !important; */
  border-radius: 10px;
  width: 70%;
  min-width: 300px;
}

#regForm .inner {
  background-color: #ffffff;
  margin: 10px auto;
  /* font-family: Raleway !important; */
  padding-bottom: 40px;
  width: 90%;
  min-width: 300px;
}

#regForm .inner i {
  font-size: 100px;
  color: #ffffff;
}

#regForm .inner a {
  font-size: 30px;
  color: #ffffff;
}

.text-start {
  text-align: left !important;
}

h2 {
  font-weight: bold !important;
}

h3 {
  text-align: center;
  font-size: 45px;
  font-weight: bold !important;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 15px;
  font-family: Raleway;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
}

textarea {
  padding: 10px;
  width: 100%;
  font-size: 15px;
  font-family: Raleway;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  border: 1px solid var(--red);
}

/* Hide all steps by default: */
.tab {
  display: none;
  transition-duration: 0.4s;
}

a:hover {
  text-decoration: none;
  color: #ffffff;
}

.button {
  background-color: var(--red) !important;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 20px 40px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
  width: 100%;
  /* height: 140px; */
  display: block;
  margin-top: 20px;
}

button:hover {
  opacity: 0.8;
  box-shadow: var(--shadow);
}

#prevBtn {
  background-color: var(--red);
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: none;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04aa6d;
}
label {
  display: inline;
  width: 100%;
  padding: 2px;
  border: solid 2px #d2d2d2;
  transition: all 0.3s;
  margin-bottom: 6px;
  border-radius: 8px;
  font-size: 10px;
  /* font-weight: bold; */
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  border: solid 4px #d2d2d2;
  background-color: #d2d2d2;
}
.soal {
  margin-bottom: 30px;
}
.soal p {
  font-weight: bold;
  font-size: 20px;
}
.image {
  text-align: center;
  margin: 35px auto;
}
.progress {
  margin: 20px auto;
  padding: 0;
  width: 100%;
  height: 15px;
  overflow: hidden;
  background: #e5e5e5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.bar {
  position: relative;
  float: left;
  min-width: 100%;
  height: 100%;
  transition-duration: 1s;
  background: var(--red);
}

.text-red {
  color: var(--red);
  font-size: 8px;
}

.gambar-priview {
  display: none;
  width: 100%;
  height: auto;
  margin: 10px 0px;
  border-radius: 8px;
  border: solid 1px #d2d2d2;
}

.inner select {
  padding: 15px 5px;
  width: 100%;
  border-radius: 6px;
  font-size: 15px;
  /* margin-top: 10px; */
  border-color: #d2d2d2;
  /* color: #d2d2d2; */
}

.rating {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: .5rem;
	font-size: 100px;
	color: var(--yellow) !important;
	margin: 2rem;
}
.rating .star {
	cursor: pointer;
}
.rating .star.active {
	opacity: 0;
	animation: animate .5s calc(var(--i) * .1s) ease-in-out forwards;
}

@keyframes animate {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}


.rating .star:hover {
	transform: scale(1.1);
}

/* label {
  padding: 4px 6px;
  line-height: 190%;
  outline-style: none;
  transition: all .6s;
  margin: 3px;
  border: 1px solid #fff;
  border-radius: 8px;
} */

.hiddenCB div {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.hiddenCB input[type="checkbox"],
.hiddenCB input[type="radio"] {
  display: none;
  
}

.hiddenCB label {
  
  cursor: pointer;
}

.hiddenCB input[type="checkbox"]+label:hover{
  background: rgba(0, 128, 128, .8);
}

.hiddenCB input[type="checkbox"]:checked+label {
  background: rgba(0, 128, 128, .4);
}

.hiddenCB input[type="checkbox"]:checked+label:hover{
  background: rgba(0, 128, 128, 0, .7);
}

.opsi2 {
  display: flex;
}

.opsi2 p {
  font-size: 25px;
}

.opsi2 .rating {
	display: flex;
	justify-content: right;
	align-items: center;
	grid-gap: .5rem;
	font-size: 45px;
	color: var(--yellow);
	margin: 1rem;
  margin-left: auto;
}
.opsi2 .rating .star {
	cursor: pointer;
}

.opsi2 .rating .star i {
	color: var(--yellow);
}
.opsi2 .rating .star.active {
	opacity: 0;
	animation: animate .5s calc(var(--i) * .1s) ease-in-out forwards;
}

@keyframes animate {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}


.opsi2 .rating .star:hover {
	transform: scale(1.1);
}



@media only screen and (max-width: 600px) {
  #welcome {
    width: 200px;
  }

  #logo {
    width: 300px;
  }

  #thank {
    width: 200px;
  }

  h2 {
    font-size: 15px;
  }

  h3 {
    font-size: 20px;
  }

  #regForm .inner {
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 10px;
  }

  button {
    padding: 10px 20px;
    font-size: 15px;
  }

  input {
    padding: 10px;
    font-size: 12px;
  }

  textarea {
    padding: 10px;
    font-size: 12px;
  }

  .soal p {
    font-weight: bold;
    font-size: 15px;
  }

  .rating {
    font-size: 40px;
  }

  .opsi2 .rating {
    font-size: 23px;
    margin: 10px;
    margin-left: auto;
  }

  .opsi2 p {
    font-size: 12px;
    width: 40%;
  }
  .inner select {
    padding: 10px 5px;
    font-size: 12px;
  }
}