:root {
  --swiper-navigation-size: 28px;
}

.my-atuo {
  margin-top: auto;
  margin-bottom: auto;
}

.border-line {
  background-color: #EFCBA2;
  border-radius: 2px;
  height: 4px;
}

.border-line-activied {
  background: linear-gradient(145deg, #74ECD6 0%, #3AB4C3 57%, #578AEF 100%);
  border-radius: 2px;
  height: 4px;
}

.text-vertical {
  float: left;
  transform: rotate(90);
  transform-origin: left top 0;
}

.text-small {
  font-size: 0.3rem;
}

.text-actived {
  color: #3AB4C3;
}

#lang-container:hover #lang-list, #lang-container:hover .arrow-up {
  display: block;
}

#lang-container:hover .arrow-down {
  display: none;
}

.highlights-item {
  background-image: url(../images/highlights-item-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.highlights-item-icon {
    position: absolute;
    top: -30%;
}

.speakers-avatar-box {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background: linear-gradient(135deg,rgba(255,255,255,0.06) 0,rgba(255,255,255,0.3) 100%);
  border-radius: 6px;
  display: block;
  overflow: hidden;
  position: relative;
}

.speakers-avatar-box span {
  width: 100%;
  height: 0;
  overflow: hidden;
  display: inline-block;
  float: left;
  background: url(../images/avatar-bg.png) no-repeat center;
  background-size: cover;
  padding-bottom: 122%;
}

.speakers-avatar-box::after {
    content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%);
    position: absolute;
    left: 0;
    bottom: 0;
}

.speakers-info-box {
  margin-top: -48px;
}

.speakers-name {
  line-height: 48px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #37b458;
}

.speakers-name::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,#37b458 0,rgba(161,204,96,0) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
}

.header-bg {
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  background-color: rgba(255,255,255,0.1);
}

.common-bg {
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  
}

.filter-bg {
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  background-color: rgba(255,255,255,0.05);
}

.border-1 {
  border: 1px solid #ffffff33;
}

.border-b-1 {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.border-3 {
  border-width: 3px;
}

.btn-live {
  border: 3px solid rgba(255, 255, 255, 0.85);
  background-origin: padding-box;
  background:  linear-gradient(123deg,#0372f9 0,#a6d153 100%);
}

.btn-live:hover {
  border: 3px solid white;
}

.top-52 {
  top: 52px;
}

.footer {
  background-image: url(../images/footer-bg.jpg);
  background-size: 100% 100%;
}

.video-language-item:hover {
  border: 1px solid #38b458;
}

.video-language-item:hover p {
  color: #38b458;
}

.video-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}
.video-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.video-list::-webkit-scrollbar-thumb {
  background-color: transparent;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
}

.aspect-ratio-box, .aspect-ratio-box iframe {
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .aspect-ratio-box {
    max-width: 100%;
    padding-top: 56.25%;
    position: relative;
    width: 100%;
  }
  
  .aspect-ratio-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .video-box {
    width:100%;
  }
}

@media (min-width: 1536px) {
  .video-box {
    width:66.7%;
  }
}

@media (min-width: 2048px) {
  .video-box {
    width:64.7%;
  }
}