:root {
    --color-primary: #fe2c55;
}
img:not([src]),
img[src=""] {
    background-color: #161822;
}

.main-bg {
    background: no-repeat url(/static/frontend/images/desktop/left_background.png) #161823;
}

.menu-container li .icon {
    height: 24px;
    width: 24px;
    opacity: 0.5;
    background-image: url(/static/frontend/images/desktop/nav_dark.png);
}

.menu-container li span {
    opacity: 0.5;
}

.menu-container li.active span,
.menu-container li.active .icon,
.menu-container li:hover span,
.menu-container li:hover .icon {
    opacity: 1;
}

.video-container a {
    transition: 0.2s all;
}

.video-container a img {
    background-color: #161822;
}

.video-container a:hover {
    position: relative;
    z-index: 99;
}

.video-container a p {
    transition: 0.5s all;
}

.video-container a:hover p {
    color: white;
}

.menu-container li.active {
    border-radius: 0.5rem;
    background-color: rgba(242, 242, 243, 0.08);
}

.menu-container li .icon.home {
    background-position: 0px 0px;
    background-size: 864px;
}

.menu-container li .icon.video {
    background-position: -192px 0px;
    background-size: 864px;
}

.menu-container li .icon.chigua {
    background-position: -288px 0px;
    background-size: 864px;
}

.menu-container li .icon.my {
    background-position: -720px 0px;
    background-size: 864px;
}

.menu-container li .icon.welfare {
    background-position: -48px 0px;
    background-size: 864px;
}

.menu-container li.active .icon.home {
    background-position: -24px 0px;
    background-size: 864px;
}

.menu-container li.active .icon.video {
    background-position: -216px 0px;
    background-size: 864px;
}

.menu-container li.active .icon.chigua {
    background-position: -312px 0px;
    background-size: 864px;
}

.menu-container li.active .icon.my {
    background-position: -744px 0px;
    background-size: 864px;
}

.menu-container li.active .icon.welfare {
    background-position: -72px 0px;
    background-size: 864px;
}

.tabs-container li.active a {
    color: white;
    position: relative;
}

.tabs-container li:hover a {
    color: white;
}

.tabs-container li.active a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 50%;
    height: 4px;
    transform: translate(-50%, -50%);
    background-color: #ff2442;
    border-radius: 35px;
}

.aricle-content-container {
    color: white;
}
.aricle-content-container > * {
    margin: 12px auto;
}

.aricle-content-container img {
    width: 100%;
    height: auto;
}

.aricle-content-container blockquote {
    padding: 12px;
    background-color: #222331;
    font-size: 14px;
    border-radius: 4px;
}

.aricle-content-container blockquote a {
    color: #faaa13;
}

.share-text-container {
    font-weight: bold;
    font-size: 2rem;
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
    font-family: "Sacramento", cursive;
    text-align: center;
    animation: blink 1s infinite;
    -webkit-animation: blink 1s infinite;
    padding: 1rem 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
}

.swiper-container .playbackgroud {
    width: 100% !important;
    height: 100% !important;
    filter: blur(10px);
    transform: scale(1.1);
}

.swiper-container .pause-icon {
    display: none;
}

.swiper-tabs-container {
    position: relative;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.2);
}

.swiper-tabs-container.active {
    width: 30%;
}

.page-prev,
.page-next {
    opacity: 0.5;
}

.page-prev:hover,
.page-next:hover {
    opacity: 1;
}

.hidden-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.swiper-tabs-container {
    position: relative;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.2);
}

.swiper-tabs-container.active {
    width: 30%;
}

.page-prev,
.page-next {
    opacity: 0.5;
}

.page-prev:hover,
.page-next:hover {
    opacity: 1;
}

.hidden-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.mobile-comment-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    border-top-left-radius: 8vw;
    border-top-right-radius: 8vw;
    background: #161823;
}

@media screen and (max-width: 768px) {
    .menu-container li.active {
        background-color: transparent;
    }
}

.toast-container {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    max-width: 80vw;
    padding: 10px 20px;
    border-radius: 6px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(-10px);
    animation: toast-in 0.3s forwards;
    pointer-events: auto;
    text-align: center;
}

.toast.success {
    background-color: #38a169;
}

.toast.error {
    background-color: #e53e3e;
}

.toast.info {
    background-color: #2f2f2f;
}

.toast.warn {
    background-color: #d69e2e;
}

@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.tabs-switch-container .tab-button {
    position: relative;
    padding-bottom: 12px;
}
.tabs-switch-container .tab-button.text-white::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 50%;
    height: 4px;
    transform: translate(-50%, -50%);
    background-color: #ff2442;
    border-radius: 35px;
} 
.poster {
    display: flex;
    align-items: center;
    justify-content: center;
}
.poster img[data-src] {
   object-fit: contain;
   max-width: 60%;
}

.comment-container {
    scroll-margin-top: 80px;
}
.aspect-9\/1.poster img[data-src] {
    max-width: 30%;
}

.dx-pager {
    gap: 4px;
    white-space: nowrap;
    font-size: 12px
  }
  
  @media (min-width: 768px) {
    .dx-pager {
        gap:8px;
        font-size: 14px
    }
  }
  
  .dx-pager .pager-item-left,.dx-pager .pager-item-right {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    align-items: center
  }
  
  .dx-pager .pager-item-left .pager-item,.dx-pager .pager-item-right .pager-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 54px;
    flex: 1 1 0%;
    padding: 0
  }
  
  @media (min-width: 768px) {
    .dx-pager .pager-item-left .pager-item,.dx-pager .pager-item-right .pager-item {
        width:100px
    }
  }
  
  .dx-pager .pager-goto {
    width: initial
  }
  
  .dx-pager .pager-goto .form-control {
    background-color: var(--color-primary);
    color: #fff;
    height: 36px;
    margin-right: 8px;
    width: 54px;
    flex-shrink: 0;
    text-align: center
  }
  
  @media (min-width: 768px) {
    .dx-pager .pager-goto .form-control {
        margin-right:28px;
        width: 100px
    }
  }
  
  .dx-pager .pager-goto-btn {
    background-color: #262626;
    color: #fff;
    height: 36px;
    width: 54px;
    flex-shrink: 0;
    border-style: none
  }
  
  @media (min-width: 768px) {
    .dx-pager .pager-goto-btn {
        width:100px
    }
  }
  
  .dx-pager .disabled {
    cursor: not-allowed
  }
  .dx-pager .pager-goto-btn:hover,
  .dx-pager .pager-label {
    color: #fff;
  }
  
  
  /* 仅影响某些浏览器 */
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }