@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; }

.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: .25; }

.slick-prev:before,
.slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: .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: .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: .4s; }

.slider-switch-checkbox:before {
  background-color: #fff;
  bottom: 1px;
  content: "";
  height: 16px;
  left: 1px;
  position: absolute;
  transition: .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: -.5rem !important;
  margin-right: -.5rem !important; }
  .row--5 > * {
    padding-left: .5rem !important;
    padding-right: .5rem !important; }
.row--6 {
  margin-left: -.6rem !important;
  margin-right: -.6rem !important; }
  .row--6 > * {
    padding-left: .6rem !important;
    padding-right: .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: .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: .1rem solid;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: .2s ease-in-out; }
  .link-btn i {
    font-size: 2rem;
    position: relative;
    top: .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: .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: #a82e32;
  background-image: url(../img/path.svg);
  background-image: url(../img/path.svg), linear-gradient(to bottom, #a82e32, #a82e32);
  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--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: .5rem;
  width: 8rem;
  height: 10rem;
  object-fit: cover; }

.allthumb {
  border-radius: .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: 60px; }
  .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: #fff;
  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: #fff;
    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: #fff;
    right: 0;
    top: 50%;
    transform: translate(0, -50%); }
    .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: .4rem;
      top: -.4rem; }

.nav-bar {
  position: fixed;
  top: -6.6rem;
  background: #a82e32;
  background: -moz-linear-gradient(top, #a82e32 0%, #a82e32 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #a82e32), color-stop(100%, #a82e32));
  background: -webkit-linear-gradient(top, #a82e32 0%, #a82e32 100%);
  background: -o-linear-gradient(top, #a82e32 0%, #a82e32 100%);
  background: -ms-linear-gradient(top, #a82e32 0%, #a82e32 100%);
  background: linear-gradient(to bottom, #a82e32 0%, #a82e32 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a82e32', endColorstr='#a82e32', GradientType=0 );
  transition: .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: #a82e32;
  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: .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: .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: .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: .5rem;
  position: relative; }        
.class--premium {
  height: 41.2rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: .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: .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: .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: "\e90c";
    position: absolute;
    font-size: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    color: #fff;
    transition: .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: -.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: -.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% + .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: .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: .2s ease-in-out; }
    .terms-tab-pengajar .terms-tab .nav-item .nav-link.active {
      color: #a82e32;
      border-bottom: 0.4rem solid #a82e32; }

.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% - .2rem);
    right: 1.6rem;
    font-size: 2.4rem;
    transform: translate(0, -50%) rotate(0);
    transition: .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% + .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: .3s ease-in-out; }
  .book-print._show {
    max-height: 40.1rem; }

.book-print-total {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0 !important;
  transition: .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: .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: #a82e32; }
    .footer-nav-pengajar__link i {
      display: block;
      font-size: 2.8rem;
      margin-bottom: .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;
}