.label-category.online {
  background: #f37f5a;
  color: white;
}
.label-category.course {
  background: #009687;
  color: white;
}
.label-category.third {
  background: #55b6d6;
  color: white;
}
.background-box.online {
  background: #fdf2ee;
}
.background-box.course {
  background: #e5f3f3;
}
.background-box.third {
  background: #edf9f9;
}
.box-live {
  background: #e30514;
}
.box-live i {
  display: inline-block;
  background: white;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 5px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.speakers-list {
  margin-left: 0.8rem;
}
.speakers-list > span {
  width: 2rem;
  height: 2rem;
  border: 1px solid white;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  margin-left: -0.8rem;
}
.speakers-list > span img {
  display: block;
}

.event-learn-detail-buttons button span img {
  filter: invert(1);
}

/****************************************************
POPUP
****************************************************/
.popup-container {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 60;
}

.popup-container.open {
  opacity: 1;
  pointer-events: auto;
}
.popup-container.open .background-layer {
  opacity: 0.6;
  pointer-events: auto;
}
.popup {
  height: 90vh;
  left: 5vw;
  top: 5vh;
  width: 90vw;
}
.open .popup {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

/* CHECKBOX */
.checkbox-tag {
  position: relative;
}

.checkbox-tag .checkbox {
  width:100%;
  height: 100%;
}

.checkbox-tag .checkbox + .checkbox-tag-wrapper > label::before {
  display: inline-block;
  border: 1px solid;
  content: "";
  min-width: 22px;
  min-height: 22px;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background-color: transparent;
  cursor: pointer;
  transition: background 0.5s;
}

.checkbox-tag .checkbox + .checkbox-tag-wrapper > label::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 7px;
  margin-left: 7px;
  margin-top: 2px;
  height: 13px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s;
  cursor: pointer;
}

.checkbox-tag .checkbox.white + .checkbox-tag-wrapper > label::before {
  border-color: white;
}

.checkbox-tag .checkbox.text-black + .checkbox-tag-wrapper > label::before {
  border-color: #afb1b399;
}

.checkbox-tag .checkbox:checked + .checkbox-tag-wrapper {
  background-color: #1c1c1b;
  color: white !important;
}
.checkbox-tag .checkbox:checked + .checkbox-tag-wrapper label span {
  color: white !important;
}

.checkbox-tag .checkbox:checked + .checkbox-tag-wrapper > label::before {
  background-color: #1c1c1b;
  border-color: #1c1c1b;
}

.checkbox-tag .checkbox:checked + .checkbox-tag-wrapper > label::after {
  opacity: 1;
}

/****************************************************
SWIPER
****************************************************/

.list-swiper #videos-swiper .swiper-slide {
  padding-right: 8.333vw !important;
  width: calc(320px + 8.333vw) !important;
}

#videos-swiper {
  padding-left: 0 !important;
}

@media screen and (min-width: 768px) {
  .list-swiper #videos-swiper .swiper-slide {
    padding-right: 5rem !important;
    width: calc(400px + 5rem) !important;
  }
}