.questian-container {
  background: #F8F9F9;
}
.questian-container h4 {
  color: #4F4F4F;
}

.answer-container {
  background: #F8F9F9;
}
.answer-container .answer-list {
  border: 1px solid #797979;
  padding: 20px 10px;
  margin: 10px 0px;
  padding-left: 45px;
  color: #4F4F4F;
  cursor: pointer;
  transition: 0.5s;
}
.answer-container .answer-list span {
  background: #EAF1F6;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  position: absolute;
  left: 10px;
  text-align: center;
  top: 16px;
  padding-top: 3px;
  color: #000 !important;
}
.answer-container .selected {
  background-color: #D4E4D3 !important;
}
.answer-container .selected span {
  background-color: #227C19;
  color: #fff !important;
}

.style-btn {
  background-color: #0f75bc !important;
  color: #fff;
  transition: 0.5s;
  border-radius: 5px;
}
.style-btn:hover {
  background-color: #0963a3 !important;
  color: #fff;
}

.number-container {
  background-color: #F8F9F9;
}
.number-container .number {
  background: #EAF1F7;
  color: #0F75BC;
  font-weight: 600;
  font-size: 18px;
  width: 45px;
  border-radius: 100%;
  height: 45px;
  display: inline-block;
  line-height: 45px;
  margin: 5px 3px;
}
.number-container .number:hover {
  background-color: #0F75BC;
  color: #fff;
}
.number-container .correct {
  background-color: #D4E4D3;
  color: #227C19;
}
.number-container .incorrect {
  background-color: #F5E6E5;
  color: #D22F27;
}
.number-container .skipped {
  background-color: #D9D9D9;
  color: #797979;
}

.time-container {
  background-color: #F8F9F9;
}
.time-container p {
  color: #000;
}

.rank-container {
  background-color: #F8F9F9;
}
.rank-container h3 {
  font-size: 21px;
  color: #000;
}
.rank-container h4 {
  font-size: 24px;
  color: #000;
}
.rank-container h4 span {
  background: #FD8181;
  color: #fff;
  padding: 3px 25px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.5px;
  border: 1px solid #D22F27;
  margin: 0px 10px;
  position: relative;
  top: -5px;
}
.rank-container p {
  font-weight: 600;
}

.grahp-container {
  background-color: #F8F9F9;
}

.style-btn {
  background-color: #0f75bc !important;
  color: #fff;
  transition: 0.5s;
  border-radius: 5px;
}
.style-btn:hover {
  background-color: #0963a3 !important;
  color: #fff;
}

html:lang(ar) .btn-style svg {
  transform: rotate(-180deg);
}
html:lang(ar) .answer-container .answer-list {
  padding-left: 10px;
  padding-right: 45px;
}
html:lang(ar) .answer-container .answer-list span {
  left: auto;
  right: 10px;
}
html:lang(ar) .question-number .float-end {
  float: left !important;
}