:root {
  --fonts: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  --color: #be3232;
  --color-rgb: 190, 50, 50;
  --color-text: #fff;
  --color-active: #fff;
  --color-active-logo: #d7d7d7;
  --color-text-bottom: var(--color-text);
  --color-text2: #000;
  --background: #0e0e0e;
  --background-menu: #0e0e0e;
  --background-category: #1c1c1c;
  --menu-border: #1a1a1a;
  --text-copyright: #b3b3b3;
  --text-descr: #c4c4c4;
  --color-type: #8e8e8e;
  --color-hr: #2a2a2a;
  --color-cat-hr: #585858;
  --use-background-color: 14, 14, 14;
  /* Anime Full */
  --anime-full-image-shadow-color: 0, 0, 0;
  --anime-full-h2-color: #878787;
  --anime-full-status-link-background: #fff;
  --anime-full-status-link-color: #272727;
  --anime-full-item-color: #c4c4c4;
  --anime-full-list-link-color: #fff;
  --anime-full-descr: #dcdcdc;
  --anime-full-shiki: 1;
  --filter-hr: #333333;
  --filter-hr2: #969696;
  --animelist-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.65);
}

[data-theme=light]:root {
  --color: #be3232;
  --color-rgb: 190, 50, 50;
  --color-text: #3b3838;
  --color-active: #fff;
  --color-active-logo: #5d5d5d;
  --color-text-bottom: #fff;
  --color-text2: #ffffff;
  --background: #ffffff;
  --background-menu: #ffffff;
  --background-category: #eeeeee;
  --menu-border: #ececec;
  --text-copyright: #707070;
  --text-descr: #424242;
  --color-type: #474747;
  --color-hr: #e1e1e1;
  --color-cat-hr: #bcbcbc;
  --use-background-color: 255, 255, 255;
  /* Anime Full */
  --anime-full-image-shadow-color: 60, 60, 60;
  --anime-full-h2-color: #5d5d5d;
  --anime-full-status-link-background: #363636;
  --anime-full-status-link-color: #ffffff;
  --anime-full-item-color: #373737;
  --anime-full-list-link-color: #373737;
  --anime-full-descr: #424242;
  --anime-full-shiki: .225;
  --filter-hr: #d5d5d5;
  --filter-hr2: #ffffff;
  --animelist-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.25);
}

html,
body,
* {
  scrollbar-color: var(--color) var(--background);
  scrollbar-width: thin;
}

*,
::after,
::before {
  box-sizing: border-box;
}

.toggle-theme .dark {
  display: flex;
}

.toggle-theme .light {
  display: none;
}

[data-theme=light] .toggle-theme .dark {
  display: none;
}

[data-theme=light] .toggle-theme .light {
  display: flex;
}

body {
  font-family: var(--fonts);
  font: 12px/14px var(--fonts);
  font-weight: normal;
  background: var(--background);
  height: 100%;
  margin: 0;
  padding: 0;
}

body::selection {
  background: rgba(var(--color-rgb), 0.6);
}

.use-background {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  /* bottom: 30%; */
  height: 1000px;
  /* filter: blur(10px); */
  z-index: -1;
  overflow: hidden;
  /* overflow: hidden; */
}

.use-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(var(--use-background-color), 0.6), rgba(var(--use-background-color), 0.75), rgba(var(--use-background-color), 0.95), rgb(var(--use-background-color)));
  /* mask: linear-gradient(to top, rgba(14, 14, 14, .3), rgba(14, 14, 14, 1), rgba(14, 14, 14, 0)); */
  /* mask: linear-gradient(to bottom, transparent 0%, var(--background) 85%, var(--background) 100%); */
  z-index: 2;
}

.use-background::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  filter: blur(10px);
  /* brightness(100%) contrast(90%) */
  background-image: var(--use-image);
  background-size: cover;
  background-position: top;
  z-index: 1;
}

a {
  text-decoration: none;
  color: var(--color-text);
}

a:hover,
a:active,
a:focus {
  color: var(--color);
}

/* SLIDER
----------------------------------------------- */
.slider2 {
  background: #f5f5f5 url(../images/bg-slider.jpg) center bottom/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.owl-carousel {
  width: 100%;
  position: relative;
  z-index: 1;
}

.owl-stage {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.owl-stage-outer {
  position: relative;
  overflow: hidden;
  transform: translate3d(0px, 0px, 0px);
}

.owl-item {
  position: relative;
  min-height: 10px;
}

.owl-nav.disabled,
.owl-dots.disabled,
.owl-carousel.owl-refresh .owl-item {
  display: none;
}

.owl-carousel.owl-drag .owl-item {
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}

.owl-nav {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -59px;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.owl-prev,
.owl-next {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background-color: transparent;
  color: var(--tt);
  box-shadow: none;
  border: 2px solid var(--bdc);
  color: var(--tt-fade);
  border-radius: 4px;
}

.owl-next {
  border-color: var(--accent);
  color: var(--accent);
}

.owl-carousel .animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  position: relative;
}

.owl-animated-in {
  z-index: 0;
}

.owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.owl-carousel .fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* SLIDER
----------------------------------------------- */
.slider__btns {
  position: absolute;
  z-index: 10;
  bottom: 65px;
  left: 60px;
  overflow: hidden;
  width: 560px;
}

.slider__btns-btn {
  height: 90px;
  background-color: #222c42;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.slider__btns-btn.next {
  background-color: #e54c3c;
  text-align: right;
}

.sl {
  padding: 0 60px;
  --ui-elem-height: 50px;
}

.sl__descr {
  position: relative;
  z-index: 3;
  width: 48%;
  height: 560px;
  padding-bottom: 145px;
}

.sl__category {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  max-width: 350px;
  padding: 5px 10px;
  background-color: #222c42;
  color: #fff;
  --tt: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl__title,
.sl__subtitle {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  text-wrap: balance;
}

.sl__subtitle {
  color: #e54c3c;
}

.sl__text {
  font-size: 18px;
  margin: 20px 0 25px 0;
  line-height: 1.2;
}

.sl>img {
  mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 100%);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.p-relative {
  position: relative;
}

.flex-1 {
  flex: 1 1 0;
  max-width: 100%;
  min-width: 50px;
}

.bdrs-bigger {
  border-radius: 6px;
}

.bg-decor::before,
.bg-decor>* {
  position: relative;
  z-index: 3;
}

.bg-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: inherit;
  opacity: 0.76;
  border-radius: inherit;
}

.slider__btns .fal {
  display: flex;
}

.slider__btns .fal:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.fa-pull-right:before {
  order: 10;
}

.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5,
.line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sl__btn-more {
  background-color: #e54c3c;
  padding: 15px;
  border-radius: 8px;
}

.sl__btn-more:hover {
  color: #fff;
  background-color: #721e15;
}

.slider__btns-btn:hover {
  background-image: none !important;
}

@media (max-width: 650px) {
  .slider__btns {
    position: relative;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .sl .sl__descr {
    height: 400px;
    width: 100%;
    padding: 0;
    justify-content: flex-end;
  }

  .sl>img {
    height: 90%;
  }

  .sl__title,
  .sl__subtitle {
    font-size: 24px;
  }

  .sl__text {
    font-size: 14px;
    margin: 10px 0 15px 0;
  }

  .sl {
    padding: 10px 15px;
  }

  .sl>img {
    mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 100%);
    width: 100%;
    height: 100%;
  }
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
  padding: 0;
  margin: 0;
}

input[type=text],
input[type=password],
select,
textarea {
  display: block;
  background: transparent;
  border: none;
  margin: 0;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  width: 100%;
  outline: none;
  height: 40px;
  /* line-height: 40px; */
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  -webkit-appearance: none;
}

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border: 1px solid var(--color);
}

.tox-tinymce {
  border-radius: 7px !important;
}

#modal-overlay {
  z-index: 1001 !important;
}

.ui-icon-closethick {
  font-family: "tabler-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ui-icon-closethick:before {
  content: "\eb55";
  font-family: inherit;
}

.ui-dialog {
  background: var(--background);
  color: var(--color-text);
  -webkit-box-shadow: none;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.ui-dialog .ui-dialog-buttonset button {
  margin-right: 0 !important;
  line-height: 1 !important;
}

.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid var(--menu-border);
  background: var(--background);
  padding: 10px;
}

.ui-dialog-buttonset {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ui-dialog-buttonset>*:first-child {
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid var(--menu-border);
}

.ui-button,
.qq-upload-button {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px !important;
  border-radius: 8px !important;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
  font-size: 12px !important;
  margin: 0 !important;
  cursor: pointer;
}

.ui-button:hover,
.qq-upload-button:hover {
  opacity: 0.8;
}

.xfieldsrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}

#cinema.fancybox-content,
#trailer_place.fancybox-content,
#trailer_load.fancybox-content {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: auto;
  max-width: 1000px;
  margin: auto;
  background-color: inherit;
}

#edit_category_list {
  max-width: 100% !important;
}

.sl__text {
  margin: 15px 0 30px 0;
}

.sl__category {
  padding: 0;
  background: none;
  color: #8c8c8c;
  margin-bottom: 5px;
}

.sl__category a {
  color: #8c8c8c;
}

.sl {
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
}

.sl .sl__title,
.sl .sl__subtitle {
  color: #fff;
}

.sl .sl__text {
  color: #d3d3d3;
}

@media (max-width: 650px) {
  .sl {
    text-align: center;
    padding-bottom: 30px;
  }
}

.sl>img {
  mask-image: none;
  filter: brightness(20%) contrast(80%);
  width: 100%;
  /* mask-image: linear-gradient(to right, transparent 20%, #000 100%, #000 100%); */
}

@media (max-width: 650px) {
  .sl>img {
    /* mask-image: linear-gradient(to top, transparent 40%, #000 100%, #000 100%); */
  }
}

.sl .sl__category {
  max-width: 100%;
}

@media (max-width: 650px) {
  .sl .sl__btns {
    justify-content: center;
  }
}

.sl__descr {
  height: 390px;
  padding-bottom: 0;
}

.slider2 {
  background: none;
  /*#f5f5f5*/
  margin-bottom: 20px;
  border-radius: 0;
  z-index: 2;
}

.owl-carousel .owl-stage-outer {
  right: auto;
}

.owl-stage {
  flex-wrap: wrap;
}

.sl__subtitle {
  color: var(--color);
}

.sl__btn-more {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  transition: 0.2s ease-in-out;
}

.sl__btn-more>i {
  font-size: 16px;
}

.sl__btn-more:hover,
.sl__btn-more:active,
.sl__btn-more:focus {
  background-color: var(--color);
  color: #fff;
  opacity: 0.9;
}

.owl-dots {
  text-align: center;
  padding-top: 15px;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.owl-dots>.owl-dot {
  padding: 0px 15px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: none !important;
  height: 4px !important;
  border-radius: 3px;
}

.owl-dots>.owl-dot.active {
  background: var(--color) !important;
}

#slide2 {
  position: relative;
}

#slide2 .slider-tools {
  z-index: 1;
  position: absolute;
  top: 0;
  left: clamp(-64px, -3vw, -36px);
  right: clamp(-64px, -3vw, -36px);
  bottom: 0;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: var(--color-text);
  justify-content: space-between;
}

#slide2 .slider-tools>div {
  cursor: pointer;
  align-content: center;
  text-align: center;
  font-size: 24px;
  width: 42px;
  height: 42px;
  transition: 0.2s ease-in-out;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
}

#slide2 .slider-tools>div.prev {
  padding-right: 5px;
}

#slide2 .slider-tools>div.next {
  padding-left: 2px;
}

#slide2 .slider-tools>div:hover {
  background: var(--menu-border);
  opacity: 0.725;
}

@media screen and (min-width: 620px) {
  #slide2 .slider-tools {
    display: flex;
  }
}

@media screen and (min-width: 769px) and (max-width: 792px) {
  #slide2 .slider-tools {
    display: none;
  }
}

@media screen and (min-width: 992px) and (max-width: 1055px) {
  #slide2 .slider-tools {
    display: none;
  }
}

nav {
  display: contents;
}

.nav {
  background: var(--background);
  color: var(--color-text);
  padding: 15px 0;
  border-bottom: 1px solid var(--menu-border);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav .top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 30px;
  /* position: relative; */
}

@media screen and (max-width: 991px) {
  .nav .top {
    justify-content: space-between;
  }
}

.nav .top .mobile {
  display: none;
}

.nav .top .mobile .toggle[data-open=false] .hidden {
  display: none;
}

.nav .top .mobile .toggle[data-open=false] .showed {
  display: flex;
}

.nav .top .mobile .toggle[data-open=true] .hidden {
  display: flex;
}

.nav .top .mobile .toggle[data-open=true] .showed {
  display: none;
}

.nav .top .mobile a {
  transition: 0.2s ease-in-out;
}

.nav .top .mobile a:hover {
  opacity: 0.875;
}

.nav .top .mobile .login {
  background: var(--color);
  color: var(--color-text-bottom);
  padding: 10px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 400;
  height: 34px;
}

.nav .top .mobile .avatar {
  border: 1px solid var(--menu-border);
  border-radius: 100%;
  height: 34px;
  width: 34px;
  cursor: pointer;
}

.nav .top .mobile .avatar>img {
  border-radius: 100%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .nav .top .mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 28px;
  }
}

.nav .top .end {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}

@media screen and (min-width: 991px) {
  .nav .top .end {
    display: flex !important;
    transition: 0.2s ease-in-out;
  }

  .nav .top .end>.container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
}

@media screen and (max-width: 991px) {
  .nav .top .end {
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--menu-border);
    top: 64px;
    left: 0;
    right: 0;
    background: var(--background-menu);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    max-height: calc(100vh - 65px);
    overflow: auto;
  }

  .nav .top .end.open {
    display: flex;
  }
}

.nav .top .menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex-direction: row;
  gap: 30px;
  /* flex: 1; */
}


.menu {
  .submenu>a {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    transition: 0.2s ease-in-out;
    z-index: 2;

    @media screen and (max-width: 991px) {
      & {
        padding: 10px 5px;
        justify-content: space-between;
        flex-direction: row-reverse;
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .menu {
    .submenu {
      position: relative;
    }

    .submenu .list {
      display: flex;
      flex-direction: column;
      /* margin-left: 5px; */
      /* flex-wrap: wrap; */
      /* padding-left: 20px; */
      /* margin: 5px 0; */
      /* border-top: 1px solid var(--color-hr);
      border-bottom: 1px solid var(--color-hr); */

      &::after {
        content: "";
        position: absolute;
        left: 4px;
        /* top: 54px; */
        background: var(--color-cat-hr);
        height: -webkit-fill-available;
        width: .005rem;
      }

      >a {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        margin-left: 15px;
        font-size: 16px;
        font-weight: 400;
        transition: 0.2s ease-in-out;
        padding: 10px 5px;
        justify-content: space-between;
        flex-direction: row;
        color: var(--color-text);

        &::before {
          content: "";
          position: absolute;
          left: -10px;
          background: var(--color-cat-hr);
          height: .005rem;
          width: 10px;

        }

        &:hover {
          color: var(--color);
        }
      }
    }
  }
}

@media screen and (min-width: 991px) {
  .menu {
    .submenu {
      position: relative;
      display: flex;
      width: fit-content;
    }


    .submenu .list {
      visibility: hidden;
      display: flex;
      position: absolute;
      opacity: 0;
      top: 35px;
      left: 0;
      background-color: var(--background-category);
      color: var(--color-text);
      min-width: 210px;
      max-width: 100%;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
      z-index: 1;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      border-radius: 10px;
      transition: 0.2s ease-in-out;
      &::after{
                content: "";
                  position: absolute;
                  top: -44px;
                  left: 0;
                  right: 50%;
                  /* background: #000000; */
                  height: 44px;
                  z-index: 1;
      }
    }

    .submenu .list>.hr {
      margin: 5px 0;
      height: 1px;
      width: 100%;
      background: var(--color-hr);
    }

    .submenu .list>a {
      color: var(--color-text);
      /* margin: 5px; */
      padding: 8px 8px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      font-family: var(--fonts);
      border-radius: 5px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
    }

    .submenu .list>a>span {
      font-weight: 700;
      font-size: 14px;
      color: var(--color);
    }

    .submenu .list>a:hover {
      background-color: var(--color);
      color: var(--color-active);
    }

    .submenu .list>a:hover>span {
      color: var(--color-active);
    }

    .submenu:hover .list {
      visibility: visible;
      opacity: 1;
    }
  }
}




@media screen and (max-width: 991px) {
  .nav .top .menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    /* padding: 10px 0; */
    width: 100%;
  }

  .nav .top .menu>a {
    padding: 10px 5px;
    justify-content: space-between;
    flex-direction: row-reverse;
    /* text-align: center; */
  }
}

.nav .top .menu .search {
  flex-direction: row;
  margin-bottom: 10px;
  flex-wrap: nowrap;
  gap: 10px;
}

.nav .top .menu .search .icon-btn {
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  border-radius: 7px;
  justify-items: center;
  align-content: center;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  transition: 0.2s ease-in-out;
}

.nav .top .menu .search .icon-btn>i {
  font-size: 18px;
}

.nav .top .menu .search .icon-btn:hover {
  border: 1px solid var(--color);
}

.nav .top .menu .search form {
  position: relative;
  width: 100%;
}

.nav .top .menu .search form input[type=submit] {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 8px;
  align-content: center;
  background: var(--color);
  color: var(--color-text-bottom);
  font-family: var(--fonts);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 3px;
  user-select: none;
  height: auto;
  margin: 0;
  line-height: 1;
  outline: none;
  border: 0;
}

.nav .top .menu .search form input[type=text] {
  background: transparent;
  border: none;
  margin: 0;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  width: 240px;
  height: 34px;
  border-radius: 7px;
  outline: none;
}

.nav .top .menu .search form input[type=text]:focus {
  border: 1px solid var(--color);
}

.nav .top .menu>a {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  font-size: 16px;
  font-weight: 400;
  transition: 0.2s ease-in-out;
}

.nav .top .menu>a>i {
  font-size: 18px;
}

.nav .top .userinfo {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* input {
    background: transparent;
    border: none;
    margin: 0;
    color: var(--color-text);
    padding: 6px 8px;
    font-size: 16px;
    max-width: 240px;
    border-radius: 0;
    outline: none;
  } */
}

@media screen and (max-width: 991px) {
  .nav .top .userinfo {
    display: none;
  }
}

.nav .top .userinfo .toggle-theme i {
  font-size: 18px;
}

.nav .top .userinfo .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  justify-items: center;
  align-content: center;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  transition: 0.2s ease-in-out;
}

.nav .top .userinfo .icon-btn:hover {
  border: 1px solid var(--color);
}

.nav .top .userinfo .avatar {
  border: 1px solid var(--menu-border);
  border-radius: 100%;
  height: 34px;
  width: 34px;
  cursor: pointer;
}

.nav .top .userinfo .avatar>img {
  border-radius: 100%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.nav .top .userinfo>.login {
  background: var(--color);
  color: var(--color-text-bottom);
  padding: 10px 20px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 400;
  transition: 0.2s ease-in-out;
}

.nav .top .userinfo>.login:hover {
  opacity: 0.875;
}

.nav .top .userinfo form {
  position: relative;
}

.nav .top .userinfo form input[type=submit] {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 8px;
  align-content: center;
  background: var(--color);
  color: var(--color-text-bottom);
  font-family: var(--fonts);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 3px;
  user-select: none;
  height: auto;
  margin: 0;
  line-height: 1;
  outline: none;
  border: 0;
}

.nav .top .userinfo form input[type=text] {
  background: transparent;
  border: none;
  margin: 0;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  width: 240px;
  height: 34px;
  border-radius: 7px;
  outline: none;
}

.nav .top .userinfo form input[type=text]:focus {
  border: 1px solid var(--color);
}

.nav .logotype {
  position: absolute;
  justify-self: anchor-center;
  /* left: 0;
  right: 0;
  text-align: center; */
}

.nav .logotype>a>svg {
  width: clamp(75px, 14vw, 100px);
  height: clamp(28px, 3vw, 35px);
}

.nav .logotype>a>svg #text1 {
  fill: var(--color-text);
}

.nav .logotype>a>svg #text2 {
  fill: var(--color);
  transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav .logotype>a :hover #text2 {
  transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  fill: var(--color-active-logo);
}

.is-mobile {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .is-mobile {
    display: flex !important;
  }
}

.is-not-mobile {
  display: flex !important;
}

@media screen and (max-width: 991px) {
  .is-not-mobile {
    display: none !important;
  }
}

.category {
  position: sticky;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--background-category);
  color: var(--color-text);
  z-index: 999;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  display: none;
}

.category .container {
  position: relative;
}

.category .over {
  padding: 15px 0;
  overflow: hidden;
}

.category .owl-carousel .owl-item {
  overflow: visible;
}

.category .list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.category .list .owl-stage {
  flex-wrap: nowrap;
}

.category .list a {
  white-space: nowrap;
}

.category .list a.type {
  color: var(--color-type);
  font-weight: 500;
}

.category .list a.type.hr {
  position: relative;
  padding-right: 10px;
}

.category .list a.type.hr::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--color-cat-hr);
}

.category .list a.type:hover,
.category .list a.type:active,
.category .list a.type:focus {
  color: var(--color);
}

.head_bot,
.cols {
  background-color: var(--background);
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.wrapper .content {
  position: relative;
  flex: 1;
  margin: 20px 0;
  height: 100%;
}

.wrapper .content .errors {
  background: var(--background-category);
  color: var(--color-text);
  margin: 0 0 20px 0;
  padding: 20px;
  border-radius: 10px;
  line-height: 1.5;
}

.wrapper footer {
  color: var(--color-text);
}

.wrapper footer .copyright {
  border-top: 1px solid var(--menu-border);
  padding: 30px 0;
}

.wrapper footer .copyright .copy {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 5px;
  order: 1;
}

@media screen and (max-width: 768px) {
  .wrapper footer .copyright .copy {
    order: 2;
    align-items: center;
    text-align: center;
  }
}

.wrapper footer .copyright .copy>span {
  font-weight: 400;
  color: var(--text-copyright);
}

.wrapper footer .copyright .social {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 10px;
  order: 2;
}

@media screen and (max-width: 768px) {
  .wrapper footer .copyright .social {
    order: 1;
    justify-content: center;
    margin-bottom: 20px;
  }
}

.wrapper footer .copyright .icon-btn {
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  border-radius: 7px;
  text-align: center;
  align-content: center;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  transition: 0.2s ease-in-out;
}

.wrapper footer .copyright .icon-btn>i {
  font-size: 16px;
}

.wrapper footer .copyright .icon-btn:hover {
  background: var(--color);
  color: var(--color-active);
  border: 1px solid var(--color);
}


.topnew .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-text);
  line-height: 1.25;
}

.topnew .title>i {
  font-size: 18px;
}

.topnew a.title {
  margin-bottom: 0;
}

.topnew .title.g {
  margin-bottom: 0;
}

.topnew a.title:hover {
  gap: 8px;
  opacity: 0.8;
}

.topnew .subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--text-copyright);
  line-height: 1.25;
}


.topnew .container {
  position: relative;
}

.topnew .slider_topnew #topnewSlider,
.topnew .slider_related #topnewSlider {
  z-index: 2;
}

.topnew .slider_topnew .item,
.topnew .slider_related .item {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  /* overflow: hidden; */
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  /* .img {
    transition: 0.2s ease-in-out;
    width: 180px;
    height: 100%;

    >img {
      width: 100%;
      height: 100%;
    }
  } */
}

.topnew .slider_topnew .item .responsive,
.topnew .slider_related .item .responsive {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.topnew .slider_topnew .item .shiki,
.topnew .slider_related .item .shiki {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 7px;
  border-radius: 8px;
  background: #0e0e0e;
  opacity: 0.725;
  /* color: var(--color-text); */
  color: #ffe900;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.topnew .slider_topnew .item .img,
.topnew .slider_related .item .img {
  position: relative;
  padding-top: 145%;
  max-width: 100%;
  width: 100%;
  transition: 0.2s ease-in-out;
  /* border-radius: 10px; */
}

.topnew .slider_topnew .item .img>img,
.topnew .slider_related .item .img>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.topnew .slider_topnew .item .hover,
.topnew .slider_related .item .hover {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  /* backdrop-filter: blur(2px); */
  opacity: 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  transition: 0.2s ease-in-out;
}

.topnew .slider_topnew .item .hover>.name,
.topnew .slider_related .item .hover>.name {
  font-size: 0.725rem;
  will-change: font-size;
  font-weight: 500;
}

.topnew .slider_topnew .item .hover>.tag,
.topnew .slider_related .item .hover>.tag {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-weight: 300;
  font-size: 0.675rem;
  color: #dadada;
}

.topnew .slider_topnew .item:hover .img,
.topnew .slider_related .item:hover .img {
  filter: brightness(15%) contrast(85%) blur(2px);
  transform: scale(1.03);
}

.topnew .slider_topnew .item:hover .shiki,
.topnew .slider_related .item:hover .shiki {
  opacity: 0;
}

.topnew .slider_topnew .item:hover .hover,
.topnew .slider_related .item:hover .hover {
  opacity: 1;
}

.topnew .slider-tools {
  z-index: 1;
  position: absolute;
  top: 0;
  left: clamp(-64px, -3vw, -36px);
  right: clamp(-64px, -3vw, -36px);
  bottom: 0;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: var(--color-text);
  justify-content: space-between;
}

.topnew .slider-tools>div {
  cursor: pointer;
  align-content: center;
  text-align: center;
  font-size: 24px;
  width: 42px;
  height: 42px;
  transition: 0.2s ease-in-out;
  border: 1px solid var(--menu-border);
  border-radius: 50%;
}

.topnew .slider-tools>div.prev {
  padding-right: 5px;
}

.topnew .slider-tools>div.next {
  padding-left: 2px;
}

.topnew .slider-tools>div.disabled {
  background: transparent !important;
  border: none !important;
  opacity: 0.725 !important;
  cursor: no-drop !important;
}

.topnew .slider-tools>div:hover {
  background: var(--menu-border);
  opacity: 0.725;
}

@media screen and (min-width: 620px) {
  .topnew .slider-tools {
    display: flex;
  }
}

@media screen and (min-width: 769px) and (max-width: 792px) {
  .topnew .slider-tools {
    display: none;
  }
}

@media screen and (min-width: 992px) and (max-width: 1055px) {
  .topnew .slider-tools {
    display: none;
  }
}

.popular {
  padding-top: 20px;
  margin-bottom: 20px;
}

.popular .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-text);
  line-height: 1.25;
}

.popular .title>i {
  font-size: 18px;
}

.popular a.title {
  margin-bottom: 0;
}

.popular .title.g {
  margin-bottom: 0;
}

.popular a.title:hover {
  gap: 8px;
  opacity: 0.8;
}

.popular .subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--text-copyright);
  line-height: 1.25;
}


.popular .items {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media screen and (min-width: 400px) {
  .popular .items {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media screen and (min-width: 400px) and (max-width: 768px) {
  .popular .items {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

.popular .items .item {
  position: relative;
  display: flex;
  /* width: 100%;
  height: 100%; */
  border-radius: 10px;
  padding: 0;
  /* overflow: hidden; */
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.popular .items .item .responsive {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.popular .items .item .shiki {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 7px;
  border-radius: 8px;
  background: #0e0e0e;
  opacity: 0.725;
  /* color: var(--color-text); */
  color: #ffe900;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.popular .items .item .img {
  position: relative;
  padding-top: 145%;
  max-width: 100%;
  width: 100%;
  transition: 0.2s ease-in-out;
  /* border-radius: 10px; */
}

.popular .items .item .img>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.popular .items .item .hover {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  /* backdrop-filter: blur(2px); */
  opacity: 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  /* border-radius: 7px; */
  transition: 0.2s ease-in-out;
}

.popular .items .item .hover>.name {
  font-size: 0.725rem;
  will-change: font-size;
  font-weight: 500;
}

.popular .items .item .hover>.tag {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-weight: 300;
  font-size: 0.675rem;
  color: #dadada;
}

.popular .items .item:hover .img {
  filter: brightness(15%) contrast(85%) blur(2px);
  transform: scale(1.03);
}

.popular .items .item:hover .shiki {
  opacity: 0;
}

.popular .items .item:hover .hover {
  opacity: 1;
}

.slider-nl .sl:not(:first-child) {
  display: none;
}

.slider-tp {
  display: none;
}

.pagi-load,
.bottom-nav {
  display: none;
}

.nav-search {
  display: flex;
}

.pages {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  user-select: none;
}

.pages .prev>span,
.pages .next>span {
  display: none;
}

.pages .prev>a,
.pages .next>a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  border-radius: 7px;
  /* border: 1px solid var(--menu-border); */
  color: var(--color-text);
  transition: 0.2s ease-in-out;
  user-select: none;
}

.pages .prev>a>i,
.pages .next>a>i {
  font-size: 16px;
}

.pages .prev>a:hover,
.pages .next>a:hover {
  opacity: 0.8;
}

.pages .page {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  user-select: none;
}

.pages .page>a {
  flex: 1 auto;
  font-size: 18px;
  padding: 10px 13px;
  border-radius: 7px;
  text-align: center;
  align-content: center;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  transition: 0.2s ease-in-out;
}

.pages .page>a:hover {
  border: 1px solid var(--color);
}

.pages .page span {
  flex: 1 auto;
  font-size: 18px;
  padding: 10px 13px;
  border-radius: 7px;
  text-align: center;
  align-content: center;
  border: 1px solid var(--color);
  background: var(--color);
  color: var(--color-active);
  transition: 0.2s ease-in-out;
}

.pages .page span.nav_ext {
  flex: 0;
  border: none;
  background: transparent;
  cursor: no-drop;
  opacity: 0.725;
  color: var(--color-text);
}

.pages .page i {
  font-size: 18px;
}

.anime-title {
  display: flex;
  margin: 10px 0 25px 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.anime-title[data-count="0"] {
  display: none;
}

@media screen and (max-width: 991px) {
  .anime-title {
    align-items: center;
    text-align: center;
  }
}

.anime-title .search {
  width: 100%;
}

.anime-title>span {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.anime-title>span>b {
  color: var(--color);
}

.anime-title>small {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-copyright);
  line-height: 1.25;
}

.animelist {
  /* display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 25px; */
  grid-gap: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}

@media screen and (max-width: 470px) {
  .animelist {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}

.animelist #fullsearch {
  display: none;
}

.animelist>.item {
  position: relative;
  width: 100%;
  border-radius: 20px;
  background: var(--background-category);
  color: var(--color-text);
  box-shadow: var(--animelist-shadow);
  transition: 0.2s ease-in-out;
}

.animelist>.item .responsive {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 30px;
  padding: 15px;
  /* overflow: hidden; */
}

@media screen and (max-width: 768px) {
  .animelist>.item .responsive {
    gap: 15px;
    /* flex-direction: column; */
  }
}

.animelist>.item .img {
  /* border-radius: 20px; */
  /* width: 100%; */
}

.animelist>.item .img>img {
  /* --width: 180px;
  --height: 270px; */
  --width: clamp(120px, 10vw, 150px);
  --height: clamp(180px, 15vw, 230px);
  width: var(--width);
  height: var(--height);
  min-width: var(--width);
  min-height: var(--height);
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 768px) {
  .animelist>.item .img>img {
    --width: 80px;
    --height: 120px;
    /* flex-direction: column; */
  }
}

.animelist>.item .information {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  /* gap: 5px; */
  line-height: 1.25;
}

@media screen and (max-width: 768px) {
  .animelist>.item .information {
    /* text-align: center;
    align-items: center; */
  }
}

.animelist>.item .information>span {
  font-size: clamp(16px, 2.7vw, 22px);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .animelist>.item .information>span {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.animelist>.item .information>small {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 400;
  color: #616161;
  line-height: 1;
  letter-spacing: 0.04rem;
  padding: 1px 0;
}

.animelist>.item .information>small>b {
  font-size: clamp(12px, 1vw, 16px);
  color: var(--color);
}

.animelist>.item .information>.genre {
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 300;
  color: #616161;
  padding-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .animelist>.item .information>.genre {
    padding-top: 0;
  }
}

.animelist>.item .information>p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-descr);
}

@media screen and (max-width: 768px) {
  .animelist>.item .information>p {
    display: none;
  }
}

.animelist>.item:hover {
  opacity: 0.675;
}

/* .dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
} */
.drops {
  position: relative;
  display: flex;
  width: fit-content;
  --drops: 10px;
}

.drops .list {
  visibility: hidden;
  display: flex;
  position: absolute;
  opacity: 0;
  top: var(--drops);
  right: 0;
  background-color: var(--background-category);
  color: var(--color-text);
  min-width: 210px;
  max-width: 100%;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
  z-index: 1;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  transition: 0.2s ease-in-out;
}

.drops .list>.hr {
  margin: 5px 0;
  height: 1px;
  width: 100%;
  background: var(--color-hr);
}

.drops .list>a {
  color: var(--color-text);
  /* margin: 5px; */
  padding: 10px 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--fonts);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.drops .list>a>span {
  font-weight: 700;
  font-size: 14px;
  color: var(--color);
}

.drops .list>a:hover {
  background-color: var(--color);
  color: var(--color-active);
}

.drops .list>a:hover>span {
  color: var(--color-active);
}

.drops:focus .list {
  visibility: visible;
  opacity: 1;
}

.anime-full {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 40px;
  margin-top: 30px;
}

.anime-full .third-raiting {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .anime-full .third-raiting {
    justify-content: center;
  }
}

.anime-full .third-raiting>.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.anime-full .third-raiting>.item>img {
  width: 24px;
  border-radius: 50%;
}

.anime-full .third-raiting>.item>img.shiki {
  filter: brightness(0) invert(var(--anime-full-shiki));
}

.anime-full .third-raiting>.item>img.kpoisk+span {
  color: #ff5500;
}

.anime-full .third-raiting>.item>img.imdb+span {
  color: #f5c518;
}

.anime-full .third-raiting>.item>span {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.anime-full .group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: fit-content;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .anime-full .group {
    margin-top: 10px;
  }
}

.anime-full .group>* {
  flex: 1 auto;
}

.anime-full .play {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px;
  border-radius: 8px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  transition: 0.2s ease-in-out;
}

@media (max-width: 439px) {
  .anime-full .play {
    order: 1;
  }
}

.anime-full .play:hover {
  opacity: 0.8;
}

.anime-full .favorites {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  min-width: 48px;
  border-radius: 8px;
  color: #fff;
  background-color: #0f0f0f;
  font-size: 16px;
  cursor: pointer;
  padding: 0 10px;
  gap: 5px;
  font-weight: 500;
}

.anime-full .favorites.liked {
  color: var(--color);
}

.anime-full .favorites:hover {
  opacity: 0.8;
}

.anime-full .descr {
  color: var(--anime-full-descr);
  font-size: 14px;
  letter-spacing: 0.0425rem;
  font-weight: 500;
  line-height: 1.725;
}

.anime-full .screenshots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.anime-full .screenshots .title {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.anime-full .screenshots .xfieldimagegallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 15px;
  padding: 0;
}

.anime-full .screenshots .xfieldimagegallery li {
  list-style-type: none;
}

.anime-full .screenshots .xfieldimagegallery li>a {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}

.anime-full .screenshots .xfieldimagegallery li>a img {
  width: 100%;
  height: 100%;
}

.anime-full .top {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 50px;
}

@media (max-width: 768px) {
  .anime-full .top {
    gap: 30px;
    flex-direction: column;
    align-items: center;
  }
}

.anime-full .top .responsive {
  display: flex;
  border-radius: 10px;
  width: 310px;
  min-width: 310px;
  /* width: clamp(180px, 15vw, 270px);
  min-width: clamp(180px, 15vw, 270px); */
  box-shadow: 0px 5px 7px -3px rgba(var(--anime-full-image-shadow-color), 0.5);
}

@media (max-width: 768px) {
  .anime-full .top .responsive {
    width: clamp(170px, 50vw, 270px);
    min-width: 0px;
    max-width: 100%;
  }
}

.anime-full .top .img {
  position: relative;
  padding-top: 145%;
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
  transition: 0.2s ease-in-out;
}

.anime-full .top .img>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.anime-full .top .panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}

@media (max-width: 768px) {
  .anime-full .top .panel {
    text-align: center;
    align-items: center;
  }
}

.anime-full .top .panel>.title h1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .anime-full .top .panel>.title h1 {
    font-size: clamp(22px, 5vw, 32px);
  }
}

.anime-full .top .panel>.title h2 {
  font-size: 18px;
  line-height: 1.25;
  color: var(--anime-full-h2-color);
}

@media (max-width: 768px) {
  .anime-full .top .panel>.title h2 {
    font-size: clamp(14px, 3vw, 18px);
  }
}

.anime-full .top .panel>.statusbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: fit-content;
  gap: 10px;
}

@media (max-width: 768px) {
  .anime-full .top .panel>.statusbar {
    width: 100%;
  }
}

.anime-full .top .panel>.statusbar .label,
.anime-full .top .panel>.statusbar a {
  text-align: center;
  flex: 1 auto;
  padding: 7px 15px;
  background: var(--color);
  border-radius: 8px;
  color: var(--color-active);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-weight: 500;
}

.anime-full .top .panel>.statusbar .label.released,
.anime-full .top .panel>.statusbar a.released {
  background: #1b871b;
}

.anime-full .top .panel>.statusbar .label.ongoing,
.anime-full .top .panel>.statusbar a.ongoing {
  background: #a25e00;
}

.anime-full .top .panel>.statusbar .label.anons,
.anime-full .top .panel>.statusbar a.anons {
  background: #198a88;
}

.anime-full .top .panel>.statusbar .label.info,
.anime-full .top .panel>.statusbar a.info {
  flex: 0 auto;
  display: none;
  padding: 0;
  width: 28px;
  height: 28px;
  text-align: center;
  align-content: center;
  background: #1d5bde;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.anime-full .top .panel>.statusbar .label.info i,
.anime-full .top .panel>.statusbar a.info i {
  font-size: 22px;
}

.anime-full .top .panel>.statusbar .label.info:hover,
.anime-full .top .panel>.statusbar a.info:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {

  .anime-full .top .panel>.statusbar .label.info,
  .anime-full .top .panel>.statusbar a.info {
    display: block;
  }
}

.anime-full .top .panel>.statusbar a {
  background: var(--anime-full-status-link-background);
  color: var(--anime-full-status-link-color);
  transition: 0.2s ease-in-out;
}

.anime-full .top .panel>.statusbar a:hover {
  opacity: 0.8;
}

.anime-full .top .panel>.inform {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 13px;
}

@media (max-width: 768px) {
  .anime-full .top .panel>.inform {
    display: none;
  }

  .anime-full .top .panel>.inform.open {
    display: flex;
  }
}

.anime-full .top .panel>.inform>.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .anime-full .top .panel>.inform>.item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.anime-full .top .panel>.inform>.item>span {
  color: var(--color);
}

.anime-full .top .panel>.inform>.item>span.p {
  margin-bottom: auto;
  padding-top: 4px;
}

.anime-full .top .panel>.inform>.item>b {
  color: var(--anime-full-item-color);
  font-size: 12px;
  font-weight: 500;
}

.anime-full .top .panel>.inform>.item .list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .anime-full .top .panel>.inform>.item .list {
    justify-content: center;
  }
}

.anime-full .top .panel>.inform>.item a {
  /* flex: 1 auto; */
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #787878;
  color: var(--anime-full-list-link-color);
  transition: 0.2s ease-in-out;
}

.anime-full .top .panel>.inform>.item a:hover {
  color: #fff;
  background: #787878;
}

.player {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

.player .fancybox-close-small {
  display: none !important;
}

.player>.video-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--background-category);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px 10px;
}

.player>.video-container .video-select {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  width: fit-content;
}

.player>.video-container .video-select>a {
  text-align: center;
  flex: 1 auto;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.player>.video-container .video-select>a.active {
  pointer-events: none;
  background: var(--color);
  color: var(--color-active);
}

.player>.video-container .video-select>a:not(.active):hover {
  opacity: 0.8;
}

.player>.video-container .max,
.player>.video-container .min {
  width: fit-content;
  text-align: center;
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.player>.video-container .max:hover,
.player>.video-container .min:hover {
  background: var(--color);
  color: var(--color-active);
}

.player>.video-container .min {
  display: none;
}

.player.fancybox-content .video-container {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
}

.player.fancybox-content .max {
  display: none;
}

.player.fancybox-content .min {
  display: block;
}

.player>.video-player {
  position: relative;
  display: none;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
}

.player>.video-player.open {
  display: block;
}

.super__watchlist-select {
  display: none !important;
}

.super__watchlist-select[data-watch-type=Watching]+.dropdown-content [data-watch-type=Watching],
.super__watchlist-select[data-watch-type=Watched]+.dropdown-content [data-watch-type=Watched],
.super__watchlist-select[data-watch-type=On_Hold]+.dropdown-content [data-watch-type=On_Hold],
.super__watchlist-select[data-watch-type=Dropped]+.dropdown-content [data-watch-type=Dropped],
.super__watchlist-select[data-watch-type=Planned]+.dropdown-content [data-watch-type=Planned] {
  pointer-events: none;
  background-color: var(--color) !important;
  color: var(--color-active) !important;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  background-color: var(--background-category);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 220px;
  max-width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition);
  z-index: 10;
  padding: 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.dropdown-content>li {
  margin: 0;
  color: var(--color-text);
  padding: 0;
}

.dropdown-content>li>a {
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.dropdown-content>li>a:hover {
  background-color: rgba(var(--use-background-color), 0.4);
  color: var(--color);
}

.super__watchlist-menu {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background-color: transparent;
  /* width: fit-content; */
  box-shadow: none;
}

.super__watchlist-btn {
  min-height: 44px;
  min-width: 48px;
  border-radius: 8px;
  color: #fff;
  background-color: #0f0f0f;
  font-size: 16px;
}

.super__watchlist-btn:hover {
  background-color: #0f0f0f;
  opacity: 0.8;
}

#DLEPush {
  display: none !important;
}

.fancybox-thumbs {
  background-color: var(--background);
  padding: 10px;
  inset: 10px;
  left: auto;
  border-radius: 10px;
}

.fancybox-thumbs__list a {
  border-radius: 5px;
}

.fancybox-thumbs__list a:before {
  border: 2px solid var(--color);
  border-radius: 5px;
}

.pretimer {
  background: var(--background-category) !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 0 !important;
}

.countdown_wrp li:first-child .value {
  color: var(--color) !important;
}

.pretimer .countdown_title {
  color: var(--color-text) !important;
  padding: 0 !important;
}

.pretimer .lt {
  align-content: center !important;
}

@media (max-width: 768px) {
  .pretimer .lt {
    padding: 15px 0 0 0 !important;
    text-align: center !important;
  }
}

.countdown_wrp {
  justify-content: flex-end !important;
  gap: 10px !important;
}

.countdown_wrp li {
  display: flex !important;
  text-align: center !important;
  margin: 0 !important;
  flex: 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
}

.countdown_wrp .value {
  color: var(--color-text) !important;
  font-weight: 500;
}

#dropmenudiv {
  margin-top: 10px;
  background-color: var(--background-category);
  color: var(--color-text);
}

.watchlist {
  padding-top: 20px;
  margin-bottom: 20px;
}

.watchlist .watchlist-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--background-category);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px 10px;
}

.watchlist .watchlist-container .watchlist-select {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  width: fit-content;
}

.watchlist .watchlist-container .watchlist-select>a {
  text-align: center;
  flex: 1 auto;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: 0.2s ease-in-out;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.watchlist .watchlist-container .watchlist-select>a .watchlist__notification {
  font-weight: 400;
  font-size: 12px;
}

.watchlist .watchlist-container .watchlist-select>a.watchlist__sort-active {
  pointer-events: none;
  background: var(--color);
  color: var(--color-active);
}

.watchlist .watchlist-container .watchlist-select>a:not(.watchlist__sort-active):hover {
  opacity: 0.8;
}

.watchlist .title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-text);
  line-height: 1.25;
}

.watchlist .title>b {
  color: var(--color);
}

.watchlist .items {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(5, 1fr);
  /* @media screen and (min-width: 400px) and (max-width: 768px) {
    & {
      grid-template-columns: 25% 1fr;
    }
  } */
}

@media screen and (max-width: 991px) {
  .watchlist .items {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .watchlist .items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 460px) {
  .watchlist .items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.watchlist .items .errors {
  grid-column: 1/6;
}

.watchlist .items .item {
  position: relative;
  display: flex;
  /* width: 100%;
  height: 100%; */
  border-radius: 10px;
  padding: 0;
  /* overflow: hidden; */
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.watchlist .items .item .responsive {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.watchlist .items .item .shiki {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 7px;
  border-radius: 8px;
  background: #0e0e0e;
  opacity: 0.725;
  /* color: var(--color-text); */
  color: #ffe900;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.watchlist .items .item .img {
  position: relative;
  padding-top: 145%;
  max-width: 100%;
  width: 100%;
  transition: 0.2s ease-in-out;
  /* border-radius: 10px; */
}

.watchlist .items .item .img>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.watchlist .items .item .hover {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  /* backdrop-filter: blur(2px); */
  opacity: 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  /* border-radius: 7px; */
  transition: 0.2s ease-in-out;
}

.watchlist .items .item .hover>.name {
  font-size: 0.725rem;
  will-change: font-size;
  font-weight: 500;
}

.watchlist .items .item .hover>.tag {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-weight: 300;
  font-size: 0.675rem;
  color: #dadada;
}

.watchlist .items .item:hover .img {
  filter: brightness(15%) contrast(85%) blur(2px);
  transform: scale(1.03);
}

.watchlist .items .item:hover .shiki {
  opacity: 0;
}

.watchlist .items .item:hover .hover {
  opacity: 1;
}

.calendar {
  padding-top: 20px;
  margin-bottom: 20px;
}

.calendar .headers {
  display: flex;
  margin: 10px 0 25px 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-items: center;
  text-align: center;
}

.calendar .headers>span {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 5px;
}

.calendar .headers>span>b {
  color: var(--color);
}

.calendar .headers>small {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-copyright);
  line-height: 1.25;
}

.calendar .lists {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.calendar .lists .list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.calendar .title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--background-category);
  border-left: 3px solid var(--color);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px 10px;
}

.calendar .title span {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.25;
}

.calendar .title span>b {
  color: var(--color);
}

.calendar .items {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(6, 1fr);
  /* @media screen and (min-width: 400px) and (max-width: 768px) {
    & {
      grid-template-columns: 25% 1fr;
    }
  } */
}

@media screen and (max-width: 991px) {
  .calendar .items {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .calendar .items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 460px) {
  .calendar .items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.calendar .items .item {
  position: relative;
  display: flex;
  /* width: 100%;
  height: 100%; */
  border-radius: 10px;
  padding: 0;
  /* overflow: hidden; */
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.calendar .items .item .responsive {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.calendar .items .item .shiki {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 7px;
  border-radius: 8px;
  background: #0e0e0e;
  opacity: 0.725;
  /* color: var(--color-text); */
  color: #ffe900;
  font-size: 14px;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.calendar .items .item .img {
  position: relative;
  padding-top: 145%;
  max-width: 100%;
  width: 100%;
  transition: 0.2s ease-in-out;
  /* border-radius: 10px; */
}

.calendar .items .item .img>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.calendar .items .item .hover {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.7); */
  /* backdrop-filter: blur(2px); */
  opacity: 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  /* border-radius: 7px; */
  transition: 0.2s ease-in-out;
}

.calendar .items .item .hover>.name {
  font-size: 0.725rem;
  will-change: font-size;
  font-weight: 500;
}

.calendar .items .item .hover>.tag {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-weight: 400;
  font-size: 0.675rem;
  /* color: #dadada; */
  color: var(--color-active);
  background: var(--color);
  padding: 5px 7px;
  border-radius: 5px;
}

.calendar .items .item:hover .img {
  filter: brightness(15%) contrast(85%) blur(2px);
  transform: scale(1.03);
}

.calendar .items .item:hover .shiki {
  opacity: 0;
}

.calendar .items .item:hover .hover {
  opacity: 1;
}

.form-control {
  /* actions */
}

.form-control[type=submit] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px;
  border-radius: 8px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
}

.form-control[type=submit]:hover {
  opacity: 0.8;
}

.form-controlinput[type=text],
.form-controlinput[type=password],
.form-controlinput[type=file],
.form-controlselect,
.form-controltextarea {
  background: transparent;
  border: none;
  margin: 0;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  width: 100%;
  /* height: 34px; */
  border-radius: 7px;
  outline: none;
}

.form-controlinput[type=text]:focus,
.form-controlinput[type=password]:focus,
.form-controlinput[type=file]:focus,
.form-controlselect:focus,
.form-controltextarea:focus {
  border: 1px solid var(--color);
}

.form-controlinput[type=file]::file-selector-button {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--menu-border);
  outline: none;
  font-size: 12px;
  font-weight: 300;
  padding: 7px 13px;
  border-radius: 5px;
  margin-right: 10px;
}

.form-controlselect option {
  color: #000;
}

.form-controlinput[type=checkbox] {
  --primary-color: var(--color);
  --secondary-color: var(--background);
  --primary-hover-color: var(--color);
  /* checkbox */
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: var(--menu-border);
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

.form-controlinput[type=checkbox],
.form-controlinput[type=checkbox] *,
.form-controlinput[type=checkbox] *::before,
.form-controlinput[type=checkbox] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-controlinput[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.form-controlinput[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.form-controlinput[type=checkbox]::before {
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--color-active);
  border-bottom: 2px solid var(--color-active);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

.form-controlinput[type=checkbox]:hover {
  border-color: var(--primary-color);
}

.form-controlinput[type=checkbox]:checked {
  color: var(--color-active);
  background: var(--primary-color);
  border-color: transparent;
}

.form-controlinput[type=checkbox]:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.form-controlinput[type=checkbox]:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}

.users {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 15px;
  padding: 50px 20px 20px 20px;
  overflow: hidden;
}

.users::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: brightness(10%) contrast(90%);
  background-image: url(../images/profile_bg.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.users>.profile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .users>.profile {
    flex-direction: column;
  }
}

.users>.profile>.avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
  min-height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color);
}

.users>.profile>.avatar>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.users>.profile>.name {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .users>.profile>.name {
    align-items: center;
  }
}

.users>.profile>.name>span {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-active);
}

.users>.profile>.name>small {
  color: #878787;
  font-size: 14px;
  font-weight: 400;
}

.users>.profile>.btn {
  margin-bottom: auto;
  position: absolute;
  top: 15px;
  right: 15px;
}

.users>.profile>.btn>a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  border-radius: 7px;
  text-align: center;
  align-content: center;
  background: #fff;
  color: rgb(14, 14, 14);
  /* border: 1px solid #fff; */
  transition: 0.2s ease-in-out;
}

.users>.profile>.btn>a i {
  font-size: 16px;
}

.users>.profile>.btn>a:hover {
  color: var(--color-active);
  background: var(--color);
  /* border: 1px solid var(--menu-border); */
}

.users>.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  background: rgba(14, 14, 14, 0.675);
  padding: 30px 20px;
  border-radius: 10px;
  width: fit-content;
}

.users>.items>.item {
  /* flex: 1 auto; */
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #bebebe;
  /* width: fit-content; */
}

.users>.items>.item>span {
  color: var(--color);
}

.users>.items>.item b {
  font-weight: 500;
  font-size: 12px;
}

.watchlist-stats__bar {
  margin: 0 !important;
  margin-bottom: 10px !important;
}

.new-profile__watch-list {
  padding-top: 30px;
}

.modal {
  border-radius: 15px;
  padding: 30px;
  background: var(--background);
  color: var(--color-text);
  max-width: 600px;
  /* actions */
}

.modal .closed {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  color: var(--color-text);
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.modal .closed:hover {
  opacity: 0.8;
}

.modal .setting {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal .control,
.modal .control-textarea {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal .control label,
.modal .control-textarea label {
  font-size: 16px;
  font-weight: 400;
}

.modal .control-check,
.modal .form-check-label {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.modal .sb {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.modal button[type=submit] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px;
  border-radius: 8px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
}

.modal button[type=submit]:hover {
  opacity: 0.8;
}

.modal input[type=text],
.modal input[type=password],
.modal input[type=file],
.modal select,
.modal textarea {
  background: transparent;
  border: none;
  margin: 0;
  border: 1px solid var(--menu-border);
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  width: 100%;
  /* height: 34px; */
  border-radius: 7px;
  outline: none;
}

.modal input[type=text]:focus,
.modal input[type=password]:focus,
.modal input[type=file]:focus,
.modal select:focus,
.modal textarea:focus {
  border: 1px solid var(--color);
}

.modal input[type=file]::file-selector-button {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--menu-border);
  outline: none;
  font-size: 12px;
  font-weight: 300;
  padding: 7px 13px;
  border-radius: 5px;
  margin-right: 10px;
}

.modal select option {
  color: #000;
}

.modal .fancybox-button {
  display: none !important;
}

.modal input[type=checkbox] {
  --primary-color: var(--color);
  --secondary-color: var(--background);
  --primary-hover-color: var(--color);
  /* checkbox */
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: var(--menu-border);
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  /* checkmark */
  --checkmark-size: 1.2;
}

.modal input[type=checkbox],
.modal input[type=checkbox] *,
.modal input[type=checkbox] *::before,
.modal input[type=checkbox] *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.modal input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.modal input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
  transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.modal input[type=checkbox]::before {
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--color-active);
  border-bottom: 2px solid var(--color-active);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

.modal input[type=checkbox]:hover {
  border-color: var(--primary-color);
}

.modal input[type=checkbox]:checked {
  color: var(--color-active);
  background: var(--primary-color);
  border-color: transparent;
}

.modal input[type=checkbox]:checked::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.modal input[type=checkbox]:active:not(:checked)::after {
  -webkit-transition: none;
  -o-transition: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: none;
  opacity: 1;
}

li {
  list-style-type: none;
}

.rd {
  color: var(--color);
}

#add-comm-form {
  display: none;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comments>.title {
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.comments>.title>b {
  color: var(--color);
}

.comments textarea {
  resize: none;
}

.comments ol,
.comments li {
  padding: 0;
  margin: 0;
}

.comments ol.comments-tree-list>li>ol.comments-tree-list {
  display: none;
}

.comments .reply-toggle {
  display: flex;
  width: fit-content;
  margin: 5px 10px 0 10px;
  font-size: 12px;
  color: var(--color);
  transition: 0.2s ease-in-out;
}

.comments .reply-toggle:hover {
  opacity: 0.8;
}

.comments .add-comments {
  position: relative;
}

.comments .message {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  background: var(--background-category);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.comments .message textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  align-content: center;
}

.comments .message textarea::placeholder {
  font-family: var(--fonts);
}

.comments .message button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  /* padding: 15px; */
  border-radius: 8px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
  font-size: 16px;
  cursor: pointer;
}

.comments .message button:hover {
  opacity: 0.8;
}

.comments .list-comments {
  padding: 0 10px;
  margin-top: -10px;
  --avatars: clamp(36px, 5vw, 48px);
  --dops: 0px;
}

.comments .list-comments .coms {
  margin-left: calc((var(--avatars) + 10px));
  margin-top: 20px;
}

.comments .list-comments .coms.ch {
  margin-left: calc((var(--avatars) + 10px) * 2);
}

.comments .list-comments textarea {
  font-size: 14px;
  font-weight: 400;
  align-content: center;
}

.comments .list-comments .comment {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  width: 100%;
}

.comments .list-comments .comment.child {
  padding-inline-start: calc(var(--avatars) + 10px);
}

.comments .list-comments .comment .avatar {
  border-radius: 50%;
  overflow: hidden;
  width: var(--avatars);
  height: var(--avatars);
  min-width: var(--avatars);
  min-height: var(--avatars);
}

.comments .list-comments .comment .avatar img {
  width: 100%;
  width: 100%;
  object-fit: cover;
}

.comments .list-comments .comment .com {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.comments .list-comments .comment .drops .set {
  cursor: pointer;
}

.comments .list-comments .comment .drops .list>a {
  padding: 7px 7px;
  font-size: 14px;
}

.comments .list-comments .comment .information {
  padding: 15px;
  border-radius: 10px;
  border: 1px solid var(--menu-border);
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  --inform-color: var(--color-text);
}

.comments .list-comments .comment .information.admin {
  --inform-color: #cf3d3d;
  border-left: 3px solid var(--inform-color);
}

.comments .list-comments .comment .information.moder {
  --inform-color: #39c444;
  border-left: 3px solid var(--inform-color);
}

.comments .list-comments .comment .information.premium {
  --inform-color: #dac23a;
  border-left: 3px solid var(--inform-color);
}

.comments .list-comments .comment .information>span {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.comments .list-comments .comment .information>span>a {
  color: var(--inform-color);
}

.comments .list-comments .comment .information>span>a:hover {
  color: var(--inform-color);
  opacity: 0.8;
}

.comments .list-comments .comment .information>span>b {
  font-size: 12px;
  color: var(--text-copyright);
}

.comments .list-comments .comment .information>small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-copyright);
}

.comments .list-comments .comment .information>small>b>span {
  font-size: 12px;
  font-weight: 400;
  /* color: var(--text-copyright)!important; */
}

.comments .list-comments .comment .information>.text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.025rem;
  word-break: break-word;
  color: var(--anime-full-descr);
}

.comments .list-comments .comment .information>.text .comments-edit-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comments .list-comments .comment .information>.text .save-buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.comments .list-comments .comment .information>.text .save-buttons input {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px !important;
  border-radius: 8px !important;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: var(--color-active);
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
  font-size: 12px !important;
  margin: 0 !important;
  cursor: pointer;
}

@media (max-width: 768px) {
  .comments .list-comments .comment .information>.text .save-buttons input {
    flex: 1 auto;
    order: 1;
  }

  .comments .list-comments .comment .information>.text .save-buttons input:first-child {
    order: 2;
  }
}

.comments .list-comments .comment .information>.text .save-buttons input:first-child {
  color: var(--color-text);
  background-color: transparent;
  border: 1px solid var(--menu-border);
}

.comments .list-comments .comment .btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 10px;
}

.comments .list-comments .comment .btn>.left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
}

.comments .list-comments .comment .btn>.left>span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-copyright);
}

.comments .list-comments .comment .btn>.right {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.comments .list-comments .comment .btn>.right a {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.comments .list-comments .comment .btn>.right a>span {
  font-size: 12px;
}

.mass_comments_action {
  display: none;
}

.ui-dialog::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.725);
  z-index: -1;
}

#dlecomplaint {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal .auth {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}

.modal .auth .title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.modal .auth .auth-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal .auth .auth-content .btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.modal .auth .auth-content .link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
}


.genre .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 24px;
  font-weight: 700;
  /* margin-bottom: 20px; */
  color: var(--color-text);
  line-height: 1.25;
}

.genre .title>i {
  font-size: 18px;
}

.genre a.title:hover {
  gap: 8px;
  opacity: 0.8;
}

.genre .subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--text-copyright);
  line-height: 1.25;
}

.genre .items {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(6, 1fr);
}

@media screen and (max-width: 991px) {
  .genre .items {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .genre .items {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 460px) {
  .genre .items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.genre .items>.item {
  position: relative;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  border-radius: 10px;
  padding: 0px;
}

.genre .items>.item>.responsive {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.genre .items>.item>.responsive>.img {
  position: relative;
  padding-top: 190%;
  max-width: 100%;
  width: 100%;
  filter: grayscale(0) brightness(40%) contrast(90%);
  transition: 0.2s ease-in-out;
}

.genre .items>.item>.responsive>.img>img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

.genre .items>.item>.responsive>.head {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 3px;
  color: var(--color-active);
  font-size: 12px;
}

.genre .items>.item>.responsive>.head>.name {
  font-size: 14px;
  font-weight: 500;
}

.genre .items>.item>.responsive>.head>.realesed {
  color: #a7a7a7;
}

.genre .items>.item>.responsive:hover .img {
  /* filter: grayscale(0) brightness(40%) contrast(70%); */
  transform: scale(1.05);
}

.p0 {
  padding: 0;
}


.content .searched {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  background: var(--background-category);
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.content .searched input {
  width: 100%;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  align-content: center;
  margin: 0 !important;
}

.content .searched input:focus {
  border: 0px solid #fff;
}

.content .searched input::placeholder {
  font-family: var(--fonts);
}

.content .searched button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  /* padding: 15px; */
  border-radius: 13px;
  letter-spacing: 0.125rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
  font-size: 16px;
  cursor: pointer;
  line-height: 0;
}

.content .searched button:hover {
  opacity: 0.8;
}

.filters {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
}

.filters>.responsive {
  width: 100%;
}

.filters>.filter {
  display: block;
  /* flex-direction: column;
  gap: 10px; */
  min-width: clamp(300px, 30vw, 430px);
  width: clamp(300px, 30vw, 430px);
  max-width: 100%;
  height: fit-content;
  transition: 0.2s ease-in-out;
}

.filters>.filter .btn {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  /* padding: 0 25px; */
  padding-top: 10px;
}

.filters>.filter .btn button {
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  justify-content: center;
  padding: 13px 17px;
  border-radius: 16px;
  letter-spacing: 0.075rem;
  background-color: var(--color);
  color: #fff;
  width: fit-content;
  outline: none;
  border: 0;
  transition: 0.2s ease-in-out;
  font-size: 14px;
  cursor: pointer;
}

.filters>.filter .btn button:last-child {
  border: 1px solid var(--filter-hr);
  background: transparent;
  color: var(--color-text);
}

.filters>.filter .btn button:hover {
  opacity: 0.8;
}

.filters>.filter>form {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--background-category);
  /* box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); */
  box-shadow: var(--animelist-shadow);
  transition: 0.2s ease-in-out;
  width: 100%;
}

.filters>.filter>form .tail-select {
  width: 100%;
}

.filters>.filter .control-filter {
  display: flex;
  flex-direction: column;
  /* gap: 5px; */
  color: var(--color-text);
  line-height: 1.25;
  padding: 35px 25px;
  border-bottom: 1px solid var(--filter-hr);
}

.filters>.filter .control-filter:nth-last-child(2) {
  border: 0px;
}

.filters>.filter .control-filter>span:not(.irs) {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 3px;
}

.filters>.filter .control-filter>small {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-copyright);
  letter-spacing: 0.0425rem;
}

.filters>.filter .control-filter>*:last-child,
.filters>.filter .control-filter>.irs {
  margin-top: 10px;
}

.filters>.filter .control-filter .tail-select .select-label {
  background: var(--background);
  color: var(--color-text);
  border: 1px solid var(--menu-border);
  border-radius: 7px;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-height: 40px;
  align-content: center;
}

.filters>.filter .control-filter .tail-select .select-dropdown .dropdown-search {
  border-color: var(--filter-hr);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.filters>.filter .control-filter .tail-select input[type=text]:focus {
  color: var(--color);
}

.filters>.filter .control-filter .tail-select-container .select-handle {
  background-color: var(--background-category);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 400;
}

.filters>.filter .control-filter .tail-select-container .select-handle:hover {
  color: var(--color-active);
  background-color: var(--color);
}

.filters>.filter .control-filter .tail-select.active .select-label,
.filters>.filter .control-filter .tail-select.idle .select-label,
.filters>.filter .control-filter .tail-select:hover .select-label {
  -webkit-box-shadow: none;
  box-shadow: none;
  /* border: 1px solid var(--color); */
}
.filters>.filter .control-filter .tail-select.active .select-label,
.filters>.filter .control-filter .tail-select.idle .select-label {
  border: 1px solid var(--color);
}


.filters>.filter .control-filter .tail-select:active .select-label {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.filters>.filter .control-filter .label-count {
  display: none;
}

.filters>.filter .control-filter .select-dropdown {
  margin-top: 10px;
  background: var(--background);
  color: var(--color-text);
  border: 1px solid var(--menu-border);
  border-radius: 7px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.filters>.filter .control-filter .dropdown-option {
  color: var(--color-text);
}

.filters>.filter .control-filter .dropdown-option:hover,
.filters>.filter .control-filter .dropdown-option.selected {
  background: var(--color);
  color: var(--color-active);
}

.filters>.filter .control-filter .dropdown-option:hover:before,
.filters>.filter .control-filter .dropdown-option.selected:before {
  content: none;
}

.filters>.filter .control-filter .irs-bar {
  background: var(--color);
}

.filters>.filter .control-filter .irs--round .irs-handle {
  border: 4px solid var(--color);
  background-color: var(--color);
}

.filters>.filter .control-filter .irs--round .irs-from,
.filters>.filter .control-filter .irs--round .irs-single,
.filters>.filter .control-filter .irs--round .irs-to {
  background-color: var(--color);
  color: var(--color-active);
}

.filters>.filter .control-filter .irs--round .irs-from::before,
.filters>.filter .control-filter .irs--round .irs-single::before,
.filters>.filter .control-filter .irs--round .irs-to::before {
  border-top-color: var(--color);
}

.filters>.filter .control-filter .irs--round .irs-line {
  background-color: var(--background);
}

.filters>.filter .control-filter .check {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.filters>.filter .control-filter .check>label {
  user-select: none;
  position: relative;
  color: var(--color-text);
}

.filters>.filter .control-filter .check>label input[type=checkbox] {
  z-index: -1;
  opacity: 0;
  display: block;
  width: 0;
  height: 0;
}

.filters>.filter .control-filter .check>label span {
  display: inline-flex;
  cursor: pointer;
  padding: 0px 15px;
  line-height: 35px;
  border: 1px solid var(--filter-hr);
  border-radius: 8px;
  transition: 0.2s ease-in-out;
}

.filters>.filter .control-filter .check>label input[type=checkbox]:checked+span {
  background: var(--color);
  border: 1px solid var(--color);
  color: var(--color-active);
}

.filters>.filter .control-filter .focused span {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-rgb));
  /* Hover */
}

.filters>.filter .control-filter .check>label:hover {
  opacity: 0.8;
  /* Active */
}

.filters>.filter .control-filter .check>label input[type=checkbox]:active:not(:disabled)+span {
  opacity: 0.7;
  background: var(--color);
  border: 1px solid var(--color);
  color: var(--color-active);
}
[filter]{
  .is-hide{
    display: block;
  }
  .is-show{
    display: none;
  }
    &.hidden {
        .is-hide {
          display: block;
        }
    
        .is-show {
          display: none;
        }
    }
  @media screen and (min-width: 991px){
  .is-hide {
      display: none;
    }
  
    .is-show {
      display: block;
    }
    &.hidden {
        .is-hide {
          display: block;
        }
    
        .is-show {
          display: none;
        }
    }
  }
}
.filters>.filter{
  .closed{
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .filters>.filter {
    display: none;
    position: fixed;
    right: 0;
    top: 65px;
    border-radius: 0;
    bottom: 0;
    height: calc(100% - 65px);
    background: var(--background-category);
    overflow: auto;
    min-width: auto;
    width: clamp(280px, 80vw, 360px);
    border-left: 1px solid var(--filter-hr2);

   .closed {
      display: none;
      outline: 0;
      border: none;
      background: transparent;
      color: var(--color-text);
      font-size: 20px;
      height: 40px;
      width: 40px;
      position: absolute;
      right: 0;
   }

    >form{
      border-radius: 0;
      box-shadow: none;
      /* height: 100%; */
      /* overflow: auto; */
    }
    .btn{
      justify-content: flex-start;
      flex-wrap: wrap;
      border-top: 1px solid var(--filter-hr);
      /* padding-top: 35px;
      padding-bottom: 35px; */
      padding: 35px 25px;
      background: var(--background-category);
      >*{
        flex: 1 auto;
      }
    }
    &::after{
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .625);
      z-index: -1;
    }
  }

  body.hidden{
    overflow: hidden;
  }

}

.filters{
  .pages{
    .prev, .next{
      display: none;
    }
  }
}
.animelist{
  .errors{
    border-radius: 20px!important;
  }
}