/* Project frontend overrides. Keep demo CSS intact and place new theme fixes here. */

:root {
  --frontend-navbar-background: rgba(38, 39, 44, .75);
  --frontend-navbar-color: #26272c;
  --frontend-navbar-opacity: 75;
  --frontend-button-gradient-start: #42d1d8;
  --frontend-button-gradient-end: #6a4ef8;
  --frontend-button-hover-background: #ffffff;
  --frontend-button-hover-text: #42d1d8;
  --frontend-accent-color: #42d1d8;
  --frontend-button-gradient: linear-gradient(180deg, var(--frontend-button-gradient-start) -1.75%, var(--frontend-button-gradient-end) 100.23%);
}

#main-menu .main-header {
  background: var(--frontend-navbar-background);
}

#main-menu .main-header .inner-container,
#main-menu .main-header .site-header {
  align-items: center;
  display: flex;
  height: 100%;
}

#main-menu .main-header .site-header {
  width: 100%;
}

#main-menu .main-header .logo {
  align-items: center;
  display: flex;
  height: 70px;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0;
  max-width: 200px;
  overflow: hidden;
  width: min(200px, 28vw);
}

#main-menu .main-header .logo img,
#main-menu .main-header .logo .frontend-text-logo {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

#banner-area .main-banner {
  overflow: hidden;
  position: relative;
}

#banner-area .anime-banner-info {
  border-radius: inherit;
  height: 100%;
}

#banner-area .anime-banner-info > img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.mobile-nav ul li a:hover,
.mobile-nav ul li.active a::after,
.anime-banner-info .anime-play-button a.play-button,
.anime-details a.watch-now,
.frontend-media-theme .btn-primary,
.frontend-user-upload-view-all .watch-now,
.frontend-login-modal-actions .watch-now,
.media-comment-form .watch-now,
.anime-pagination .page-item.disabled,
.anime-pagination .page-item:first-child,
.anime-pagination .page-item:last-child,
.anime-pagination .page-item .page-link.active,
.anime-pagination .page-item .page-link:hover,
.frontend-top-pagination .page-item.active .page-link,
.frontend-top-pagination .page-link:hover,
.frontend-top-pagination .page-link:focus {
  background: var(--frontend-button-gradient) !important;
}

.frontend-media-theme .btn-primary {
  border-color: var(--frontend-button-gradient-start);
}

.anime-play-button:hover a.play-button,
.anime-play-button:hover a.play-detail,
.frontend-media-theme .btn-primary:hover,
.frontend-media-theme .btn-primary:focus {
  background: var(--frontend-button-hover-background);
  border-color: var(--frontend-button-hover-background);
  color: var(--frontend-button-hover-text);
}

.anime-details a:hover,
.frontend-media-theme .btn-primary-soft,
.profile-inline-action,
.frontend-single-audio-art,
.frontend-login-modal-actions a,
.trending-title h6 a:hover {
  color: var(--frontend-accent-color);
}

.profile-cover-upload,
.profile-cover-position,
.profile-inline-action {
  border-color: color-mix(in srgb, var(--frontend-accent-color) 55%, transparent);
}

@media (max-width: 1199.98px) {
  #main-menu .main-header .inner-container,
  #main-menu .main-header .site-header {
    align-items: center;
  }

  #main-menu .main-header .logo {
    height: 100%;
    margin-bottom: 0;
    margin-top: 0;
    width: min(170px, 26vw);
  }
}

@media (max-width: 767.98px) {
  #main-menu .main-header .logo {
    height: 100%;
    margin: 0 0 0 12px;
    max-width: 135px;
    width: min(135px, 34vw);
  }

  #banner-area .main-banner {
    height: clamp(250px, 58vw, 340px);
  }

  #banner-area .banner-trending-text {
    max-width: calc(100% - 32px);
    width: calc(100% - 32px);
  }
}

@media (max-width: 420px) {
  #main-menu .main-header .logo {
    height: 100%;
    max-width: 100px;
    width: 28vw;
  }

  #banner-area .main-banner {
    height: 250px;
  }
}

#user-banner .user-profile-banner > img {
  height: 360px;
  object-fit: cover;
  object-position: 50% 50%;
}

.profile-cover-upload {
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 2;
  background: rgba(14, 14, 14, .75);
  border: 1px solid rgba(66, 209, 216, .55);
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 16px;
}

.profile-cover-position {
  position: absolute;
  left: 25px;
  bottom: 25px;
  z-index: 2;
  width: min(320px, calc(100% - 50px));
  background: rgba(14, 14, 14, .75);
  border: 1px solid rgba(66, 209, 216, .45);
  border-radius: 18px;
  padding: 8px 14px;
}

.profile-cover-position span {
  color: #fff;
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.profile-cover-position input {
  width: 100%;
}

.profile-inline-action {
  background: transparent;
  border: 1px solid rgba(66, 209, 216, .55);
  border-radius: 18px;
  color: #42d1d8;
  display: inline-block;
  padding: 7px 14px;
}

.profile-form-actions {
  border-top: 1px dashed #555;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
}

.card-img-upload {
  cursor: pointer;
}

.breakpoint-on .classy-navbar .classy-menu {
  right: -310px;
  width: 300px;
  max-width: 85vw;
}

.breakpoint-on .classy-navbar .classy-menu.menu-on {
  right: 0;
}

.breakpoint-on .classy-navbar-toggler {
  display: block;
  position: relative;
  z-index: 1101;
}

.breakpoint-on .classy-nav-container .classy-navbar {
  justify-content: flex-end;
  padding: 0 16px;
}

.breakpoint-on .classynav {
  margin-left: 0;
  padding: 70px 20px 20px;
}

.media-favorite-form {
  margin: 0;
}

.media-favorite-submit {
  background: transparent;
  border: 0;
  cursor: pointer;
}

.media-favorite-submit:hover,
.media-favorite-submit:focus,
.media-favorite-submit.is-favorited {
  color: #e60023 !important;
}

.media-favorite-submit.is-loading {
  opacity: .65;
  pointer-events: none;
}

.media-card--download .item-inner::after {
  content: "\f019";
  font-size: 45px;
}

.media-card--download .anime-details a.watch-now i {
  font-size: 16px;
  margin-right: 4px;
}

.frontend-listing-subheading {
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 760px;
}

.media-card--gradient .item-inner {
  aspect-ratio: 370 / 556;
  background:
    radial-gradient(circle at 25% 20%, rgba(66, 209, 216, .35), transparent 32%),
    radial-gradient(circle at 78% 72%, rgba(230, 0, 35, .32), transparent 34%),
    linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%);
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.media-card--audio .media-gradient-art {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(255, 255, 255, .12), transparent 34%),
    var(--media-audio-gradient, linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%));
}

.frontend-media-card-art-link {
  display: block;
  inset: 0;
  position: absolute;
  z-index: 4;
}

.media-gradient-art::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .10) 0,
    rgba(255, 255, 255, .10) 2px,
    transparent 2px,
    transparent 18px
  );
  content: "";
  inset: 0;
  opacity: .38;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.media-gradient-art__mark {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: rgba(255, 255, 255, .82);
  display: flex;
  font-size: 42px;
  height: 92px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  pointer-events: none;
  z-index: 1;
}

.media-card-play-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 45px;
  height: 52px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.88);
  transition: all .3s ease;
  width: 52px;
  z-index: 5;
}

.media-card--audio .media-card-play-toggle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.media-card-play-toggle i,
.media-card-play-toggle svg {
  display: block;
  flex: 0 0 auto;
  height: 1em;
  line-height: 1;
  width: 1em;
}

.media-card--audio .item-inner:hover .media-card-play-toggle,
.media-card--audio .item-inner.is-playing .media-card-play-toggle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.media-card--audio .item-inner::after,
.media-card--audio .item-inner:hover::after,
.media-card--audio .anime-details:hover .item-inner::after {
  content: none;
  opacity: 0;
}

.media-card--audio .item-inner:hover .media-gradient-art__mark,
.media-card--audio .item-inner.is-playing .media-gradient-art__mark {
  opacity: 1;
}

.media-card--audio .media-gradient-art__mark i {
  display: none;
}

.media-card--video .media-gradient-art__mark {
  font-size: 38px;
}

.media-card--video .item-inner::after,
.media-card--video .item-inner:hover::after,
.media-card--video .anime-details:hover .item-inner::after {
  content: none;
  opacity: 0;
}

.media-card-video-still,
.media-card-video-preview {
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  transition: opacity .22s ease;
  width: 100%;
  z-index: 2;
}

.media-card-video-preview {
  opacity: 0;
}

.media-card-video-still {
  opacity: 1;
}

.item-inner.is-video-previewing .media-card-video-preview {
  opacity: 1;
}

.item-inner.is-video-previewing .media-card-video-still {
  opacity: 1;
}

.media-card--video .media-card-video-still + .media-gradient-art__mark {
  opacity: 0;
}

.media-video-hover-mark {
  color: #fff;
  font-size: 45px;
  left: 50%;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .22s ease;
  z-index: 3;
}

.media-card--video .item-inner:hover .media-video-hover-mark,
.media-card--video .item-inner.is-video-previewing .media-video-hover-mark {
  opacity: .92;
}

.frontend-upload-shell {
  background: rgba(20, 20, 26, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 18px;
}

.frontend-upload-tabs {
  border-color: rgba(255, 255, 255, .08);
  gap: 8px;
  margin-bottom: 22px;
}

.frontend-upload-tabs .nav-link {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px 8px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.frontend-upload-tabs .nav-link i {
  margin-right: 6px;
}

.frontend-upload-tabs .nav-link.active,
.frontend-upload-tabs .nav-link:hover,
.frontend-upload-tabs .nav-link:focus {
  background: rgba(66, 209, 216, .12);
  border-color: rgba(66, 209, 216, .55);
  color: #fff;
}

.frontend-upload-panel {
  display: none;
}

.frontend-upload-panel.is-active {
  display: block;
}

.frontend-upload-label {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.frontend-upload-form .form-control {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: #fff;
}

.frontend-upload-form .form-control:focus {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(66, 209, 216, .75);
  box-shadow: none;
  color: #fff;
}

.frontend-upload-form option {
  color: #111;
}

.frontend-upload-drop {
  align-items: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(66, 209, 216, .22), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px dashed rgba(66, 209, 216, .55);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  gap: 14px;
  min-height: 116px;
  padding: 22px;
}

.frontend-upload-drop input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.frontend-upload-drop span {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
  display: flex;
  flex: 0 0 58px;
  font-size: 24px;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.frontend-upload-drop strong {
  color: #fff;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.frontend-upload-submit {
  align-items: center;
  background: linear-gradient(180deg, #42D1D8 -1.75%, #6A4EF8 100.23%);
  border: 0;
  border-radius: 20px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
  min-height: 48px;
  padding: 12px;
  text-align: center;
  transition: all linear .3s;
  width: 180px;
}

.frontend-upload-submit:hover,
.frontend-upload-submit:focus {
  color: #fff;
  opacity: .9;
}

.frontend-user-upload-sidebar .heading-section {
  margin-bottom: 15px;
}

.frontend-user-upload-sidebar .top-animes {
  padding-top: 0;
}

.frontend-sidebar-audio-thumb {
  align-items: center;
  aspect-ratio: 48 / 60;
  background:
    radial-gradient(circle at 25% 20%, rgba(66, 209, 216, .35), transparent 32%),
    radial-gradient(circle at 78% 72%, rgba(106, 78, 248, .35), transparent 34%),
    linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  display: flex;
  height: 60px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 48px;
}

.frontend-sidebar-audio-thumb::after {
  content: none;
}

.frontend-mini-thumb-link {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.frontend-sidebar-audio-thumb .media-card-play-toggle {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 45px;
  height: 52px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  width: 52px;
}

.frontend-sidebar-audio-thumb.is-playing .media-card-play-toggle {
  transform: translate(-50%, -50%) scale(1);
}

.frontend-sidebar-audio-thumb .media-card-play-toggle:hover,
.frontend-sidebar-audio-thumb .media-card-play-toggle:focus {
  background: transparent;
  color: #fff;
}

.top-animes .all-time-content.topnumber1 .frontend-top-audio-cover {
  align-items: center;
  background:
    radial-gradient(circle at 24% 18%, rgba(66, 209, 216, .35), transparent 33%),
    radial-gradient(circle at 78% 72%, rgba(106, 78, 248, .35), transparent 34%),
    linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.top-animes .all-time-content.topnumber1 .frontend-top-audio-cover .media-card-play-toggle {
  border-radius: 4px;
  font-size: 45px;
  height: 52px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  width: 52px;
}

.top-animes .all-time-content.topnumber1 .frontend-top-audio-cover .media-card-play-toggle:hover,
.top-animes .all-time-content.topnumber1 .frontend-top-audio-cover .media-card-play-toggle:focus {
  background: rgba(0, 0, 0, .34);
  border-color: rgba(255, 255, 255, .78);
  color: #fff;
}

.frontend-user-upload-item .all-time-details .tv {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frontend-user-upload-view-all {
  margin-top: 18px;
}

.frontend-user-upload-view-all .watch-now {
  background: linear-gradient(180deg, #42D1D8 -1.75%, #6A4EF8 100.23%);
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 10px 18px;
  text-align: center;
}

.frontend-account-media-grid {
  display: grid;
  gap: 22px 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  justify-content: flex-start;
  margin-bottom: 22px;
}

.frontend-account-media-grid .item {
  display: block;
  margin-bottom: 18px;
  padding: 0;
  width: 100%;
}

.frontend-account-media-grid .item .item-inner {
  aspect-ratio: 370 / 556;
  overflow: hidden;
}

.frontend-account-media-grid .item .item-inner img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.frontend-account-media-grid .anime-details {
  left: 0;
  max-width: 100%;
  width: min(246px, calc(100vw - 40px));
}

.frontend-account-top-airing {
  margin-top: 18px;
}

.frontend-account-top-airing .frontend-account-top-item {
  align-items: center;
  display: flex;
  margin-bottom: 18px;
}

.frontend-account-top-airing .frontend-account-top-thumb {
  border-radius: 4px;
  flex: 0 0 48px;
  height: 60px;
  overflow: hidden;
  position: relative;
  width: 48px;
}

.frontend-account-top-airing .frontend-account-top-thumb a,
.frontend-account-top-airing .frontend-account-top-thumb img,
.frontend-account-top-airing .frontend-account-top-thumb video,
.frontend-account-top-airing .frontend-sidebar-audio-thumb {
  display: block;
  height: 100%;
  width: 100%;
}

.frontend-account-top-airing .frontend-account-top-thumb img,
.frontend-account-top-airing .frontend-account-top-thumb video {
  object-fit: cover;
}

.frontend-account-top-airing .frontend-sidebar-audio-thumb {
  min-height: 0;
}

.frontend-account-top-airing .media-card-play-toggle {
  opacity: 1;
}

.frontend-account-top-airing .all-time-details {
  min-width: 0;
  padding-left: 0;
}

.frontend-account-top-airing .all-time-details > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frontend-account-top-airing .all-time-details .tv {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frontend-account-top-airing + .frontend-pagination,
.frontend-account-top-airing + nav {
  margin-top: 18px;
}

@media (max-width: 575.98px) {
  .frontend-account-top-airing .frontend-account-top-item {
    margin-bottom: 14px;
  }

  .frontend-account-top-airing .frontend-account-top-thumb {
    flex-basis: 48px;
    height: 60px;
    width: 48px;
  }
}

@media (min-width: 1200px) {
  .frontend-account-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .frontend-account-media-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .frontend-account-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.frontend-search-media-grid {
  display: grid;
  gap: 18px 10px;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  margin: 0 0 28px;
}

.frontend-search-media-grid .item {
  display: block;
  padding: 0;
  width: 100%;
}

.frontend-search-media-grid .item .item-inner {
  aspect-ratio: 370 / 556;
  overflow: hidden;
}

.frontend-search-media-grid .item .item-inner img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.frontend-trending-thumb {
  aspect-ratio: 370 / 556;
  margin-left: 32px;
  overflow: hidden;
  position: relative;
  width: calc(100% - 32px);
}

.all-time-img .frontend-sidebar-audio-thumb,
.all-time-img .frontend-mini-video-still,
.all-time-img .top-audio-mark {
  height: 70px;
  width: 70px;
}

.all-time-img .frontend-mini-video-still {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
}

.all-time-img .top-audio-mark {
  align-items: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(66, 209, 216, .28), transparent 32%),
    linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  color: #fff;
  display: flex;
  justify-content: center;
}

.trending-single-item .frontend-trending-thumb .frontend-sidebar-audio-thumb,
.frontend-trending-thumb .frontend-sidebar-audio-thumb,
.frontend-trending-thumb .frontend-mini-video-still,
.trending-single-item .frontend-trending-thumb .frontend-mini-video-still {
  height: 100%;
  width: 100%;
}

.trending-single-item .frontend-trending-thumb img {
  height: 100%;
  object-fit: cover;
  padding: 0;
  width: 100%;
}

.trending-single-item .frontend-trending-thumb .frontend-sidebar-audio-thumb {
  aspect-ratio: auto;
  border-radius: 0;
}

.trending-single-item .frontend-trending-thumb .media-card-play-toggle {
  font-size: 45px;
  height: 52px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  width: 52px;
}

.trending-title h6 a {
  color: inherit;
  display: inline-block;
  text-decoration: none;
}

.trending-title h6 a:hover,
.trending-title h6 a:focus {
  color: #fff;
}

.frontend-mini-video-still {
  border-radius: 4px;
  object-fit: cover;
  position: static;
}

.trending-single-item .frontend-trending-thumb .frontend-mini-video-still {
  border-radius: 0;
}

.all-time-img {
  position: relative;
}

.anime-details .sub-dub .tv {
  font-size: 11px;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frontend-media-show-meta {
  gap: 6px;
  margin: 0 0 16px;
}

.media-rating-form {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 0;
  padding-top: 18px;
}

.media-rating-summary {
  color: #fff;
  display: flex;
  flex-direction: column;
  min-width: 88px;
}

.media-rating-summary > span {
  color: #ffd166;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.media-rating-summary small {
  color: #aaa;
  font-size: 12px;
}

.media-rating-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.media-rating-stars button {
  background: transparent;
  border: 0;
  color: #5f5f68;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px;
}

.media-rating-stars button:hover,
.media-rating-stars button:focus,
.media-rating-stars button.is-active {
  color: #ffd166;
}

.media-rating-stars.is-loading {
  opacity: .65;
  pointer-events: none;
}

.frontend-login-modal .modal-dialog {
  max-width: 430px;
}

.frontend-login-modal .modal-content {
  background: #1f1f24;
  border: 1px solid rgba(66, 209, 216, .28);
  border-radius: 8px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .65);
  color: #fff;
  overflow: hidden;
}

.frontend-login-modal .modal-content::before {
  background: linear-gradient(90deg, #42d1d8, #e82146);
  content: "";
  display: block;
  height: 3px;
  width: 100%;
}

.frontend-login-modal .modal-body {
  padding: 32px 30px 30px;
  text-align: center;
}

.frontend-login-modal-close {
  align-items: center;
  background: rgba(255, 255, 255, .07);
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  z-index: 2;
}

.frontend-login-modal-close:hover,
.frontend-login-modal-close:focus {
  background: #e82146;
}

.frontend-login-modal-icon {
  align-items: center;
  background: rgba(66, 209, 216, .12);
  border: 1px solid rgba(66, 209, 216, .35);
  border-radius: 50%;
  color: #42d1d8;
  display: inline-flex;
  font-size: 22px;
  height: 58px;
  justify-content: center;
  margin-bottom: 18px;
  width: 58px;
}

.frontend-login-modal h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.frontend-login-modal p {
  color: #b7b7bd;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 330px;
}

.frontend-login-modal-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.frontend-login-modal-actions .watch-now {
  border: 0;
  margin: 0;
}

.frontend-login-modal-secondary {
  color: #42d1d8;
  font-size: 14px;
  font-weight: 700;
}

.frontend-login-modal-secondary:hover,
.frontend-login-modal-secondary:focus {
  color: #e82146;
}

.frontend-user-menu {
  position: relative;
  padding-right: 12px;
}

.frontend-user-toggle {
  align-items: center;
  border: 0;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 42px;
}

.frontend-user-toggle::after {
  border-top-color: rgba(255, 255, 255, .78);
  left: calc(100% + 6px);
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.frontend-user-toggle img {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  height: 34px;
  object-fit: cover;
  width: 34px;
}

.frontend-user-dropdown {
  background: #1f1f24;
  border: 1px solid rgba(66, 209, 216, .28);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
  min-width: 220px;
  overflow: hidden;
  padding: 0;
}

.frontend-user-dropdown__head {
  align-items: center;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  gap: 10px;
  padding: 13px 14px;
}

.frontend-user-dropdown__head img {
  border: 2px solid rgba(66, 209, 216, .7);
  border-radius: 50%;
  height: 42px;
  object-fit: cover;
  width: 42px;
}

.frontend-user-dropdown__head span {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.frontend-user-dropdown .dropdown-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: #d5d5dc;
  display: flex;
  gap: 10px;
  font-size: 14px;
  padding: 11px 14px;
  text-align: left;
  width: 100%;
}

.frontend-user-dropdown .dropdown-item i {
  color: #42d1d8;
  font-size: 14px;
  width: 18px;
}

.frontend-user-dropdown .dropdown-item:hover,
.frontend-user-dropdown .dropdown-item:focus {
  background: rgba(232, 33, 70, .12);
  color: #fff;
}

.frontend-user-dropdown .dropdown-item:hover i,
.frontend-user-dropdown .dropdown-item:focus i {
  color: #e82146;
}

#single-series-banner .series-banner {
  height: clamp(220px, 21.0526vw, 400px);
  overflow: hidden;
}

#single-series-banner .series-banner img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

#single-series-banner + .frontend-show-content {
  padding-top: 42px;
}

.frontend-media-single {
  padding: 0 0 50px;
}

.frontend-single-media-img img,
.frontend-single-audio-art,
.frontend-single-video-art,
.frontend-single-video-player {
  border-radius: 8px;
  display: block;
  height: 360px;
  object-fit: cover;
  object-position: center;
  width: 253px;
}

.frontend-single-video-art {
  background:
    radial-gradient(circle at 20% 18%, rgba(66, 209, 216, .20), transparent 34%),
    linear-gradient(135deg, #101015 0%, #1c1c25 54%, #08080b 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
  overflow: hidden;
  position: relative;
}

.frontend-single-video-player {
  background: #0f0f13;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.frontend-single-audio-art {
  align-items: center;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(255, 255, 255, .12), transparent 34%),
    var(--media-audio-gradient, linear-gradient(135deg, #18181f 0%, #28283a 52%, #101015 100%));
  border: 1px solid rgba(66, 209, 216, .22);
  color: #42d1d8;
  display: flex;
  font-size: 54px;
  justify-content: center;
  position: relative;
}

.frontend-single-audio-art::before {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  content: "";
  height: 92px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
}

.frontend-single-audio-art .media-card-play-toggle,
.frontend-single-video-art .media-card-play-toggle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.frontend-single-video-toggle {
  background: rgba(0, 0, 0, .18);
  border-radius: 50%;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.frontend-single-video-art.is-playing .frontend-single-video-toggle {
  opacity: .18;
}

.frontend-single-video-art:hover .frontend-single-video-toggle,
.frontend-single-video-art:focus-within .frontend-single-video-toggle,
.frontend-single-video-art:not(.is-playing) .frontend-single-video-toggle {
  opacity: 1;
}

.anime-watch-buttons button.watch,
.anime-watch-buttons .frontend-single-favorite {
  border: 0;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 18px;
}

.anime-watch-buttons button.watch {
  background: #42d1d8;
  border-radius: 30px;
  color: #0e0e0e;
}

.anime-watch-buttons .frontend-single-favorite {
  background: #888;
  border-radius: 30px;
  color: #fff;
  margin-left: 5px;
}

.anime-watch-buttons .frontend-single-favorite:hover,
.anime-watch-buttons .frontend-single-favorite:focus,
.anime-watch-buttons .frontend-single-favorite.is-favorited {
  background: #e82146;
  color: #fff;
}

.frontend-single-rating {
  margin-top: 18px;
}

.frontend-single-tabs .overall-description-tab .tab-content {
  padding: 19px;
}

.frontend-single-comments {
  margin-top: 0;
}

.frontend-single-top-media .content-right {
  max-width: 520px;
}

.frontend-single-top-media .content-right .heading-section {
  margin-bottom: 18px;
}

@media (max-width: 575.98px) {
  .frontend-single-media-img img,
  .frontend-single-audio-art,
  .frontend-single-video-art,
  .frontend-single-video-player {
    aspect-ratio: 253 / 360;
    height: auto;
    max-height: 360px;
    width: 100%;
  }
}

.media-comments-section {
  margin-top: 34px;
}

.media-comments-section.frontend-single-comments {
  margin-top: 0;
}

.media-comments-empty,
.media-comment,
.media-comment-form-wrap {
  background: #1f1f24;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

.media-comments-empty {
  color: #b7b7bd;
  padding: 22px;
}

.media-comments-list {
  display: grid;
  gap: 14px;
}

.media-comment,
.media-comment-form-wrap {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.media-comment-avatar {
  border: 1px solid rgba(66, 209, 216, .35);
  border-radius: 8px;
  flex: 0 0 auto;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.media-comment-body,
.media-comment-form {
  min-width: 0;
  width: 100%;
}

.media-comment-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.media-comment h5,
.media-comment-form h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.media-comment span {
  color: #8d8d96;
  display: block;
  font-size: 12px;
}

.media-comment p {
  color: #d5d5dc;
  font-size: 14px;
  line-height: 1.7;
  margin: 12px 0 0;
}

.media-comment-report {
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 0;
  border-radius: 50%;
  color: #b7b7bd;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.media-comment-report:hover,
.media-comment-report:focus {
  background: rgba(232, 33, 70, .15);
  color: #e82146;
}

.media-comment-form-wrap {
  margin-top: 18px;
}

.media-comment-form .row {
  row-gap: 12px;
}

.media-comment-form input,
.media-comment-form textarea {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  color: #fff;
  margin-bottom: 12px;
  padding: 12px 14px;
  width: 100%;
}

.media-comment-form textarea {
  min-height: 124px;
  resize: vertical;
}

.media-comment-form input:focus,
.media-comment-form textarea:focus {
  border-color: rgba(66, 209, 216, .55);
  box-shadow: 0 0 0 3px rgba(66, 209, 216, .12);
  outline: 0;
}

.media-comment-form .watch-now {
  border: 0;
  margin-top: 0;
}

.media-comment-form .frontend-comment-submit {
  align-items: center;
  background: #42d1d8;
  border: 0;
  border-radius: 30px;
  color: #0e0e0e;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.2;
  margin-top: 0;
  padding: 10px 18px;
}

.media-comment-form .frontend-comment-submit:hover,
.media-comment-form .frontend-comment-submit:focus {
  background: #fff;
  color: #e82146;
}

.frontend-top-posts-page .item-container {
  align-items: flex-start;
}

.frontend-all-posts-page .item-container {
  align-items: flex-start;
}

.frontend-category-section {
  margin-top: 26px;
}

.frontend-category-section-heading {
  margin-bottom: 16px;
}

.frontend-category-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(221px, 1fr));
}

.frontend-category-card {
  aspect-ratio: 221 / 127;
  border-radius: 6px;
  overflow: hidden;
}

.frontend-category-card a,
.frontend-category-card img {
  display: block;
  height: 100%;
  width: 100%;
}

.frontend-category-card img {
  object-fit: cover;
}

.frontend-top-pagination {
  margin-top: 28px;
}

.frontend-top-pagination .pagination {
  gap: 8px;
}

.frontend-top-pagination .page-link {
  background: #2f2f33;
  border: 0;
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  min-width: 38px;
  padding: 8px 13px;
  text-align: center;
}

.frontend-top-pagination .page-item.active .page-link,
.frontend-top-pagination .page-link:hover,
.frontend-top-pagination .page-link:focus {
  background: linear-gradient(180deg, #42D1D8 -1.75%, #6A4EF8 100.23%);
  color: #fff;
}

.frontend-top-pagination .page-item.disabled .page-link {
  opacity: .45;
  pointer-events: none;
}

.footer-content-column.footer-idol {
  position: static;
}

.footer-idol-image {
  bottom: auto;
  left: auto;
  max-width: min(28vw, 340px);
  position: absolute;
  right: 0;
  top: 0;
  width: 308px;
}

.footer-idol-image img {
  object-fit: contain;
  width: 100%;
}

.frontend-footer-app {
  max-width: 245px;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
  z-index: 2;
}

.frontend-footer-app p {
  color: #b9bbbe;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.frontend-footer-app-buttons {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.frontend-footer-app-buttons a {
  display: inline-flex;
  max-width: 178px;
}

.frontend-footer-app-buttons img {
  display: block;
  max-height: 52px;
  object-fit: contain;
  width: 100%;
}

.frontend-footer-app-buttons span {
  align-items: center;
  background: #6a4ef8;
  border: 2px solid #6a4ef8;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-width: 158px;
  padding: 9px 14px;
  transition: all linear .3s;
}

.frontend-footer-app-buttons a:hover span,
.frontend-footer-app-buttons a:focus span {
  background: #42d1d8;
  border-color: #42d1d8;
}

.footer-social-link {
  align-items: center;
  display: flex;
  font-size: 22px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-align: center;
  width: 38px;
}

.footer-social-link i,
.footer-social-link svg {
  display: block;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .frontend-footer-app {
    margin-top: 24px;
    position: relative;
    text-align: left;
  }

  .frontend-footer-app-buttons {
    align-items: flex-start;
  }

  .footer-idol-image {
    max-width: 260px;
    width: 70vw;
  }
}

#Coming-Out.frontend-auth-coming-out {
  height: auto;
  min-height: 603px;
  margin-top: 88px;
  padding: 76px 0 70px;
}

#Coming-Out.frontend-auth-coming-out::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .86) 42%, rgba(0, 0, 0, .08) 100%);
}

.frontend-auth-coming-out .Coming-Out-info {
  max-width: 720px;
  padding-left: 65px;
}

#Coming-Out .frontend-auth-panel h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  margin-bottom: 12px;
}

#Coming-Out .frontend-auth-panel h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 22px;
}

#Coming-Out .frontend-auth-panel h6 {
  color: #42d1d8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-align: left;
  text-transform: uppercase;
}

.frontend-auth-form {
  max-width: 520px;
}

.frontend-auth-form label,
.frontend-auth-label-row label,
.frontend-auth-form .captcha-field span {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 7px;
}

.frontend-auth-label-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.frontend-auth-label-row a,
.frontend-auth-actions a,
.frontend-auth-links a,
.frontend-auth-social a {
  color: #42d1d8;
  font-size: 13px;
  font-weight: 700;
}

.frontend-auth-form input {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  height: 44px;
  margin-bottom: 14px;
  padding: 0 14px;
  width: 100%;
}

.frontend-auth-form input:focus {
  border-color: rgba(66, 209, 216, .75);
  box-shadow: 0 0 0 3px rgba(66, 209, 216, .15);
  outline: 0;
}

.frontend-auth-form input[readonly] {
  opacity: .7;
}

.frontend-auth-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.frontend-auth-actions button,
.frontend-auth-inline-form button {
  align-items: center;
  background: #42d1d8;
  border: 0;
  border-radius: 30px;
  color: #0e0e0e;
  display: inline-flex;
  font-size: 16px;
  font-weight: 800;
  gap: 8px;
  line-height: 1.2;
  padding: 11px 20px;
}

.frontend-auth-actions button:hover,
.frontend-auth-actions button:focus,
.frontend-auth-inline-form button:hover,
.frontend-auth-inline-form button:focus {
  background: #fff;
  color: #e82146;
}

.frontend-auth-actions span {
  color: #b9bbbe;
  font-size: 13px;
}

.frontend-auth-social,
.frontend-auth-links,
.frontend-auth-inline-form {
  margin-top: 22px;
}

#Coming-Out .frontend-auth-social p {
  margin-bottom: 8px;
}

.frontend-auth-social a {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.frontend-auth-alert {
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 16px;
  max-width: 520px;
  padding: 12px 14px;
}

.frontend-auth-alert--error {
  background: rgba(232, 33, 70, .2);
  border: 1px solid rgba(232, 33, 70, .42);
}

.frontend-auth-alert--success {
  background: rgba(66, 209, 216, .16);
  border: 1px solid rgba(66, 209, 216, .38);
}

.frontend-auth-form .captcha-widget {
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  margin-top: 8px;
  padding: 12px;
}

.frontend-auth-form .captcha-widget__header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.frontend-auth-form .captcha-widget__title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

#Coming-Out .frontend-auth-form .captcha-widget__hint {
  margin-bottom: 8px;
}

.frontend-auth-form .captcha-refresh-button {
  background: #2f2f33;
  border: 0;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.frontend-auth-form .captcha-visual-shell {
  margin: 8px 0 10px;
}

.frontend-auth-form .captcha-visual-shell img {
  border-radius: 6px;
  max-width: 100%;
}

.frontend-auth-coming-out .coming-out-img img {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767.98px) {
  #Coming-Out.frontend-auth-coming-out {
    min-height: 0;
    padding: 62px 16px 54px;
  }

  .frontend-auth-coming-out .Coming-Out-info {
    padding-left: 0;
  }

  .frontend-auth-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .media-comment,
  .media-comment-form-wrap {
    padding: 14px;
  }

  .media-comment-avatar {
    height: 42px;
    width: 42px;
  }
}