@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("quran-call-fonts.css");
.mar-ver--x-1 {
  margin-top: 0.8rem !important;
  margin-bottom: 0.8rem !important;
}
.mar-hor--x-1 {
  margin-left: 0.8rem !important;
  margin-right: 0.8rem !important;
}
.mar-top--x-1 {
  margin-top: 0.8rem !important;
}
.mar-right--x-1 {
  margin-right: 0.8rem !important;
}
.mar-bottom--x-1 {
  margin-bottom: 0.8rem !important;
}
.mar-left--x-1 {
  margin-left: 0.8rem !important;
}

.pad-ver--x-1 {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}
.pad-hor--x-1 {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}
.pad-top--x-1 {
  padding-top: 0.8rem !important;
}
.pad-right--x-1 {
  padding-right: 0.8rem !important;
}
.pad-bottom--x-1 {
  padding-bottom: 0.8rem !important;
}
.pad-left--x-1 {
  padding-left: 0.8rem !important;
}

.lh--x-1 {
  line-height: 0.8rem !important;
}

.mar-ver--x-2 {
  margin-top: 1.6rem !important;
  margin-bottom: 1.6rem !important;
}
.mar-hor--x-2 {
  margin-left: 1.6rem !important;
  margin-right: 1.6rem !important;
}
.mar-top--x-2 {
  margin-top: 1.6rem !important;
}
.mar-right--x-2,
.notification-wrapper .notification__left {
  margin-right: 1.6rem !important;
}
.mar-bottom--x-2,
.teacher-list,
.notification-wrapper {
  margin-bottom: 1.6rem !important;
}
.mar-left--x-2 {
  margin-left: 1.6rem !important;
}

.pad-ver--x-2 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
}
.pad-hor--x-2 {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}
.pad-top--x-2 {
  padding-top: 1.6rem !important;
}
.pad-right--x-2 {
  padding-right: 1.6rem !important;
}
.pad-bottom--x-2 {
  padding-bottom: 1.6rem !important;
}
.pad-left--x-2 {
  padding-left: 1.6rem !important;
}

.lh--x-2 {
  line-height: 1.6rem !important;
}

.mar-ver--x-3 {
  margin-top: 2.4rem !important;
  margin-bottom: 2.4rem !important;
}
.mar-hor--x-3 {
  margin-left: 2.4rem !important;
  margin-right: 2.4rem !important;
}
.mar-top--x-3 {
  margin-top: 2.4rem !important;
}
.mar-right--x-3 {
  margin-right: 2.4rem !important;
}
.mar-bottom--x-3 {
  margin-bottom: 2.4rem !important;
}
.mar-left--x-3 {
  margin-left: 2.4rem !important;
}

.pad-ver--x-3 {
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}
.pad-hor--x-3 {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}
.pad-top--x-3 {
  padding-top: 2.4rem !important;
}
.pad-right--x-3 {
  padding-right: 2.4rem !important;
}
.pad-bottom--x-3 {
  padding-bottom: 2.4rem !important;
}
.pad-left--x-3 {
  padding-left: 2.4rem !important;
}

.lh--x-3 {
  line-height: 2.4rem !important;
}

.mar-ver--x-4 {
  margin-top: 3.2rem !important;
  margin-bottom: 3.2rem !important;
}
.mar-hor--x-4 {
  margin-left: 3.2rem !important;
  margin-right: 3.2rem !important;
}
.mar-top--x-4 {
  margin-top: 3.2rem !important;
}
.mar-right--x-4 {
  margin-right: 3.2rem !important;
}
.mar-bottom--x-4 {
  margin-bottom: 3.2rem !important;
}
.mar-left--x-4 {
  margin-left: 3.2rem !important;
}

.pad-ver--x-4 {
  padding-top: 3.2rem !important;
  padding-bottom: 3.2rem !important;
}
.pad-hor--x-4 {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
}
.pad-top--x-4 {
  padding-top: 3.2rem !important;
}
.pad-right--x-4 {
  padding-right: 3.2rem !important;
}
.pad-bottom--x-4 {
  padding-bottom: 3.2rem !important;
}
.pad-left--x-4 {
  padding-left: 3.2rem !important;
}

.lh--x-4 {
  line-height: 3.2rem !important;
}

.mar-ver--x-5 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.mar-hor--x-5 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}
.mar-top--x-5 {
  margin-top: 4rem !important;
}
.mar-right--x-5 {
  margin-right: 4rem !important;
}
.mar-bottom--x-5 {
  margin-bottom: 4rem !important;
}
.mar-left--x-5 {
  margin-left: 4rem !important;
}

.pad-ver--x-5 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.pad-hor--x-5 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
.pad-top--x-5 {
  padding-top: 4rem !important;
}
.pad-right--x-5 {
  padding-right: 4rem !important;
}
.pad-bottom--x-5 {
  padding-bottom: 4rem !important;
}
.pad-left--x-5 {
  padding-left: 4rem !important;
}

.lh--x-5 {
  line-height: 4rem !important;
}

.mar-ver--x-6 {
  margin-top: 4.8rem !important;
  margin-bottom: 4.8rem !important;
}
.mar-hor--x-6 {
  margin-left: 4.8rem !important;
  margin-right: 4.8rem !important;
}
.mar-top--x-6 {
  margin-top: 4.8rem !important;
}
.mar-right--x-6 {
  margin-right: 4.8rem !important;
}
.mar-bottom--x-6 {
  margin-bottom: 4.8rem !important;
}
.mar-left--x-6 {
  margin-left: 4.8rem !important;
}

.pad-ver--x-6 {
  padding-top: 4.8rem !important;
  padding-bottom: 4.8rem !important;
}
.pad-hor--x-6 {
  padding-left: 4.8rem !important;
  padding-right: 4.8rem !important;
}
.pad-top--x-6 {
  padding-top: 4.8rem !important;
}
.pad-right--x-6 {
  padding-right: 4.8rem !important;
}
.pad-bottom--x-6 {
  padding-bottom: 4.8rem !important;
}
.pad-left--x-6 {
  padding-left: 4.8rem !important;
}

.lh--x-6 {
  line-height: 4.8rem !important;
}

.mar-ver--x-7 {
  margin-top: 5.6rem !important;
  margin-bottom: 5.6rem !important;
}
.mar-hor--x-7 {
  margin-left: 5.6rem !important;
  margin-right: 5.6rem !important;
}
.mar-top--x-7 {
  margin-top: 5.6rem !important;
}
.mar-right--x-7 {
  margin-right: 5.6rem !important;
}
.mar-bottom--x-7 {
  margin-bottom: 5.6rem !important;
}
.mar-left--x-7 {
  margin-left: 5.6rem !important;
}

.pad-ver--x-7 {
  padding-top: 5.6rem !important;
  padding-bottom: 5.6rem !important;
}
.pad-hor--x-7 {
  padding-left: 5.6rem !important;
  padding-right: 5.6rem !important;
}
.pad-top--x-7 {
  padding-top: 5.6rem !important;
}
.pad-right--x-7 {
  padding-right: 5.6rem !important;
}
.pad-bottom--x-7 {
  padding-bottom: 5.6rem !important;
}
.pad-left--x-7 {
  padding-left: 5.6rem !important;
}

.lh--x-7 {
  line-height: 5.6rem !important;
}

.mar-ver--x-8 {
  margin-top: 6.4rem !important;
  margin-bottom: 6.4rem !important;
}
.mar-hor--x-8 {
  margin-left: 6.4rem !important;
  margin-right: 6.4rem !important;
}
.mar-top--x-8 {
  margin-top: 6.4rem !important;
}
.mar-right--x-8 {
  margin-right: 6.4rem !important;
}
.mar-bottom--x-8 {
  margin-bottom: 6.4rem !important;
}
.mar-left--x-8 {
  margin-left: 6.4rem !important;
}

.pad-ver--x-8 {
  padding-top: 6.4rem !important;
  padding-bottom: 6.4rem !important;
}
.pad-hor--x-8 {
  padding-left: 6.4rem !important;
  padding-right: 6.4rem !important;
}
.pad-top--x-8 {
  padding-top: 6.4rem !important;
}
.pad-right--x-8 {
  padding-right: 6.4rem !important;
}
.pad-bottom--x-8 {
  padding-bottom: 6.4rem !important;
}
.pad-left--x-8 {
  padding-left: 6.4rem !important;
}

.lh--x-8 {
  line-height: 6.4rem !important;
}

.mar-ver--x-9 {
  margin-top: 7.2rem !important;
  margin-bottom: 7.2rem !important;
}
.mar-hor--x-9 {
  margin-left: 7.2rem !important;
  margin-right: 7.2rem !important;
}
.mar-top--x-9 {
  margin-top: 7.2rem !important;
}
.mar-right--x-9 {
  margin-right: 7.2rem !important;
}
.mar-bottom--x-9 {
  margin-bottom: 7.2rem !important;
}
.mar-left--x-9 {
  margin-left: 7.2rem !important;
}

.pad-ver--x-9 {
  padding-top: 7.2rem !important;
  padding-bottom: 7.2rem !important;
}
.pad-hor--x-9 {
  padding-left: 7.2rem !important;
  padding-right: 7.2rem !important;
}
.pad-top--x-9 {
  padding-top: 7.2rem !important;
}
.pad-right--x-9 {
  padding-right: 7.2rem !important;
}
.pad-bottom--x-9 {
  padding-bottom: 7.2rem !important;
}
.pad-left--x-9 {
  padding-left: 7.2rem !important;
}

.lh--x-9 {
  line-height: 7.2rem !important;
}

.mar-ver--x-10 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}
.mar-hor--x-10 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}
.mar-top--x-10 {
  margin-top: 8rem !important;
}
.mar-right--x-10 {
  margin-right: 8rem !important;
}
.mar-bottom--x-10 {
  margin-bottom: 8rem !important;
}
.mar-left--x-10 {
  margin-left: 8rem !important;
}

.pad-ver--x-10 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}
.pad-hor--x-10 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}
.pad-top--x-10 {
  padding-top: 8rem !important;
}
.pad-right--x-10 {
  padding-right: 8rem !important;
}
.pad-bottom--x-10 {
  padding-bottom: 8rem !important;
}
.pad-left--x-10 {
  padding-left: 8rem !important;
}

.lh--x-10 {
  line-height: 8rem !important;
}

.mar-ver--x-11 {
  margin-top: 8.8rem !important;
  margin-bottom: 8.8rem !important;
}
.mar-hor--x-11 {
  margin-left: 8.8rem !important;
  margin-right: 8.8rem !important;
}
.mar-top--x-11 {
  margin-top: 8.8rem !important;
}
.mar-right--x-11 {
  margin-right: 8.8rem !important;
}
.mar-bottom--x-11 {
  margin-bottom: 8.8rem !important;
}
.mar-left--x-11 {
  margin-left: 8.8rem !important;
}

.pad-ver--x-11 {
  padding-top: 8.8rem !important;
  padding-bottom: 8.8rem !important;
}
.pad-hor--x-11 {
  padding-left: 8.8rem !important;
  padding-right: 8.8rem !important;
}
.pad-top--x-11 {
  padding-top: 8.8rem !important;
}
.pad-right--x-11 {
  padding-right: 8.8rem !important;
}
.pad-bottom--x-11 {
  padding-bottom: 8.8rem !important;
}
.pad-left--x-11 {
  padding-left: 8.8rem !important;
}

.lh--x-11 {
  line-height: 8.8rem !important;
}

.mar-ver--x-12 {
  margin-top: 9.6rem !important;
  margin-bottom: 9.6rem !important;
}
.mar-hor--x-12 {
  margin-left: 9.6rem !important;
  margin-right: 9.6rem !important;
}
.mar-top--x-12 {
  margin-top: 9.6rem !important;
}
.mar-right--x-12 {
  margin-right: 9.6rem !important;
}
.mar-bottom--x-12 {
  margin-bottom: 9.6rem !important;
}
.mar-left--x-12 {
  margin-left: 9.6rem !important;
}

.mar-left--x-camp {
  margin-left: 11.6rem !important;
}

.pad-ver--x-12 {
  padding-top: 9.6rem !important;
  padding-bottom: 9.6rem !important;
}
.pad-hor--x-12 {
  padding-left: 9.6rem !important;
  padding-right: 9.6rem !important;
}
.pad-top--x-12 {
  padding-top: 9.6rem !important;
}
.pad-right--x-12 {
  padding-right: 9.6rem !important;
}
.pad-bottom--x-12 {
  padding-bottom: 9.6rem !important;
}
.pad-left--x-12 {
  padding-left: 9.6rem !important;
}

.lh--x-12 {
  line-height: 9.6rem !important;
}

/* Font Family */
@font-face {
  font-family: "GOTHAM";
  font-weight: normal;
  src: url("../fonts/Gotham-Rounded-Book.otf") format("truetype");
}
@font-face {
  font-family: "GOTHAM";
  font-weight: 500;
  src: url("../fonts/Gotham-Rounded-Medium.otf") format("truetype");
}
@font-face {
  font-family: "GOTHAM";
  font-weight: bold;
  src: url("../fonts/Gotham-Rounded-Bold.otf") format("truetype");
}
/* External CSS Import */
html {
  font-size: 10px;
}

body {
  background: #f5f5f5;
  font-family: "GOTHAM";
  font-size: 1.4rem;
  font-weight: normal;
  color: #474645;
}

/* Bootstrap Edit */
@media (min-width: 1200px) {
  .container {
    max-width: 504px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 504px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 504px;
  }
}
.container {
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.modal .modal-dialog {
  padding: 0 1.2rem;
}
.modal .modal-dialog .modal-content {
  border: none;
  border-radius: 0.5rem;
  padding: 3.2rem 1.6rem;
}

/* End Bootstrap Edit */
/* Slick Theme */
/* Slider */
.slick-loading .slick-list {
  background: #fff url("../img/ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/slick.eot");
  src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"),
    url("../fonts/slick.woff") format("woff"),
    url("../fonts/slick.ttf") format("truetype"),
    url("../fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-top: -10px\9;
  /*lte IE 8*/
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir="rtl"] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

[dir="rtl"] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir="rtl"] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "→";
}

[dir="rtl"] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 8px;
  line-height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  content: "•";
  text-align: center;
  color: #e8e8e8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #a82e32;
}

.slider.center {
  height: auto;
  background-color: transparent;
  margin: 10px -20px 20px;
}

.clip {
  bottom: 0;
}

ul.slick-dots {
  margin: 0;
  margin-top: 1.6rem;
}

.slick-slide {
  outline: none;
  padding: 0 1.6rem;
}

@media (max-width: 575.98px) {
  .slick-slide .slider-text {
    opacity: 0;
  }

  .slick-slide.slick-current .slider-text {
    opacity: 1;
  }
}
.slick-slide .slider-text {
  text-align: center;
}

.slick-slide img {
  opacity: 0.3;
  width: 100%;
  padding: 0 1rem;
}

.slick-slide.slick-current img {
  opacity: 1;
}

.slick-reset img {
  width: auto;
  padding: 0;
}

.slider-intro {
  margin: 0 -20px 0 !important;
}
.slider-intro .slick-slide {
  padding: 0 4.8rem;
}
.slider-intro .slick-slide img {
  width: 18rem;
  margin-left: auto;
  margin-right: auto;
}

/* End Slick Theme */
/* switch-checkbox */
.switch-checkbox {
  display: inline-block;
  height: 18px;
  position: relative;
  width: 35px;
}

.switch-checkbox input {
  display: none;
}

.slider-switch-checkbox {
  background-color: #e8e8e8;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider-switch-checkbox:before {
  background-color: #fff;
  bottom: 1px;
  content: "";
  height: 16px;
  left: 1px;
  position: absolute;
  transition: 0.4s;
  width: 16px;
}

input:checked + .slider-switch-checkbox {
  background-color: #0dc896;
}

input:checked + .slider-switch-checkbox:before {
  transform: translateX(17px);
}

.slider-switch-checkbox.round {
  border-radius: 34px;
}

.slider-switch-checkbox.round:before {
  border-radius: 50%;
}

/* End switch-checkbox */
/* Grids */
.row--5 {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}
.row--5 > * {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.row--6 {
  margin-left: -0.6rem !important;
  margin-right: -0.6rem !important;
}
.row--6 > * {
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
}
.row--no {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}
.row--no > * {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

/* End Grids */
/* Fonts */
.fw-bold,
.kad--content__title {
  font-weight: bold;
}
.fw-medium {
  font-weight: 500;
}
.fw-normal {
  font-weight: normal;
}
.flh {
  line-height: normal;
}
.fcolor-primary,
.kad--content__title {
  color: #a82e32 !important;
}
.fcolor-secondary {
  color: #fd7e14 !important;
}
.fcolor-yellow {
  color: #ffb24d !important;
}
.fcolor-white,
.class {
  color: #fff !important;
}
.fcolor-default {
  color: #474645 !important;
}
.fcolor-default2 {
  color: #999999 !important;
}
.fcolor-disabled {
  color: #e8e8e8 !important;
}
.fcolor-green {
  color: #0dc896 !important;
}
.fsize-p-2 {
  font-size: 1.6rem;
}
.fsize-p-4 {
  font-size: 1.8rem;
}
.fsize-p-6 {
  font-size: 2rem;
}
.fsize-p-8 {
  font-size: 2.2rem;
}
.fsize-p-10 {
  font-size: 2.4rem;
}
.fsize-p-12 {
  font-size: 2.6rem;
}
.fsize-p-14 {
  font-size: 2.8rem;
}
.fsize-p-16 {
  font-size: 3rem;
}
.fsize-p-18 {
  font-size: 3.2rem;
}
.fsize-m-2 {
  font-size: 1.2rem;
}
.fsize-m-4 {
  font-size: 1rem;
}
.fsize-m-6 {
  font-size: 0.8rem;
}
.fsize-m-8 {
  font-size: 0.6rem;
}

/* End Fonts */
/* Forms */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.search-wrapper {
  position: relative;
  color: #474645;
}
.search-wrapper i {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 2.4rem;
}
.search-wrapper input {
  width: 100%;
  height: 3.2rem;
  background-color: transparent;
  padding: 0 1.6rem 0 4rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  outline: none;
}

/* End Forms */
/* Buttons */
.link-btn {
  display: inline-block;
  text-align: center;
  border: 0.1rem solid;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
}
.link-btn i {
  font-size: 2rem;
  position: relative;
  top: 0.3rem;
}
.link-btn:hover,
.link-btn:focus {
  text-decoration: none;
}
.link-btn--xs {
  height: 2.2rem;
  line-height: 2rem;
  font-size: 1rem;
}
.link-btn--sm {
  height: 2.4rem;
  line-height: 2.2rem;
  font-size: 1rem;
}
.link-btn--md {
  height: 3.6rem;
  line-height: 3.4rem;
  font-size: 1.2rem;
}
.link-btn--lg {
  height: 4rem;
  line-height: 3.8rem;
  font-size: 1.4rem;
}
.link-btn--xl {
  height: 4.8rem;
  line-height: 4.6rem;
  font-size: 1.4rem;
}
.link-btn--w-xs {
  width: 10rem;
}
.link-btn--w-sm {
  width: 12rem;
}
.link-btn--w-md {
  width: 12.8rem;
}
.link-btn--w-lg {
  width: 15rem;
}
.link-btn--w-full {
  width: 100%;
}
.link-btn--primary {
  color: #fff;
  background-color: #a82e32;
  border-color: #a82e32;
}
.link-btn--primary:hover,
.link-btn--primary:focus {
  color: #fff;
  background-color: #f01819;
  border-color: #f01819;
}
.link-btn--secondary {
  color: #fff;
  background-color: #a82e32;
  border-color: #a82e32;
}
.link-btn--secondary:hover,
.link-btn--secondary:focus {
  color: #fff;
  background-color: #ff8521;
  border-color: #ff8521;
}
.link-btn--disabled {
  color: #fff;
  background-color: #e8e8e8;
  border-color: #e8e8e8;
}
.link-btn--disabled:hover,
.link-btn--disabled:focus {
  color: #fff;
  background-color: white;
  border-color: white;
}
.link-btn--white {
  color: #474645;
  background-color: #fff;
  border-color: #fff;
}
.link-btn--white:hover,
.link-btn--white:focus {
  color: #474645;
  background-color: white;
  border-color: white;
}
.link-btn--white-2 {
  color: #a82e32;
  background-color: #fff;
  border-color: #fff;
}
.link-btn--white-2:hover,
.link-btn--white-2:focus {
  color: #a82e32;
  background-color: white;
  border-color: white;
}
.link-btn--white-3 {
  color: #a82e32;
  background-color: #fff;
  border-color: #a82e32;
}
.link-btn--white-3:hover,
.link-btn--white-3:focus {
  color: #a82e32;
  background-color: white;
  border-color: #ff8521;
}
.link-btn--white-4 {
  color: #474645;
  background-color: #fff;
  border-color: #e8e8e8;
}
.link-btn--white-4:hover,
.link-btn--white-4:focus {
  color: #474645;
  background-color: white;
  border-color: white;
}
.link-btn--green {
  color: #fff;
  background-color: #0dc896;
  border-color: #0dc896;
}
.link-btn--green:hover,
.link-btn--green:focus {
  color: #fff;
  background-color: #18f0b6;
  border-color: #18f0b6;
}
.link-btn--blue {
  color: #fff;
  background-color: #4dbbff;
  border-color: #4dbbff;
}
.link-btn--blue:hover,
.link-btn--blue:focus {
  color: #fff;
  background-color: #80ceff;
  border-color: #80ceff;
}
.link-btn--clean {
  color: #fff;
  background-color: #a82e32;
  border-color: #a82e32;
}
.link-btn--clean:hover,
.link-btn--clean:focus {
  color: #fff;
  background-color: #ff8521;
  border-color: #ff8521;
}
.link-btn--fb {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}
.link-btn--fb:hover,
.link-btn--fb:focus {
  color: #fff;
  background-color: #4c70ba;
  border-color: #4c70ba;
}
.link-btn:disabled,
.link-btn[disabled] {
  color: #fff;
  background-color: #e8e8e8;
  border-color: #e8e8e8;
}
.link-btn:disabled:hover,
.link-btn:disabled:focus,
.link-btn[disabled]:hover,
.link-btn[disabled]:focus {
  color: #fff;
  background-color: white;
  border-color: white;
}
.link-btn--icon-left img {
  position: absolute;
  left: 1.6rem;
  width: 3.2rem;
  top: 50%;
  transform: translate(0, -50%);
}

.link-fixed-block {
  height: 4.8rem;
}

.link-fixed-wrapper {
  position: fixed;
  bottom: 8rem;
  width: 100%;
}

.link-fixed-wrapper-donat {
  position: fixed;
  bottom: 1rem;
  width: 100%;
}

.link-fixed-no-footer-wrapper {
  position: fixed;
  bottom: 2.4rem;
  width: 100%;
}

.link-fixed-icon {
  position: fixed;
  bottom: 2.4rem;
  right: 0;
}
.link-fixed-icon i {
  width: 4.8rem;
  height: 4.8rem;
  background-color: #0dc896;
  color: #fff;
  border-radius: 50%;
  line-height: 4.8rem;
  font-size: 2.8rem;
  text-align: center;
}

/* End Buttons */
/* Global Styles */
.second-bg {
  background-color: #fff;
}

a {
  color: #a82e32;
  transition: 0.2s ease-in-out;
}
a:focus,
a:hover {
  text-decoration: none;
  color: #ff7708;
}

p {
  line-height: 2.2rem;
}

hr {
  border-top: 0.1rem solid #e8e8e8;
  margin: 0.8rem 0;
}
hr.hr--no-mar {
  margin: 0;
}
hr.hr--x-2 {
  margin: 1.6rem 0;
}

ul {
  padding: 0 1.4rem;
}

label {
  margin: 0;
}

.no-overflow,
.class--regular__kad,
.class--premium,
.video-media__kad {
  overflow: hidden;
}

.no-border {
  border: none !important;
}

.no-mar {
  margin: 0 !important;
}

.dblock {
  display: block !important;
}
.diblock {
  display: inline-block !important;
}

.main-path-bg,
.bg-header--landing,
.bg-header-pengajar--landing {
  color: #fff;
  background: #7b2b2c;
  background-image: url(../img/path.svg);
  background-image: url(../img/path.svg),
    linear-gradient(to bottom, #7b2b2c, #7b2b2c);
  background-position: bottom center;
  background-repeat: no-repeat;
}

.shadow,
.slider-switch-checkbox.round:before,
.link-fixed-icon i,
.ap-button,
.material a:not(:last-child) img,
.class--premium {
  -webkit-box-shadow: 0 2px 4px 0 rgba(71, 70, 69, 0.4) !important;
  -moz-box-shadow: 0 2px 4px 0 rgba(71, 70, 69, 0.4) !important;
  -ms-box-shadow: 0 2px 4px 0 rgba(71, 70, 69, 0.4) !important;
  box-shadow: 0 2px 4px 0 rgba(71, 70, 69, 0.4) !important;
}

.align-center,
header.header-intro {
  text-align: center !important;
}
.align-right {
  text-align: right !important;
}

.content-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.main-logo,
.base-navbar__left__logo,
.nav-bar__left__logo,
.nav-bar-fix__left__logo,
.nav-bar-intro__left__logo,
.nav-bar-default__left__logo {
  height: 3rem;
}

.bdr-bottom {
  border-bottom: 0.1rem solid #e8e8e8;
}

.si {
  width: 0.8rem;
  height: 0.8rem;
}
.si--x-2 {
  width: 1.6rem;
  height: 1.6rem;
}
.si--x-3 {
  width: 2.4rem;
  height: 2.4rem;
}
.si--x-4 {
  width: 3.2rem;
  height: 3.2rem;
}
.si--x-5 {
  width: 4rem;
  height: 4rem;
}
.si--x-6 {
  width: 4.8rem;
  height: 4.8rem;
}
.si--x-7 {
  width: 5.6rem;
  height: 5.6rem;
}
.si--x-8 {
  width: 6.4rem;
  height: 6.4rem;
}
.si--x-9 {
  width: 7.2rem;
  height: 7.2rem;
}
.si--x-10 {
  width: 8rem;
  height: 8rem;
}
.si--x-11 {
  width: 8.8rem;
  height: 8.8rem;
}
.si--x-12 {
  width: 9.6rem;
  height: 9.6rem;
}
.si-width {
  width: 0.8rem;
}
.si-width--x-2 {
  width: 1.6rem;
}
.si-width--x-3 {
  width: 2.4rem;
}
.si-width--x-4 {
  width: 3.2rem;
}
.si-width--x-5 {
  width: 4rem;
}
.si-width--x-6 {
  width: 4.8rem;
}
.si-width--x-7 {
  width: 5.6rem;
}
.si-width--x-8 {
  width: 6.4rem;
}
.si-width--x-9 {
  width: 7.2rem;
}
.si-width--x-10 {
  width: 8rem;
}
.si-width--x-11 {
  width: 8.8rem;
}
.si-width--x-12 {
  width: 9.6rem;
}
.si-height {
  height: 0.8rem;
}
.si-height--x-2 {
  height: 1.6rem;
}
.si-height--x-3 {
  height: 2.4rem;
}
.si-height--x-4 {
  height: 3.2rem;
}
.si-height--x-5 {
  height: 4rem;
}
.si-height--x-6 {
  height: 4.8rem;
}
.si-height--x-7 {
  height: 5.6rem;
}
.si-height--x-8 {
  height: 6.4rem;
}
.si-height--x-9 {
  height: 7.2rem;
}
.si-height--x-10 {
  height: 8rem;
}
.si-height--x-11 {
  height: 8.8rem;
}
.si-height--x-12 {
  height: 9.6rem;
}

.mar-top {
  margin-top: 0.8rem;
}
.mar-top--x-half {
  margin-top: 0.4rem;
}
.mar-top--x-2 {
  margin-top: 1.6rem;
}
.mar-top--x-3 {
  margin-top: 2.4rem;
}
.mar-top--x-4 {
  margin-top: 3.2rem;
}
.mar-top--x-5 {
  margin-top: 4rem;
}
.mar-top--x-6 {
  margin-top: 4.8rem;
}
.mar-top--x-7 {
  margin-top: 5.6rem;
}
.mar-top--x-8 {
  margin-top: 6.4rem;
}
.mar-bottom {
  margin-bottom: 0.8rem;
}
.mar-bottom--x-half {
  margin-bottom: 0.4rem;
}
.mar-bottom--x-2,
.teacher-list,
.notification-wrapper {
  margin-bottom: 1.6rem;
}
.mar-bottom--x-3 {
  margin-bottom: 2.4rem;
}
.mar-bottom--x-4 {
  margin-bottom: 3.2rem;
}
.mar-bottom--x-5 {
  margin-bottom: 4rem;
}
.mar-bottom--x-6 {
  margin-bottom: 4.8rem;
}
.mar-bottom--x-7 {
  margin-bottom: 5.6rem;
}
.mar-bottom--x-8 {
  margin-bottom: 6.4rem;
}
.mar-right {
  margin-right: 0.8rem;
}
.mar-right--x-half {
  margin-right: 0.4rem;
}
.mar-right--x-2,
.notification-wrapper .notification__left {
  margin-right: 1.6rem;
}
.mar-right--x-3 {
  margin-right: 2.4rem;
}
.mar-right--x-4 {
  margin-right: 3.2rem;
}
.mar-right--x-5 {
  margin-right: 4rem;
}
.mar-right--x-6 {
  margin-right: 4.8rem;
}
.mar-right--x-7 {
  margin-right: 5.6rem;
}
.mar-right--x-8 {
  margin-right: 6.4rem;
}

.pad {
  padding-top: 0.8rem !important;
}
.pad--x-half {
  padding: 0.4rem !important;
}
.pad--x-2 {
  padding: 1.6rem !important;
}
.pad--x-3 {
  padding: 2.4rem !important;
}
.pad--x-4 {
  padding: 3.2rem !important;
}
.pad--x-5 {
  padding: 4rem !important;
}
.pad--x-6 {
  padding: 4.8rem !important;
}
.pad--x-7 {
  padding: 5.6rem !important;
}
.pad--x-8 {
  padding: 6.4rem !important;
}
.pad-top {
  padding-top: 0.8rem !important;
}
.pad-top--x-half {
  padding-top: 0.4rem !important;
}
.pad-top--x-2 {
  padding-top: 1.6rem !important;
}
.pad-top--x-3 {
  padding-top: 2.4rem !important;
}
.pad-top--x-4 {
  padding-top: 3.2rem !important;
}
.pad-top--x-5 {
  padding-top: 4rem !important;
}
.pad-top--x-6 {
  padding-top: 4.8rem !important;
}
.pad-top--x-7 {
  padding-top: 5.6rem !important;
}
.pad-top--x-8 {
  padding-top: 6.4rem !important;
}
.pad-bottom {
  padding-bottom: 0.8rem !important;
}
.pad-bottom--x-half {
  padding-bottom: 0.4rem !important;
}
.pad-bottom--x-2 {
  padding-bottom: 1.6rem !important;
}
.pad-bottom--x-3 {
  padding-bottom: 2.4rem !important;
}
.pad-bottom--x-4 {
  padding-bottom: 3.2rem !important;
}
.pad-bottom--x-5 {
  padding-bottom: 4rem !important;
}
.pad-bottom--x-6 {
  padding-bottom: 4.8rem !important;
}
.pad-bottom--x-7 {
  padding-bottom: 5.6rem !important;
}
.pad-bottom--x-8 {
  padding-bottom: 6.4rem !important;
}
.pad-right {
  padding-right: 0.8rem !important;
}
.pad-right--x-half {
  padding-right: 0.4rem !important;
}
.pad-right--x-2 {
  padding-right: 1.6rem !important;
}
.pad-right--x-3 {
  padding-right: 2.4rem !important;
}
.pad-right--x-4 {
  padding-right: 3.2rem !important;
}
.pad-right--x-5 {
  padding-right: 4rem !important;
}
.pad-right--x-6 {
  padding-right: 4.8rem !important;
}
.pad-right--x-7 {
  padding-right: 5.6rem !important;
}
.pad-right--x-8 {
  padding-right: 6.4rem !important;
}
.pad-ver {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}
.pad-ver--x-half {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}
.pad-ver--x-2 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.6rem !important;
}
.pad-ver--x-3 {
  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;
}
.pad-ver--x-4 {
  padding-top: 3.2rem !important;
  padding-bottom: 3.2rem !important;
}
.pad-ver--x-5 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.pad-ver--x-6 {
  padding-top: 4.8rem !important;
  padding-bottom: 4.8rem !important;
}
.pad-ver--x-7 {
  padding-top: 5.6rem !important;
  padding-bottom: 5.6rem !important;
}
.pad-ver--x-8 {
  padding-top: 6.4rem !important;
  padding-bottom: 6.4rem !important;
}
.pad-hor {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}
.pad-hor--x-half {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}
.pad-hor--x-2 {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}
.pad-hor--x-3 {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}
.pad-hor--x-4 {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
}
.pad-hor--x-5 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
.pad-hor--x-6 {
  padding-left: 4.8rem !important;
  padding-right: 4.8rem !important;
}
.pad-hor--x-7 {
  padding-left: 5.6rem !important;
  padding-right: 5.6rem !important;
}
.pad-hor--x-8 {
  padding-left: 6.4rem !important;
  padding-right: 6.4rem !important;
}

.kad {
  background-color: #fff;
  border-radius: 0.5rem;
}
.kad--padding {
  padding: 1.6rem;
}
.kad--padding-2 {
  padding: 0.8rem 1.6rem;
}
.kad--path {
  background-image: url(../img/path-card.svg);
  background-position: bottom right;
  background-repeat: no-repeat;
}
.kad--pathpengajar {
  background-image: url(../img/path-card-pengajar.svg);
  background-position: bottom right;
  background-repeat: no-repeat;
}
.kad--content__main-img {
  width: 100%;
  height: 18.6rem;
  object-fit: cover;
}
.kad--content__title {
  height: 4.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kad--offset-top {
  margin-top: -0.8rem;
}
.kad--offset-top--x-2 {
  margin-top: -1.6rem;
}
.kad--offset-top--x-3 {
  margin-top: -2.4rem;
}

.avatar {
  border-radius: 50%;
  object-fit: cover;
}
.avatar--camp {
  width: 33%;
  border-radius: 5px;
  height: 78%;
}
.avatar--large {
  width: 10.6rem;
  height: 10.6rem;
}
.avatar--medium {
  width: 6.4rem;
  height: 6.4rem;
}
.avatar--small {
  width: 5.4rem;
  height: 5.4rem;
}
.avatar--stroke {
  border: 2px solid #fff;
}

.thumb {
  border-radius: 0.5rem;
  width: 8rem;
  height: 10rem;
  object-fit: cover;
}

.allthumb {
  border-radius: 0.5rem;
  width: 17rem;
  height: 12rem;
  object-fit: fill;
}

.flexed,
.base-navbar__on-container,
.nav-bar__on-container,
.nav-bar-fix__on-container,
.nav-bar-intro__on-container,
.nav-bar-default__on-container,
header .header-profile,
.person-total > div,
.teacher-list,
.notification-wrapper .notification,
.text-list > div {
  display: flex;
}
.flexed__1-w,
.base-navbar__center,
.nav-bar__center,
.nav-bar-fix__center,
.nav-bar-intro__center,
.nav-bar-default__center,
header .header-profile__text,
.person-total__capt,
.notification-wrapper .notification__right {
  flex: 1;
}

.boxs {
  position: relative;
}
.boxs__middle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-full {
  width: 100%;
}

.w-half {
  width: 50%;
}

/* End Global Styles */
/* Customs */
.ap-header__title,
.ap-header__titleh3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 3.2rem !important;
  color: #474645;
}

.ap-header__titleh3 {
  margin-top: 2.2rem !important;
  margin-bottom: 0rem !important;
}

.ap-row .ap-ex-row_label {
  text-align: center;
  font-size: 24px;
  font-family: "Fira Sans Regular";
  color: #474645;
}
.ap-row-selected .ap-ex-row_label {
  font-size: 32px;
  font-family: "Fira Sans Bold";
  color: #a82e32;
}

.pos-fix {
  position: fixed !important;
}

.link-fixed-wrapper-2 {
  position: fixed !important;
  bottom: 3rem;
  width: 100%;
}

.pos-relat {
  position: relative !important;
}

.link-btn-chat,
.chat-triger {
  display: inline-block;
  position: relative;
  right: 10px;
  padding: 1.5px 3px;
  border-radius: 100px;
}
.link-btn-chat i,
.chat-triger i {
  font-size: 3.5em;
}

.timer-head {
  background-color: rgba(71, 70, 69, 0.6);
  display: inline-block;
  margin-top: 1.2em;
  padding: 2px 10px;
  border-radius: 5px;
}
.timer-head i {
  font-size: 24px;
}
.timer-head span {
  font-size: 14px;
  position: relative;
  top: -5px;
  padding-left: 10px;
}

.set-height {
  height: 280px;
}

.nopadding {
  padding: 0 !important;
}

.nomargin {
  margin: 0 !important;
}

.ov-hide {
  overflow: hidden;
}

.fl-left {
  float: left;
}

.split-capture-container {
  background-color: #474645;
  position: relative;
  text-align: center;
}
.split-capture-container .disable-video {
  display: inline-block;
  position: inherit;
  top: 15vh;
}
.split-capture-container .disable-video > i {
  font-size: 3em;
  color: white;
}
.split-capture-container .disable-video img {
  margin-top: -50px;
  width: 30%;
  border-radius: 100px;
}
.split-capture-container .disable-video a {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #a82e32;
  padding: 2px 5px;
  border-radius: 100px;
}
.split-capture-container .disable-video a > i {
  font-size: 2.2em;
  line-height: 1.2;
  color: #ffffff;
}
.split-capture-container .disable-video p {
  color: white;
}
.split-capture-container .video-element {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  display: inline-block;
}

.h-50 .disable-video {
  top: 20%;
}

.slick-slide-video {
  width: 100%;
  overflow-y: hidden !important;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.slick-slide-video .slick-prev {
  display: none !important;
}
.slick-slide-video .slick-next {
  display: none !important;
}
.slick-slide-video .slick-track .slick-slide {
  padding: 0px !important;
}
.slick-slide-video .slick-track .slick-slide img {
  padding: 0px;
  width: 100%;
  box-shadow: 0 3px 6px 0 rgba(71, 70, 69, 0.4);
}

.btn-slide-video {
  border-radius: 100px;
  background: #ffffff;
  border: 0px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.btn-slide-video i {
  position: relative;
  top: 1px;
  line-height: 1.3;
}
.btn-slide-video:hover {
  border: 0px;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.07);
}
.btn-slide-video:focus {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.07);
  border: 0px;
  outline: none !important;
}

.set-siswa {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.scroll-video-btn {
  position: absolute;
  bottom: 10px;
  right: 21%;
  background: rgba(71, 70, 69, 0.6);
  border-radius: 100px;
}
.scroll-video-btn i {
  font-size: 1.3em;
  color: #ffffff;
  padding: 5px;
  line-height: 1.5;
}

.scroll-video-btn-up {
  position: absolute;
  top: 10px;
  z-index: 1;
  right: 21%;
  background: rgba(71, 70, 69, 0.6);
  border-radius: 100px;
}
.scroll-video-btn-up i {
  font-size: 1.3em;
  color: #ffffff;
  padding: 5px;
  line-height: 1.5;
}

.one-siswa {
  width: 100%;
  height: 100%;
  float: left;
}
.one-siswa .split-capture-container {
  height: 100%;
  overflow: hidden;
}

.more-than-1 {
  width: 50%;
  height: 50%;
}
.more-than-1 .split-capture-container .disable-video {
  top: 20%;
}
.more-than-1 .split-capture-container .disable-video img {
  width: 102px;
}
.more-than-1 .video-element {
  left: 0px;
  top: 0px;
}

.modal-head-close {
  position: absolute;
  width: 100%;
  top: -20px;
}
.modal-head-close a {
  display: inline-block;
}

.content-popup-vc {
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  border: solid 0.5px #e8e8e8;
  background-color: #ffffff;
  text-align: center;
}
.content-popup-vc .img-fn {
  display: inline-block;
  padding: 10px;
  line-height: 1;
  border-radius: 100px;
  background: #a82e32;
}
.content-popup-vc .img-fn i {
  font-size: 3em;
  color: #ffffff;
}
.content-popup-vc p {
  margin: 15px 0px 0px 0px;
  font-size: 1.3em;
  line-height: 1.2;
}
@media (max-width: 375.98px) {
  .content-popup-vc p {
    font-size: 1em;
  }
}

.pad-bot-0 {
  padding-bottom: 0px !important;
}

.OT_publisher .OT_edge-bar-item.OT_mode-on,
.OT_subscriber .OT_edge-bar-item.OT_mode-on,
.OT_publisher .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
.OT_subscriber .OT_edge-bar-item.OT_mode-auto.OT_mode-on-hold,
.OT_publisher:hover .OT_edge-bar-item.OT_mode-auto,
.OT_subscriber:hover .OT_edge-bar-item.OT_mode-auto,
.OT_publisher:hover .OT_edge-bar-item.OT_mode-mini-auto,
.OT_subscriber:hover .OT_edge-bar-item.OT_mode-mini-auto {
  opacity: 0 !important;
}

.video-touch {
  z-index: 999;
}

.OT_publisher,
.OT_subscriber {
  z-index: 0;
}

.call-video .OT_publisher .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-image: url(../img/icon-video-menuggu-pengajar.svg) !important;
  background-size: auto 50% !important;
}

.OT_publisher .OT_video-poster {
  background-position: center center !important;
}

.OT_widget-container {
  background-color: #474645 !important;
}

.OT_publisher,
.OT_subscriber {
  z-index: 0;
}

.one-siswa
  > .split-capture-container
  > .video-element
  > .OT_subscriber
  .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url(../img/icon-video-menuggu.svg) !important;
  background-size: auto 48% !important;
}

.more-than-1
  > .split-capture-container
  > .video-element
  > .OT_subscriber
  .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url(../img/icon-video-menuggu.svg) !important;
  background-size: auto 60% !important;
}

.one-siswa .video-element {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url(../img/icon-video-terputus.svg) !important;
  background-size: auto 50% !important;
}

.more-than-1 .video-element {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url(../img/icon-video-terputus.svg) !important;
  background-size: auto 60% !important;
}

.one-siswa
  > .split-capture-container
  > .call-only
  > .OT_subscriber
  .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: none !important;
  background-size: none !important;
}

.split-capture-container .st-rell {
  position: relative !important;
  top: 19vh;
}
@media (min-width: 780px) {
  .split-capture-container .st-rell {
    top: 15vh;
  }
}

.call-only .OT_publisher .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: none !important;
  background-size: none !important;
}

.container-chat-sender-block {
  position: fixed;
  right: 0;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 99999;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  background-image: linear-gradient(
    to top,
    rgba(71, 70, 69, 0.9),
    rgba(14, 14, 14, 0)
  );
}

.submit-container-sender {
  position: fixed;
  z-index: 99999;
  bottom: 20px;
  margin-left: -1.2em;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.input-sender-chat {
  width: 80%;
  padding: 12px 16px 12px 50px;
  font-size: 14px;
  border-radius: 100px;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.07);
  background-color: #ffffff;
  border: none !important;
  float: left;
}

.input-sender-chat:focus {
  outline: 0 !important;
}

.link-sender {
  float: right;
  right: 0px;
  position: relative;
  top: -1px;
  border-radius: 100px;
  box-shadow: 0 2px 4px 0 rgba(71, 70, 69, 0.4);
}
.link-sender img {
  padding: 13px 10px;
}

.content-chat-sender {
  position: fixed;
  z-index: 99999;
  bottom: 90px;
  max-height: 50%;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  overflow-y: scroll;
  margin-left: -1.2em;
}
.content-chat-sender > .content-publisher {
  position: relative;
  float: left;
}
.content-chat-sender > .content-publisher > img {
  position: absolute;
}
.content-chat-sender > .content-publisher > p {
  max-width: 60%;
  float: left;
  margin-left: 60px;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.07);
  background-color: #ffffff;
}
.content-chat-sender > .content-subricber {
  position: relative;
  float: right;
}
.content-chat-sender > .content-subricber > img {
  position: absolute;
  right: 0;
  top: -5px;
}
.content-chat-sender > .content-subricber > p {
  max-width: 100%;
  float: right;
  margin-right: 60px;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 100px;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.07);
  background-color: #a82e32;
  color: #ffffff;
}

.close-sender-chat {
  background: #e8e8e8;
  display: inline-block;
  position: absolute;
  padding: 5px 15px;
  left: 20px;
  top: 3px;
  border-radius: 100px;
}

.camp-santri-head li {
  list-style-type: none;
  padding-left: 10px;
  padding-top: 7px;
}
.camp-santri-head li img {
  position: absolute;
  width: 20px;
  margin-top: 2px;
  margin-left: -25px;
}
.camp-santri-head li span.fsize-p-2 {
  font-size: 1.5rem !important;
}

.success-camp-ng {
  padding: 5px 20px;
  display: inline-block;
  border-radius: 100px;
  color: #ffffff;
  background-color: #0dc896;
}

.disable-camp-ng {
  padding: 5px 20px;
  display: inline-block;
  border-radius: 100px;
  color: #ffffff;
  background-color: #a82e32;
}

.link-btn--secondary-outline {
  color: #a82e32;
  background-color: #ffffff;
  border-color: #a82e32;
}

.pos-bot-10 {
  bottom: 2rem !important;
}

.feedback-ng-star {
  margin: auto;
  padding: 10px 0px;
  text-align: center;
}
.feedback-ng-star i {
  cursor: pointer;
  font-size: 6rem;
  padding: 5px;
}
@media (max-width: 380.985px) {
  .feedback-ng-star i {
    font-size: 5rem;
    padding: 5px;
  }
}
@media (max-width: 320px) {
  .feedback-ng-star i {
    font-size: 3.8rem !important;
  }
}

.feedback-ng-star {
  margin: auto;
  padding: 10px 0px;
  text-align: center;
}
.feedback-ng-star i {
  cursor: pointer;
  font-size: 6rem;
  padding: 5px;
}
@media (max-width: 380.985px) {
  .feedback-ng-star i {
    font-size: 5rem;
    padding: 5px;
  }
}
@media (max-width: 320px) {
  .feedback-ng-star i {
    font-size: 3.8rem !important;
  }
}

.text-area-feedback {
  width: 100%;
  border: none;
  padding: 10px;
  min-height: 100px;
  resize: none;
  border-bottom: 1px solid #e8e8e8;
}
.text-area-feedback:focus {
  outline: 0px;
  box-shadow: none;
  border-bottom: 1px solid #e8e8e8;
}

.single-one-call .video-element {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url(../img/icon-video-terputus.svg) !important;
  background-size: auto 50% !important;
}

.conntainer-modal-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2000;
  min-width: 250px;
}

.modal-guide {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  /* font-family: 'Helvetica Neue', Arial, sans-serif; */
  font-size: 22px;
  background: transparent;
}

.backdrop-guide {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 22;
  height: 100%;
  font-family: sans-serif;
  background: rgba(0, 0, 0, 0.5);
}

.content-guide {
  position: relative;
  max-width: 500px;
  width: 90%;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  border: solid 0.5px #e8e8e8;
  background-color: #ffffff;
  border-radius: 5px;
  margin: 0 auto;
  background: #ffffff;
}

.ap-button-guide {
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

.guide-0 {
  top: 50%;
}
.guide-0:before {
  content: "";
  position: absolute;
  width: 5px;
  z-index: 99999999;
  left: 30px;
  top: -100px;
  height: 110px;
  background: #ffffff;
}

.guide-1 {
  top: 50%;
}
.guide-1:before {
  content: "";
  position: absolute;
  width: 5px;
  z-index: 99999999;
  right: 30px;
  top: -100px;
  height: 110px;
  background: #ffffff;
}

.guide-2 {
  top: 10%;
}
.guide-2:before {
  content: "";
  position: absolute;
  width: 5px;
  right: 50%;
  z-index: 99999999;
  top: 92%;
  height: 110px;
  background: #ffffff;
}

.guide-3 {
  top: 30%;
}
.guide-3:before {
  content: "";
  position: absolute;
  width: 5px;
  right: 50%;
  z-index: 99999999;
  top: 120px;
  height: 110px;
  background: #ffffff;
}

.line-guide {
  position: absolute;
  width: 70%;
  left: 13%;
  background: #fff;
  bottom: -40px;
  height: 5px;
}
.line-guide:before {
  content: "";
  position: absolute;
  width: 5px;
  left: 0;
  z-index: 99999999;
  height: 140px;
  background: #ffffff;
}
.line-guide:after {
  content: "";
  position: absolute;
  width: 5px;
  right: 0;
  z-index: 99999999;
  height: 140px;
  background: #ffffff;
}

.guide-4 {
  top: 40%;
}
.guide-4:before {
  content: "";
  position: absolute;
  width: 5px;
  right: 10%;
  z-index: 99999999;
  top: 185px;
  height: 160px;
  background: #ffffff;
}

.guide-5 {
  top: 30%;
}
.guide-5:before {
  content: "";
  position: absolute;
  width: 5px;
  left: 50%;
  z-index: 99999999;
  bottom: 140px;
  height: 165px;
  background: #ffffff;
}

.guide-6 {
  top: 30%;
}
.guide-6:before {
  content: "";
  position: absolute;
  width: 5px;
  right: 3%;
  z-index: 99999999;
  bottom: 150px;
  height: 165px;
  background: #ffffff;
}

.guide-7 {
  top: 30%;
}
.guide-7:before {
  content: "";
  position: absolute;
  width: 5px;
  left: 3%;
  z-index: 99999999;
  bottom: 150px;
  height: 165px;
  background: #ffffff;
}

.zindex-trial {
  z-index: auto !important;
}

.zindexshow-1 {
  position: relative;
  z-index: 22;
}

.ap-button-right {
  float: right;
  cursor: pointer;
  letter-spacing: 0;
  text-align: center;
  display: inline-block;
  font-size: 17px;
  padding: 10px;
  margin: 8px;
  width: 45%;
  color: #ffffff !important;
  background: #a82e32;
  border-color: #a82e32;
  border-radius: 100px;
}
@media (max-width: 375.98px) {
  .ap-button-right {
    margin: auto;
    width: 45%;
  }
}

.ap-button-left {
  float: left;
  cursor: pointer;
  letter-spacing: 0;
  text-align: center;
  display: inline-block;
  font-size: 17px;
  padding: 10px;
  margin: 8px;
  width: 43%;
  color: #474645 !important;
  background: #ffffff;
  border-color: #ffffff;
  border-radius: 100px;
}
@media (max-width: 375.98px) {
  .ap-button-left {
    margin: auto;
    width: 45%;
  }
}

.bg-pengajar {
  background: #333333;
}

input.pengajar-input,
textarea.pengajar-input {
  background-color: transparent !important;
  color: #ffffff !important;
}

.pengajar-login-fb {
  display: inline-block;
  position: relative;
  color: #ffffff;
  background-color: #3b5998;
  border-color: #3b5998;
}
.pengajar-login-fb > img {
  position: absolute;
  width: 40px;
  left: 20px;
  top: 2px;
}

.pengajar-login-google {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  color: #474645;
  background-color: #ffffff;
  border-color: #ffffff;
}
.pengajar-login-google > img {
  position: absolute;
  width: 40px;
  left: 20px;
  top: 2px;
}

.show_tour {
  display: inline-block;
}

.hide_tour {
  display: none;
}

.show-z {
  position: relative;
  z-index: 9999;
}

.form-list input.pengajar-input {
  background: transparent !important;
}

.pengajar-list span {
  color: #ffffff;
}
.pengajar-list input {
  background: transparent !important;
  color: #ffffff !important;
}

.pengajar-list img {
  position: absolute;
  right: 0px;
  z-index: -1;
}
.pengajar-list select.select-pengajar {
  background: transparent !important;
  color: #ffffff;
}
.pengajar-list select.select-pengajar option {
  color: #474645;
}

.bg-kad-pengajar {
  background-color: #4f525a !important;
}

.realeat-switch {
  position: relative;
  top: 40px;
}

.flexed-pengajar {
  position: relative;
  display: inline-block;
  width: 100%;
}
.flexed-pengajar img.qp-point-img {
  position: absolute;
  left: 20px;
}
.flexed-pengajar div.qp-point {
  float: left;
  padding-left: 20px;
}
.flexed-pengajar a.right-btn {
  float: right;
  position: relative;
  top: 10px;
}
.flexed-pengajar a.rigt-next-btn {
  position: relative;
  border-radius: 100px;
  top: 15px;
  padding: 10px 5px;
}
.flexed-pengajar a.rigt-next-btn i {
  font-size: 2.5rem;
  top: -0.6rem;
}
.flexed-pengajar img.img-user {
  position: absolute;
  left: 20px;
  top: 30px;
}

.modal-pengajar {
  background: #4f525a;
}

a.top-right-second {
  top: 10px !important;
}

.tab-float {
  border: none;
  background: #4f525a;
}

.tab-float > li {
  margin: 0px;
  width: 33.3333%;
  text-align: center;
  float: left;
}

.tab-float > li > a.active,
.tab-float > li > a.show {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 3px solid #a82e32 !important;
  color: #a82e32 !important;
  font-weight: 600 !important;
}

.tab-float > li > a {
  background-color: transparent;
  font-weight: 600 !important;
  padding-top: 15px;
  color: #ffffff;
  padding-bottom: 15px;
}

.flexed-pengajar a.time-pengajar {
  top: 0px;
}

.pengajar-input-search > input {
  height: 4rem !important;
  margin-top: -5px !important;
}

.pengajar-input-search > i {
  top: 45% !important;
  font-size: 28px !important;
  z-index: 1111 !important;
}

.bg-pengajar-dark {
  background-color: #333333 !important;
}

.kad-border-radius-bottom {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.fl-right {
  float: right;
}

.form-list > span.select2 {
  margin-top: 0px !important;
}

.form-list
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  display: none;
}

.form-list .select2-container--default .select2-selection--single {
  background-color: transparent;
  border: none;
  border-radius: 0px;
}

.form-list
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #ffffff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 2px;
  height: 40px;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border: 1px solid #4f525a !important;
  outline: none !important;
  box-shadow: none !important;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #333;
}

.select2-results__option {
  color: #fff;
}

.select2-dropdown {
  box-shadow: 0 2px 10px 0 rgba(16, 16, 16, 0.2);
  background-color: #4f525a;
  border: none;
  outline: none;
}

.form-list
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 0px !important;
  font-size: 1.6rem !important;
}

.select2-container {
  box-sizing: none !important;
}

.select2-container--default .select2-results > .select2-results__options > li {
  border-bottom: 1px solid #ffffff;
  padding-bottom: 10px;
  padding-top: 10px;
}

.video-call-pengajar .OT_publisher .OT_video-poster {
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-image: url(../img/icon-video-menuggu-santri.svg) !important;
  background-size: auto 50% !important;
}

.btn-panggil-santri {
  position: relative !important;
  top: 67% !important;
}

.footer-quiz .fl-left {
  width: 10%;
}
.footer-quiz .fl-right {
  width: 10%;
}
.footer-quiz .center-progress {
  float: left;
  position: relative;
  width: 70%;
  left: 5%;
  right: 5%;
  bottom: 10px;
}
.footer-quiz .center-progress:before {
  content: "";
  height: 5px;
  position: absolute;
  top: 24px;
  background-color: #474645;
  width: 100%;
}
.footer-quiz .center-progress:after {
  content: "";
  height: 5px;
  position: absolute;
  top: 24px;
  background-color: #a82e32;
  width: 0%;
}
.footer-quiz .center-progress[value="100"]:after {
  width: 100%;
}
.footer-quiz .center-progress[value="90"]:after {
  width: 90%;
}
.footer-quiz .center-progress[value="80"]:after {
  width: 80%;
}
.footer-quiz .center-progress[value="70"]:after {
  width: 70%;
}
.footer-quiz .center-progress[value="60"]:after {
  width: 60%;
}
.footer-quiz .center-progress[value="50"]:after {
  width: 50%;
}
.footer-quiz .center-progress[value="40"]:after {
  width: 40%;
}
.footer-quiz .center-progress[value="30"]:after {
  width: 30%;
}
.footer-quiz .center-progress[value="20"]:after {
  width: 20%;
}
.footer-quiz .center-progress[value="10"]:after {
  width: 10%;
}

.radio {
  padding: 15px;
}
.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label {
  color: #ffffff;
}
.radio input[type="radio"] + .radio-label:before {
  content: "";
  background: transparent;
  border-radius: 100%;
  border: 1px solid #bfbfbf;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label {
  color: #a82e32;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #a82e32;
  box-shadow: inset 0 0 0 1px #ffffff;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #a82e32;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #ffffff;
  border-color: #bfbfbf;
  background: #bfbfbf;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}

.img-lulus {
  width: 60%;
  font-size: 4.5rem;
  margin: auto;
  background-image: url(../img/lulus.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.img-lulus .nilai {
  position: relative;
  left: 2.2%;
}

.formlist-qp-input {
  position: relative;
}
.formlist-qp-input .setVal {
  position: absolute;
  margin-top: 0px !important;
  right: 0px;
  display: inline-block;
  background: #4f525a;
  padding-top: 10px;
  padding-left: 10px;
  top: 15px;
}
.formlist-qp-input .right-angle {
  position: absolute;
  margin-top: 0px !important;
  right: 0px;
  padding: 5px;
  background: #4f525a;
  top: 10px;
}

/* End Customs */
/* Navbar */
.nav-block {
  height: 6.6rem;
}

.nav-bar,
.nav-bar-fix,
.nav-bar-default {
  width: 100%;
  height: 6.6rem;
  color: #a82e32;
  z-index: 1;
}

.base-navbar__left,
.nav-bar__left,
.nav-bar-fix__left,
.nav-bar-intro__left,
.nav-bar-default__left {
  width: 4rem;
}
.base-navbar__left__logo,
.nav-bar__left__logo,
.nav-bar-fix__left__logo,
.nav-bar-intro__left__logo,
.nav-bar-default__left__logo {
  margin: 1.5rem 0;
}
.base-navbar__left__icon,
.nav-bar__left__icon,
.nav-bar-fix__left__icon,
.nav-bar-intro__left__icon,
.nav-bar-default__left__icon {
  position: absolute;
  font-size: 3.2rem;
  color: #a82e32;
  top: 50%;
  transform: translate(0, -50%);
}
.base-navbar__center,
.nav-bar__center,
.nav-bar-fix__center,
.nav-bar-intro__center,
.nav-bar-default__center {
  position: relative;
  height: 6.6rem;
}
.base-navbar__center__title,
.nav-bar__center__title,
.nav-bar-fix__center__title,
.nav-bar-intro__center__title,
.nav-bar-default__center__title {
  position: absolute;
  font-size: 1.8rem;
  font-weight: normal;
  text-align: center;
  width: 100%;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.base-navbar__right,
.nav-bar__right,
.nav-bar-fix__right,
.nav-bar-intro__right,
.nav-bar-default__right {
  width: 4rem;
  position: relative;
}
.base-navbar__right__icon,
.nav-bar__right__icon,
.nav-bar-fix__right__icon,
.nav-bar-intro__right__icon,
.nav-bar-default__right__icon {
  position: absolute;
  font-size: 3.2rem;
  color: #a82e32;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.qc-close {
  color: #fff;
}
.base-navbar__right__icon._unread::after,
.nav-bar__right__icon._unread::after,
.nav-bar-fix__right__icon._unread::after,
.nav-bar-intro__right__icon._unread::after,
.nav-bar-default__right__icon._unread::after {
  content: "•";
  color: #0dc896;
  border-radius: 50%;
  position: absolute;
  right: 0.4rem;
  top: -0.4rem;
}

.nav-bar {
  position: fixed;
  top: -6.6rem;
  background: #fff;
  background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, #fff),
    color-stop(100%, #fff)
  );
  background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  background: -o-linear-gradient(top, #fff 0%, #fff 100%);
  background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff', GradientType=0 );
  transition: 0.3s ease-in-out;
}
.nav-bar--show {
  top: 0;
}

.nav-bar-fix {
  position: absolute;
  top: 0;
}
.nav-bar-fix__left__icon,
.nav-bar-fix__right__icon {
  background-color: rgba(71, 70, 69, 0.6);
  border-radius: 50%;
}

.nav-bar-default {
  position: absolute;
  top: 0;
}
.nav-bar-default__left__icon {
  color: #474645;
}

.nav-bar-intro {
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
}
.nav-bar-intro__left__icon {
  color: #474645;
}

.menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  z-index: 32;
  background-color: #a82e32;
  transition: 0.6s cubic-bezier(0.39, 0, 0, 0.9);
}
.menu-drawer._show {
  right: 0;
}
.menu-drawer__link {
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
  margin: 2.4rem 0;
  color: #fff;
}
.menu-drawer__link:first-child {
  margin-top: 3.2rem;
}

/* End Navbar */
/* Header */
.bg-header {
  position: absolute;
  background: #7b2b2c;
  background-image: url(../img/path.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  top: 0;
  height: 24rem;
  z-index: -1;
}
.bg-header--landing {
  height: 35rem;
}

.bg-header-pengajar {
  position: absolute;
  background: #a82e32;
  background-image: url(../img/path.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  top: 0;
  height: 20rem;
  z-index: -1;
}
.bg-header-pengajar--landing {
  height: 35rem;
}

.bg-class {
  position: absolute;
  background: #a82e32;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  top: 0;
  height: 30rem;
  z-index: -1;
}

header.header-landing {
  height: 31.6rem;
}
header .header-profile {
  margin: 2.4rem 0;
  color: #fff;
}
header .header-profile__text {
  padding-left: 1.6rem;
}
header .header-profile__text span:first-child {
  margin-bottom: 0.4rem;
}
header.header-intro img {
  width: 14.4rem;
  margin-top: 1.6rem;
}
header.header-class {
  margin-top: 11.6rem;
}

/* End Header */
/* Content */
.mhv,
.home {
  min-height: calc(100vh - 268px);
}

.mhv2 {
  min-height: calc(100vh - 162px);
}

.mhv3 {
  min-height: calc(100vh - 206px);
}

.profile-kad {
  position: relative;
  margin-top: calc(5.3rem + 2.4rem);
}
.profile-kad__avatar-wrapper {
  height: calc(5.3rem - 1.6rem);
  margin-bottom: 0.8rem;
}
.profile-kad__avatar {
  position: absolute;
  top: 0;
  transform: translate(0, -5.3rem);
}
.profile-kad__btn {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
}

.person-total {
  height: 6.6rem;
  position: relative;
}
.person-total > div {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.person-total__icon {
  margin-right: 0.8rem;
}
.person-total__icon i {
  font-size: 4rem;
  color: #a82e32;
}

.material {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.material a img {
  width: 85%;
  height: auto;
  object-fit: cover;
  margin-bottom: 0.8rem;
  border-radius: 0.5rem;
}
.material a:not(:last-child) img {
  margin-right: 1.2rem;
}

.class__linear-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(71, 70, 69, 0.8)
  );
}
.class__text {
  position: absolute;
  bottom: 0;
  padding: 1.6rem;
}
.class--regular {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.class--regular__kad {
  height: 30rem;
  width: 24rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.5rem;
  display: inline-block;
  position: relative;
}
.class--regular__kad:not(:last-child) {
  margin-right: 1.6rem;
}
@media (max-width: 575.98px) {
  .class--regular {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
  .class--regular__kad:first-child {
    margin-left: 1.6rem;
  }
  .class--regular__kad:last-child {
    margin-right: 1.6rem;
  }
}
.class--banner {
  height: 14rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  position: relative;
}
.class--premium {
  height: 41.2rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  position: relative;
}
.class--premium__badge {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.6rem;
  height: 4rem;
  width: 4rem;
  object-fit: cover;
  background-color: #ffb24d;
  border-radius: 50%;
  text-align: center;
}
.class--premium__badge i {
  font-size: 2.4rem;
  line-height: 4rem;
}

.video-media {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.video-media__kad {
  width: 30rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.5rem;
  display: inline-block;
  position: relative;
}
.video-media__kad:not(:last-child) {
  margin-right: 1.6rem;
}
@media (max-width: 575.98px) {
  .video-media {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
  .video-media__kad:first-child {
    margin-left: 1.6rem;
  }
  .video-media__kad:last-child {
    margin-right: 1.6rem;
  }
}

.rating i {
  color: #e8e8e8;
  font-size: 1.2rem;
}
.rating--large i {
  font-size: 1.6rem;
}
.rating--star-5 i {
  color: #ffb24d;
}
.rating--star-4 i:not(:last-child) {
  color: #ffb24d;
}
.rating--star-3 i:nth-last-child(1n + 3) {
  color: #ffb24d;
}
.rating--star-2 i:nth-last-child(1n + 4) {
  color: #ffb24d;
}
.rating--star-1 i:first-child {
  color: #ffb24d;
}

.notification-wrapper._unread {
  background-color: rgba(237, 107, 0, 0.05);
}
.notification-wrapper .notification__left {
  width: 5.4rem;
  position: relative;
}
.notification-wrapper .notification__left img {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.notification-wrapper .notification__img--primary {
  background-color: #a82e32;
  object-fit: contain;
  padding: 0.8rem;
}
.notification-wrapper .notification__img--secondary {
  background-color: #a82e32;
  object-fit: contain;
  padding: 0.8rem;
}

.info-list > div {
  margin-top: 0.4rem;
}
.info-list:not(:first-child) > span {
  margin-top: 1.6rem;
}
.info-list:not(:last-child) {
  border-bottom: 0.1rem solid #e8e8e8;
}
.info-list:not(:last-child) > div {
  margin-bottom: 1.6rem;
}
.info-list._solo {
  border-bottom: 0.1rem solid #e8e8e8;
}
.info-list._solo > div {
  margin-bottom: 1.6rem;
}

.link-select input[type="radio"] {
  display: none;
}
.link-select > label {
  position: relative;
  transition: 0.25s ease-in-out;
}
.link-select > label::after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Quran-Call-by-Ikono" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e90d";
  position: absolute;
  font-size: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  color: #fff;
  transition: 0.25s ease-in-out;
}
.link-select._selected > label {
  color: #a82e32;
}
.link-select._selected > label::after {
  font-size: 3.2rem;
  color: #a82e32;
}

.link-list {
  position: relative;
}
.link-list > a,
.link-list > label,
.link-list > div {
  display: block;
  padding: 1.6rem 0;
  color: #474645;
}
.link-list > a img,
.link-list > label img,
.link-list > div img {
  height: 4rem;
  margin: -0.4rem 0;
  margin-right: 1.6rem;
}
.link-list:not(:last-child) {
  border-bottom: 0.1rem solid #e8e8e8;
}
.link-list__icon-right {
  position: absolute;
  right: 0.8rem;
  font-size: 3.2rem;
  top: 50%;
  transform: translate(0, -50%);
  margin: 0;
}

.link-pengajar {
  position: relative;
}
.link-pengajar > a,
.link-pengajar > label,
.link-pengajar > div {
  display: block;
  padding: 1.6rem 0;
  color: #fff;
}
.link-pengajar > a img,
.link-pengajar > label img,
.link-pengajar > div img {
  height: 4rem;
  margin: -0.4rem 0;
  margin-right: 1.6rem;
}

.text-list {
  padding: 2.4rem 0;
}
.text-list > div:not(:last-child) {
  margin-bottom: 0.8rem;
}
.text-list > div > div:first-child {
  flex: 1;
}

.form-list {
  position: relative;
  border-bottom: 0.1rem solid #e8e8e8;
}
.form-list input,
.form-list textarea,
.form-list select {
  margin-top: 0.4rem;
  font-size: 1.6rem;
  padding: 0;
  outline: none;
  width: 100%;
  color: #474645;
  border: none;
  margin-bottom: 0.8rem;
}
.form-list textarea {
  resize: none;
}
.form-list select {
  background-color: #fff;
  height: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
}
.form-list select::-ms-expand {
  display: none;
}
.form-list:not(:first-child) > span {
  margin-top: 3.2rem;
}
.form-list__icon-right {
  position: absolute;
  right: 0.8rem;
  font-size: 3.2rem;
  top: calc(50% + 0.6rem);
  transform: translate(0, -50%);
  margin: 0;
}

.second-nav-block {
  height: 6.4rem;
}

.terms-tab-wrapper {
  background-color: #fff;
}
@media (max-width: 575.98px) {
  .terms-tab-wrapper .terms-tab {
    margin-left: -1.6rem !important;
    margin-right: -1.6rem !important;
  }
}
.terms-tab-wrapper .terms-tab .nav-item .nav-link {
  text-align: center;
  font-weight: bold;
  color: #999999;
  padding: 0;
  height: 6.4rem;
  line-height: 6.4rem;
  border-bottom: 0;
  transition: 0.2s ease-in-out;
}
.terms-tab-wrapper .terms-tab .nav-item .nav-link.active {
  color: #a82e32;
  border-bottom: 0.4rem solid #a82e32;
}

.terms-tab-pengajar {
  background-color: #4f525a;
}
@media (max-width: 575.98px) {
  .terms-tab-pengajar .terms-tab {
    margin-left: -1.6rem !important;
    margin-right: -1.6rem !important;
  }
}
.terms-tab-pengajar .terms-tab .nav-item .nav-link {
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 0;
  height: 6.4rem;
  line-height: 6.4rem;
  border-bottom: 0;
  transition: 0.2s ease-in-out;
}
.terms-tab-pengajar .terms-tab .nav-item .nav-link.active {
  color: #fea70a;
  border-bottom: 0.4rem solid #fea70a;
}

.tab-content-pengajar {
  color: #fff;
}

.collapse-header {
  position: relative;
  height: 4.6rem;
}
.collapse-header i,
.collapse-header span {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.collapse-header i {
  top: calc(50% - 0.2rem);
  right: 1.6rem;
  font-size: 2.4rem;
  transform: translate(0, -50%) rotate(0);
  transition: 0.3s ease-in-out;
}
.collapse-header span {
  left: 1.6rem;
  font-size: 1.4rem;
  font-weight: bold;
}
.collapse-header.collapsed i {
  transform: translate(0, -50%) rotate(180deg);
  top: calc(50% + 0.2rem);
}

.collapse-body .collapse-body__wrap {
  padding: 1.6rem;
  padding-top: 0;
}
.collapse-body .collapse-body__wrap .collapse-body__wrap__content {
  padding-top: 1.6rem;
  border-top: 0.1rem solid #e8e8e8;
}

.form-bottom-btn {
  position: relative;
  min-height: calc(100vh - 17.8rem);
  padding-bottom: 0.8rem;
}
.form-bottom-btn .bottom-btn-wrapper {
  position: absolute;
  margin-bottom: 2.4rem;
  bottom: calc(-4.8rem + -4rem);
  left: 50%;
  transform: translate(-50%, 0);
}

.book-print {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}
.book-print._show {
  max-height: 40.1rem;
}

.book-print-total {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0 !important;
  transition: 0.3s ease-in-out;
}
.book-print-total._show {
  max-height: 2.1rem;
  margin-bottom: 0.8rem !important;
}

.search-tab-wrapper {
  background-color: #fff;
  height: 6.4rem;
}

/* End Content */
/* Footer */
footer .footer-top {
  background-color: #474645;
  color: #fff;
  padding: 2.4rem 0;
}
footer .footer-top .footer-img-logo {
  width: 8rem;
}
footer .footer-top .footer-address {
  margin: 1.6rem 0;
}
footer .footer-top .footer-contact i {
  margin-top: -1.6rem;
  position: relative;
  top: 1rem;
}
footer .footer-top .social-btn {
  display: inline-block;
}
footer .footer-top .social-btn i {
  width: 3.2rem;
  height: 3.2rem;
  background-color: #fff;
  color: #474645;
  text-align: center;
  line-height: 3.2rem;
  font-size: 2rem;
  border-radius: 50%;
}
footer .footer-top .social-btn:not(:last-child) {
  margin-right: 1.6rem;
}
footer .footer-bottom {
  padding: 1.6rem 0;
  font-size: 1rem;
  color: #fff;
  background-color: #a82e32;
}
footer .footer-bottom a {
  color: #fff;
}
footer.footer-intro {
  position: relative;
  height: 16.2rem;
  background-image: url(../img/path.svg);
  background-repeat: no-repeat;
  background-position: center top;
}
footer.footer-intro--small {
  height: 10.8rem;
}
footer.footer-intro ._link {
  position: absolute;
  top: calc(50% + 4.8rem);
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
footer.footer-pengajar {
  position: relative;
  height: auto;
  padding-top: 40px;
  padding-bottom: 80px;
  background-image: none !important;
}
footer.footer-pengajar ._link {
  position: absolute;
  top: calc(60% + 0.8rem);
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

.footer-block {
  height: 6.4rem;
}

.footer-nav {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  z-index: 32;
  height: 60;
}
.footer-nav__push-container {
  padding: 0 2.4rem;
}
.footer-nav__link {
  text-align: center;
  padding: 0.8rem 0;
  display: block;
  color: #474645;
}
.footer-nav__link._active {
  color: #a82e32;
}
.footer-nav__link i {
  display: block;
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}
.footer-nav__link span {
  display: block;
  font-size: 1rem;
}

.footer-nav-pengajar {
  position: fixed;
  bottom: 0;
  background-color: #4f525a;
  width: 100%;
}
.footer-nav-pengajar__push-container {
  padding: 0 2.4rem;
}
.footer-nav-pengajar__link {
  text-align: center;
  padding: 0.8rem 0;
  display: block;
  color: #fff;
}
.footer-nav-pengajar__link._active {
  color: #f6841f;
}
.footer-nav-pengajar__link i {
  display: block;
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}
.footer-nav-pengajar__link span {
  display: block;
  font-size: 1rem;
}

/* End Footer */

/*# sourceMappingURL=main.min.css.map */

.campaign-title {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.campaign-main-img {
  display: flex;
}

.paragraf {
  text-indent: 10%;
}

/* FORM WIZZARD */
.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-order: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
  border: 0px;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  border: 0px;
  border-radius: 50%;
  border-style: none;
}

.noHover {
  pointer-events: none;
}

.btn-off {
  background-color: #ccc;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  border: 0px;
  border-radius: 50%;
  border-style: none;
}

#summernote {
  max-width: 100%;
}
.eWdvkBxm {
  visibility: hidden;
}
.eWdvkBxm.shown {
  visibility: visible;
}
.wrapOtherDonation {
  display: flex;
  flex-flow: column wrap;
}

.wrapOtherDonation > form > p:first-child {
  color: rgb(58, 58, 58);
  font-size: 14px;
  font-weight: 600;
  margin-top: 0px;
}

.ipNbpj {
  color: rgb(39, 39, 39);
  display: block;
  margin-block: 1em;
  margin-inline: 0px;
}

.ejcohp {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.bbjtEQ {
  position: absolute;
  display: block;
  font-weight: 700;
  line-height: 1;
  padding-left: 0.875rem;
  font-size: 1.5em;
  color: rgb(51, 51, 51);
}

.kjDVVh {
  width: 100%;
  --tw-text-opacity: 1;
  color: rgba(74, 74, 74, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(242, 243, 244, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(242, 243, 244, var(--tw-border-opacity));
  text-align: right;
  font-weight: 700;
  border-style: none;
  padding: 7.5px 15px 7.5px 1.9em;
  font-size: 2.5rem;
  font-family: inherit;
  border-radius: 5px;
  height: 52px;
}

.ebjSHw {
  text-align: left;
  font-size: 1rem;
  --tw-text-opacity: 1;
  color: rgba(152, 152, 152, var(--tw-text-opacity));
  line-height: 1.5rem;
  display: block;
  margin-block: 1em;
  margin-inline: 0px;
}
.error {
  color: red;
  font-size: 14px;
}
.jEBcVy {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.gWRIil {
  display: flex;
  margin: 1em 0em;
  line-height: 1.25em;
}

.list {
  border-bottom: 0.1rem solid #bfb9b954;
}

.jXwsPV {
  position: relative;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin: 0px 1.25rem 0px 0px;
  flex: 1 1 0%;
  z-index: 0;
}

.kpMTjO {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  object-fit: fill;
}

.cdsxXB {
  background-size: cover;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 0.375rem;
  background-image: url(<?=theme_asset()."img/LOGO YATIM HEBAT ABU.png"?>);
  background-color: rgb(243, 243, 243);
  max-width: 214px;
  max-height: 120px;
}

.cHbJUf {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.dqsjrt {
  font-weight: 600;
  font-size: 1.2rem;
  overflow: hidden;
  overflow-wrap: break-word;
  color: rgb(74, 74, 74);
  margin: 0.25em 0em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.HTnco {
  display: flex;
  width: 100%;
  vertical-align: middle;
  font-size: 1rem;
  -webkit-box-align: center;
  align-items: center;
  margin: 0.25em 0em;
}

.iUjNAO {
  margin: 0.25em 0em;
}

.cIbYhE {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: rgb(242, 233, 233);
  border-radius: 10px;
  box-shadow: rgb(0 0 0) 0px 0px inset;
}

.ctkZkl {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  background-color: rgb(13 200 149);
  border-radius: 2px;
}

.gXlqqS {
  width: 100%;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 0.25em 0em;
}

.ewtqvI {
  display: flex;
  flex-direction: column;
}

.ewtqvI span:nth-child(1) {
  font-weight: 400;
  font-size: 1rem;
}

.ewtqvI span:nth-child(2) {
  font-weight: 700;
  font-size: 1rem;
}

.ioWrdr {
  display: flex;
  flex-direction: column;
}

.ioWrdr span:nth-child(1) {
  font-weight: 400;
  font-size: 1rem;
}

.ioWrdr span:nth-child(2) {
  font-weight: 700;
  font-size: 1rem;
  text-align: right !important;
}
.gDGFhx {
  margin: 1em auto;
  width: 160px;
  text-align: center;
  background-color: rgb(234 129 38);
  padding: 5px;
  border-radius: 15px;
  color: rgb(253 252 252);
  font-size: 12px;
  position: relative;
  cursor: pointer;
}

.cwoaRr {
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  right: 15px;
}

.svg-inline--fa,
svg:not(:root).svg-inline--fa {
  overflow: visible;
}

svg:not(:root).svg-inline--fa {
  overflow: visible;
}

.svg-inline--fa.fa-w-8 {
  width: 0.5em;
}

.svg-inline--fa.fa-w-8 {
  width: 0.5em;
}

.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  vertical-align: -0.125em;
}