@charset "UTF-8";
select {
  display: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: var(--main-text-color);
}
a:hover {
  color: var(--main-purple-color);
}

.link {
  color: var(--secondary-purple-color);
}

textarea {
  color: var(--main-text-color);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  outline: none;
}

.row {
  margin-left: auto;
  margin-right: auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  box-sizing: border-box;
}

.col.l12 {
  width: 100%;
  margin-left: auto;
  left: auto;
  right: auto;
}

.text-center {
  text-align: center;
}

.secondary-text {
  color: var(--secondary-text-color);
  font-size: 13px;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.w-100 {
  width: 100%;
}

.info-text {
  font-size: 15px;
  color: var(--main-text-color);
}

.not-found {
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.not-found img {
  width: 150px;
}

.you-blocked {
  margin: 17px 0;
}
.you-blocked i {
  font-size: 25px;
  margin-right: 10px;
  padding: 5px;
  background: var(--red-color);
  color: white;
  border-radius: 50%;
}
.you-blocked .info-text {
  display: flex;
  align-items: center;
  line-height: 20px;
}

.title-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-column__left {
  margin-right: 10px;
}

@media (min-width: 720px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 10px;
    background: hsla(0deg, 0%, 55%, 0.2);
  }
  ::-webkit-scrollbar-thumb {
    background: hsla(0deg, 0%, 55%, 0.7);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
}
.description {
  color: var(--secondary-text-color);
  margin-bottom: 25px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 48px;
}

.ul-list {
  padding: 0;
}
.ul-list li {
  list-style: none;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 23px;
}
.ul-list span {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.tg-button {
  display: flex;
  margin-bottom: 10px;
  background: #40b3e0;
  color: white;
  border-radius: 20px;
  font-size: 13px;
  align-items: center;
  padding: 8px 12px;
  text-align: center;
}
.tg-button:hover {
  background: #5cc2ea;
  color: white;
}
.tg-button svg {
  width: 25px;
  height: 25px;
  margin-right: 7px;
}
.tg-button--center {
  font-size: 13px;
  text-align: center;
  margin: 15px 0 10px;
  max-width: 360px;
}
.tg-button-wrapper {
  display: flex;
  justify-content: center;
}

.header {
  background: var(--light-bg);
  z-index: 51;
}
.header .container {
  display: flex;
  padding-top: 15px;
  padding-bottom: 10px;
  align-items: center;
}
.header__link {
  color: var(--main-text-color);
  margin-right: 25px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding-bottom: 10px;
  font-size: 15px;
  position: relative;
}
@media screen and (max-width: 920px) {
  .header__link.header__link--hidden {
    display: none;
  }
}
.header__link-sub {
  position: absolute;
  top: 26px;
  background: var(--light-bg);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  white-space: nowrap;
  transition: all 0.3s;
}
.header__link-sub a {
  padding: 10px 5px;
}
.header__link--more {
  position: relative;
  margin-left: 25px;
  cursor: pointer;
}
.header__link--more:hover .header__link-sub {
  display: flex;
}
.header__link-label {
  position: absolute;
  top: 2px;
  right: -35px;
  background-color: #9671ff;
  font-size: 10px;
  color: white;
  padding: 2px 3px;
  border-radius: 4px;
  font-weight: 600;
}
.header__link:not(.active-link):not(.header__link--more):hover {
  opacity: 0.7;
}
.header__link:last-of-type {
  margin-right: 0;
}
.header__link--active {
  border-bottom: 3px solid var(--main-purple-color);
}
.header__menu {
  display: flex;
  margin-top: 6px;
}
@media screen and (max-width: 900px) {
  .header__menu {
    display: none;
  }
}
.header__controls {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header__item {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.header__item i {
  font-size: 24px;
}
@media screen and (max-width: 600px) {
  .header__item i {
    font-size: 23px;
    font-weight: 300;
  }
}
.header__item:hover {
  background: var(--medium-bg);
  border-radius: 10px;
  color: var(--main-text-color);
}
@media screen and (max-width: 380px) {
  .header__item {
    padding: 3px;
  }
}
.header-profile {
  width: 45px;
  height: 45px;
  margin-right: 0;
  position: relative;
}
.header-profile--label::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 29px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--red-color);
  border: 2px solid white;
  display: block;
}
.header-profile img {
  border-radius: 50%;
}
@media screen and (max-width: 380px) {
  .header-profile {
    width: 40px;
    height: 40px;
  }
}
.header__burger {
  display: none;
  margin-right: 10px;
  font-size: 24px;
  padding: 5px;
  line-height: 21px;
}
@media screen and (max-width: 900px) {
  .header__burger {
    display: block;
  }
}
@media screen and (max-width: 500px) {
  .header__burger {
    font-size: 23px;
  }
}
@media screen and (max-width: 350px) {
  .header__burger {
    margin-right: 4px;
  }
}
.header__mobile-menu {
  position: fixed;
  width: 85%;
  max-width: 295px;
  left: 0;
  top: 65px;
  margin: 0;
  height: calc(100% + 60px);
  height: -moz-calc(100%);
  padding-bottom: 140px;
  background-color: var(--light-bg);
  z-index: 50;
  overflow-y: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateX(-105%);
  list-style: none;
  padding-left: 0;
  border-top: 1px solid var(--border-color);
  transition: all 0.35s ease-in-out;
}
@media screen and (min-width: 380px) {
  .header__mobile-menu {
    top: 70px;
  }
}
.header__mobile-menu-show {
  height: unset !important;
}
.header__mobile-menu-show span {
  display: flex;
  align-items: center;
}
.header__mobile-menu-show span i {
  font-size: 22px;
  color: var(--icons-color);
  margin-right: 8px;
}
.header__mobile-menu-show-item {
  display: none;
  padding-left: 0;
  list-style: none;
}
.header__mobile-menu-show-icon {
  margin-left: auto;
  font-size: 20px !important;
}
.header__mobile-menu li {
  height: 48px;
  line-height: 48px;
  padding: 0 32px 0 20px;
  position: relative;
}
.header__mobile-menu li a {
  display: flex;
  align-items: center;
  color: var(--main-text-color);
}
.header__mobile-menu li a i {
  font-size: 22px;
  color: var(--icons-color);
  margin-right: 8px;
}
.header__mobile-menu .new-link::before {
  content: "";
  height: 9px;
  width: 9px;
  background: var(--red-color);
  border-radius: 50%;
  position: absolute;
  top: 13px;
  left: 37px;
  border: 2px solid var(--light-bg);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 49;
  display: none;
}

.header-notifications {
  position: relative;
}
.header-notifications__count {
  position: absolute;
  top: 3px;
  right: -4px;
  border-radius: 36%;
  background-color: #fc363b;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px !important;
  font-weight: 500;
  font-family: "exo 2", sans-serif;
  width: 18.5px;
  height: 15px;
}
@media screen and (max-width: 382px) {
  .header-notifications__count {
    top: 0;
    right: -5px;
  }
}

.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.pagination__button {
  border-radius: var(--secondary-border-radius);
  margin: 0 5px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination__button a {
  line-height: normal;
  padding: 11px 12px;
  font-size: 15px;
  color: #777;
}
.pagination__button a:hover {
  color: #333;
}
.pagination__button:not(.pagination__button--active):hover {
  background-color: #f2f2f2;
}
.pagination__button--active {
  background-color: rgba(135, 78, 221, 0.1490196078);
  font-weight: 500;
}
.pagination__button--active a {
  color: var(--secondary-purple-color);
}

.comments__image img, .comments__image video {
  width: 130px;
  border-radius: 10px;
  margin: 10px 0;
}
.comments__sort-controls {
  display: flex;
  margin-bottom: 15px;
}
.comments__change-sort {
  margin-right: 20px;
  padding: 10px 0;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  color: var(--main-text-color);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.comments__change-sort--active {
  border-bottom: 3px solid var(--purple-btn-bg);
}
.comments__pinned {
  background: var(--purple-btn-bg);
  color: white;
  padding: 3px 4px;
  border-radius: 4px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.comments__pinned i {
  margin-right: 2px;
  margin-top: 2px;
  font-size: 14px;
}
.comments__send-form-image {
  position: relative;
  width: 80px;
  height: 80px;
}
.comments__send-form-image-close {
  position: absolute;
  top: -4px;
  right: -5px;
  background: var(--grey-background);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  z-index: 99;
}
.comments__send-form-image-close i {
  margin-top: 2px;
}
.comments__send-form-image img, .comments__send-form-image video {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  width: 100%;
  height: 100%;
}
.comments__premium-logo {
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  height: 15px;
  line-height: 15px;
  border-radius: 13px;
  padding: 0 5px;
  margin-left: 5px;
}
.comments__premium-logo:hover {
  color: #fff !important;
}
.comments__list {
  margin-top: 15px;
}
.comments__list .comments__close-form-btn,
.comments__list .comments__cancel-edit {
  display: block;
}
.comments__list .comments__send-form {
  margin-top: 10px;
}
.comments__to {
  margin-bottom: 10px;
  color: var(--main-text-color);
}
.comments__to a {
  color: var(--purple-btn-bg);
}
.comments__sticker {
  margin-top: 18px;
  width: 84px;
  cursor: pointer;
}
.comments__status {
  width: 14px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
  margin-top: 1px;
  margin-left: 1px;
}
.comments__status[data-name=PRO] {
  width: 30px;
}
.comments__status[data-name=PRO] img {
  border-radius: 6px;
  -o-object-fit: contain;
     object-fit: contain;
}
.comments__summon-list {
  display: flex;
  margin-bottom: 10px;
}
.comments__summon-item {
  display: flex;
  margin-right: 5px;
  padding: 2px 10px;
  background: var(--purple-btn-bg);
  border-radius: 6px;
  font-size: 14px;
  color: white;
  cursor: pointer;
}
.comments__summon-item:after {
  content: "\e5cd";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  margin-left: 8px;
  margin-top: 3px;
}
.comments__item {
  margin-bottom: 6px;
  margin-left: -16px;
  transition: background 1s;
}
.comments__item--target > .comments__inner {
  background: rgba(72, 15, 188, 0.03);
}
.comments__item--new {
  background: rgba(72, 15, 188, 0.03);
}
@media only screen and (max-width: 700px) {
  .comments__item .comments__item .comments__item .comments__item .comments__children {
    margin-left: 0px !important;
    border-left: none;
  }
}
.comments__item .comments__item .comments__item .comments__item .comments__item .comments__item .comments__item .comments__children {
  margin-left: 0px !important;
  border-left: none;
}
.comments__inner {
  padding: 8px;
  margin-left: 8px;
  margin-bottom: 5px;
}
.comments__inner:hover .comments__rating-btn {
  opacity: 1;
}
.comments__header {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}
.comments__author {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comments__avatar {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  margin-left: 4px;
  position: relative;
  flex-shrink: 0;
}
.comments__avatar img {
  border-radius: 3px;
}
.comments__user {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.comments__name {
  color: var(--main-text-color);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.comments__date {
  color: var(--secondary-text-color);
  font-size: 13px;
  margin-top: 3px;
}
.comments__show-summon {
  font-size: 16px;
  line-height: 3px;
  margin-left: auto;
  color: var(--main-purple-color);
}
.comments__rating {
  display: flex;
  margin-left: auto;
  align-self: self-start;
}
.comments__rating-btn {
  opacity: 0;
}
@media screen and (max-width: 1000px) {
  .comments__rating-btn {
    opacity: 1;
    font-size: 15px;
    color: var(--secondary-text-color);
  }
}
.comments__rating-number {
  min-width: 35px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  margin: 0;
  line-height: 19px;
  border-radius: 2px;
}
@media screen and (max-width: 1000px) {
  .comments__rating-number {
    min-width: 30px;
  }
}
.comments__rating-number-wrapper {
  width: 35px;
  height: 25px;
  margin: 0 12px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .comments__rating-number-wrapper {
    width: 30px;
    margin: 0 10px;
  }
}
.comments__rating-number--green {
  background-color: var(--rating-bg-green);
  color: #0a1;
}
.comments__rating-number--grey {
  color: #595959;
}
.comments__rating-number--red {
  color: #cd192e;
  background-color: var(--rating-bg-red);
}
.comments__body {
  font-size: 15px;
  line-height: 20px;
  overflow-wrap: break-word;
}
.comments__body-summons {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}
.comments__body-summons a:not(:last-child):after {
  content: ",";
  margin-right: 5px;
}
.comments__body-summons-title {
  margin-right: 5px;
  color: var(--secondary-text-color);
}
.comments__body tgs-player {
  width: 84px;
  height: 84px;
  margin-top: 18px;
}
.comments__footer {
  display: flex;
  margin-top: 7px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.comments__children {
  position: relative;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}
.comments__children:hover .comments__collapse {
  display: block;
}
.comments__collapse {
  position: absolute;
  top: 0;
  left: -1px;
  width: 16px;
  height: 100%;
  cursor: pointer;
  border-left: 2px solid transparent;
  display: none;
}
.comments__collapse:hover {
  border-left-color: var(--main-purple-color);
}
.comments__controls-btn {
  margin-left: 8px;
  margin-top: 3px;
  display: flex;
  align-items: center;
}
.comments__controls-btn i {
  font-size: 22px;
  line-height: 3px;
}
.comments .comments__send-form {
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  padding: 15px;
}
.comments .comments__send-form textarea {
  resize: none;
  border: none;
  outline: none;
  width: 100%;
  height: 3rem;
  background-color: transparent;
  min-height: 70px;
}
.comments .comments__send-form--mini {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 15px;
}
.comments .comments__send-form--mini textarea {
  max-height: 22px;
  min-height: unset;
  cursor: pointer;
  overflow: hidden;
}
.comments .comments__send-form--mini .comments__actions-buttons {
  display: none;
}
.comments .comments__actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.comments .comments__actions-list {
  display: flex;
}
.comments .comments__actions-buttons {
  display: flex;
  margin-left: auto;
}
.comments .comments__actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  background-color: var(--medium-bg);
  cursor: pointer;
  margin-right: 7px;
}
.comments .comments__actions-btn:nth-last-of-type {
  margin-right: 0;
}
.comments .comments__actions-btn--sticker {
  color: #5fbb90;
}
.comments .comments__actions-btn--spoiler {
  color: #447;
}
.comments .comments__actions-btn:hover {
  opacity: 0.5;
}
.comments__reply-btn:hover {
  color: var(--main-text-color);
}
.comments__close-form-btn, .comments__cancel-edit {
  margin-right: 10px;
  display: none;
  color: var(--secondary-text-color);
}
.comments__close-form-btn:hover, .comments__cancel-edit:hover {
  color: var(--main-text-color);
}
.comments__children-open {
  color: var(--secondary-text-color);
  margin-left: 16px;
  cursor: pointer;
}
.comments__children-open:hover {
  color: var(--secondary-purple-color);
}
.comments__load-more {
  cursor: pointer;
  margin: 15px 0;
  display: flex;
  align-items: center;
}
.comments__load-more i {
  margin-left: 5px;
  margin-top: 4px;
}
.comments__load-more:hover {
  color: var(--main-text-color);
}

.tippy-box[data-theme~=comments-rating] {
  background-color: unset;
}

.rating-info {
  top: 30px;
  left: 5px;
  padding: 3px 0;
  width: 180px;
  max-height: 270px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--light-bg);
  font-size: 0.85em;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}
.rating-info__user {
  display: flex;
  align-items: center;
  padding: 8px;
}
.rating-info__user:hover {
  background-color: var(--seconday-bg-color);
}
.rating-info__avatar {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  flex-shrink: 0;
}
.rating-info__name {
  color: var(--main-text-color);
  font-size: 1.2em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.rating-info__color--like {
  color: var(--green-color);
}
.rating-info__color--dislike {
  color: var(--red-color);
}

.comments-summon input {
  border: 1px solid var(--border-color);
  border-radius: var(--main-border-radius);
  padding: 5px 10px;
  outline: none;
}
.comments-summon input:focus {
  border-color: var(--main-purple-color);
}
.comments-summon input::-moz-placeholder {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.comments-summon input::placeholder {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.comments-summon__item {
  display: flex;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}
.comments-summon__item:hover {
  color: var(--main-purple-color);
}
.comments-summon__item img {
  margin-right: 5px;
  width: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 3px;
}

.comments--profile-page .comments__item {
  border-bottom: 1px solid var(--border-color);
}

.modal-tenor__header {
  display: flex;
  margin-top: 25px;
  margin-bottom: 20px;
}
.modal-tenor__input {
  width: 100%;
  margin-right: 10px;
}
.modal-tenor__input input {
  width: 100%;
  border: 1px solid transparent;
  background: var(--medium-bg);
  padding: 9px 10px;
  border-radius: var(--main-border-radius);
  outline: none;
  color: var(--main-text-color);
}
.modal-tenor__input input:active, .modal-tenor__input input:focus {
  border: 1px solid var(--main-purple-color);
}
.modal-tenor__result {
  display: flex;
  justify-content: space-between;
  margin: 0 -10px !important;
  position: relative;
  overflow: auto;
  height: 300px;
}
.modal-tenor__result img {
  width: 100%;
  height: auto;
  margin-right: 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.modal-tenor__result video {
  width: 92%;
  height: auto;
  margin: 0 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.modal-tenor__column {
  margin: 0 5px;
}

.modal-tenor__load-trigger {
  display: none;
}

.modal-tenor__load-trigger[data-next]:not([data-next=""]) {
  display: block;
}

#modal-tenor {
  z-index: 19999;
}

.comments-alert {
  width: 100%;
  background: var(--purple-btn-bg);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  cursor: pointer;
}
.comments-alert::after {
  content: "\e5cd";
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  font-size: 18px;
}

.reader {
  background: var(--grey-background);
}
.reader__notification {
  background: var(--light-bg);
  position: fixed;
  overflow: hidden;
  width: 300px;
  padding: 15px;
  z-index: 1200;
  transition: transform 0.3s;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  top: 11px;
  border-radius: 16px;
}
.reader__notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.reader__notification-icon {
  background: var(--red-color);
  color: white;
  width: 26px;
  height: 26px;
  font-size: 18px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.reader__notification-body {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  color: var(--secondary-text-color);
  display: inline;
}
.reader__notification-title {
  font-size: 15px;
}
.reader__wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 750px;
  padding: 0 20px;
  justify-content: center;
}
.reader__wrapper-controls a {
  margin-left: 10px;
}
.reader__wrapper--finish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}
.reader__wrapper--finish > div {
  font-size: 28px;
  margin-bottom: 15px;
  color: var(--secondary-text-color);
}
.reader__wrapper--finish a {
  display: inline-flex;
}
@media screen and (min-width: 900px) {
  .reader--comments-open {
    padding-right: 350px;
  }
}
.reader--comments-open .reader-menu {
  display: none;
}
.reader__container {
  padding-top: 90px;
}
.reader__header {
  display: flex;
  align-items: center;
  background: var(--light-bg);
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding: 15px 10px 10px 10px;
  z-index: 1200;
  transition: transform 0.3s;
}
@media screen and (max-width: 900px) {
  .reader__header {
    align-items: start;
  }
  .reader__header .logo {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .reader__header--hide {
    transform: translate(0%, -100%);
  }
}
.reader__pages {
  background: var(--grey-background);
  max-width: 750px;
  margin: 0 auto;
}
.reader__item {
  min-height: 178px;
}
.reader__item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.reader__chapters {
  font-size: 15px;
  color: var(--main-text-color);
  margin: 0 4px;
  cursor: pointer;
}
.reader__controls {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}
@media screen and (max-width: 900px) {
  .reader__controls {
    flex-direction: column;
    margin-left: auto;
  }
}
.reader__controls-name {
  font-size: 15px;
  margin-right: 15px;
  color: var(--main-text-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 900px) {
  .reader__controls-name {
    max-width: 185px;
    margin-right: 0;
  }
}
.reader__controls .navigate-button {
  display: flex;
  align-items: center;
  color: var(--icons-color);
  font-size: 20px;
  padding: 3px 1px;
  border-radius: var(--main-border-radius);
}
.reader__controls .navigate-button:hover {
  background: var(--grey-background);
}
.reader__controls-wrapper {
  display: flex;
  align-items: center;
}
.reader__footer {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
@media screen and (max-width: 900px) {
  .reader__footer-p {
    padding-top: 70px;
  }
}
.reader__footer a:first-of-type {
  margin-right: 10px;
}
.reader__footer a:hover {
  color: white;
}
@media screen and (max-width: 358px) {
  .reader__footer .button {
    padding: 9px 8px;
    font-size: 13px;
  }
}
.reader__show-comments-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader__show-comments-btn i {
  margin-right: 5px;
}

.reader-menu {
  top: 0;
  right: 12px;
  width: 92px;
  height: 100%;
  display: table;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  text-align: center;
  padding: 60px 8px 0;
  -webkit-box-sizing: border-box;
  transition: bottom 0.5s;
}
.reader-menu .menu--bookmark {
  width: 160px;
}
@media screen and (max-width: 900px) {
  .reader-menu {
    left: 0;
    right: 0;
    bottom: 0;
    top: unset;
    width: 100%;
    height: 54px;
    padding: 0;
  }
}
@media screen and (max-width: 900px) {
  .reader-menu--hide {
    bottom: -100%;
  }
}
.reader-menu__wrapper {
  display: table-cell;
  vertical-align: middle;
}
.reader-menu__inner {
  padding: 10px 5px;
  background-color: var(--light-bg);
  border-radius: var(--main-border-radius);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 900px) {
  .reader-menu__inner {
    flex-direction: row;
    padding: 6px;
    display: flex;
    justify-content: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.reader-menu__page {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 20px;
}
.reader-menu__item {
  padding: 5px;
  margin-bottom: 5px;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 900px) {
  .reader-menu__item {
    margin-bottom: 0;
    padding: 5px 10px;
  }
}
@media screen and (max-width: 355px) {
  .reader-menu__item {
    margin-bottom: 0;
    padding: 5px 7px;
  }
}
.reader-menu__item i {
  font-size: 24px;
  color: var(--icons-color);
}
@media screen and (max-width: 900px) {
  .reader-menu__item i {
    font-size: 22px;
  }
}
.reader-menu__item--page {
  font-size: 15px;
  margin-bottom: 15px;
  max-width: 54px;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--page {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
.reader-menu__item--comment {
  position: relative;
}
.reader-menu__item--comment .reader-menu__item--label {
  transition: transform 0.5s;
}
.reader-menu__item--comment .reader-menu__item--label-new {
  transform: scale(1.5);
}
.reader-menu__item--like {
  font-size: 12px;
  color: var(--main-text-color);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--like {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .reader-menu__item--like i {
    margin-right: 4px;
  }
}
.reader-menu__item--label {
  position: absolute;
  top: 0;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 2px;
  color: var(--white-color);
  font-size: 9px;
  background: var(--purple-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
@media screen and (max-width: 900px) {
  .reader-menu__item--label {
    right: 4px;
  }
}
.reader-menu__item--active {
  color: var(--purple-btn-bg);
}
.reader-menu__item--active i {
  color: var(--purple-btn-bg);
}
.reader-menu__item:not(.reader-menu__item--page):hover {
  background: var(--grey-background);
}

.reader-chapters {
  list-style: none;
  padding: 0;
}
.reader-chapters__server {
  margin-bottom: 20px;
}
.reader-chapters__server-title {
  margin-bottom: 15px;
}
.reader-chapters__create-card .button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-chapters__create-card .button i {
  margin-right: 5px;
  font-size: 20px;
}
.reader-chapters__item {
  padding: 10px 15px;
  font-size: 16px;
  margin-bottom: 5px;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  color: var(--main-text-color);
}
.reader-chapters__item:not(.reader-chapters__item--active):hover {
  background-color: var(--medium-bg);
  color: var(--main-text-color);
}
.reader-chapters__item--active {
  background-color: var(--purple-btn-bg);
  color: white !important;
}

.reader-comments {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0 15px;
  height: 100%;
  max-width: 100%;
  z-index: 9999;
  width: 400px;
  border-left: 1px solid var(--border-color);
  background: var(--light-bg);
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 900px) {
  .reader-comments {
    width: 100%;
  }
}
.reader-comments__close {
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reader-chapters-theme {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.reader-chapters-theme button {
  width: 40px;
  height: 40px;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
}
.reader-chapters-theme button i {
  font-size: 20px;
}
.reader-chapters-theme button:hover {
  color: var(--purple-btn-bg);
}

.button-telegram {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}
.button-telegram i {
  margin-right: 5px;
  font-size: 20px;
}

@media screen and (max-width: 900px) {
  body.reader-popup {
    overflow: hidden;
  }
}

.b-manga-reader .header__mobile-menu {
  top: 73px !important;
}

.popup:before, .popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup {
  z-index: 1300;
  flex-direction: column;
  align-items: center;
  display: none;
}
.popup__body {
  position: relative;
}
.popup__close {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
  cursor: pointer;
}
.popup__content {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  will-change: transform;
  background: var(--light-bg);
  color: var(--main-text-color);
  z-index: 1400;
  transition: 0.3s ease;
  padding: 20px;
}
.popup:before {
  content: "";
  margin: -100px;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
  transition: opacity 0.3s ease;
}

.popup--chapters-select .popup__content {
  max-width: 520px;
}

.dropdown__content {
  display: none;
}
.dropdown__trigger {
  cursor: pointer;
}

.tippy-box[data-theme=dropdown],
.tippy-box[data-theme=select-page] {
  background-color: var(--light-bg);
  color: var(--main-text-color);
  border-radius: 4px;
  text-align: left;
  pointer-events: auto;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
  max-width: none !important;
}

.tippy-box[data-theme=select-page] {
  max-height: 300px;
  overflow-y: auto;
}

.menu {
  display: flex;
  flex-direction: column;
}
.menu--bookmark {
  width: 232px;
}
.menu--profile {
  width: 260px;
}
.menu__inner {
  background: var(--medium-bg);
  border-radius: 10px;
  margin: 5px 0;
}
.menu__item {
  padding: 8px 13px;
  color: var(--main-text-color);
  display: flex;
  align-items: center;
  border-radius: var(--main-border-radius);
  position: relative;
}
.menu__item i {
  margin-right: 7px;
  font-size: 17px;
}
.menu__item:not(.menu__item--active):hover {
  background-color: var(--medium-bg);
}
.menu__item-label {
  background-color: var(--red-color);
  color: white;
  display: inline-block;
  margin-left: 8px;
  padding: 1px 4px;
  font-size: 12px;
  border-radius: 7px;
  min-width: 18px;
  text-align: center;
}
.menu__item--active {
  background-color: var(--main-purple-color);
  color: white;
}
.menu__item--hide {
  display: none;
}
.menu__item--warning {
  color: var(--red-color);
}
.menu__item--new::after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: var(--red-color);
  top: 7px;
  left: 27px;
  border-radius: 50%;
}
.menu__divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: 5px 0;
}
.menu__header {
  display: flex;
  align-items: center;
  padding: 8px 13px;
}
.menu__rating {
  padding: 7px 13px;
  width: 100%;
}
.menu__rating-header, .menu__rating-footer {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.menu__rating-header div:first-of-type {
  color: var(--main-text-color);
}
.menu__rating-header div:last-of-type span:first-of-type {
  color: var(--main-text-color);
}
.menu__rating-header div:last-of-type span:last-of-type {
  color: var(--secondary-text-color);
}
.menu__rating-footer div:first-of-type {
  color: var(--secondary-text-color);
}
.menu__rating-footer div:last-of-type {
  color: var(--main-text-color);
}
.menu__rating-bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.menu__rating-bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.menu__avatar {
  width: 35px;
  height: 35px;
  margin-right: 13px;
  flex-shrink: 0;
}
.menu__avatar img {
  border-radius: 50%;
}
.menu__name {
  font-weight: 500;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.menu__balance {
  font-weight: 500;
  font-size: 12px;
}
.menu__balance .diamond {
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

.bookmark {
  margin-top: 20px;
  display: flex;
}
.bookmark__wrapper {
  width: 280px;
  margin-bottom: 20px;
  margin-right: 20px;
}
@media screen and (max-width: 750px) {
  .bookmark__wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .bookmark {
    flex-direction: column;
  }
}
.bookmark label {
  display: none;
}
.bookmark.mass-edit label {
  display: block;
}
.bookmark.mass-edit .bookmark__manga-image::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: var(--main-border-radius);
}
.bookmark__right {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bookmark__right .dropdown {
  margin-top: 10px;
  margin-bottom: -10px;
}
.bookmark__manga {
  display: flex;
  height: auto;
  align-items: center;
  margin-top: 20px;
}
.bookmark__manga-container {
  position: relative;
}
.bookmark__manga-container label {
  position: absolute;
  top: 8px;
  left: 6px;
}
.bookmark__manga-score {
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 4px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark__manga-score--green {
  background: var(--green-color);
}
.bookmark__manga-score--red {
  background: var(--red-color);
}
.bookmark__manga-score--grey {
  background-color: #aaa;
}
.bookmark__manga-image {
  display: block;
  padding-top: 150%;
  position: relative;
  background-size: cover;
  background-position: 50%;
  width: 70px;
  background-color: var(--medium-bg);
  overflow: hidden;
  border-radius: 4px;
}
.bookmark__manga-image:hover {
  opacity: 0.7;
}
@media screen and (max-width: 600px) {
  .bookmark__manga-image {
    width: 60px;
  }
}
.bookmark__manga-info {
  margin-right: 10px;
  margin-left: 12px;
}
.bookmark__manga-name {
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 750px) {
  .bookmark__manga-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.bookmark__manga-chapter {
  font-size: 14px;
  color: var(--secondary-text-color);
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.bookmark__manga-chapter span {
  display: inline-block;
  padding: 2px 4px;
  background-color: var(--red-color);
  color: var(--white-color);
  border-radius: var(--main-border-radius);
  font-size: 10px;
  margin-left: 5px;
}
@media screen and (max-width: 550px) {
  .bookmark__manga-chapter span {
    display: none;
  }
}
.bookmark__manga-right {
  display: flex;
  margin-left: auto;
  align-items: center;
}
.bookmark__manga-controls {
  display: flex;
}
.bookmark__manga-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: var(--main-border-radius);
  font-size: 24px;
  color: var(--icons-color);
  margin-right: 5px;
}
.bookmark__manga-controls button:last-of-type {
  margin-right: 0;
}
.bookmark__manga-controls button:hover {
  background-color: var(--medium-bg);
}
@media screen and (max-width: 550px) {
  .bookmark__manga-controls button {
    font-size: 20px;
  }
}
.bookmark__manga-date {
  font-size: 14px;
  color: var(--secondary-text-color);
  display: flex;
  line-height: 20px;
  margin-right: 40px;
}
@media screen and (max-width: 550px) {
  .bookmark__manga-date {
    display: none;
  }
}
.bookmark__manga-date i {
  font-size: 20px;
  margin-right: 5px;
}

.bookmark-group-update--active {
  color: var(--red-color);
}

.modal-bookmark-edit__controls {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.modal-bookmark-edit__remove-btn {
  color: var(--red-color) !important;
  display: flex;
  align-items: center;
}
.modal-bookmark-edit__remove-btn i {
  font-size: 20px;
  margin-right: 6px;
}

.modal-bookmark-folder-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.modal-bookmark-folder-item i {
  font-size: 22px;
}
.modal-bookmark-folder-item div:first-of-type {
  display: flex;
  align-items: center;
}
.modal-bookmark-folder-item div:first-of-type i {
  margin-right: 5px;
}
.modal-bookmark-folder-delete {
  color: var(--red-color) !important;
  background: transparent !important;
}

.bookmark-folder-controls {
  display: flex;
}
.bookmark-folder-controls button {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button:first-of-type i {
    margin-right: 5px;
  }
}
.bookmark-folder-controls button:last-of-type {
  margin-right: 0;
}
.bookmark-folder-controls button i {
  margin-right: 5px;
  font-size: 22px;
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button i {
    margin-right: 0;
    font-size: 22px;
  }
}
@media screen and (max-width: 750px) {
  .bookmark-folder-controls button span {
    display: none;
  }
}

.modal-bookmark-folder-create__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-bookmark-folder-create .switch {
  margin-right: 45px;
  margin-bottom: 0;
}

.bookmark-label {
  position: absolute;
  right: 15px;
  top: 10px;
  display: inline-flex;
  box-sizing: border-box;
  height: 20px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  margin-top: 0;
  text-transform: lowercase;
  letter-spacing: 0;
  color: #fff;
  z-index: 2;
  max-width: 117px;
  overflow: hidden;
}
.bookmark-label--reading {
  background-color: #ea003d;
  box-shadow: 0 4px 12px rgba(234, 0, 61, 0.4);
}
.bookmark-label--will-read {
  background-color: #00a5ff;
  box-shadow: 0 4px 12px rgba(0, 165, 255, 0.4);
}
.bookmark-label--read {
  background-color: #ff542e;
  box-shadow: 0 4px 12px rgba(255, 84, 46, 0.4);
}
.bookmark-label--abandon {
  background-color: #312b45;
  box-shadow: 0 4px 12px rgba(49, 43, 69, 0.4);
}
.bookmark-label--favourite {
  background-color: #73a32f;
  box-shadow: 0 4px 12px rgba(115, 163, 47, 0.4);
}
.bookmark-label--undefined {
  background: #1f1f1f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bookmark-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 71px;
  background: #1c1c1e;
  color: #ddd;
  z-index: 1005;
  display: none;
}
.bookmark-header__container {
  display: flex;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}
.bookmark-header__left {
  display: flex;
  align-items: center;
}
.bookmark-header__left button:hover {
  opacity: 0.8;
}
.bookmark-header__right {
  margin-left: auto;
  display: flex;
}
.bookmark-header__right button {
  margin-right: 15px;
}
.bookmark-header__right button i {
  display: none;
}
@media screen and (max-width: 450px) {
  .bookmark-header__right button i {
    font-size: 22px;
    display: block;
  }
  .bookmark-header__right button span {
    display: none;
  }
}
.bookmark-header__right button:hover {
  opacity: 0.8;
}
.bookmark-header__right button:last-of-type {
  margin-right: 0;
}
.bookmark-header__status-text {
  font-weight: 500;
  margin-right: 15px;
}
.bookmark-header__select-all-btn {
  color: hsla(0deg, 0%, 100%, 0.6);
}

.twitter-typeahead {
  display: flex !important;
  width: 100%;
}

.twitter-typeahead pre {
  height: 35px;
}

.twitter-typeahead .tt-menu {
  width: 100%;
  margin-top: 5px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.4);
  color: var(--main-text-color);
  padding: 10px 0;
  line-height: 27px;
}

.suggestion__item, .suggestion__empty {
  display: flex;
  padding: 10px 15px;
  color: var(--main-text-color);
}
.suggestion__name {
  line-height: 21px;
}
.suggestion__image {
  width: 35px;
  height: 35px;
  margin-right: 12px;
  flex-shrink: 0;
}
.suggestion__image img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.suggestion__rating {
  margin-left: auto;
  font-weight: 500;
  margin-right: 5px;
  font-size: 14px;
}
.suggestion__info {
  display: flex;
  align-items: center;
  width: 100%;
}
.suggestion__info-item {
  margin-right: 5px;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  overflow-y: auto;
}
.modal--open {
  display: flex;
}
.modal--fixed-bottom {
  top: unset;
  padding-bottom: 0;
}
.modal--fixed-bottom .modal__inner {
  max-width: 768px;
  width: 100%;
}
.modal--fixed-bottom .modal__content {
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal .secondary-title {
  margin-top: 0;
}
.modal--search {
  padding-top: 9px;
}
.modal--search .modal__inner {
  margin-top: 0px;
}
.modal--search .modal__body {
  overflow-y: unset;
  padding: 0;
}
.modal--search .modal__content {
  width: 600px;
  border-radius: 16px;
}
.modal__inner {
  max-width: 92vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.modal__content {
  position: relative;
  z-index: 1120;
  background: var(--light-bg);
  color: var(--main-text-color);
  width: 500px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.modal__header {
  position: relative;
  padding: 20px 24px 0;
}
.modal__title {
  margin: 0;
  padding-right: 30px;
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.modal__close {
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 12px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}
.modal__close:hover {
  opacity: 0.7;
}
.modal__body {
  padding: 24px;
  overflow-y: auto;
}
.modal::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -100px;
  z-index: 1101;
  background: rgba(0, 0, 0, 0.6);
}

.search-bar {
  padding: 20px;
}
.search-bar__controls {
  margin-bottom: 15px;
}
.search-bar__controls button {
  border-radius: 10px;
  margin-right: 10px;
}
.search-bar__controls button:last-of-type {
  margin-right: 0;
}
.search-bar__switch {
  position: absolute;
  top: 5px;
  right: 35px;
  height: 28px;
  background: var(--dark-grey-bg);
  text-align: left;
  padding: 4px;
  border-radius: 13px;
  display: flex;
  width: 75px;
  cursor: pointer;
}
@media only screen and (max-width: 350px) {
  .search-bar__switch {
    width: 65px;
  }
}
.search-bar__switch--active .search-bar__switch-item {
  left: 16px;
}
.search-bar__switch-item {
  background: var(--light-bg);
  font-size: 13px;
  border-radius: 13px;
  padding: 3px 7px 4px;
  transition: all 0.4s;
  position: absolute;
  left: 5px;
  top: 3px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  width: 53px;
  text-align: center;
}
@media only screen and (max-width: 350px) {
  .search-bar__switch-item {
    width: 45px;
    font-size: 12px;
    padding: 4px 6px 5px;
  }
}
.search-bar__container {
  display: flex;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}
.search-bar__input {
  height: 38px;
  line-height: 38px;
  border: 0;
  background: var(--light-bg);
  color: var(--main-text-color);
  padding-left: 38px;
  padding-right: 38px;
  border-radius: 16px;
  width: 100%;
  outline: none;
}
@media only screen and (max-width: 350px) {
  .search-bar__input::-moz-placeholder {
    font-size: 13px;
  }
  .search-bar__input::placeholder {
    font-size: 13px;
  }
}
.search-bar__left {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--main-text-color);
  font-size: 18px;
  padding: 10px;
  z-index: 2;
}
.search-bar__right {
  position: absolute;
  top: 0;
  right: 0;
  padding: 11px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--secondary-text-color);
}
.search-bar__history {
  margin-top: 16px;
  padding: 0 12px;
}
.search-bar__history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--secondary-text-color);
  border-radius: 10px;
}
.search-bar__history-item:hover {
  background-color: var(--medium-bg);
  color: var(--main-text-color);
  cursor: pointer;
}
.search-bar__title {
  font-size: 16px;
  font-weight: 500;
  margin: 30px 0 10px;
  padding: 0 12px;
}
.search-bar__hot {
  background-color: var(--medium-bg);
  border-radius: 16px;
  color: var(--secondary-text-color);
  margin-right: 5px;
  margin-bottom: 6px;
  padding: 5px 13px;
  font-size: 14px;
}
.search-bar__hot:hover {
  color: var(--main-text-color);
}

.search-result {
  display: none;
}
.search-result__title {
  margin: 0 0 20px 32px;
}
.search-result__list {
  padding-bottom: 20px;
}
.search-result__more {
  padding: 8px 32px;
  display: block;
  color: var(--purple-btn-bg);
}
.search-result__item {
  display: flex;
  align-items: center;
  padding: 8px 32px;
  margin-bottom: 2px;
}
.search-result__item:hover {
  background: hsla(0deg, 0%, 55%, 0.1);
  color: var(--main-text-color);
}
.search-result__empty {
  margin-left: 30px;
  font-size: 13px;
}
.search-result__image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
}
.search-result__image img {
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.modal-report {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.modal-report textarea {
  width: 100%;
  resize: none;
}

#modal-manga-rating .modal__body {
  padding: 10px 0;
}

#modal-comment-report {
  z-index: 9999;
}

.search {
  display: flex;
  align-items: center;
}
.search input {
  border: 1px solid transparent;
  background: var(--medium-bg);
  font-size: 15px;
  height: 44px;
  border-radius: var(--main-border-radius);
  margin-right: 10px;
  padding: 0 10px;
  width: 100%;
  outline: var(--main-purple-color);
  color: var(--main-text-color);
}
.search input:focus, .search input:active {
  border-color: var(--main-purple-color);
}
.search input::-moz-placeholder {
  font-size: 15px;
  color: var(--secondary-text-color);
}
.search input::placeholder {
  font-size: 15px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 345px) {
  .search input::-moz-placeholder {
    font-size: 12px;
  }
  .search input::placeholder {
    font-size: 12px;
  }
}
.search button {
  height: 44px;
  font-size: 12px;
}
.search button i {
  font-size: 18px;
  margin-right: 5px;
}
@media screen and (max-width: 345px) {
  .search button i {
    font-size: 16px;
    margin-right: 4px;
  }
}

.search form {
  width: 100%;
}

.like-button {
  border: none;
  background: none;
  border-radius: 40px;
  padding: 0.45rem 0.75rem;
  color: #878787;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: grayscale(100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.like-button:hover {
  border-color: currentColor;
}

.like-button.liked {
  color: #ff6e6f;
  border-color: currentColor;
  filter: grayscale(0);
}

.like-icon {
  width: 18px;
  height: 16px;
  display: inline-block;
  position: relative;
  margin-right: 0.25em;
  font-size: 1.5rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
}

.liked .like-icon {
  animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon [class^=heart-animation-] {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 14px;
  opacity: 0;
}

.liked .like-icon [class^=heart-animation-]::before, .liked .like-icon [class^=heart-animation-]::after {
  content: "";
  background: inherit;
  background-size: 100%;
  width: inherit;
  height: inherit;
  display: inherit;
  position: relative;
  top: inherit;
  left: inherit;
  opacity: 0;
}

.liked .like-icon .heart-animation-1 {
  animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::before, .liked .like-icon .heart-animation-1::after {
  width: 12px;
  height: 10px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-1::before {
  opacity: 0.6;
  animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::after {
  animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.75;
}

.liked .like-icon .heart-animation-2 {
  animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-2::before, .liked .like-icon .heart-animation-2::after {
  width: 10px;
  height: 8px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-2::before {
  animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.25;
}

.liked .like-icon .heart-animation-2::after {
  animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.4;
}
@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
@keyframes heartUnlike {
  50% {
    transform: scale(0.75);
  }
}
@keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg);
  }
}
@keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0);
  }
  50% {
    opacity: 0.9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1);
  }
}
@keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg);
  }
}
@keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg);
  }
}
@keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg);
  }
  100% {
    transform: translate(-50px, 0);
  }
}
@keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }
  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg);
  }
}
.favourite-send-btn {
  position: relative;
}
.favourite-send-btn.elem-animation > svg {
  opacity: 0;
}
.favourite-send-btn .favourite-btn--active {
  display: none;
}
.favourite-send-btn .favourite-btn--not-active {
  display: inline-block;
}
.favourite-send-btn.active .favourite-btn--active {
  display: inline-block;
}
.favourite-send-btn.active .favourite-btn--not-active {
  display: none;
}
.favourite-send-btn .a-lottie {
  position: absolute;
  z-index: 1;
  width: 37px;
  top: -4px;
  left: 50%;
  transform: translate(-50%, 0);
  padding-right: 1px;
}

.favourite-btn--active,
.favourite-btn--not-active {
  width: 22px;
  fill: transparent;
  color: var(--icons-color);
  margin-bottom: 2px;
  flex-shrink: 0;
}

.manga__poster .favourite-btn--active,
.manga__poster .favourite-btn--not-active {
  margin-bottom: 0;
}
.manga__poster .a-lottie {
  top: -1px;
}

.chapters__like-btn .a-lottie {
  transition: unset;
  left: 11px;
  top: -7px;
  width: 36px;
  padding-right: 0;
}

.manga__favourite-btn .a-lottie {
  padding-right: 0;
}

.modal-product__like .a-lottie {
  top: 2px;
}

.reader-menu__inner .a-lottie {
  top: -2px;
}
@media screen and (max-width: 900px) {
  .reader-menu__inner .a-lottie {
    top: -3px;
    left: 3px;
    transform: none;
  }
}

.collection__user-like > svg {
  margin-bottom: 0;
}
.collection__user-like .a-lottie {
  padding-right: 0;
  top: 2px;
}

.app-svg {
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
}

.catalog {
  display: flex;
  justify-content: space-between;
}
.catalog__left {
  width: 75%;
  flex-grow: 1;
}
.catalog__right {
  width: 25%;
  margin-left: 20px;
}
@media screen and (max-width: 850px) {
  .catalog__right {
    display: none;
    margin-left: 0;
  }
}
.catalog__right.popup {
  display: block;
  margin-left: 0;
  width: 100%;
}
.catalog__right.popup form {
  padding-bottom: 350px;
}
.catalog__right form.popup__content {
  max-width: 400px;
}
@media screen and (max-width: 600px) {
  .catalog__right form.popup__content {
    max-width: 280px;
  }
}
.catalog__right-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: 5px;
  margin-bottom: 15px;
}
.catalog__right-header .small-title {
  margin: 0;
}
.catalog__right-clear-button {
  display: flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
}
.catalog__chapters {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.catalog__chapters input {
  display: none;
}
.catalog__chapters span {
  padding: 4px 7px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  font-size: 14px;
  color: var(--secondary-text-color);
}
.catalog__chapters input:checked ~ span {
  background-color: var(--purple-btn-bg);
  color: white;
}
.catalog__chapters label {
  margin-right: 3px;
  cursor: pointer;
  margin-bottom: 7px;
}
.catalog .cards__item {
  width: 16.6%;
}
@media screen and (max-width: 1200px) {
  .catalog .cards__item {
    width: 20%;
  }
}
@media screen and (max-width: 985px) {
  .catalog .cards__item {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .catalog .cards__item {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .catalog .cards__item {
    width: 50%;
  }
}

.mobile-show-filter {
  display: none;
}
@media screen and (max-width: 850px) {
  .mobile-show-filter {
    display: inline-block;
  }
}

.tabs--center {
  display: flex;
  justify-content: center;
}
.tabs__nav {
  display: flex;
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs__item {
  margin-right: 20px;
  padding: 10px;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  color: var(--main-text-color);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.tabs__item[disabled] {
  color: #b7b7b7;
  cursor: default;
}
.tabs__item:not([disabled]):hover {
  color: var(--purple-btn-bg);
}
.tabs__item--label-new {
  position: relative;
}
.tabs__item--label-new::after {
  position: absolute;
  content: "";
  top: 7px;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--red-color);
  border-radius: 50%;
}
.tabs__item--active {
  border-color: var(--purple-btn-bg);
}
.tabs__item:last-of-type {
  margin-right: 0;
}
.tabs__page {
  display: none;
}
.tabs__page--active {
  display: block;
}

.profile__header {
  display: flex;
}
.profile__controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  z-index: 3;
}
.profile__controls a, .profile__controls button {
  opacity: 0.7;
  margin-bottom: 5px;
  color: white;
}
.profile__controls a:hover, .profile__controls button:hover {
  opacity: 1;
}
.profile__gift-item {
  width: 85px;
  margin-right: 15px;
  cursor: pointer;
  border-radius: 20px;
  background: var(--medium-bg);
}
.profile__about {
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 15px;
  word-wrap: break-word;
}
.profile__cover {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}
.profile__wrapper {
  z-index: 5;
}
.profile__avatar {
  width: 100px;
  height: 100px;
  margin-right: 25px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 550px) {
  .profile__avatar {
    width: 60px;
    height: 60px;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.profile__avatar img {
  border-radius: var(--main-border-radius);
}
.profile__background {
  width: 100%;
  height: 320px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--main-border-radius);
  /*box-shadow: inset 0 0 0 1000px rgba(0,0,0,60%);*/
  padding: 40px;
  color: white;
  margin-bottom: 20px;
  display: flex;
  position: relative;
}
.profile__background::after {
  content: "";
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}
@media screen and (max-width: 550px) {
  .profile__background::after {
    width: 100%;
    background-image: -webkit-linear-gradient(top, transparent, rgba(37, 29, 52, 0.7882352941));
    background-color: transparent;
  }
}
@media screen and (max-width: 550px) {
  .profile__background {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.profile__name {
  font-size: 40px;
  font-weight: 600;
  z-index: 2;
  margin-bottom: 10px;
  position: relative;
}
@media screen and (max-width: 550px) {
  .profile__name {
    font-size: 30px;
    text-align: center;
  }
}
.profile__info {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.profile__info-moderator {
  color: #22b722;
}
@media screen and (max-width: 550px) {
  .profile__info {
    flex-direction: column;
  }
}
.profile__info-footer {
  display: inline-flex;
  flex-direction: column;
  width: 250px;
}
.profile__info-footer a {
  width: 100%;
}
.profile__info--ignore-btn {
  cursor: pointer;
  margin-bottom: 10px;
}
.profile__info span {
  margin-right: 4px;
}
.profile__info-label {
  display: block;
  height: 20px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  margin-left: 5px;
}
@media screen and (max-width: 550px) {
  .profile__info-label {
    margin-top: 10px;
  }
}
.profile__info-label-type--user {
  background-color: #ff542e;
  box-shadow: 0 4px 12px rgba(255, 84, 46, 0.4);
  color: white;
}
.profile__info-label-type--admin {
  background-color: #ea003d;
  box-shadow: 0 4px 12px rgba(234, 0, 61, 0.4);
  color: white;
}
.profile__info-label-type--moderator {
  background-color: #22b722;
  box-shadow: 0 4px 12px rgba(131, 239, 116, 0.4);
  color: white;
}
.profile__title {
  display: flex;
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  margin-bottom: 20px;
}
.profile__title a {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--secondary-purple-color);
  margin-left: auto;
}
.profile__title i {
  margin-left: 2px;
  margin-top: 3px;
}
.profile__middle {
  display: flex;
  justify-content: space-between;
}
.profile__middle-right {
  width: 48%;
}
@media screen and (max-width: 1100px) {
  .profile__middle-right {
    width: 100%;
  }
}
.profile__middle-left {
  width: 48%;
}
@media screen and (max-width: 1100px) {
  .profile__middle-left {
    width: 100%;
  }
}
@media screen and (max-width: 1320px) {
  .profile__middle {
    flex-direction: column;
  }
}
.profile__activity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media screen and (max-width: 1320px) {
  .profile__activity {
    flex-wrap: unset;
    overflow-y: scroll;
  }
}
.profile__activity-item {
  border-radius: var(--main-border-radius);
  width: 215px;
  background: var(--medium-bg);
  margin-bottom: 10px;
  flex-shrink: 0;
}
@media screen and (max-width: 1400px) {
  .profile__activity-item {
    width: 200px;
  }
}
@media screen and (max-width: 1320px) {
  .profile__activity-item {
    margin-right: 15px;
  }
  .profile__activity-item:last-of-type {
    margin-right: 0;
  }
}
.profile__activity-image {
  height: 100px;
  width: 100%;
  display: block;
}
.profile__activity-image img {
  border-top-left-radius: var(--main-border-radius);
  border-top-right-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.profile__activity-middle {
  border-bottom: 2px solid var(--light-bg);
}
.profile__activity-name {
  display: block;
  font-size: 15px;
  color: var(--main-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}
.profile__activity-footer {
  display: flex;
  padding: 10px;
}
.profile__activity-percent {
  font-size: 13px;
  margin-left: 10px;
  flex-shrink: 0;
}
.profile__activity-bar {
  height: 13px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.profile__activity-bar--fill {
  background: var(--purple-btn-bg);
  height: 13px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
  color: var(--secondary-purple-color);
}
.profile__user-activity {
  margin-bottom: 20px;
}
.profile__user-activity-bar {
  height: 10px;
  background-color: #505050;
  border-radius: 4px;
}
.profile__user-activity-bar--active {
  width: 44%;
  height: 100%;
  background-color: var(--purple-btn-bg);
  border-radius: 4px;
}
.profile__cuts {
  position: relative;
  z-index: 2;
}
.profile__cut {
  top: 0px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  margin: 0 0 0 -6px;
  position: absolute;
}
.profile__user-activity-times {
  display: flex;
}
.profile__user-activity-time {
  width: 20%;
  text-align: center;
  font-size: 0.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
}
@media screen and (max-width: 550px) {
  .profile__user-activity-time span {
    display: none;
  }
}
.profile__friends {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  overflow: unset;
  flex-wrap: wrap;
  /*&--full {
      overflow: unset;
      flex-wrap: wrap;
      .profile__friends-item {
          margin-bottom: 10px;
          position: relative;
          @media screen and (max-width: 700px) {
              width: 46%;
          }
          @media screen and (max-width: 400px) {
             width: 100%;
          }
      }
  }*/
}
@media screen and (max-width: 1030px) {
  .profile__friends {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 850px) {
  .profile__friends {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 650px) {
  .profile__friends {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 450px) {
  .profile__friends {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 550px) {
  .profile__friends {
    padding-bottom: 20px;
  }
}
.profile__friends-search-input {
  width: 100%;
}
.profile__friends-type {
  width: 15px !important;
  margin-right: 5px;
}
.profile__friends-item {
  display: flex;
  align-items: center;
  background: var(--medium-bg);
  margin-bottom: 2px;
  padding: 10px;
  border-radius: var(--main-border-radius);
  flex-shrink: 0;
  position: relative;
}
@media screen and (max-width: 550px) {
  .profile__friends-item {
    margin-bottom: 0;
  }
}
.profile__friends-item--online .profile__friends-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--green-color);
  border-radius: 50%;
  border: 2px solid var(--light-bg);
}
.profile__friends-avatar {
  width: 35px;
  height: 35px;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.profile__friends-avatar img {
  border-radius: var(--main-border-radius);
}
.profile__friends-name {
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: flex;
  max-height: 20px;
}
.profile__friends-time {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}

.week {
  left: 10%;
}

.month {
  left: 30%;
}

.month_3 {
  left: 50%;
}

.month_6 {
  left: 70%;
}

.year {
  left: 90%;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.18);
  border-radius: 0 !important;
}

.main-profile--mobile {
  background: var(--light-bg) !important;
  padding-top: 0 !important;
}

.mobile-profile__header {
  margin: 0 -10px;
  position: relative;
}
.mobile-profile__background {
  height: 213px;
}
.mobile-profile__background-image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.mobile-profile__background .profile__cover {
  max-height: 213px;
  border-radius: 0;
}
.mobile-profile__avatar {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100px;
  height: 100px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
}
.mobile-profile__avatar img {
  border-radius: var(--main-border-radius);
}
.mobile-profile__wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  margin-top: -30px;
  padding: 75px 10px 20px;
  position: relative;
  z-index: 5;
  margin-bottom: 15px;
}
.mobile-profile__name {
  font-weight: 600;
  font-size: 30px;
  margin-top: 5px;
  text-align: center;
  position: relative;
}
.mobile-profile__status {
  display: flex;
  justify-content: center;
  margin-top: 7px;
  font-size: 14px;
}
.mobile-profile__status img {
  margin-left: 5px;
  width: 18px;
}
.mobile-profile__status--pro {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  height: 18px;
  line-height: 17px;
  border-radius: 13px;
  padding: 0 8px;
  font-size: 14px;
  width: 40px;
  margin: 0 auto;
  margin-top: 10px;
}
.mobile-profile__online {
  font-size: 13px;
  margin-top: 7px;
  color: var(--secondary-text-color);
  text-align: center;
}
.mobile-profile__stat {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.mobile-profile__column {
  width: 33.3%;
  text-align: center;
}
.mobile-profile__column div:first-of-type {
  font-size: 16px;
  font-weight: 600;
}
.mobile-profile__column div:last-of-type {
  font-size: 12px;
  color: var(--secondary-text-color);
}
.mobile-profile__controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mobile-profile__controls a {
  margin-right: 10px;
}
.mobile-profile__gift-btn {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 1px 8px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.mobile-profile__gift-btn i {
  margin-top: 1px;
}

.friends-controls {
  display: flex;
  flex-direction: column;
}
.friends-controls--mobile {
  margin-left: 10px;
  flex-direction: row;
}
.friends-controls--mobile button {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 1px 8px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
  box-sizing: border-box;
  font-size: 22px;
}
.friends-controls--mobile button:first-of-type {
  margin-right: 10px;
}
.friends-controls--mobile button i {
  margin-top: 6px;
}

.gifts {
  display: flex;
  justify-content: space-between;
}

.modal-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-gift__image {
  width: 150px;
  margin-bottom: 10px;
}
.modal-gift__name {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.modal-gift__text {
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.modal[id=modal-user-info] {
  text-align: center;
}
.modal[id=modal-user-info] .profile__info {
  flex-direction: column !important;
}
.modal[id=modal-user-info] .profile__info-list {
  display: inline-flex;
  flex-direction: column;
  width: 250px;
}
.modal[id=modal-user-info] .profile__info-pro {
  display: flex;
}
.modal[id=modal-user-info] .profile__info-pro span:first-of-type {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  height: 21px;
  line-height: 17px;
  border-radius: 13px;
  padding: 0 8px;
  font-size: 14px;
  width: 45px;
  margin-right: 5px;
}
.modal[id=modal-user-info] .profile__info-pro span:last-of-type {
  color: var(--main-text-color);
}
.modal[id=modal-user-info] .profile__info-item {
  display: flex;
  padding: 8px 0;
  font-size: 13px;
  justify-content: space-between;
}
.modal[id=modal-user-info] .profile__info-type {
  flex-shrink: 0;
}
.modal[id=modal-user-info] .profile__info span {
  margin-bottom: 10px;
  font-size: 15px;
}
.modal[id=modal-user-info] .profile__info-links {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
.modal[id=modal-user-info] .profile__info a {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.modal[id=modal-user-info] .profile__info a:first-of-type {
  background: var(--medium-bg);
  margin-right: 10px;
}
.modal[id=modal-user-info] .profile__info button {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--medium-bg);
  color: var(--main-text-color);
}

.profile-cards {
  display: flex;
}
.profile-cards .manga-cards__item-wrapper {
  width: 180px;
  padding: 0 !important;
  margin-right: 10px;
}
@media screen and (max-width: 540px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 160px;
  }
}
@media screen and (max-width: 480px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 140px;
  }
}
@media screen and (max-width: 420px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 110px;
  }
}
@media screen and (max-width: 361px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 100px;
  }
}
@media screen and (max-width: 321px) {
  .profile-cards .manga-cards__item-wrapper {
    width: 92px;
  }
}
@media screen and (max-width: 400px) {
  .profile-cards .manga-cards__item {
    padding: 0 !important;
  }
}

.friend-controls__item {
  background: var(--light-bg);
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.friend-controls__item a {
  color: var(--main-purple-color);
  margin-left: 7px;
  font-weight: 500;
}
@media screen and (max-width: 580px) {
  .friend-controls__item a {
    margin-left: 0;
  }
}
@media screen and (max-width: 580px) {
  .friend-controls__item {
    flex-direction: column;
    align-items: center;
  }
}
.friend-controls__item:last-of-type {
  margin-bottom: 0;
}
.friend-controls__controls {
  margin-left: auto;
}
@media screen and (max-width: 580px) {
  .friend-controls__controls {
    margin-top: 15px;
    margin-left: 0;
  }
}

.card-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.owl-item .profile__friends-item {
  margin-right: 15px;
  width: 240px;
}

.collection-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
}
.collection-list__item {
  position: relative;
  width: 330px;
  height: 186px;
  display: block;
  transition: all 0.2s;
  margin-bottom: 10px;
}
.collection-list__item img {
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.collection-list__item::after {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgb(39, 38, 42) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 2;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.collection-list__item:hover {
  transform: translateY(-6px);
}
.collection-list__item:hover .collection-list__img:nth-of-type(1) {
  transform: translateY(4px);
}
.collection-list__item:hover .collection-list__img:nth-of-type(2) {
  transform: translateY(2px);
}
.collection-list__wrapper {
  position: relative;
  margin-bottom: 30px;
}
.collection-list__title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}
.collection-list__img {
  position: absolute;
  overflow: hidden;
  transition: all 0.2s;
}
.collection-list__img:nth-of-type(1) {
  position: absolute;
  top: -13px;
  left: 20px;
  right: 20px;
  bottom: 13px;
  opacity: 0.35;
}
.collection-list__img:nth-of-type(2) {
  position: absolute;
  top: -7px;
  left: 10px;
  right: 10px;
  bottom: 7px;
  opacity: 0.55;
}

.collection__views {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.collection__views i {
  color: var(--icons-color);
  margin-right: 5px;
}
.collection__user {
  display: flex;
  margin-bottom: 10px;
}
.collection__user-avatar {
  width: 110px;
  height: 110px;
  margin-right: 15px;
}
.collection__user-avatar img {
  border-radius: var(--main-border-radius);
}
.collection__user-name {
  font-weight: 600;
  font-size: 16px;
}
.collection__user-info {
  color: var(--secondary-text-color);
}
.collection__user-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.collection__user-like {
  color: var(--red-color);
}
.collection__user-controls {
  display: flex;
  align-items: center;
}
.collection__user-controls i {
  font-size: 22px;
}
.collection__user-controls .button {
  margin-right: 5px;
  padding: 9px 11px;
  height: 43px;
}
.collection__desc {
  font-size: 16px;
  color: var(--main-text-color);
  line-height: 22px;
  margin-bottom: 10px;
}
.collection__progress {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
@media screen and (max-width: 550px) {
  .collection__progress {
    flex-direction: column;
    align-items: start;
  }
}
.collection__progress span {
  flex-shrink: 0;
  margin-right: 20px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 550px) {
  .collection__progress span {
    display: block;
    margin-bottom: 10px;
  }
}
.collection__progress-bar {
  height: 22px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.collection__progress-bar-fill {
  background-color: rgba(135, 78, 221, 0.1490196078);
  height: 22px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
  color: var(--secondary-purple-color);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.collections {
  margin-bottom: 30px;
}

.collections .owl-item {
  padding-top: 10px;
}

@media screen and (max-width: 360px) {
  .collections.owl-carousel {
    margin: 0 -5px;
  }
}

.owl-carousel .collections__item {
  width: 327px;
  height: 186px;
}
@media screen and (max-width: 400px) {
  .owl-carousel .collections__item {
    margin-left: 6px;
    margin-right: 6px;
  }
}
@media screen and (max-width: 360px) {
  .owl-carousel .collections__item {
    width: 305px;
    height: 174px;
  }
}
@media screen and (max-width: 320px) {
  .owl-carousel .collections__item {
    width: 275px;
    height: 155px;
  }
}

.create-collection {
  display: flex;
}
.create-collection__left {
  flex-basis: 100%;
}
.create-collection__backgrounds {
  display: flex;
}
.create-collection__backgrounds img {
  width: 150px !important;
  margin: 10px;
  border-radius: var(--main-border-radius);
}
.create-collection__backgrounds--active {
  box-shadow: 0px 2px 8px 3px rgba(113, 0, 247, 0.47);
}
.create-collection__characters {
  display: flex;
}
.create-collection__characters img {
  width: 80px !important;
  margin: 10px;
}
.create-collection__characters--active {
  box-shadow: 0px 2px 8px 3px rgba(113, 0, 247, 0.47);
}
.create-collection__example {
  position: relative;
  margin-top: 50px;
}
.create-collection__example .collections__character {
  bottom: 0;
}
.create-collection__manga-list {
  margin-top: 15px;
}
.collections.owl-carousel {
  display: flex;
  flex-wrap: nowrap;
}

.collection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  margin-top: 20px;
}
@media screen and (max-width: 756px) {
  .collection-cards {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}
@media screen and (max-width: 350px) {
  .collection-cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.collection-cards__title {
  margin-bottom: 15px;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0 25px;
  text-align: center;
}
.collection-cards__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--light-bg);
  padding-top: 20px;
}
.collection-cards__item:hover {
  color: var(--main-text-color);
}
.collection-cards__item:hover .collection-cards__title {
  color: var(--main-purple-color);
}
.collection-cards__info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.collection-cards__info-item {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-right: 10px;
  font-size: 14px;
}
.collection-cards__info i {
  font-size: 17px;
  margin-right: 5px;
  color: var(--secondary-text-color);
}
.collection-cards__images {
  position: relative;
  height: 170px;
  margin-top: auto;
}
.collection-cards__image {
  bottom: -50px;
  width: 140px;
  left: 50%;
  margin-left: -70px;
  box-shadow: 0 0 0 3px #1c1c1c;
  position: absolute;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--light-bg);
}
@media screen and (max-width: 380px) {
  .collection-cards__image {
    width: 130px;
    margin-left: -63px;
  }
}
.collection-cards__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: opacity 0.15s ease-in;
}
.collection-cards__image:nth-of-type(1) {
  transform: rotate(-10deg) translate(-90px, -30px);
  box-shadow: none;
}
.collection-cards__image:nth-of-type(3) {
  transform: rotate(10deg) translate(90px, 20px);
}
.collection-cards__wrapper {
  position: relative;
  padding-top: 140%;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.collections.owl-carousel .collection-cards__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.collections.owl-carousel .collection-cards__images {
  height: 100px;
}
.collections.owl-carousel .collection-cards__image {
  width: 80px;
  bottom: -30px;
  margin-left: -40px;
}
.collections.owl-carousel .collection-cards__image:nth-of-type(1) {
  transform: rotate(-10deg) translate(-60px, -20px);
}
.collections.owl-carousel .collection-cards__image:nth-of-type(3) {
  transform: rotate(10deg) translate(60px, 10px);
}

.edit-list {
  margin-top: 20px;
}
.edit-list__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.edit-list__inner {
  display: flex;
}
.edit-list__info {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.edit-list__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.edit-list__img {
  width: 115px;
  margin-right: 20px;
  align-self: flex-start;
}
.edit-list__img img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.edit-list__textarea textarea {
  outline: none;
  border: none;
  background: var(--medium-bg);
  resize: none;
  height: 75px;
  width: 100%;
  padding: 10px 15px;
  border-radius: 6px;
}
.edit-list__del-btn {
  display: inline-flex;
  align-items: center;
  width: 180px;
  margin-top: 10px;
}
.edit-list__del-btn i {
  margin-right: 5px;
  font-size: 20px;
}
.edit-list__title {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--light-bg);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}
.edit-list__title i {
  font-size: 20px;
  margin-top: 7px;
}
.edit-list__title button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 10px;
}
.edit-list__name {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.admin-manga-link {
  position: fixed;
  right: 0;
  bottom: 10px;
  background: #8d8d8d;
  width: 15px;
  height: 15px;
}

#back-to-top {
  background-color: var(--light-bg);
  color: var(--main-text-color);
}
@media screen and (max-width: 700px) {
  #back-to-top {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #back-to-top svg {
    margin: 0;
  }
}

.b-manga-reader #back-to-top {
  display: none;
}

.loader {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  background: #FFF;
  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -24px 0 var(--secondary-purple-color), 24px 0 #FFF;
  }
  66% {
    background: var(--secondary-purple-color);
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 var(--secondary-purple-color);
  }
}
.value {
  position: absolute;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
}

.value-enter, .value-leave {
  transform: translateY(100%);
}

.value-leave-active {
  transform: translateY(-100%);
  opacity: 0;
}

.value-enter-active {
  transform: translateY(0);
}

.admin-panel {
  position: fixed;
  right: 0;
  top: 25%;
  display: flex;
  flex-direction: column;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
}
.admin-panel--left {
  left: 0;
  right: unset;
}
@media screen and (max-width: 500px) {
  .admin-panel--left {
    display: none;
  }
}
.admin-panel--left .admin-panel__tasks {
  left: unset;
  right: 100px;
}
.admin-panel--left .admin-panel__tasks--show {
  right: -310px;
}
.admin-panel__active-task, .admin-panel__err-task {
  font-size: 15px;
  padding: 2px;
}
.admin-panel__active-task {
  color: var(--green-color);
}
.admin-panel__err-task {
  color: var(--red-color);
}
.admin-panel__item {
  margin-bottom: 5px;
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-panel__item--remanga {
  color: #1976d2;
}
.admin-panel__tasks {
  position: absolute;
  top: 0;
  left: 100px;
  background: #f8f8f8;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  color: #202020;
  text-align: center;
  width: 300px;
  padding: 15px;
  border: 1px solid #e3e3e3;
  transition: left 0.5s;
}
.admin-panel__tasks--show {
  left: -310px;
}
.admin-panel__tasks input {
  margin-bottom: 5px;
}
.admin-panel__tasks-title {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.admin-panel label input {
  display: none;
}
.admin-panel label input:checked ~ span {
  background-color: var(--bg-inverse);
  color: white;
}
.admin-panel label span {
  background: var(--medium-bg);
  margin-bottom: 10px;
  color: var(--secondary-text-color);
  border-radius: 10px;
  padding: 5px 15px;
  font-size: 13px;
  display: block;
  cursor: pointer;
}

.chapter-history__name {
  line-height: 22px;
  font-size: 15px;
}
.chapter-history__item {
  display: flex;
}
.chapter-history__item:last-of-type .chapter-history__wrapper::before {
  display: none;
}
.chapter-history__type {
  position: relative;
}
.chapter-history__wrapper::before {
  background: var(--seconday-bg-color);
  content: "";
  height: 100%;
  left: 19px;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 0;
}
.chapter-history__icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--purple-btn-bg);
  color: white;
  border-radius: 50%;
  font-size: 20px;
  margin-right: 17px;
}
.chapter-history__content {
  margin-bottom: 25px;
}
.chapter-history__date {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.chapter-history a {
  font-weight: 500;
  color: var(--secondary-purple-color);
}

.chapters .search button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapters__load-more {
  margin-top: 15px;
}
.chapters__item {
  position: relative;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: var(--main-border-radius);
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 10px;
  color: var(--main-text-color);
}
.chapters__item:last-of-type {
  margin-bottom: 0;
}
.chapters__item:hover {
  background-color: var(--chapters-hover);
  color: var(--main-text-color);
}
.chapters__item:hover .chapters__value,
.chapters__item:hover .chapters__volume {
  color: var(--main-purple-color);
}
.chapters__item-mark {
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 5px;
  background-color: var(--light-bg);
  margin-left: auto;
}
.chapters__title {
  font-weight: 400;
  color: var(--main-text-color);
  font-size: 18px;
}
.chapters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}
.chapters__header button {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
}
.chapters__header button i {
  transform: rotate(90deg);
  font-size: 20px;
}
.chapters__header button:hover {
  color: var(--main-purple-color);
}
.chapters__volume, .chapters__value {
  margin-right: 5px;
}
.chapters__name {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 280px;
}
@media screen and (max-width: 600px) {
  .chapters__name {
    display: none;
  }
}
.chapters__add-date {
  margin-left: auto;
  color: var(--secondary-text-color);
}
.chapters__controls {
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
}
.chapters__controls i {
  margin-top: 2px;
}
.chapters__controls button {
  display: flex;
}
.chapters__seen {
  color: var(--main-text-color);
}
.chapters__like-btn {
  width: 50px;
  display: flex;
  align-items: center;
}
.chapters__like-btn span {
  font-size: 14px;
  margin-left: 3px;
}
.chapters__like-btn:hover i {
  color: var(--main-purple-color);
}

.chapter-search {
  margin-bottom: 10px;
}
.chapter-search input {
  overflow: visible;
}
.chapter-search input::-moz-placeholder {
  color: var(--main-text-color);
}
.chapter-search input::placeholder {
  color: var(--main-text-color);
}

body.isGuest .chapters__item:visited {
  background-color: var(--chapter-visited);
}

.rek {
  margin-bottom: 20px;
}
.rek__title {
  font-size: 13px;
  color: var(--secondary-text-color);
  text-align: center;
  margin-bottom: 5px;
}
.rek__title span {
  cursor: pointer;
  margin-left: 5px;
}
.rek--mt {
  margin-top: 10px;
}

.reader__top-a {
  max-width: 750px;
  margin: 0 auto;
}

.hot-chapters {
  margin-bottom: 25px;
}
.hot-chapters__title {
  font-weight: 400;
  margin-bottom: 15px;
  color: var(--main-text-color);
  font-size: 15px;
}
.hot-chapters__item {
  position: relative;
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 15px;
  background-color: var(--medium-bg);
  display: block;
  border-radius: 10px;
}
.hot-chapters__item:hover {
  opacity: 0.8;
}
.hot-chapters__number {
  color: var(--main-text-color);
  font-size: 21px;
  font-weight: 500;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hot-chapters__chapter {
  color: var(--main-text-color);
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hot-chapters__wrapper {
  display: flex;
}
.hot-chapters__new {
  background: green;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 0;
  right: 0;
  border-radius: 50%;
  border: 3px solid var(--indicator-border);
}

/* Скрыть стандартный чекбокс */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

/* Стилизация контейнера для чекбокса */
.custom-checkbox {
  position: relative;
  padding-left: 30px; /* Размер контейнера, включая псевдоэлемент */
  cursor: pointer;
  display: inline-block;
  line-height: 20px;
}

/* Стилизация псевдоэлемента (галочки) */
.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: var(--checkbox-color);
  border-radius: 4px;
}

/* Стилизация псевдоэлемента при активном чекбоксе */
.custom-checkbox input:checked + .checkmark {
  background-color: var(--purple-btn-bg);
}

/* Создание формы галочки */
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Отображение формы галочки при активном чекбоксе */
.custom-checkbox input:checked + .checkmark:after {
  display: block;
}

/* Стилизация формы галочки */
.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.updates__item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.updates__right {
  font-size: 14px;
  text-align: right;
  flex-shrink: 0;
  margin-left: 10px;
}
@media screen and (max-width: 600px) {
  .updates__right {
    text-align: unset;
    margin-left: 0;
    margin-top: 7px;
  }
}
.updates__left {
  max-width: 600px;
}
.updates__chapter {
  margin-bottom: 7px;
  font-weight: 400;
}
.updates__more-chapters {
  font-size: 14px;
  color: var(--secondary-text-color);
}
@media screen and (max-width: 600px) {
  .updates__more-chapters {
    display: none;
  }
}
.updates__img {
  width: 70px;
  height: 90px;
  margin-right: 10px;
  flex-shrink: 0;
}
.updates__img img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--main-border-radius);
}
.updates__img:hover {
  opacity: 0.7;
}
.updates__body {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 600px) {
  .updates__body {
    flex-direction: column;
  }
}
.updates__name {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
}
.updates__type {
  margin-bottom: 7px;
}
@media screen and (max-width: 600px) {
  .updates__type {
    display: none;
  }
}
.updates__type, .updates__time {
  color: var(--secondary-text-color);
  font-size: 14px;
}
.updates--my-list {
  display: none;
}

.products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding-top: 25px;
}
.products__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 160px;
  flex: 1 0 auto;
  max-width: 43%;
  margin: 0 10px 20px 10px;
  border-radius: 8px;
  transition: transform 0.3s;
  cursor: pointer;
}
.products__item--new::after {
  position: absolute;
  content: "";
  bottom: 7px;
  right: 10px;
  width: 5px;
  height: 5px;
  background: var(--red-color);
  border-radius: 50%;
}
.products__item[data-product-type=profilestatus] {
  width: 70px;
}
.products__item--purchased .products__image::before {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: var(--main-border-radius);
}
.products__item--purchased .products__image::after {
  content: "\e876";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  background-color: var(--green-color);
  font-size: 31px;
  padding: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.products__item:hover {
  transform: scale(1.1);
}
.products__header {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--border-color);
  padding: 12px;
  border-radius: 10px 10px 0 0;
}
.products__body {
  background: var(--medium-bg);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 10px 10px;
}
.products__price {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--secondary-text-color);
  font-weight: 600;
}
.products__discount {
  position: relative;
  margin-left: 5px;
  font-size: 12px;
  color: var(--secondary-text-color);
  font-weight: 400;
}
.products__discount::after {
  content: "";
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  height: 1px;
  background: var(--red-color);
}
.products__image {
  width: 100%;
  position: relative;
}
.products__image img {
  border-radius: var(--main-border-radius);
}
.products__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--secondary-text-color);
  text-align: center;
  margin-bottom: 8px;
}
.products__skin {
  width: 100%;
  height: 80px;
  border-radius: 10px 10px 0 0;
}

[data-product-type=profileskin] .products__header {
  padding: 0;
}

.diamond {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet"><path fill="%239450e0" d="M41 4H23L2 20.1L32 60l30-39.9z"></path><g fill="%23c28fef"><path d="M32 60l12.5-39.9H18.8z"></path><path d="M9.5 9.5L2 20.1h16.8L23 4z"></path><path d="M54.5 9.5L41 4l3.5 16.1H62z"></path></g></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 5px;
}

.products-placeholder {
  display: flex;
  flex-direction: column;
  width: 160px;
  flex: 1 0 auto;
  max-width: 43%;
  margin: 0 10px 20px;
  position: relative;
}
.products-placeholder--profilestatus {
  width: 70px;
}

.total-balance {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}
.total-balance div:first-of-type {
  margin-right: 5px;
}
.total-balance div:last-of-type {
  font-weight: 400;
  color: var(--secondary-text-color);
  margin-left: auto;
  cursor: pointer;
}

.modal--cover-example .modal__content {
  width: 90vw;
  max-width: 1400px;
}

.modal-product {
  margin-top: 10px;
}
.modal-product__wrapper {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.modal-product__like {
  margin-right: auto;
  margin-left: 12px;
  height: 39px;
  background: none !important;
}
.modal-product__info-wrapper {
  display: flex;
}
.modal-product__icon {
  width: 16px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
}
.modal-product__icon img {
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-product__not-enough {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 15px;
  color: var(--secondary-text-color);
}
.modal-product__not-enough .diamond {
  margin-right: 0;
  margin-left: 3px;
}
.modal-product__body {
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.modal-product__image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  position: relative;
}
.modal-product__image img {
  border-radius: 3px;
}
.modal-product__name {
  font-weight: 500;
  color: var(--main-text-color);
  font-size: 14px;
  margin-bottom: 2px;
}
.modal-product__time {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.modal-product__example {
  font-size: 15px;
  color: var(--main-text-color);
}
.modal-product__footer {
  display: flex;
  justify-content: space-between;
}
.modal-product__price {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.product-sticker__list {
  display: flex;
  flex-wrap: wrap;
  max-height: 300px;
  overflow: auto;
  justify-content: space-between;
}
.product-sticker__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.product-sticker__preview {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.product-sticker__preview img {
  border-radius: 8px;
}
.product-sticker__image {
  width: 21%;
  margin-bottom: 16px;
}
.product-sticker__image--placeholder {
  width: 21%;
  margin-bottom: 16px;
}
.product-sticker__image tgs-player {
  width: 100%;
  height: 100%;
}
.product-sticker__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 10px;
}
.product-sticker__type {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.products-show-avatar-wrapper {
  margin-top: 25px;
}

.products__item[data-product-type=frame] .products__image {
  margin: 12px;
}
.products__item[data-product-type=frame] .products__image--avatar {
  visibility: hidden;
}
.products__item[data-product-type=frame] .products__image--frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.18);
  border-radius: 0 !important;
  width: 100%;
  height: 100%;
}

.products--show-avatar .products__image--avatar {
  visibility: visible !important;
}

body.isGuest .products__image--frame {
  position: relative !important;
  transform: scale(1) !important;
}

.last-read {
  margin-bottom: 30px;
}
.last-read__item {
  display: flex;
  padding: 12px 15px;
  background: var(--light-bg);
  margin-right: 15px;
  border-radius: var(--main-border-radius);
  width: 310px;
  transition: color 0.3s;
}
.last-read__item:hover {
  background: var(--medium-bg);
}
.last-read__image {
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 15px;
  background-color: var(--light-bg);
}
.last-read__image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
  border-radius: var(--main-border-radius);
}
.last-read__body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.last-read__name {
  margin-top: 10px;
  font-weight: 400;
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.last-read__chapters {
  margin-top: auto;
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 7px;
}
.last-read__bar {
  height: 6px;
  background-color: var(--medium-bg);
  position: relative;
  border-radius: var(--main-border-radius);
  width: 100%;
}
.last-read__bar--fill {
  background: var(--purple-btn-bg);
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--main-border-radius);
}

.last-read-placeholder {
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment {
  display: flex;
  flex-direction: column;
}

.payment__title {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 30px;
}

.payment__desc {
  margin-bottom: 30px;
  text-align: center;
}
.payment__desc span {
  display: block;
  margin-top: 10px;
  color: var(--main-purple-color);
}

.payment__variants {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.payment__variant {
  width: 33%;
  position: relative;
  margin-bottom: 20px;
}
.payment__variant-title {
  margin-bottom: 5px;
}
.payment__variant input {
  display: none;
}

.payment__variant label {
  display: block;
  font-size: 1.1em;
  color: var(--main-text-color);
  border: 1px solid var(--border-color);
  padding: 25px 20px;
  cursor: pointer;
  border-radius: var(--main-border-radius);
}
.payment__variant label:hover {
  background: var(--light-bg);
}

.payment__variant-title {
  font-size: 1.1em;
  margin-bottom: 5px;
}

.payment__variant-price span,
.payment__variant-title span {
  font-weight: 500;
}

.payment__pay-btn {
  width: auto;
  margin: 0 auto;
}

.payment__variants input[type=radio]:checked + label {
  background-color: var(--main-purple-color);
  color: white;
}

.payment__form {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.payment__status {
  margin-bottom: 20px;
  font-weight: 500;
}

@media only screen and (max-width: 620px) {
  .payment__variants {
    flex-direction: column;
    align-items: center;
  }
  .payment__variant {
    width: 100%;
    margin-bottom: 10px;
  }
}
.payment__variant-discount {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 11px;
}

.leaderboard-top__list {
  display: flex;
  justify-content: center;
}
.leaderboard-top__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
}
.leaderboard-top__item:nth-of-type(1) .leaderboard-top__image > img {
  border-color: #a7a7aa;
}
.leaderboard-top__item:nth-of-type(1) .leaderboard-top__icon {
  background: #a7a7aa;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__image {
  width: 130px;
  height: 130px;
}
@media screen and (max-width: 400px) {
  .leaderboard-top__item:nth-of-type(2) .leaderboard-top__image {
    width: 90px;
    height: 90px;
  }
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__image > img {
  border-color: #ffb637;
}
.leaderboard-top__item:nth-of-type(2) .leaderboard-top__icon {
  background: #ffb637;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:nth-of-type(3) .leaderboard-top__image > img {
  border-color: #b0854f;
}
.leaderboard-top__item:nth-of-type(3) .leaderboard-top__icon {
  background: #b0854f;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  padding: 3px;
}
.leaderboard-top__item:last-of-type {
  margin-right: 0;
}
.leaderboard-top__name {
  margin: 5px 0;
  font-size: 15px;
  color: var(--main-text-color);
}
.leaderboard-top__image {
  position: relative;
  width: 75px;
  height: 75px;
  margin-bottom: 10px;
}
@media screen and (max-width: 400px) {
  .leaderboard-top__image {
    width: 60px;
    height: 60px;
  }
}
.leaderboard-top__image > img {
  border-radius: 50%;
  border: 3px solid;
}
.leaderboard-top__score {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary-text-color);
}
.leaderboard-top__icon {
  position: absolute;
  width: 28px;
}

.leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  width: 100%;
  margin: 20px auto;
}
.leaderboard__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 15px;
}
.leaderboard__item {
  display: flex;
  align-items: center;
  background: var(--light-bg);
  margin-top: 10px;
  border-radius: 10px;
  padding: 10px 15px;
  width: 100%;
}
.leaderboard__image {
  width: 35px;
  height: 35px;
  margin: 0 15px;
}
.leaderboard__image img {
  border-radius: 6px;
}
.leaderboard__name {
  font-weight: 500;
}
.leaderboard__score {
  margin-left: auto;
}

.settings {
  display: flex;
  justify-content: center;
}
.settings .form {
  width: 500px;
}
.settings .form__text {
  margin-bottom: 12px;
}
.settings .form__text span {
  color: var(--main-purple-color);
}
.settings__media {
  flex-direction: column;
}
.settings__avatars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.settings__item--hide {
  display: none;
}
.settings__show-all-items {
  cursor: pointer;
}
.settings__more {
  width: 150px;
  height: 150px;
  border-radius: var(--main-border-radius);
  background-color: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--main-text-color);
  font-size: 10px;
  padding: 10px;
  text-align: center;
  margin-right: 15px;
  margin-bottom: 15px;
}
@media screen and (max-width: 500px) {
  .settings__more {
    width: 80px;
    height: 80px;
  }
}
.settings__more--cover {
  width: 32%;
  height: 130px;
}
@media screen and (max-width: 600px) {
  .settings__more--cover {
    width: 100%;
    height: 100px;
  }
}
.settings__more span {
  font-size: 40px;
  color: var(--secondary-text-color);
  display: block;
  margin-bottom: 10px;
}
@media screen and (max-width: 500px) {
  .settings__more span {
    font-size: 25px;
    margin-bottom: 0;
  }
}
.settings__avatar {
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}
.settings__avatar img {
  border-radius: var(--main-border-radius);
}
.settings__avatar:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__avatar {
    width: 80px;
    height: 80px;
  }
}
.settings__frames {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.settings__skin {
  width: 150px;
  height: 150px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  background: var(--secondary-text-color);
  transition: transform 0.2s;
}
.settings__skin:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__skin {
    width: 80px;
    height: 80px;
  }
}
.settings__frame {
  width: 150px;
  height: 150px;
  margin-right: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}
.settings__frame--empty img {
  border-radius: var(--main-border-radius);
}
.settings__frame:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 500px) {
  .settings__frame {
    width: 80px;
    height: 80px;
  }
}
.settings__background {
  height: 250px;
  width: 100%;
  margin-bottom: 15px;
  cursor: pointer;
}
.settings__background:last-of-type {
  margin-bottom: 0;
}
.settings__background img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border-radius: var(--main-border-radius);
}
.settings__covers {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}
.settings__cover {
  margin-bottom: 15px;
  margin-right: 15px;
  width: 32%;
  height: 130px;
  cursor: pointer;
  transition: transform 0.2s;
}
.settings__cover:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 600px) {
  .settings__cover {
    width: 100%;
    height: 100px;
  }
}
.settings__cover img {
  border-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-import {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.profile-import__icon {
  width: 28px;
  height: 28px;
  margin-right: 5px;
  flex-shrink: 0;
}
.profile-import__icon img {
  border-radius: 3px;
}
.profile-import__input {
  height: 32px;
  border-radius: 3px;
  width: 100%;
}
.profile-import__input input {
  height: 100%;
  background: var(--light-bg);
  padding: 0 10px 5px 10px;
  outline: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--main-text-color);
  width: 100%;
  max-width: 300px;
}
.profile-import__input input:focus {
  border: 1px solid var(--purple-btn-bg);
}
.profile-import__input input::-moz-placeholder {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.profile-import__input input::placeholder {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.manga-mobile__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.manga-mobile__header {
  background-size: cover;
  filter: blur(8px) saturate(100%);
  height: 92%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  width: 100%;
}
.manga-mobile__wrapper {
  padding: 0 4rem 1rem;
  position: relative;
  top: 50px;
}
.manga-mobile__image {
  margin: 0 auto;
  max-width: 250px;
  border-radius: 16px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.manga-mobile__name-wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 60px 1rem 25px;
  position: inherit;
  text-align: center;
  z-index: 2;
}
.manga-mobile__name {
  font-size: 30px;
  font-weight: 500;
  margin: 0 5px 10px 0;
  color: var(--main-text-color);
}
.manga-mobile__name-alt {
  color: var(--secondary-text-color);
  font-size: 14px;
  font-weight: 400;
}
.manga-mobile__name-alt span:not(:last-of-type)::after {
  content: "/";
  padding: 0 5px;
}
.manga-mobile .manga__middle-link {
  margin-right: 15px;
}
.manga-mobile .manga__middle-link::after {
  content: unset !important;
}
.manga-mobile .manga__rating-info {
  display: inline-block;
}
.manga-mobile .manga__rating {
  font-size: 14px;
}

.main--mobile {
  padding-top: 0 !important;
  background: var(--light-bg) !important;
}

.dialog {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.dialog:hover .dialog__name {
  color: var(--main-purple-color);
}
.dialog--not-read::after {
  content: attr(data-count);
  position: absolute;
  bottom: 13px;
  right: 0;
  background-color: var(--medium-bg);
  color: var(--main-text-color);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.dialog--not-read .dialog__text {
  margin-right: 20px;
}
.dialog__del-btn {
  position: absolute;
  top: 30px;
  left: 31px;
  z-index: 10;
  background: var(--light-bg);
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog__content {
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}
.dialog__header {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.dialog__name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 7px;
}
.dialog__user {
  position: relative;
}
.dialog__user--online::before {
  content: "";
  background: #3cce7b;
  position: absolute;
  width: 11px;
  height: 11px;
  top: 1px;
  right: 16px;
  border-radius: 50%;
  border: 3px solid var(--indicator-border);
  z-index: 1;
}
.dialog__avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  flex-shrink: 0;
  display: block;
}
.dialog__avatar img {
  border-radius: 50%;
}
.dialog__time {
  font-size: 13px;
  color: var(--secondary-text-color);
  margin-left: auto;
  flex-shrink: 0;
}
.dialog__text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 15px;
  color: var(--secondary-text-color);
}

.messages {
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 990px) {
  .messages {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 990px) {
  .messages--index .messages__chat {
    display: none;
  }
}
@media screen and (max-width: 990px) {
  .messages--show .messages__dialogs {
    display: none;
  }
}
.messages__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.messages__chat {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 990px) {
  .messages__chat {
    width: 70%;
    margin-left: 20px;
    border-left: 1px solid var(--border-color);
  }
}
.messages__dialogs {
  padding: 0 10px;
  overflow-y: auto;
  height: 100%;
}
@media screen and (min-width: 990px) {
  .messages__dialogs {
    width: 30%;
    padding-left: 0;
    padding-right: 10px;
  }
}
.messages__dialogs--load-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.messages__dialogs--load-btn i {
  margin-left: 5px;
  margin-top: 4px;
}

.chat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px 10px;
  border-bottom: 1px solid var(--border-color);
}
@media screen and (min-width: 990px) {
  .chat__header {
    padding: 14px 10px 14px 10px;
  }
}
.chat__back {
  padding: 5px 15px;
}
@media screen and (min-width: 990px) {
  .chat__back {
    visibility: hidden;
  }
}
.chat__avatar {
  width: 35px;
  height: 35px;
  display: block;
  flex-shrink: 0;
}
.chat__avatar img {
  border-radius: 50%;
}
.chat__user {
  text-align: center;
}
.chat__user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--main-text-color);
  margin-bottom: 5px;
  display: block;
}
.chat__user-status {
  font-size: 12px;
  color: var(--main-purple-color);
}
.chat__user-status--offline {
  color: var(--secondary-text-color);
}
.chat__body {
  display: flex;
  flex: 1 auto;
  flex-basis: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding: 15px;
}
.chat__group-date {
  text-align: center;
  font-size: 12px;
  color: var(--secondary-text-color);
  padding: 13px 0;
}
.chat__message {
  display: flex;
  background-color: var(--purple-btn-bg);
  color: white;
  font-size: 15px;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 18px;
  max-width: 80%;
  width: -moz-fit-content;
  width: fit-content;
  align-items: end;
  position: relative;
}
.chat__message--read .chat__message-time {
  background: var(--purple-btn-bg);
  color: white !important;
  padding: 2px;
  border-radius: 3px;
}
.chat__message-delete-btn {
  display: none;
  position: absolute;
  left: -35px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--red-color);
  color: white;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
}
.chat__message-sticker {
  width: 86px;
}
.chat__message-text {
  word-break: break-word;
}
.chat__message-text::after {
  content: "";
  display: inline-block;
  height: 11px;
  width: 31px;
  position: relative;
}
.chat__message-text a {
  color: white;
  font-weight: 500;
  text-decoration: underline;
}
.chat__message--me {
  margin-left: auto;
  color: var(--main-text-color);
  background: var(--medium-bg);
}
.chat__message--me .chat__message-time {
  color: var(--secondary-text-color);
}
.chat__message--sticker {
  background: transparent;
}
.chat__message-time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 10px;
  color: #dbd4d4;
  flex-shrink: 0;
}
.chat__form {
  margin-top: auto;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.chat__form-area {
  border: none;
  border-top: 1px solid var(--border-color);
  resize: none;
  padding: 19px 105px 19px 15px;
  color: var(--main-text-color);
  width: 100%;
  height: 58px;
  outline: none;
  background-color: var(--light-bg);
}
.chat__form-area::-moz-placeholder {
  display: flex;
  align-items: center;
}
.chat__form-area::placeholder {
  display: flex;
  align-items: center;
}
.chat__send-btn {
  position: absolute;
  right: 15px;
  bottom: 7px;
  border-radius: 50%;
  padding: 5px 3px;
  display: flex;
}
.chat__send-btn i {
  font-size: 22px;
  margin-left: 3px;
}
.chat__sticker-btn {
  position: absolute;
  right: 72px;
  bottom: 14px;
}

html.messenger {
  height: 100%;
  overflow: hidden;
  position: fixed;
  min-height: 100vh;
}
html.messenger .footer {
  display: none;
}
html.messenger #back-to-top {
  display: none;
}
html.messenger .main {
  display: flex;
  padding-bottom: 0;
}
html.messenger .main > .container {
  flex-grow: 1;
}
html.messenger body {
  min-height: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  display: flex;
  flex-flow: column;
}
html.messenger body > .wrapper {
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
html.messenger body > .wrapper > .main {
  height: calc(100% - 70px);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
html.messenger body > .wrapper > .main > .container {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  display: flex;
}
@media screen and (max-width: 990px) {
  html.messenger body > .wrapper > .main > .container {
    padding: 0;
  }
}
html.messenger .messenger-frame {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
}
html.messenger .messenger-box {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
html.messenger .messenger-inner {
  height: 100%;
  flex: 1 1 auto;
}

.manga-rating__header {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 5px;
  background: var(--light-bg);
}
.manga-rating__image {
  width: 64px;
  height: 96px;
  margin-right: 15px;
  flex-shrink: 0;
}
.manga-rating__image img {
  border-radius: 6px;
}
.manga-rating__name {
  font-size: 17px;
  font-weight: 500;
}
.manga-rating__preview {
  background: var(--medium-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 65px;
  padding: 16px;
  color: var(--secondary-text-color);
  font-size: 13px;
}
.manga-rating__preview[data-score="1"], .manga-rating__preview[data-score="2"], .manga-rating__preview[data-score="3"], .manga-rating__preview[data-score="4"] {
  background: var(--red-color);
}
.manga-rating__preview[data-score="5"], .manga-rating__preview[data-score="6"] {
  background: #999;
}
.manga-rating__preview[data-score="7"], .manga-rating__preview[data-score="8"], .manga-rating__preview[data-score="9"], .manga-rating__preview[data-score="10"] {
  background: var(--green-color);
}
.manga-rating__preview--active span {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  font-size: 24px;
  font-weight: 500;
  border-radius: 46px;
  color: #fff;
  border: 2px solid #fff;
}
.manga-rating__vote {
  padding: 22px 16px;
  display: flex;
  justify-content: space-around;
}
.manga-rating__star {
  background-image: url("/assets/star.svg");
  width: 24px;
  height: 22px;
  cursor: pointer;
}
.manga-rating__star--active {
  background-image: url("/assets/star-filled.svg");
}
.manga-rating__actions {
  display: flex;
  justify-content: center;
  padding: 20px 15px;
  border-top: 1px solid var(--border-color);
}
.manga-rating__actions button:first-of-type {
  margin-right: 15px;
}

.manga-rating__star:not(.manga-rating__star--active) {
  filter: var(--invert);
}

.tippy-box[data-theme=sticker-list] {
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
}
.tippy-box[data-theme=sticker-list] .tippy-content {
  padding: 0;
}
.tippy-box[data-theme=sticker-list] .tippy-content .tabs {
  padding: 5px 9px;
}

.sticker__title {
  padding: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  color: var(--main-text-color);
}
.sticker__list {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 250px;
}
.sticker__list--lock .sticker__item::after {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 0;
  padding: 2px;
  font-size: 22px;
  border-radius: 50%;
  background: #5f6368;
}
.sticker__list--lock .sticker__item img { /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.sticker__pack {
  display: flex;
  padding: 10px 5px;
  border-top: 1px solid var(--border-color);
  margin-bottom: 0;
}
.sticker__pack-item {
  width: 36px;
  height: 36px;
  cursor: pointer;
  margin-right: 10px;
  padding: 5px;
  transition: all 0.2s;
  border-radius: 6px;
  flex-shrink: 0;
}
.sticker__pack-item:hover {
  background: var(--medium-bg);
}
.sticker__item {
  position: relative;
  width: 30%;
  padding: 5px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: all 0.2s;
  border-radius: 6px;
}
.sticker__item:hover {
  background: var(--medium-bg);
}
.sticker__item tgs-player {
  width: 100%;
  height: 100%;
}

.sticker__pack-item.tabs__item--active {
  border: none;
  background: var(--seconday-bg-color);
}

.top-users {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.top-users__item {
  display: flex;
  padding: 15px;
  position: relative;
  align-items: center;
}
.top-users__avatar {
  height: 60px;
  width: 60px;
  margin-right: 15px;
  margin-left: 13px;
  flex-shrink: 0;
  position: relative;
}
.top-users__avatar img {
  border-radius: 6px;
}
.top-users__info {
  width: 100%;
}
.top-users__number {
  font-size: 13px;
}
.top-users__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.top-users__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.top-users__name {
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.top-users__data {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.top-users.owl-carousel {
  display: flex;
  flex-wrap: nowrap;
}

.notifications__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notifications-subscription-btn {
  font-size: 22px;
}
.notifications__clear {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--main-text-color);
  padding: 0;
}
.notifications__clear span {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.notifications__span-link {
  color: var(--main-purple-color);
}
.notifications__header-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.notifications__mass-edit button {
  padding: 0 6px;
}
.notifications__mass-edit button i {
  font-size: 24px;
}
.notifications__mass-edit button:hover {
  color: var(--main-purple-color);
}
.notifications__item {
  display: flex;
  padding: 10px;
  border-radius: var(--main-border-radius);
  margin-bottom: 10px;
}
.notifications__item--not-read {
  background: var(--notification-not-read-color);
}
.notifications__name {
  color: var(--main-text-color);
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
}
.notifications__name a {
  color: var(--secondary-purple-color);
}
.notifications__date {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.notifications__image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  flex-shrink: 0;
}
.notifications__image img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--main-border-radius);
}
.notifications__wrapper {
  width: 100%;
}
.notifications__controls {
  margin-left: auto;
  align-self: flex-end;
  display: flex;
}
.notifications__controls button {
  padding: 0 5px;
}
.notifications__controls button:hover i {
  color: var(--main-purple-color);
}
.notifications__controls button i {
  font-size: 21px;
  color: var(--icons-color);
}

.achievements__list {
  display: flex;
  margin-bottom: 20px;
}
.achievements__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}
.achievements__header-icon {
  width: 90px;
  margin-bottom: 15px;
}
.achievements__header-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--main-text-color);
  margin-bottom: 7px;
}
.achievements__header-description {
  font-size: 15px;
  color: var(--main-text-color);
}
.achievements__item {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
  cursor: pointer;
}
.achievements__item--locked {
  filter: grayscale(85%);
}
.achievements__name {
  margin-top: 10px;
  text-align: center;
  color: var(--main-text-color);
  font-weight: 500;
}
.achievements__category {
  margin-bottom: 30px;
}
.achievements__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin: 18px 0;
}
.achievements__title span:last-of-type {
  font-size: 13px;
  color: var(--secondary-text-color);
}

.achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.achievement__title {
  color: var(--main-text-color);
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0 10px 0;
}
.achievement__image {
  width: 150px;
}
.achievement__description {
  color: var(--main-text-color);
  margin-bottom: 20px;
  font-size: 15px;
  text-align: center;
}
.achievement__condition {
  font-size: 14px;
  color: var(--secondary-text-color);
  text-align: center;
}
.achievement__progress {
  display: flex;
  align-items: center;
  width: 100%;
}
.achievement__progress span {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.achievement__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 20px 10px 12px 0;
  position: relative;
}
.achievement__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}

.rating {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.rating__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rating__item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 22px;
}
.rating__user {
  display: flex;
}
.rating__status {
  margin-left: 5px;
  width: 14px;
  cursor: pointer;
  padding: 0 5px;
  box-sizing: content-box;
  margin-top: 1px;
}
.rating__status[data-name=PRO] {
  width: 30px;
}
.rating__status img {
  -o-object-fit: contain;
     object-fit: contain;
}
.rating__number {
  font-size: 13px;
  color: var(--main-text-color);
  width: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.rating__number i {
  position: absolute;
  top: 7px;
  font-size: 36px;
  right: -5px;
}
.rating__number-up {
  color: var(--green-color);
}
.rating__number-down {
  color: var(--red-color);
}
.rating__image {
  height: 60px;
  width: 60px;
  margin-right: 15px;
  margin-left: 13px;
  flex-shrink: 0;
  position: relative;
}
.rating__image img {
  border-radius: var(--main-border-radius);
}
.rating__content {
  width: 100%;
}
.rating__name {
  color: var(--main-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rating__bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.rating__bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.rating__data {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.diamond-rating {
  position: fixed;
  width: 30px;
  height: 30px;
  background-image: url("/assets/gem.png");
  background-size: contain;
  background-repeat: no-repeat;
  animation: fall-rating 5s linear, fadeOut-rating 1s linear forwards;
  animation-delay: 0s, 4s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  top: 0;
  z-index: 99;
}

@keyframes fall-rating {
  from {
    transform: translateY(-100px) rotate(0deg);
  }
  to {
    transform: translateY(100vh) rotate(360deg);
  }
}
@keyframes fadeOut-rating {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.profile-status-modal {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.profile-status-modal__icon {
  width: 120px;
  margin: 0 auto;
}
.profile-status-modal__name {
  color: var(--main-text-color);
  font-weight: 600;
  margin: 20px 0;
  font-size: 25px;
}
.profile-status-modal__description {
  color: var(--main-text-color);
  margin-bottom: 10px;
  line-height: 25px;
}

.status__title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}
.status__subtitle {
  color: var(--secondary-text-color);
  font-size: 13px;
  line-height: 18px;
}
.status__list {
  display: flex;
  margin-top: 22px;
}
.status__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-right: 20px;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.2s;
}
.status__item:hover {
  opacity: 1;
}
.status__item--active {
  opacity: 1;
}
.status__item--active .status__image {
  position: relative;
  background-color: var(--light-bg);
}
.status__item--active .status__image img {
  border-radius: 6px;
}
.status__item--active .status__image::before {
  content: "\e876";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  background-color: var(--green-color);
  font-size: 17px;
  padding: 1px;
  position: absolute;
  right: -1px;
  bottom: 0;
  border-radius: 50%;
}
.status__item--unavailable .status__image {
  position: relative;
  background-color: var(--light-bg);
}
.status__item--unavailable .status__image::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: var(--light-bg);
  background-color: var(--dark-bg);
  font-size: 17px;
  padding: 1px;
  position: absolute;
  right: -1px;
  bottom: 0;
  border-radius: 50%;
}
.status__image {
  width: 62px;
  height: 62px;
  margin-bottom: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--light-bg);
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06);
}
.status__image img {
  width: 32px !important;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
.status__name {
  font-size: 14px;
  color: var(--main-text-color);
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 20px;
}

#modal-comment-status {
  z-index: 99999;
}

#modal-edit-decor::before {
  background: rgba(0, 0, 0, 0.05);
}

.main-profile--mobile [data-modal-trigger=modal-edit-decor] {
  margin-left: 10px;
}

.edit-decor__content {
  margin: 10px 0;
  display: flex;
  overflow-x: auto;
  padding-bottom: 10px;
}
.edit-decor__content-item {
  margin-right: 10px;
  width: 100px;
  flex-shrink: 0;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
}
.edit-decor__content-item[data-purchased="0"]::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: var(--light-bg);
  background-color: var(--dark-bg);
  font-size: 17px;
  padding: 3px;
  position: absolute;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  color: white;
}
.edit-decor__content-item img {
  border-radius: 10px;
}
.edit-decor__content-item--active {
  border: 3px solid var(--purple-btn-bg);
  border-radius: 14px;
}
.edit-decor__content-item--cover {
  width: 200px;
  height: 70px;
}
.edit-decor__content-item--cover img {
  -o-object-fit: cover;
     object-fit: cover;
}
.edit-decor__content-item--skin {
  width: 150px;
  height: 60px;
}
.edit-decor__content-item--skin div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.profile-skin {
  --title-color: hsla(0,0%,100%,.77) !important;
  --main-text-color: hsla(0,0%,100%,.77) !important;
  --icons-color: hsla(0,0%,100%,.77) !important;
  --secondary-text-color:hsla(0,0%,100%,.6) !important;
  --dark-bg: rgba(14, 13, 32, 0.4) !important;
  --main-border-radius: 6px !important;
  --grey-background: #121212 !important;
  --main-purple-color: #8b00ff !important;
  --secondary-purple-color: #bf94ff !important;
  --purple-btn-bg: #772ce8 !important;
  --light-bg: rgba(0, 0, 0, 0.1) !important;
  --medium-bg: rgba(0, 0, 0, 0.2) !important;
  --border-color: hsla(0,0%,59%,.3) !important;
  --rating-bg-green: rgba(89,89,89,.05) !important;
  --rating-bg-red: rgba(89,89,89,.05) !important;
  --bg-inverse: #fff !important;
  --seconday-bg-color: rgb(0 0 0 / 15%) !important;
  --chapters-hover: rgb(144 150 155 / 10%) !important;
  --indicator-border: #121212 !important;
  --checkbox-color: #1b1b1b !important;
  --chapter-visited: #000 !important;
  --notification-not-read-color: #261f2d !important;
  --dark-grey-bg: rgba(0, 0, 0, 0.2) !important;
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(148.71deg, rgb(58, 123, 161) 5.64%, rgb(127, 126, 185) 26.38%, rgb(127, 126, 185) 49.92%, rgb(58, 123, 161) 73.12%);
}
.profile-skin .manga-cards__info {
  background: rgba(0, 0, 0, 0.9) !important;
}
.profile-skin .profile__user-activity-bar {
  background: var(--medium-bg) !important;
}
.profile-skin--1 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(148.71deg, rgb(58, 123, 161) 5.64%, rgb(127, 126, 185) 26.38%, rgb(127, 126, 185) 49.92%, rgb(58, 123, 161) 73.12%);
}
.profile-skin--2 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(48.17deg, rgb(83, 72, 202) 11.21%, rgb(20, 7, 48) 61.92%);
}
.profile-skin--3 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgb(102, 80, 105) 12.84%, rgb(145, 163, 209) 85.99%);
}
.profile-skin--4 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(162.27deg, rgb(20, 34, 21) 11.2%, rgb(45, 77, 57) 29.93%, rgb(69, 76, 50) 48.64%, rgb(90, 124, 88) 67.85%, rgb(169, 142, 75) 83.54%);
  --main-purple-color: #388249 !important;
  --secondary-purple-color: #388249 !important;
  --purple-btn-bg: #162c16 !important;
}
.profile-skin--5 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(180.14deg, rgb(52, 79, 104) 8.5%, rgba(238, 59, 87, 0.72) 94.28%);
}
.profile-skin--6 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(154.19deg, rgb(159, 65, 117) 8.62%, rgb(196, 143, 100) 48.07%, rgb(166, 149, 61) 76.04%);
}
.profile-skin--7 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(141.68deg, rgb(72, 40, 140) 27.57%, rgb(219, 128, 75) 71.25%) ;
}
.profile-skin--8 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(38.99deg, rgb(231, 219, 208) 12.92%, rgb(223, 208, 178) 32.92%, rgb(224, 214, 163) 52.11%);
  --main-purple-color: #4c4838 !important;
  --secondary-purple-color: #dcd3ae !important;
  --purple-btn-bg: #4c4838 !important;
}
.profile-skin--9 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(179.52deg, rgb(164, 192, 247) 7.08%, rgb(169, 228, 232) 34.94%, rgb(176, 226, 184) 65.12%, rgb(207, 223, 162) 96.23%);
  --main-purple-color: #98a7c1 !important;
  --secondary-purple-color: #98a7c1 !important;
  --purple-btn-bg: #98a7c1 !important;
}
.profile-skin--10 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(rgb(243, 180, 54) 31.1%, rgb(238, 133, 88) 67.09%);
  --main-purple-color: #b3852d !important;
  --secondary-purple-color: #b3852d !important;
  --purple-btn-bg: #b3852d !important;
}
.profile-skin--11 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(180.14deg, rgb(244, 171, 185) 8.5%, rgb(177, 194, 252) 94.28%);
  --main-purple-color: #a3727d !important;
  --secondary-purple-color: #e1adb9 !important;
  --purple-btn-bg: #68484f !important;
}
.profile-skin--12 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(69.98deg, rgb(133, 118, 100) 14.14%, rgb(91, 68, 33) 60.35%);
  --main-purple-color: #b3852d !important;
  --secondary-purple-color: #b3852d !important;
  --purple-btn-bg: #b3852d !important;
}
.profile-skin--13 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(179.14deg, rgb(100, 121, 98) 1.91%, rgb(88, 133, 117) 48.99%, rgb(106, 132, 130) 96.35%);
  --main-purple-color: #5e896b !important;
  --secondary-purple-color: #5e896b !important;
  --purple-btn-bg: #5e896b !important;
}
.profile-skin--14 {
  --profile-skin-background: linear-gradient(rgb(0 0 0 / 64%), rgba(0, 0, 0, 0.5)), linear-gradient(179.14deg, rgb(105 110 113) 1.91%, rgb(105 110 113) 48.99%, rgb(33 31 48) 96.35%);
  --main-purple-color: #787878 !important;
  --secondary-purple-color: #918d98 !important;
  --purple-btn-bg: #4d4c50 !important;
}
.profile-skin--14 .profile__user-activity-bar {
  background-color: #707070 !important;
}
.profile-skin--15 {
  --profile-skin-background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(64.92deg, rgb(0, 0, 0) 0%, rgb(149, 9, 9) 100%);
  --main-purple-color: #c61a1a !important;
  --secondary-purple-color: #ce5a5a !important;
  --purple-btn-bg: #a41212 !important;
}
.profile-skin--16 {
  --profile-skin-background: linear-gradient(rgb(195 54 104), rgb(120 36 120 / 50%)), linear-gradient(179.14deg, rgb(20 56 78) 1.91%, rgb(139 29 68) 48.99%, rgb(42 117 122) 96.35%);
  --main-purple-color: #ff5494 !important;
  --secondary-purple-color: #f086ae !important;
  --purple-btn-bg: #ff5494 !important;
}
.profile-skin--17 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(40, 100, 62), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(175, 111, 37), rgb(79 121 92 / 76%) 600px), radial-gradient(at right bottom, rgb(40, 100, 62), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(175, 111, 37), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #bea331 !important;
  --secondary-purple-color: #8BC34A !important;
  --purple-btn-bg: #bea331 !important;
}
.profile-skin--18 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(80 40 100), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(66 156 193), rgb(94 79 121 / 76%) 600px), radial-gradient(at right bottom, rgb(94 45 147), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(37 155 175), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #c9abdede !important;
  --secondary-purple-color: #f4e1ff !important;
  --purple-btn-bg: #7480c7 !important;
  --border-color: hsla(0,0%,59%,.4) !important;
}
.profile-skin--19 {
  --profile-skin-background: linear-gradient(to left, #355c7d, #6c5b7b, #c06c84);
  --main-purple-color: #e8d2f8 !important;
  --secondary-purple-color: #e8d2f8 !important;
  --purple-btn-bg: #9e5f73 !important;
}
.profile-skin--20 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(52 10 10), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(141 11 11), rgb(56 5 9) 600px), radial-gradient(at right bottom, rgb(110 47 51), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(91 7 7), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #b01f1f !important;
  --secondary-purple-color: #c73131 !important;
  --purple-btn-bg: #b52525 !important;
}
.profile-skin--21 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(58 19 20), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(7 86 91), rgb(56 5 9) 600px), radial-gradient(at right bottom, rgb(110 47 51), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(7 86 91), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #357b81 !important;
  --secondary-purple-color: #b8b8b8 !important;
  --purple-btn-bg: #165358 !important;
}
.profile-skin--22 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(183 29 88), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(55 19 98), rgb(104 42 70) 600px), radial-gradient(at right bottom, rgb(104 12 47), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(43 11 80), rgb(0 0 0 / 16%) 600px);
  --main-purple-color: #ad1d57 !important;
  --secondary-purple-color: #ffb8e0 !important;
  --purple-btn-bg: #561658 !important;
}
.profile-skin--23 {
  --profile-skin-background: linear-gradient(to left, #280422, #000000);
  --main-purple-color: #561658 !important;
  --secondary-purple-color: #ffb8e0 !important;
  --purple-btn-bg: #561658 !important;
}
.profile-skin--23 .profile__user-activity-bar--active {
  animation: fillAnimationBar 1s ease-in-out forwards;
  transform-origin: left;
}
.profile-skin--23 .profile__title {
  box-shadow: 0 0 2px 0px #fff, inset 0 0 2px #fff, 0px 0px 3px 2px #f13292, inset 0 0 10px 1px #f13292, 0 0 3px #f13292, inset 0 0 4px #f13292;
  padding: 6px 10px;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #ddbed2;
  text-shadow: 0 0 6px rgba(229, 171, 200, 0.6117647059);
  background: linear-gradient(90deg, rgba(87, 89, 123, 0) 0%, rgba(149, 1, 169, 0.19) 90%);
}
.profile-skin--23 .mobile-profile__name::after,
.profile-skin--23 .mobile-profile__name::before,
.profile-skin--23 .profile__name::after,
.profile-skin--23 .profile__name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: attr(data-name);
}
.profile-skin--23 .mobile-profile__name::after,
.profile-skin--23 .profile__name::after {
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}
.profile-skin--23 .mobile-profile__name::before,
.profile-skin--23 .profile__name::before {
  color: #3498db;
  animation: glitch-effect 2s infinite;
}
.profile-skin--24 {
  --profile-skin-background: #f8ef02;
  --main-text-color: hsla(0, 0%, 0%, 0.77) !important;
  --secondary-text-color: hsla(0, 0%, 0%, 0.6) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  --main-purple-color: #333 !important;
  --secondary-purple-color: #484748 !important;
  --purple-btn-bg: #333 !important;
}
.profile-skin--24 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--24 .profile__title {
  position: relative;
  margin-bottom: 35px;
}
.profile-skin--24 .profile__title::before {
  content: " ";
  width: 100%;
  height: 6px;
  display: block;
  background-color: black;
  -webkit-clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
          clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
  position: absolute;
  bottom: -14px;
}
.profile-skin--24 .profile__activity-item:nth-child(1) .profile__activity-image {
  animation: cyber-glitch-0 5s linear infinite;
}
.profile-skin--24 .profile__activity-item:nth-child(2) .profile__activity-image {
  animation: cyber-glitch-1 4s linear infinite;
}
.profile-skin--24 .comments__rating-number-wrapper .value {
  background: #333;
}
.profile-skin--24 .comments__actions-btn .icon {
  color: #00ffd2;
}
.profile-skin--24 .comments__send-form textarea::-moz-placeholder {
  color: var(--secondary-text-color);
}
.profile-skin--24 .comments__send-form textarea::placeholder {
  color: var(--secondary-text-color);
}
.profile-skin--24 .achievements__item {
  margin-right: 20px;
}
.profile-skin--24 .comments .comments__send-form {
  border-radius: 0;
}
.profile-skin--24 .comments .comments__actions-btn {
  border-radius: 0;
  background: #333;
}
.profile-skin--24 .achievements__image {
  padding: 10px;
  background: #333;
  border-right: 3px solid #00ffd2;
}
.profile-skin--24 .achievements__image img {
  filter: grayscale(0.5);
}
.profile-skin--24 .profile__user-activity-bar,
.profile-skin--24 .profile__user-activity-bar--active,
.profile-skin--24 .profile__activity-bar,
.profile-skin--24 .profile__activity-bar--fill {
  -webkit-clip-path: polygon(0px 0px, 0px calc(100% - 0px), 20px 100%, 100% 100%, 100% 20px, calc(100% - 20px) 0px);
          clip-path: polygon(0px 0px, 0px calc(100% - 0px), 20px 100%, 100% 100%, 100% 20px, calc(100% - 20px) 0px);
  border-radius: 0;
}
.profile-skin--24 .profile__activity-bar {
  background: rgba(0, 0, 0, 0.3411764706);
}
.profile-skin--24 .profile__activity-bar--fill {
  background: #000000;
}
.profile-skin--24 .profile__about {
  padding: 5px 10px;
  background: #333;
  color: #00ffd2;
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
}
.profile-skin--24 .profile__activity-image {
  padding: 7px;
}
.profile-skin--24 .profile__activity-image img {
  border-radius: 0;
}
.profile-skin--24 .profile__activity-item {
  background: #333;
  border-radius: 0;
}
.profile-skin--24 .profile__activity-percent {
  color: #00ffd2;
}
.profile-skin--24 .profile__activity-name {
  color: white;
}
.profile-skin--24 .chapter-history__icon {
  color: #00ffd2;
  background: #333;
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
}
.profile-skin--24 .profile__friends-item {
  -webkit-clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
          clip-path: polygon(0 0, 0 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 0);
  background: #333;
  border-radius: 0;
}
.profile-skin--24 .profile__friends-name {
  color: #00ffd2;
}
.profile-skin--24 .profile__friends-time {
  color: white;
}
.profile-skin--24 .profile__cut {
  border: none;
}
.profile-skin--24 .profile__gift-item {
  background: #333;
  padding: 6px;
}
.profile-skin--24 .profile__name,
.profile-skin--24 .mobile-profile__name {
  animation-name: h1glitched;
  animation-duration: 1.53s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: linear;
}
.profile-skin--24 .profile__name::after,
.profile-skin--24 .mobile-profile__name::after {
  content: "_";
  animation-name: hxafter;
  animation-duration: 0.9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.profile-skin--25 {
  --profile-skin-background: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  --seconday-bg-color: rgba(0, 0, 0, 0.08) !important;
  --border-color: rgba(255, 255, 255, 0.55) !important;
  --main-purple-color: #ffffff !important;
  --secondary-purple-color: #d4e8ff !important;
  --main-text-color: hsl(0deg 0% 100%) !important;
  --secondary-text-color: hsl(0deg 0% 100% / 60%) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  text-shadow: 1px 1px 0px rgba(2, 0, 127, 0.4088235294);
  --purple-btn-bg: rgba(255, 255, 255, 0.1) !important;
  --medium-bg: rgba(255, 255, 255, 0.1) !important;
  --title-color: #fff !important;
}
.profile-skin--25 .mobile-profile__controls .button, .profile-skin--25 .mobile-profile__controls button {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.profile-skin--25 .mobile-profile__controls .friends-controls.friends-controls--mobile button {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.profile-skin--25 .profile__name,
.profile-skin--25 .mobile-profile__name {
  background-image: linear-gradient(-225deg, #5393cb 0%, #3a90c1 29%, #4ff3f7 67%, #7ab3f4 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: u-nikcname-animbg 2.5s ease-in infinite;
  text-shadow: none;
}
.profile-skin--25 .comments__actions-btn {
  color: white !important;
}
.profile-skin--25 .profile__gift-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .mobile-profile__stat {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__user-activity-bar, .profile-skin--25 .profile__activity-bar {
  height: 10px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__user-activity-bar--active, .profile-skin--25 .profile__activity-bar--active {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.profile-skin--25 .chapter-history__icon, .profile-skin--25 .profile__about {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__about {
  padding: 5px 10px;
}
.profile-skin--25 .profile__friends-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .profile__friends-avatar img {
  border-radius: 9px;
}
.profile-skin--25 .profile__activity-item {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .achievements__image {
  -webkit-backdrop-filter: blur(21px);
          backdrop-filter: blur(21px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .achievements__item {
  margin-right: 15px;
}
.profile-skin--25 .comments .comments__send-form {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.profile-skin--25 .comments .comments__send-form textarea::-moz-placeholder {
  color: var(--main-text-color);
}
.profile-skin--25 .comments .comments__send-form textarea::placeholder {
  color: var(--main-text-color);
}
.profile-skin--25 .profile__activity-image img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  padding: 7px;
}
.profile-skin--25 .profile__cuts {
  display: none;
}
.profile-skin--26 {
  --profile-skin-background: #e6e7ee;
  --main-text-color: hsla(0, 0%, 0%, 0.77) !important;
  --secondary-text-color: hsla(0, 0%, 0%, 0.6) !important;
  --title-color: hsla(0, 0%, 0%, 0.77) !important;
  --icons-color: hsla(0, 0%, 0%, 0.77) !important;
  --main-purple-color: #333 !important;
  --secondary-purple-color: #484748 !important;
  --purple-btn-bg: #333 !important;
}
.profile-skin--26 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--26 .comments .comments__send-form {
  border-radius: 20px;
  padding: 14px 18px !important;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
}
.profile-skin--26 .profile__friends-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 10px 15px;
  border-radius: 20px;
}
.profile-skin--26 .profile__friends-avatar img {
  border-radius: 12px;
}
.profile-skin--26 .profile__gift-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 5px;
  border-radius: 20px;
}
.profile-skin--26 .profile__about p {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--26 .profile__title a {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  padding: 2px 12px;
  border-radius: 15px;
  transition: all 0.2s ease;
}
.profile-skin--26 .profile__title a:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .achievements__image {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--26.profile-skin .profile__user-activity-bar {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background: #e6e7ee !important;
}
.profile-skin--26 .chapter-history__icon {
  color: #31344b;
  background-color: #e6e7ee;
  border-color: #d1d9e6;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
}
.profile-skin--26 .profile__activity-item {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff !important;
  border: 0.0625rem solid #d1d9e6 !important;
  background: #e6e7ee !important;
  padding: 15px;
  border-radius: 20px;
  width: 206px;
  margin-bottom: 20px;
}
.profile-skin--26 .profile__activity-image {
  height: 88px;
}
.profile-skin--26 .profile__activity-image img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.profile-skin--26 .profile__activity-bar {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background: #e6e7ee !important;
}
.profile-skin--26 .profile__cut {
  display: none;
}
.profile-skin--26 .mobile-profile__controls {
  margin-bottom: 30px;
}
.profile-skin--26 .mobile-profile__controls a, .profile-skin--26 .mobile-profile__controls button {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--26 .mobile-profile__controls a:hover, .profile-skin--26 .mobile-profile__controls button:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .comments__actions-btn {
  color: var(--main-text-color) !important;
  background: transparent;
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
}
.profile-skin--26 .comments__actions-btn:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--26 .button--primary {
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--26 .button--primary:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  background-color: transparent;
  border-color: #d1d9e6;
}
.profile-skin--27 {
  --profile-skin-background: #131419;
  --profile-skin-box-inner: inset 2px 2px 5px rgba(0,0,0,0.8), inset -3px -3px 7px rgb(112 160 163 / 10%) !important;
  --profile-skin-box-out: 3px 3px 6px rgba(0,0,0,0.8), -3px -3px 6px rgb(112 160 163 / 10%) !important;
  --profile-skin-border-out: #0c0c0c;
  --secondary-purple-color: #16a8b7 !important;
  --purple-btn-bg: #16a8b7 !important;
  --main-purple-color: #16a8b7 !important;
}
.profile-skin--27 .modal__content {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
}
.profile-skin--27 .comments .comments__send-form {
  border-radius: 20px;
  padding: 14px 18px !important;
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .profile__friends-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 10px 15px;
  border-radius: 20px;
}
.profile-skin--27 .profile__friends-avatar img {
  border-radius: 12px;
}
.profile-skin--27 .profile__gift-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 5px;
  border-radius: 20px;
}
.profile-skin--27 .profile__about p {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--27 .profile__title a {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  padding: 2px 12px;
  border-radius: 15px;
  transition: all 0.2s ease;
}
.profile-skin--27 .profile__title a:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .achievements__image {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
}
.profile-skin--27.profile-skin .profile__user-activity-bar {
  box-shadow: var(--profile-skin-box-inner);
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .chapter-history__icon {
  color: #c8c8c8;
  background-color: var(--profile-skin-background);
  border-color: var(--profile-skin-border-out);
  box-shadow: var(--profile-skin-box-inner);
}
.profile-skin--27 .profile__activity-item {
  box-shadow: var(--profile-skin-box-inner);
  border: 0.0625rem solid var(--profile-skin-border-out) !important;
  background: var(--profile-skin-background) !important;
  padding: 15px;
  border-radius: 20px;
  width: 206px;
  margin-bottom: 20px;
}
.profile-skin--27 .profile__activity-image {
  height: 88px;
}
.profile-skin--27 .profile__activity-image img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.profile-skin--27 .profile__activity-bar {
  box-shadow: var(--profile-skin-box-inner);
  background: var(--profile-skin-background) !important;
}
.profile-skin--27 .profile__cut {
  display: none;
}
.profile-skin--27 .mobile-profile__controls {
  margin-bottom: 30px;
}
.profile-skin--27 .mobile-profile__controls a, .profile-skin--27 .mobile-profile__controls button {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--27 .mobile-profile__controls a:hover, .profile-skin--27 .mobile-profile__controls button:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .comments__actions-btn {
  color: var(--main-text-color) !important;
  background: transparent;
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
}
.profile-skin--27 .comments__actions-btn:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--27 .button--primary {
  box-shadow: var(--profile-skin-box-out);
  border: 0.0625rem solid transparent;
  border-radius: 15px;
  transition: all 0.2s ease;
  background: transparent !important;
  color: var(--main-text-color) !important;
}
.profile-skin--27 .button--primary:hover {
  box-shadow: var(--profile-skin-box-inner);
  background-color: transparent;
  border-color: var(--profile-skin-border-out);
}
.profile-skin--28 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(39 39 43), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(38 35 49), rgb(89 86 118) 600px), radial-gradient(at right bottom, rgb(59 56 85), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(95 91 129), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #9485aa70 !important;
  --secondary-purple-color: #aca6b3 !important;
  --main-purple-color: #aca6b3 !important;
}
.profile-skin--28 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--28 .header {
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
}
.profile-skin--28 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--28 .comments__actions-btn {
  color: white !important;
}
.profile-skin--28 .profile__activity-bar, .profile-skin--28 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--28 .profile__cut {
  display: none;
}
.profile-skin--28.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--28.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--28.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--28.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--28.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--28 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--29 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(147 59 92), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(87 38 66), rgb(104 42 70) 600px), radial-gradient(at right bottom, rgb(104 12 47), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(161 53 84), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #f364ab26 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #ff6c899c !important;
  --border-color: hsl(342.19deg 100% 80.98% / 21%) !important;
}
.profile-skin--29 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--29 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--29 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--29 .comments__actions-btn {
  color: white !important;
}
.profile-skin--29 .profile__activity-bar, .profile-skin--29 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--29 .profile__cut {
  display: none;
}
.profile-skin--29.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--29.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--29.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.profile-skin--29.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--29.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--29 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--30 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(9 17 100), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(186 27 148), rgb(24 53 127) 600px), radial-gradient(at right bottom, rgb(208 30 146), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #b764f326 !important;
  --secondary-purple-color: #c7a9f6 !important;
  --main-purple-color: #b46cff96 !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--30 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--30 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--30 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--30 .comments__actions-btn {
  color: white !important;
}
.profile-skin--30 .profile__activity-bar, .profile-skin--30 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--30 .profile__cut {
  display: none;
}
.profile-skin--30.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--30.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--30.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--30.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--30.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--30 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--31 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(108 86 160), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(26 30 71), rgb(24 53 127) 600px), radial-gradient(at right bottom, rgb(139 113 180), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #b764f326 !important;
  --secondary-purple-color: #c7a9f6 !important;
  --main-purple-color: #916bdc !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--31 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--31 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--31 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--31 .comments__actions-btn {
  color: white !important;
}
.profile-skin--31 .profile__activity-bar, .profile-skin--31 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--31 .profile__cut {
  display: none;
}
.profile-skin--31.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--31.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--31.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--31.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--31.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--31 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--32 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(3 5 13), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(26 30 71), rgb(32 9 66) 600px), radial-gradient(at right bottom, rgb(139 113 180), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(85 68 161), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #7646d55c !important;
  --secondary-purple-color: #8d6cc2 !important;
  --main-purple-color: #7646d5 !important;
  --border-color: hsl(294.44deg 89.03% 75.35% / 21%) !important;
}
.profile-skin--32 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--32 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--32 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--32 .comments__actions-btn {
  color: white !important;
}
.profile-skin--32 .profile__activity-bar, .profile-skin--32 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--32 .profile__cut {
  display: none;
}
.profile-skin--32.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--32.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--32.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--32.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--32.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--32 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--33 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(22 63 60), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(9 26 26), rgb(7 19 20) 600px), radial-gradient(at right bottom, rgb(13 41 38), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(12 36 35), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #112623ab !important;
  --secondary-purple-color: #79a29f !important;
  --main-purple-color: #135c57 !important;
  --border-color: hsl(164.19deg 34.85% 61.16% / 21%) !important;
}
.profile-skin--33 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--33 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--33 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--33 .comments__actions-btn {
  color: white !important;
}
.profile-skin--33 .profile__activity-bar, .profile-skin--33 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--33 .profile__cut {
  display: none;
}
.profile-skin--33.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--33.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--33.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--33.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--33.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--33 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--34 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(198 121 45), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(139 88 40), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(193 128 56), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(147 86 20), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #e2812826 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #c6721f !important;
  --border-color: hsl(35.53deg 70.34% 57.26% / 21%) !important;
}
.profile-skin--34 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--34 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--34 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--34 .comments__actions-btn {
  color: white !important;
}
.profile-skin--34 .profile__activity-bar, .profile-skin--34 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--34 .profile__cut {
  display: none;
}
.profile-skin--34.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--34.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--34.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--34.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--34.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--34 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--35 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(66 91 192), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(59 87 189), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(66 96 193), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(58 85 189), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #283de259 !important;
  --secondary-purple-color: #ffffff !important;
  --main-purple-color: #7890f6ad !important;
  --border-color: hsl(226.61deg 42.32% 50.34% / 38%) !important;
}
.profile-skin--35 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--35 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--35 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--35 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--35 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--35 .comments__actions-btn {
  color: white !important;
}
.profile-skin--35 .profile__activity-bar, .profile-skin--35 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--35 .profile__cut {
  display: none;
}
.profile-skin--35.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--35.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--35.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--35.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--35.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--35 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--36 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(163 49 5), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(197 110 19), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(215 136 55), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(182 56 4), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #e2282859 !important;
  --secondary-purple-color: #ee713ad6 !important;
  --main-purple-color: #ff7437ad !important;
  --border-color: hsl(21.66deg 77.16% 52.9% / 46%) !important;
}
.profile-skin--36 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--36 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--36 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--36 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--36 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--36 .comments__actions-btn {
  color: white !important;
}
.profile-skin--36 .profile__activity-bar, .profile-skin--36 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--36 .profile__cut {
  display: none;
}
.profile-skin--36.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--36.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--36.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--36.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--36.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--36 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--37 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(20 46 69), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(21 47 73), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(36 36 66), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(36 36 66), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #2630635e !important;
  --secondary-purple-color: #7476a7d6 !important;
  --main-purple-color: #324564 !important;
  --border-color: hsl(214.58deg 48.69% 17.17%) !important;
}
.profile-skin--37 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--37 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--37 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--37 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--37 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--37 .comments__actions-btn {
  color: white !important;
}
.profile-skin--37 .profile__activity-bar, .profile-skin--37 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--37 .profile__cut {
  display: none;
}
.profile-skin--37.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--37.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--37.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--37.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--37.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--37 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--38 {
  --profile-skin-background: radial-gradient(farthest-side at right top, rgb(228 233 244), rgba(0, 0, 0, 0) 500px), radial-gradient(at left top, rgb(232 236 248), rgb(0 0 0) 600px), radial-gradient(at right bottom, rgb(230 234 246), rgba(0, 0, 0, 0) 500px), radial-gradient(at left bottom, rgb(229 234 245), rgb(0 0 0 / 16%) 600px);
  --purple-btn-bg: #6565655e !important;
  --secondary-purple-color: #9c9fa6 !important;
  --main-purple-color: #84868b !important;
  --border-color: hsl(214.58deg 21.03% 88.43%) !important;
}
.profile-skin--38 .comments__send-form textarea::-moz-placeholder {
  color: #ddd;
}
.profile-skin--38 .comments__send-form textarea::placeholder {
  color: #ddd;
}
.profile-skin--38 .header__mobile-menu {
  height: 100vh !important;
}
.profile-skin--38 .header {
  -webkit-backdrop-filter: blur(25px) !important;
          backdrop-filter: blur(25px) !important;
}
.profile-skin--38 .chapter-history__wrapper::before {
  display: none;
}
.profile-skin--38 .comments__actions-btn {
  color: white !important;
}
.profile-skin--38 .profile__activity-bar, .profile-skin--38 .profile__activity-bar--fill {
  height: 10px;
}
.profile-skin--38 .profile__cut {
  display: none;
}
.profile-skin--38.body-pc .profile__header {
  margin-top: 15px;
}
.profile-skin--38.body-pc .main {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.profile-skin--38.body-pc .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.profile-skin--38.body-pc .main > .container {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  margin-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 8px;
}
.profile-skin--38.body-pc .footer {
  -webkit-backdrop-filter: blur(35px);
          backdrop-filter: blur(35px);
}
.profile-skin--38 .mobile-profile__wrapper {
  background: rgba(255, 255, 255, 0) !important;
  -webkit-backdrop-filter: blur(45px) !important;
          backdrop-filter: blur(45px) !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25) !important;
}
.profile-skin--39 {
  --profile-skin-background: black;
  --main-purple-color: #787878 !important;
  --secondary-purple-color: #918d98 !important;
  --purple-btn-bg: #4d4c50 !important;
}
.profile-skin--39 .profile__user-activity-bar {
  background-color: #707070 !important;
}
.profile-skin .tippy-box[data-theme=dropdown],
.profile-skin .tippy-box[data-theme=sticker-list],
.profile-skin .header__mobile-menu {
  background: var(--profile-skin-background);
}
.profile-skin .modal__content {
  -webkit-backdrop-filter: blur(20px) !important;
          backdrop-filter: blur(20px) !important;
}
.profile-skin .comments .comments__actions-btn--spoiler {
  color: white;
}
.profile-skin .comments__rating-number--grey {
  color: #cfcfcf;
}
.profile-skin textarea::-moz-placeholder {
  color: #b4b4b4;
}
.profile-skin textarea::placeholder {
  color: #b4b4b4;
}
.profile-skin.body-mobile {
  background: var(--profile-skin-background);
}
.profile-skin.body-mobile .header {
  background: unset;
}
.profile-skin.body-mobile .mobile-profile__wrapper {
  background: var(--profile-skin-background);
}
.profile-skin.body-mobile .main {
  padding-bottom: 0;
}
.profile-skin.body-mobile .mobile-profile__wrapper {
  margin-bottom: 0;
}
.profile-skin.body-mobile .footer {
  display: none;
}
.profile-skin.body-pc {
  background: var(--profile-skin-background);
}
.profile-skin.body-pc .header {
  background: rgba(0, 0, 0, 0.1) !important;
}
.profile-skin.body-pc .main {
  background: unset;
}

.profile-skin .rating-info {
  background: var(--profile-skin-background);
}

.profile-skin-video {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.profile-skin-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@keyframes glitch-effect {
  0% {
    left: -2px;
    top: -2px;
  }
  25% {
    left: 2px;
    top: 0px;
  }
  50% {
    left: -1px;
    top: 2px;
  }
  75% {
    left: 1px;
    top: -1px;
  }
  100% {
    left: 0px;
    top: -2px;
  }
}
@keyframes fillAnimationBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes cyber-glitch-0 {
  0% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  2% {
    filter: blur(0.05rem) brightness(120%) contrast(120%);
  }
  4% {
    filter: blur(0.1rem) brightness(150%) contrast(150%);
  }
  6% {
    filter: blur(0.2rem) brightness(170%) contrast(170%);
  }
  8% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  10% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  60% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  62% {
    filter: blur(0.05rem) brightness(60%) contrast(100%);
  }
  64% {
    filter: blur(0.1rem) brightness(40%) contrast(100%);
  }
  66% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  68% {
    filter: blur(0.05rem) brightness(60%) contrast(100%);
  }
  70% {
    filter: blur(0.1rem) brightness(40%) contrast(100%);
  }
  72% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
  100% {
    filter: blur(0) brightness(100%) contrast(100%);
  }
}
@keyframes cyber-glitch-1 {
  0% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  1% {
    transform: translate(0, 0) skew(-3deg);
    filter: invert(0);
  }
  2% {
    transform: translate(0, 0) skew(3deg);
    filter: invert(0);
  }
  3% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  60% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
  61% {
    transform: translate(0, 0) skew(-3deg);
    filter: invert(0.2);
  }
  62% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0.2);
  }
  63% {
    transform: translate(0, 0) skew(3deg);
    filter: invert(0.8);
  }
  64% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0.2);
  }
  65% {
    transform: translate(0, 0) skew(0deg);
    filter: invert(0);
  }
}
@keyframes cyber-glitch-3 {
  0% {
    visibility: visible;
  }
  49% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes cyber-glitch-4 {
  0% {
    visibility: visible;
  }
  1% {
    visibility: hidden;
  }
  2% {
    visibility: hidden;
  }
  3% {
    visibility: visible;
  }
  20% {
    visibility: visible;
  }
  21% {
    visibility: hidden;
  }
  24% {
    visibility: hidden;
  }
  25% {
    visibility: visible;
  }
  40% {
    visibility: visible;
  }
  41% {
    visibility: hidden;
  }
  42% {
    visibility: hidden;
  }
  43% {
    visibility: visible;
  }
  44% {
    visibility: visible;
  }
  45% {
    visibility: hidden;
  }
  46% {
    visibility: hidden;
  }
  47% {
    visibility: visible;
  }
  60% {
    visibility: visible;
  }
  61% {
    visibility: hidden;
  }
  64% {
    visibility: hidden;
  }
  65% {
    visibility: visible;
  }
  70% {
    visibility: visible;
  }
  71% {
    visibility: hidden;
  }
  72% {
    visibility: hidden;
  }
  73% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}
@keyframes h1glitched {
  0% {
    transform: skew(-20deg);
    left: -4px;
  }
  10% {
    transform: skew(-20deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(10deg);
  }
  59% {
    transform: skew(10deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes hxafter {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes u-nikcname-animbg {
  100% {
    background-position: 200% center;
  }
}
.chat-arena {
  height: 100%;
  width: 100%;
}
.chat-arena__controls {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  border-radius: var(--main-border-radius);
  background: var(--dark-grey-bg);
  z-index: 2;
  position: absolute;
  right: 1%;
  transition: width 0.3s;
}
.chat-arena__controls--opened {
  width: 98%;
}
.chat-arena__controls--opened button {
  display: block;
}
.chat-arena__controls--closed {
  width: unset;
}
.chat-arena__controls--closed button {
  display: none;
}
.chat-arena__controls-toggle {
  margin-left: auto;
  cursor: pointer;
}
.chat-arena__controls button:first-of-type {
  margin-right: 10px;
}
.chat-arena__text-msg {
  overflow: hidden;
  display: inline-flex;
}
.chat-arena__wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-arena__messages {
  display: flex;
  flex: 1 auto;
  flex-basis: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding: 0 15px;
}
.chat-arena__reply {
  margin-bottom: 10px;
  font-weight: 500;
  align-items: center;
}
.chat-arena__reply i:first-of-type {
  font-size: 20px;
  color: var(--icons-color);
  margin-right: 5px;
}
.chat-arena__reply-cansel-btn {
  margin-left: auto;
  font-size: 20px;
  color: var(--icons-color);
}
.chat-arena__highlight {
  display: block;
  margin-bottom: 10px;
  background: var(--purple-btn-bg);
  color: white;
  padding: 15px 20px;
  border-radius: 6px;
  position: relative;
  text-align: center;
}
.chat-arena__highlight-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
}
.chat-arena__highlight-title span {
  background: white;
  color: var(--purple-btn-bg);
  padding: 3px 5px;
  border-radius: 3px;
  margin-left: 5px;
  display: block;
  margin-top: 10px;
}
@media screen and (max-width: 360px) {
  .chat-arena__highlight-text {
    font-size: 14px;
  }
}
.chat-arena__highlight-cansel-btn {
  position: absolute;
  right: 10px;
}
.chat-arena__message {
  margin: 10px 0;
}
.chat-arena__message--with-reply .chat-arena__reply-to span {
  background: #772ce8;
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
}
.chat-arena__message button {
  display: none;
  padding: 0px 10px;
}
.chat-arena__message:hover button {
  display: inline-block;
}
.chat-arena__user {
  display: inline-block;
}
.chat-arena__user--color-0 {
  color: rgb(210, 105, 30);
}
.chat-arena__user--color-1 {
  color: rgb(255, 69, 0);
}
.chat-arena__user--color-2 {
  color: rgb(255, 0, 0);
}
.chat-arena__user--color-3 {
  color: rgb(0, 255, 127);
}
.chat-arena__user--color-4 {
  color: rgb(138, 43, 226);
}
.chat-arena__user--color-5 {
  color: rgb(255, 105, 180);
}
.chat-arena__user--color-6 {
  color: rgb(30, 144, 255);
}
.chat-arena__user--color-7 {
  color: rgb(95, 158, 160);
}
.chat-arena__user--color-8 {
  color: rgb(218, 165, 32);
}
.chat-arena__user--color-9 {
  color: rgb(154, 205, 50);
}
.chat-arena__user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 5px;
  display: inline-flex;
  vertical-align: sub;
}
.chat-arena__user-name {
  font-weight: 500;
  margin-right: 5px;
  display: inline-block;
}
.chat-arena__footer {
  margin-top: auto;
  width: 100%;
  position: relative;
  padding: 10px 15px;
}
.chat-arena__reply {
  display: none;
}
.chat-arena__highlight {
  display: none;
}
.chat-arena__get-coins-btn {
  position: relative;
  display: flex;
  width: 50px;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.chat-arena__get-coins-btn .diamond {
  margin-right: 0;
}
.chat-arena__coin-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: rgba(119, 44, 232, 0.28);
  border-radius: 6px;
}
.chat-arena__reply-to {
  font-size: 14px;
  margin-bottom: 5px;
  color: var(--secondary-text-color);
  margin-top: -5px;
}
.chat-arena__form {
  display: flex;
  width: 100%;
  position: relative;
}
.chat-arena__highlight-btn {
  position: absolute;
  right: 55px;
  top: 10px;
  font-size: 20px;
  color: var(--icons-color);
}
.chat-arena__send-msg-btn {
  background: var(--purple-btn-bg);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px 10px;
}
.chat-arena__textarea {
  background: var(--seconday-bg-color);
  border-radius: 6px;
  resize: none;
  overflow-x: hidden;
  padding: 0 10px;
  line-height: 20px;
  height: 25px;
  padding-top: 5px;
  padding-right: 25px;
  outline: none;
  border: 5px solid transparent;
  box-sizing: content-box;
  width: 100%;
}
.chat-arena__textarea::-moz-placeholder {
  font-size: 15px;
}
.chat-arena__textarea::placeholder {
  font-size: 15px;
}
.chat-arena__textarea:active {
  border: 5px solid var(--secondary-purple-color);
}
.chat-arena__textarea:focus {
  border: 5px solid var(--secondary-purple-color);
}
.chat-arena__textarea:focus-visible {
  border: 5px solid var(--secondary-purple-color);
}

.chat-arena__message[data-highlighted=true] .chat-arena__text-msg {
  background: var(--purple-btn-bg);
  padding: 1px 9px 3px 9px;
  color: white;
  border-radius: 3px;
}

html.h-chat-arena {
  height: 100%;
  overflow: hidden;
  position: fixed;
  min-height: 100vh;
}
html.h-chat-arena #back-to-top {
  display: none !important;
}
html.h-chat-arena .footer {
  display: none;
}
html.h-chat-arena body {
  min-height: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  display: flex;
  flex-flow: column;
}
html.h-chat-arena body > .wrapper {
  min-height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
html.h-chat-arena body > .wrapper > .main {
  height: calc(100% - 70px);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding-bottom: 0;
}
html.h-chat-arena body > .wrapper > .main > .container {
  flex-grow: 1;
  height: 100%;
  width: 100%;
  display: flex;
}
@media screen and (max-width: 990px) {
  html.h-chat-arena body > .wrapper > .main > .container {
    padding: 0;
  }
}
html.h-chat-arena .chat-arena-frame {
  display: flex;
  width: 100%;
  flex-direction: column;
  flex-grow: 1;
}
html.h-chat-arena .chat-arena-box {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
html.h-chat-arena .chat-arena-inner {
  height: 100%;
  flex: 1 1 auto;
}

.gift__list {
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -10px;
  max-height: 300px;
}
.gift__item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 85px;
  flex: 1 0 auto;
  max-width: 25%;
  margin: 0 10px 20px;
  border-radius: 8px;
  transition: transform 0.3s;
  cursor: pointer;
}
.gift__price {
  display: flex;
  align-items: center;
  font-weight: 600;
}
.gift__price .diamond {
  margin-right: 5px;
}
.gift__image {
  margin-bottom: 10px;
}
.gift__warning {
  margin-top: 10px;
  font-size: 13px;
  color: var(--secondary-text-color);
}
.gift__warning span {
  font-weight: 600;
}
.gift__form {
  display: none;
  justify-content: center;
}
.gift__form-image {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.gift__form-image img {
  width: 150px;
  height: 150px;
}
.gift__form textarea {
  resize: unset;
  width: 100%;
}
.gift__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gift__form-footer .switch {
  margin-bottom: 0;
  margin-right: 45px;
}

.gift-placeholder {
  display: flex;
  flex-direction: column;
  width: 85px;
  flex: 1 0 auto;
  max-width: 25%;
  margin: 0 10px 20px;
  position: relative;
}

.gift .gift__back {
  display: none;
}

.gift-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.gift-list .profile__gift-item {
  margin-bottom: 15px;
}

.favourite-list {
  display: flex;
}
.favourite-list__item {
  width: 118px;
  margin-right: 10px;
  position: relative;
}
.favourite-list__image {
  display: block;
  width: 100%;
  padding-top: 140%;
  background-size: cover !important;
  background-position: 50% !important;
  margin-bottom: 10px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}
.favourite-list__effect {
  position: absolute;
  bottom: 0;
}

.review-type {
  display: flex;
  margin-bottom: 25px;
  margin-top: 25px;
}
.review-type__item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--main-border-radius);
  transition: all 0.3s;
  cursor: pointer;
  min-width: 0;
}
@media screen and (max-width: 900px) {
  .review-type__item:not(.review-type__item--active) span {
    display: none;
  }
}
.review-type__item--active {
  background: var(--medium-bg);
  flex-grow: 1;
}
.review-type__item--positive i {
  color: var(--green-color);
}
.review-type__item--negative i {
  color: var(--red-color);
}
.review-type__item--neutral i {
  color: var(--icons-color);
}
.review-type__item i {
  margin-right: 5px;
  font-size: 18px;
}
.review-type__item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-item {
  margin-bottom: 30px;
}
.review-item__header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.review-item__status {
  width: 4px;
  height: 24px;
  border-radius: 3px;
  margin-right: 10px;
}
.review-item__status--positive {
  background: var(--green-color);
}
.review-item__status--negative {
  background: var(--red-color);
}
.review-item__status--neutral {
  background: var(--icons-color);
}
.review-item__author {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.review-item__date {
  color: var(--secondary-text-color);
  font-size: 13px;
}
.review-item__avatar {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.review-item__avatar img {
  border-radius: var(--main-border-radius);
}
.review-item__name {
  font-weight: 500;
  font-size: 17px;
}
.review-item__title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 20px;
}
.review-item__text {
  line-height: 24px;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
  margin-bottom: 5px;
}
.review-item__footer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.review-item__like {
  background: none !important;
}
.review-item__rating {
  font-size: 17px;
}
.review-item__rating span {
  font-weight: 500;
}
.review-item__rating--green span {
  color: var(--green-color);
}
.review-item__rating--red span {
  color: var(--red-color);
}
.review-item__rating--grey span {
  color: #333;
}
.review-item__stats {
  margin-left: auto;
  display: flex;
}
.review-item__stats-item {
  display: flex;
  margin-right: 10px;
  align-items: center;
  color: var(--secondary-text-color);
}
.review-item__stats-item:last-of-type {
  margin-right: 0;
}
.review-item__stats-item i {
  margin-right: 5px;
}
.review-item__stats-item span {
  color: var(--secondary-text-color);
  font-size: 13px;
}

.review-create {
  display: flex;
  justify-content: center;
}
.review-create__form input {
  width: 100%;
}
.review-create .form {
  width: 500px;
}
.review-create .form__field::-moz-placeholder {
  color: var(--secondary-text-color);
}
.review-create .form__field::placeholder {
  color: var(--secondary-text-color);
}
.review-create .form__title {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.review-create__rules {
  font-size: 14px;
  margin-bottom: 15px;
}
.review-create__rules-item {
  margin-bottom: 5px;
}
.review-create textarea {
  resize: none;
  height: 150px;
}
.review-create__types {
  display: flex;
  margin-bottom: 20px;
}
.review-create__type {
  width: 33.3%;
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--main-border-radius);
  cursor: pointer;
}
.review-create__type--active:nth-of-type(1) {
  color: var(--green-color);
  background: rgba(0, 153, 51, 0.0509803922);
}
.review-create__type--active:nth-of-type(2) {
  color: var(--red-color);
  background: rgba(252, 54, 59, 0.0588235294);
}
.review-create__type--active:nth-of-type(3) {
  color: var(--icons-color);
  background: var(--medium-bg);
}
.review-create__rating {
  padding: 0 0 22px 0;
  display: flex;
  justify-content: space-between;
}
.review-create__star {
  background-image: url(/assets/star.svg);
  width: 24px;
  height: 22px;
  cursor: pointer;
}
.review-create__star--active {
  background-image: url(/assets/star-filled.svg);
}
.review-create__star:not(.review-create__star--active) {
  filter: var(--invert);
}
.review-create__success {
  display: none;
  text-align: center;
  background: var(--medium-bg);
  width: 500px;
  line-height: 22px;
  font-size: 15px;
  word-wrap: break-word;
  word-break: break-word;
  padding: 20px;
}
.review-create__success div {
  margin-bottom: 15px;
}

.personalized {
  margin-top: 30px;
}
.personalized textarea {
  overflow: auto;
  background: var(--medium-bg);
  border: none;
  width: 100%;
  height: 150px;
  padding: 15px;
  margin-bottom: 10px;
  margin-top: 25px;
  border-radius: var(--main-border-radius);
  outline: none;
  transition: all 0.2s;
  resize: none;
}
.personalized textarea:focus, .personalized textarea:active {
  background: var(--light-bg);
}
.personalized__title {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
.personalized__desc {
  margin-bottom: 25px;
}
.personalized__item {
  margin-bottom: 10px;
  font-size: 15px;
}
.personalized__item span {
  color: var(--secondary-text-color);
  font-size: 16px;
  margin-right: 5px;
  font-weight: 500;
}

.bp {
  position: relative;
}
.bp__main {
  margin-top: 2em;
  display: flex;
  position: relative;
  padding-bottom: 0.5em;
  direction: ltr;
}
.bp__main::before {
  content: "ОПЫТ";
  position: absolute;
  top: 2px;
}
.bp__num {
  display: flex;
  justify-content: flex-end;
  border-bottom: 0.5em solid rgba(204, 173, 255, 0.44);
  line-height: 1.5em;
  margin: 0 4px;
  margin-bottom: 0.5em;
}
.bp__rows {
  border-bottom: 0.5em solid rgba(204, 173, 255, 0.44);
  line-height: 1.5em;
  margin: 0 4px;
  margin-bottom: 0.5em;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.bp__rows .bp__rows1 {
  background-color: rgba(255, 255, 255, 0.06);
}
.bp__rows .bp__rows2 {
  background-color: rgba(0, 0, 0, 0.2);
}
.bp__rows .bp__rows1, .bp__rows .bp__rows2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 60px;
  position: relative;
  width: 96px;
  height: 108px;
}
.bp__rows .bp__rows1::after, .bp__rows .bp__rows2::after {
  content: "10";
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  background-color: #ccc;
  color: #000;
  text-align: center;
  position: absolute;
  border-radius: 3px;
  right: 0;
  bottom: 1px;
  padding: 2px 3px;
}

.main-battle-pass {
  background: rgba(89, 64, 158, 0.8509803922) !important;
  color: white;
}
.main-battle-pass .secondary-title {
  color: white;
}

.pro-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 360px;
  margin: 0 auto;
}
.pro-form__title {
  margin-bottom: 30px !important;
}
.pro-form__title span {
  background-image: linear-gradient(72.98deg, #7c54ee 0%, #9c42d6 25%, #772ce8 100%);
  color: #fff;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: 700;
  line-height: 15px;
  border-radius: 13px;
  padding: 3px 7px;
}
.pro-form__desc {
  font-size: 15px;
  text-align: center;
  margin-bottom: 30px;
}
.pro-form__header, .pro-form__body, .pro-form__select-user {
  background: var(--light-bg);
  margin-bottom: 15px;
  padding: 15px 20px;
  width: 100%;
  border-radius: 15px;
}
.pro-form__variant {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  cursor: pointer;
}
.pro-form__variant:first-of-type .pro-form__variant-name {
  margin-bottom: 0;
}
.pro-form__variant:last-of-type {
  margin-bottom: 0;
}
.pro-form__variant:last-of-type .pro-form__variant-wrapper {
  padding-bottom: 0;
}
.pro-form__variant:last-of-type .pro-form__variant-name {
  margin-bottom: 0;
}
.pro-form__variant-discount span {
  color: var(--secondary-text-color);
  font-size: 14px;
  text-decoration: line-through;
}
.pro-form__variant--active .pro-form__variant-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--purple-btn-bg);
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.pro-form__variant-button {
  width: 17px;
  height: 17px;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  margin-right: 15px;
  padding: 1px;
  position: relative;
  flex-shrink: 0;
}
.pro-form__variant-wrapper {
  padding-bottom: 10px;
}
.pro-form__variant-price {
  margin-left: auto;
  flex-shrink: 0;
}
.pro-form__variant-name {
  margin-bottom: 5px;
}
.pro-form__select-user {
  display: none;
}
.pro-form__select-user-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.pro-form__select-user-input {
  width: 100%;
}
.pro-form__select-user-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pro-form__select-user-item img {
  width: 35px;
  height: 35px;
  margin-right: 8px;
  border-radius: 5px;
}
.pro-form__gift-to {
  color: var(--secondary-text-color);
  font-size: 13px;
}
.pro-form__body-item {
  display: flex;
  margin-bottom: 15px;
}
.pro-form__body-item-name {
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 16px;
}
.pro-form__body-item-desc {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.pro-form__body-item-icon {
  color: var(--main-purple-color);
  font-size: 23px;
  flex-shrink: 0;
  margin-right: 15px;
}

.new-feed {
  display: flex;
  justify-content: center;
}
.new-feed__list {
  width: 600px;
}
.new-feed__image {
  margin-top: 14px;
  height: 183px;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  display: block;
}
.new-feed__footer {
  display: flex;
  align-items: center;
  margin-top: 14px;
  justify-content: space-between;
  font-size: 15px;
}
.new-feed__footer .button {
  height: 34px !important;
  display: flex;
  align-items: center;
}
.new-feed__footer i {
  font-size: 20px;
  margin-right: 5px;
  margin-top: 3px;
}
.new-feed__footer-left {
  display: flex;
}
.new-feed__footer-left div, .new-feed__footer-left a {
  margin-right: 10px;
}
.new-feed__footer-left div:last-of-type, .new-feed__footer-left a:last-of-type {
  margin-right: 0;
}
.new-feed__footer-right {
  display: flex;
  align-items: center;
}
.new-feed__item {
  background: var(--light-bg);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 15px;
  transition: all 0.3s;
}
@media screen and (max-width: 340px) {
  .new-feed__item {
    padding: 20px 10px;
  }
}
.new-feed__item--reveal {
  animation: fadeIn 1s ease-in-out;
}
.new-feed__item--review .new-feed__text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.new-feed__item--review .new-feed__button:last-of-type i {
  margin-right: 0;
  color: var(--green-color);
}
.new-feed__item--user .new-feed__button i {
  margin-right: 0;
}
.new-feed__item-rating {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 30px;
  font-weight: 700;
}
.new-feed__item-rating--green {
  color: var(--green-color);
}
.new-feed__title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .new-feed__title {
    font-size: 18px;
  }
}
.new-feed__title a {
  color: var(--purple-btn-bg);
}
.new-feed__comment-header {
  display: flex;
  margin-bottom: 10px;
}
.new-feed__text {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 5px;
  overflow: hidden;
  word-break: break-word;
}
.new-feed__reply-btn {
  font-size: 15px;
  color: var(--purple-btn-bg);
}
.new-feed__date {
  color: var(--secondary-text-color);
  font-size: 13px;
  margin-top: 3px;
}
.new-feed__avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-right: 10px;
  position: relative;
}
.new-feed__avatar img {
  border-radius: 3px;
}
.new-feed__profile {
  position: relative;
}
.new-feed__profile-background {
  height: 183px;
}
.new-feed__profile-rank {
  font-size: 15px;
  margin-top: 10px;
  text-align: center;
}
.new-feed__profile-background-image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.new-feed__profile-wrapper {
  background: var(--light-bg);
  border-radius: 32px 32px 0 0;
  padding: 50px 10px 30px;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--border-color);
  margin-top: -30px;
  text-align: center;
}
.new-feed__profile-wrapper::before {
  content: "1";
  position: absolute;
  bottom: -13px;
  background: var(--light-bg);
  width: 40px;
  height: 25px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.new-feed__profile-avatar {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 75px;
  height: 75px;
  box-shadow: 0 5px 12px -4px rgba(34, 60, 80, 0.3490196078);
}
.new-feed__profile-avatar img {
  border-radius: var(--main-border-radius);
}
.new-feed__profile-name {
  font-weight: 600;
  font-size: 24px;
  margin-top: 5px;
  text-align: center;
  position: relative;
}
.new-feed__profile-online {
  font-size: 13px;
  margin-top: 7px;
  color: var(--secondary-text-color);
  text-align: center;
}
.new-feed__profiles {
  display: flex;
  justify-content: space-between;
}
.new-feed__profiles .new-feed__item {
  width: 32%;
}
@media screen and (max-width: 920px) {
  .new-feed__profiles .new-feed__item {
    width: 48%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.manga-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.manga-cards__search {
  display: none;
}
.manga-cards__search-input {
  width: 100%;
}
.manga-cards__collections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
  .manga-cards__collections {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .manga-cards__collections {
    grid-template-columns: repeat(1, 1fr);
  }
}
.manga-cards__collection {
  background: var(--light-bg);
  padding: 15px 35px 15px 15px;
  border-radius: 18px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 2px 2px rgba(0, 0, 0, 0.12);
}
.manga-cards__collection-images {
  display: flex;
}
.manga-cards__collection-images img {
  border-radius: 7px;
}
.manga-cards__collection-user {
  display: flex;
  align-items: center;
}
.manga-cards__collection-image {
  display: block;
  margin-right: -18px;
  border-radius: 6px;
  max-width: 120px;
}
.manga-cards__collection-image:nth-of-type(1) {
  margin-right: -27px;
}
.manga-cards__collection-image:nth-of-type(2) {
  transform: scale(1.1);
}
.manga-cards__collection-image:nth-of-type(3) {
  transform: scale(1.2);
  z-index: 5;
}
.manga-cards__collection-image:nth-of-type(4) {
  transform: scale(1.1);
}
.manga-cards__collection-image:nth-of-type(5) {
  margin-left: -7px;
}
.manga-cards__collection-name {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  display: block;
}
.manga-cards__collection-desc {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 20px;
}
.manga-cards__collection-like {
  margin-left: auto;
}
.manga-cards__collection-info {
  margin-top: 30px;
  display: flex;
}
.manga-cards__collection-info span {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.manga-cards__collection-info span:last-of-type {
  margin-right: 0;
}
.manga-cards__collection-info span i {
  font-size: 23px;
  color: var(--icons-color);
  margin-right: 3px;
}
.manga-cards__collection-count {
  display: flex;
  align-items: center;
}
.manga-cards__collection-count i {
  margin-right: 5px;
  font-size: 20px;
}
.manga-cards__collection-date {
  font-size: 14px;
}
.manga-cards__collection-creator {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.manga-cards__collection-creator span {
  display: flex;
  font-size: 14px;
}
.manga-cards__collection-creator span i {
  font-size: 18px;
  color: var(--icons-color);
  margin-right: 3px;
}
.manga-cards__collection-creator-avatar {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
.manga-cards__collection-creator-avatar img {
  border-radius: 50%;
}
.manga-cards__count {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  overflow-x: auto;
}
.manga-cards__count-wrapper {
  display: flex;
  overflow-x: auto;
}
.manga-cards__count-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--light-bg);
  border-radius: 20px;
  width: 300px;
  margin-right: 20px;
  justify-content: space-between;
  flex-shrink: 0;
}
.manga-cards__count-item:last-of-type {
  margin-right: 0;
}
.manga-cards__count-item:nth-of-type(1) .manga-cards__count-rank {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.manga-cards__count-item:nth-of-type(1) .manga-cards__count-bar--filled {
  background: linear-gradient(45deg, #286595, #1c2935, #365b9d);
}
.manga-cards__count-item:nth-of-type(2) .manga-cards__count-rank {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-item:nth-of-type(2) .manga-cards__count-bar--filled {
  background: linear-gradient(220deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-item:nth-of-type(3) .manga-cards__count-rank {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-item:nth-of-type(3) .manga-cards__count-bar--filled {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-bar {
  height: 10px;
  width: 100%;
  background: var(--medium-bg);
  border-radius: 4px;
}
.manga-cards__count-bar--filled {
  height: 10px;
  border-radius: 4px;
}
.manga-cards__count-rank {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
}
.manga-cards__count-rank:nth-child(2) {
  background: linear-gradient(45deg, #dc115a, #FF7EBE, #f0b6d2);
}
.manga-cards__count-rank:nth-child(3) {
  background: linear-gradient(-120deg, #D62121, #C72C2C, #3a1111);
}
.manga-cards__count-progress {
  font-size: 13px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 14px;
}
.manga-cards--full-page .manga-cards__item-wrapper {
  width: 11.1111%;
}
@media screen and (max-width: 1200px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 16.6666%;
  }
}
@media screen and (max-width: 1050px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 20%;
  }
}
@media screen and (max-width: 850px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .manga-cards--full-page .manga-cards__item-wrapper {
    width: 50%;
  }
}
.manga-cards__text {
  margin-bottom: 15px;
}
.manga-cards__controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.manga-cards__report-btn {
  font-size: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.manga-cards__report {
  display: none;
}
.manga-cards__item {
  position: relative;
  background: var(--light-bg);
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 2px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.manga-cards__item-wrapper {
  width: 24.5%;
  height: auto;
  margin-bottom: 7px;
  padding: 0px 3.5px;
  position: relative;
}
@media screen and (max-width: 850px) {
  .manga-cards__item-wrapper {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .manga-cards__item-wrapper {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .manga-cards__item-wrapper {
    width: 50%;
  }
}
.manga-cards__item-wrapper--exists .manga-cards__item {
  border-bottom: 3px solid #772ce8;
}
.manga-cards__image {
  display: block;
  width: 100%;
  padding-top: 150%;
  background-size: cover;
  background-position: 50%;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}
.manga-cards__modal {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
}
.manga-cards__container {
  background-color: var(--light-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 16px;
}
.manga-cards__header {
  background-size: cover;
  filter: blur(5px) saturate(150%);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(1.1);
  width: 100%;
  background-position: center;
  max-height: 280px;
}
.manga-cards__wrapper {
  position: relative;
  top: 15px;
}
.manga-cards__placeholder {
  margin: 0 auto;
  max-width: 180px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: sway 4s ease-in-out infinite;
}
.manga-cards__info {
  background: var(--light-bg);
  z-index: 2;
  position: relative;
  border-radius: 32px 32px 0 0;
  padding: 50px 30px;
  text-align: center;
  margin-top: -30px;
  opacity: 1 !important;
}
.manga-cards__name {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}
.manga-cards__link {
  margin-bottom: 10px;
  display: block;
  text-decoration: underline;
}

@keyframes sway {
  0%, 100% {
    transform: rotateY(-10deg) rotateX(-5deg);
  }
  25% {
    transform: rotateY(5deg) rotateX(-5deg);
  }
  50% {
    transform: rotateY(10deg) rotateX(5deg);
  }
  75% {
    transform: rotateY(-5deg) rotateX(5deg);
  }
}
#modal-cards .modal__body {
  padding: 0;
}
#modal-cards .modal__content {
  background: transparent;
}
#modal-cards .modal__edit {
  cursor: pointer;
  position: absolute;
  top: 15px;
  left: 12px;
  z-index: 40;
  height: 24px;
  width: 24px;
  padding: 6px;
  color: var(--main-text-color);
  background: var(--medium-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.card-create {
  margin: 0 auto;
  max-width: 310px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-create__text {
  width: 100%;
  height: 150px;
  padding: 15px 78px 15px 20px;
  border: 1px solid transparent;
  background: var(--medium-bg);
  border-radius: 10px;
  resize: none;
  color: var(--main-text-color);
  outline: none;
}
.card-create__text:active, .card-create__text:focus {
  border: 1px solid var(--main-purple-color);
}
.card-create__replace {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-create__replace-image {
  width: 150px;
  margin-top: 15px;
}
.card-create__button--load-img {
  margin-bottom: 17px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-create__button--load-img i {
  font-size: 20px;
  margin-right: 5px;
}
.card-create__notify {
  margin-bottom: 15px;
  text-align: center;
}
.card-create__info-footer {
  display: flex;
  justify-content: space-between;
}
.card-create__info-footer button {
  margin-left: 10px;
}
.card-create__info-footer button i {
  font-size: 18px;
}
.card-create__image {
  width: 100%;
  height: 360px;
  visibility: hidden;
}
.card-create__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.card-create__finish {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.card-create__input-name {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.card-create__input-title {
  border: none;
  background: var(--medium-bg);
  width: 100%;
  padding: 15px 78px 15px 20px;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  color: var(--main-text-color);
}
.card-create__input-controls {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
}
.card-create__input-controls button {
  font-size: 20px;
  background: var(--light-bg);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  line-height: 25px;
}
.card-create__input-controls button:last-of-type {
  margin-right: 0;
}
.card-create__field[data-type=name] {
  position: relative;
}
.card-create__footer {
  position: absolute;
  text-align: center;
  bottom: 12px;
  width: 100%;
  color: white;
  z-index: 4;
  pointer-events: none;
  padding-bottom: 9px;
}
.card-create__form {
  position: relative;
  width: 240px;
  margin: 15px 0 30px;
}
.card-create__name {
  font-size: 29px;
  margin-bottom: 9px;
  padding: 0 10px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.card-create__title {
  font-size: 14px;
  padding: 0 9px;
  line-height: 13px;
  font-weight: 400;
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-create__field {
  margin-bottom: 17px;
}
.card-create__field-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.card-create__rang-list {
  background: var(--medium-bg);
  padding: 10px;
  border-radius: 10px;
}
.card-create__rang-item {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  align-items: center;
}
.card-create__rang-item--active {
  color: var(--purple-btn-bg);
}
.card-create__rang-item:last-of-type {
  margin-right: 0;
}
.card-create__rang-item[data-rank=E] .card-create__rang-icon {
  background: #613324;
  color: white;
}
.card-create__rang-item[data-rank=D] .card-create__rang-icon {
  background: #718b99;
  color: white;
}
.card-create__rang-item[data-rank=C] .card-create__rang-icon {
  background: #df9300;
  color: white;
}
.card-create__rang-item[data-rank=B] .card-create__rang-icon {
  background: #eb5d9b;
  color: white;
}
.card-create__rang-item[data-rank=G] .card-create__rang-icon {
  background: #004e2f;
  color: white;
}
.card-create__rang-item[data-rank=P] .card-create__rang-icon {
  background: #005db6;
  color: white;
}
.card-create__rang-item[data-rank=A] .card-create__rang-icon {
  background: #9b0a05;
  color: white;
}
.card-create__rang-item[data-rank=S] .card-create__rang-icon {
  background: #f54972;
  color: white;
}
.card-create__rang-icon {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.card-create__rang-icon[data-rang=E] {
  background: #4c4c4c;
  color: white;
}
.card-create__rang-icon[data-rang=D] {
  background: #338ffb;
  color: white;
}
.card-create__rang-icon[data-rang=C] {
  background: #fd7f85;
  color: white;
}
.card-create__rang-icon[data-rang=B] {
  background: #60d566;
  color: white;
}
.card-create__rang-icon[data-rang=A] {
  background: #7a41f7;
  color: white;
}
.card-create__rang-icon[data-rang=S] {
  background: #39caa6;
  color: white;
}
.card-create__rang-text {
  font-size: 15px;
}
.card-create__loader {
  width: 48px;
  height: 48px;
  border: 5px solid #464646;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-loader 1s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  transform: translate(-50%, -50%);
}
.card-create__pages {
  background: var(--medium-bg);
  color: var(--main-text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: 21px;
}
.card-create__button {
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
.card-create__button span {
  font-size: 14px;
}
.card-create__settings {
  width: 310px;
}

@keyframes rotation-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cropper-bg {
  transform: scale(0.97);
}

.cropper-view-box {
  outline: none !important;
}

.cropper-center {
  display: none !important;
}

#result {
  width: 240px;
  height: 360px;
}

.card-notification {
  bottom: 70px;
  right: -100%;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  z-index: 999;
  position: fixed;
  box-sizing: border-box;
  text-align: center;
  -webkit-box-sizing: border-box;
  background: var(--light-bg);
  animation: slideInCard 1.5s forwards;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.card-notification__wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-notification__image {
  width: 32px;
  margin-top: 3px;
}
.card-notification__image img {
  animation: wiggle 1s ease-in-out 2;
}
@media screen and (max-width: 900px) {
  .card-notification {
    right: 0;
    border-radius: 8px 0 0 8px;
  }
}

.modal-gift-card img {
  width: 200px;
}

#modal-gift-card .modal__body {
  padding: 0;
}

@keyframes slideInCard {
  from {
    right: -100%;
  }
  to {
    right: 25px;
  }
}
@media screen and (max-width: 900px) {
  @keyframes slideInCard {
    from {
      right: -100%;
    }
    to {
      right: 0;
    }
  }
}
@keyframes wiggle {
  0% {
    transform: rotate(10deg);
  }
  25% {
    transform: rotate(-10deg) translateY(-15px);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-5deg);
    transform: rotate(-10deg) translateY(-5px);
  }
  100% {
    transform: rotate(0deg);
  }
}
.remelt, .card-upgrade {
  display: flex;
  justify-content: center;
}
.remelt__rank-list, .card-upgrade__rank-list {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.remelt__rank-item, .card-upgrade__rank-item {
  padding: 6px 11px;
  margin-right: 10px;
  cursor: pointer;
  background: var(--medium-bg);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}
@media screen and (max-width: 460px) {
  .remelt__rank-item, .card-upgrade__rank-item {
    padding: 5px 10px;
    margin-right: 7px;
  }
}
@media screen and (max-width: 355px) {
  .remelt__rank-item, .card-upgrade__rank-item {
    padding: 4px 9px;
    font-size: 13px;
  }
}
.remelt__rank-item:hover, .card-upgrade__rank-item:hover {
  opacity: 0.8;
}
.remelt__rank-item:last-of-type, .card-upgrade__rank-item:last-of-type {
  margin-right: 0;
}
.remelt__rank-item--active, .card-upgrade__rank-item--active {
  background: var(--purple-btn-bg);
  color: white;
}
.remelt__header, .card-upgrade__header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.remelt__title, .card-upgrade__title {
  font-size: 30px;
  margin-bottom: 10px;
}
.remelt__text, .card-upgrade__text {
  font-size: 14px;
  color: var(--secondary-text-color);
  text-align: center;
}
.remelt__inventory, .card-upgrade__inventory {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.remelt__inventory-list, .card-upgrade__inventory-list {
  display: grid;
  overflow-y: auto;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .remelt__inventory-list, .card-upgrade__inventory-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .remelt__inventory-list, .card-upgrade__inventory-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .remelt__inventory-list, .card-upgrade__inventory-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.remelt__inventory-item, .card-upgrade__inventory-item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.remelt__inventory-item:not(.remelt__inventory-item--not-available):hover, .card-upgrade__inventory-item:not(.remelt__inventory-item--not-available):hover {
  transform: scale(1.04);
}
.remelt__inventory-item--not-available img, .remelt__inventory-item--lock img, .card-upgrade__inventory-item--not-available img, .card-upgrade__inventory-item--lock img {
  filter: grayscale(1);
}
.remelt__inventory-item--not-available::before, .remelt__inventory-item--lock::before, .card-upgrade__inventory-item--not-available::before, .card-upgrade__inventory-item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.remelt__wrapper, .card-upgrade__wrapper {
  background: var(--dark-grey-bg);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 20px;
}
.remelt__inner, .card-upgrade__inner {
  width: 800px;
  overflow: hidden;
}
.remelt__result .ease-out::before, .card-upgrade__result .ease-out::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: conic-gradient(rgb(226, 187, 38) 20deg, transparent 120deg);
  border-radius: 5px;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.remelt__result .ease-out::after, .card-upgrade__result .ease-out::after {
  content: "\e8e8";
  position: absolute;
  width: 135px;
  height: 184px;
  background: var(--light-bg);
  color: var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 70px;
  border-radius: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}
.remelt__result[data-rank=D] .ease-out::before, .card-upgrade__result[data-rank=D] .ease-out::before {
  background-image: conic-gradient(rgb(82, 121, 139) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=C] .ease-out::before, .card-upgrade__result[data-rank=C] .ease-out::before {
  background-image: conic-gradient(rgb(231, 173, 0) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=B] .ease-out::before, .card-upgrade__result[data-rank=B] .ease-out::before {
  background-image: conic-gradient(rgb(169, 78, 135) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=G] .ease-out::before, .card-upgrade__result[data-rank=G] .ease-out::before {
  background-image: conic-gradient(rgb(0, 78, 47) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=P] .ease-out::before, .card-upgrade__result[data-rank=P] .ease-out::before {
  background-image: conic-gradient(rgb(0, 93, 182) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=A] .ease-out::before, .card-upgrade__result[data-rank=A] .ease-out::before {
  background-image: conic-gradient(rgb(174, 0, 0) 20deg, transparent 120deg) !important;
}
.remelt__result[data-rank=S] .ease-out::before, .card-upgrade__result[data-rank=S] .ease-out::before {
  background-image: conic-gradient(rgb(196, 84, 111) 20deg, transparent 120deg) !important;
}
.remelt__row, .card-upgrade__row {
  display: flex;
  margin: 15px;
}
.remelt__row:first-of-type, .card-upgrade__row:first-of-type {
  justify-content: center;
}
.remelt__row:nth-of-type(2), .card-upgrade__row:nth-of-type(2) {
  justify-content: center;
  margin: 30px 0;
}
.remelt__row:nth-of-type(2) .remelt__item, .remelt__row:nth-of-type(2) .card-upgrade__item, .card-upgrade__row:nth-of-type(2) .remelt__item, .card-upgrade__row:nth-of-type(2) .card-upgrade__item {
  width: 150px;
  height: 200px;
}
.remelt__row:nth-of-type(2) .remelt__item--not-available img, .remelt__row:nth-of-type(2) .remelt__item--lock img, .remelt__row:nth-of-type(2) .card-upgrade__item--not-available img, .remelt__row:nth-of-type(2) .card-upgrade__item--lock img, .card-upgrade__row:nth-of-type(2) .remelt__item--not-available img, .card-upgrade__row:nth-of-type(2) .remelt__item--lock img, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--not-available img, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--lock img {
  filter: grayscale(1);
}
.remelt__row:nth-of-type(2) .remelt__item--not-available::before, .remelt__row:nth-of-type(2) .remelt__item--lock::before, .remelt__row:nth-of-type(2) .card-upgrade__item--not-available::before, .remelt__row:nth-of-type(2) .card-upgrade__item--lock::before, .card-upgrade__row:nth-of-type(2) .remelt__item--not-available::before, .card-upgrade__row:nth-of-type(2) .remelt__item--lock::before, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--not-available::before, .card-upgrade__row:nth-of-type(2) .card-upgrade__item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.remelt__row:nth-of-type(2) .remelt__item span, .remelt__row:nth-of-type(2) .card-upgrade__item span, .card-upgrade__row:nth-of-type(2) .remelt__item span, .card-upgrade__row:nth-of-type(2) .card-upgrade__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}
.remelt__row:last-of-type, .card-upgrade__row:last-of-type {
  justify-content: space-around;
}
.remelt__item, .card-upgrade__item {
  width: 100px;
  height: 150px;
  background: var(--light-bg);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--border-color);
  font-weight: 100;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}
.remelt__item span, .card-upgrade__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  position: relative;
  z-index: 0;
}
.remelt__item img, .card-upgrade__item img {
  z-index: 3;
  cursor: pointer;
}

.ease-out::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: conic-gradient(rgb(213, 214, 214) 20deg, transparent 120deg);
  border-radius: 5px;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.ease-out::after {
  content: "\e7fe";
  position: absolute;
  width: 87px;
  height: 139px;
  background: var(--light-bg);
  color: var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border-radius: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.lootbox {
  display: flex;
  justify-content: center;
}
.lootbox__inner {
  width: 600px;
  overflow: hidden;
}
.lootbox__title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}
.lootbox__header {
  background: var(--dark-grey-bg);
  border-radius: 14px;
  padding: 35px;
  padding-top: 60px;
  height: 302px;
  margin-bottom: 25px;
  position: relative;
}
.lootbox__text {
  position: absolute;
  background: var(--light-bg);
  padding: 20px;
  z-index: 6;
  text-align: center;
  font-weight: 500;
  font-size: 24px;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 0 0 14px 14px;
}
.lootbox__description {
  background: var(--light-bg);
  border-radius: 12px;
  padding: 10px;
}
.lootbox__description-title {
  margin-bottom: 10px;
  font-size: 20px;
}
.lootbox__description-title span {
  color: var(--main-purple-color);
}
.lootbox__description-text {
  font-size: 15px;
  line-height: 20px;
}
.lootbox__description-text span {
  color: var(--main-purple-color);
}
.lootbox__row {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.lootbox__list {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
.lootbox__card {
  width: 31%;
  cursor: pointer;
}
.lootbox__middle {
  border-radius: 10px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
.lootbox__middle-item {
  border: 1px solid transparent;
  padding: 9px;
  width: 31%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  background: var(--light-bg);
}
.lootbox__middle-item:hover {
  background: var(--dark-grey-bg);
}
.lootbox__middle-item--active {
  border: 1px solid var(--main-purple-color);
}
.lootbox__middle-price {
  display: flex;
  align-items: center;
}
.lootbox__middle-count {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.lootbox__middle button {
  margin-right: 10px;
}
.lootbox__middle button:last-of-type {
  margin-right: 0;
}
.lootbox__images {
  position: relative;
  height: 170px;
  margin-top: auto;
}
.lootbox__image {
  bottom: -50px;
  width: 140px;
  left: 50%;
  margin-left: -70px;
  position: absolute;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--light-bg);
}
.lootbox__image:nth-of-type(1) {
  transform: rotate(-18deg) translate(-59px, -47px);
  box-shadow: none;
  z-index: 1;
}
.lootbox__image:nth-of-type(2) {
  z-index: 5;
  transform: translate(0, -39px);
}
.lootbox__image:nth-of-type(3) {
  transform: rotate(18deg) translate(59px, -47px);
  z-index: 1;
}
.lootbox__image:nth-of-type(4) {
  transform: rotate(-34deg) translate(-105px, -68px);
}
.lootbox__image:nth-of-type(5) {
  transform: rotate(34deg) translate(105px, -68px);
}
.lootbox__wrapper {
  position: relative;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

#modal-card-rules .modal__inner {
  max-width: 96vw;
}
#modal-card-rules ul {
  padding-left: 20px;
}
#modal-card-rules ul li {
  padding: 5px 0;
  line-height: 20px;
}
#modal-card-rules .card-rules-task-button {
  display: flex;
  align-items: center;
}
#modal-card-rules .card-rules-task-button i {
  font-size: 20px;
  margin-right: 5px;
}
#modal-card-rules .card-rules-queue {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#modal-card-rules .card-rules-queue strong {
  margin-left: 5px;
}
#modal-card-rules .card-rules-queue::before {
  content: "\e5ca";
  background: var(--green-color);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}
#modal-card-rules .card-rules-queue--lock::before {
  background: var(--red-color);
  content: "\e5cd";
}

.my-card-task {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.my-card-task__item {
  width: 45%;
  margin-bottom: 15px;
  position: relative;
}
.my-card-task__item button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--red-color);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings__inner {
  width: 800px;
  overflow: hidden;
}
.settings__inner .secondary-title {
  margin-top: 0;
}

.showcase-inventory {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.showcase-inventory__list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 350px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .showcase-inventory__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.showcase-inventory__item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.showcase {
  padding: 10px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
  overflow: hidden;
}
.showcase__list {
  display: flex;
  overflow-x: auto;
}
.showcase__item {
  width: 100px;
  height: 150px;
  background: var(--light-bg);
  border-radius: 8px;
  margin-right: 15px;
  flex-shrink: 0;
  position: relative;
}
.showcase__item img {
  z-index: 2;
  position: relative;
  cursor: pointer;
}
.showcase__item:last-of-type {
  margin-right: 0;
}
.showcase__item:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-number);
  font-size: 30px;
  color: var(--secondary-text-color);
}

.lock-card-btn {
  position: absolute;
  right: -1px;
  top: 4px;
  background: var(--dark-grey-bg);
  padding: 3px 4px;
  border-radius: 50%;
  z-index: 1;
  font-size: 18px;
  color: var(--icons-color);
  border: 1px solid var(--border-color);
  display: none;
}

.lock-card-btn .icon-lock {
  color: var(--red-color);
}

.lock-card-mode-btn {
  width: 180px;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.lock-card-mode-btn i {
  font-size: 16px;
  margin-right: 5px;
}
.lock-card-mode-btn:hover {
  background: var(--purple-btn-bg);
  color: white;
}

.cards-moderate__text {
  width: 300px;
  margin-top: 10px;
}
.cards-moderate__text textarea {
  width: 100%;
  min-height: 150px;
}
.cards-moderate__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 230px;
  margin: 0 auto;
}
.cards-moderate__item form {
  margin-top: 10px;
}
.cards-moderate__item form,
.cards-moderate__item button {
  width: 100%;
}
.cards-moderate__button {
  color: white !important;
}
.cards-moderate__button--accept {
  background: var(--green-color) !important;
}
.cards-moderate__button--reject {
  margin-top: 10px;
  background: var(--red-color) !important;
}
.cards-moderate .secondary-title a {
  color: var(--main-purple-color);
}
.cards-moderate__image {
  width: 200px;
  margin-bottom: 20px;
}
.cards-moderate__manga-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 60px;
  justify-content: center;
}
.cards-moderate__manga-item {
  width: 130px;
  height: auto;
  margin-bottom: 38px;
}
.cards-moderate__manga-item img {
  height: auto;
}
.cards-moderate__replace span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

.lock-card-user::after {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 7px;
  top: 4px;
  background: var(--light-bg);
  color: var(--main-text-color);
  width: 20px;
  height: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
}

.card-report {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-report__item {
  display: flex;
  padding: 10px;
  background: var(--light-bg);
  border-radius: 10px;
  margin-bottom: 10px;
  width: 360px;
}
@media screen and (max-width: 360px) {
  .card-report__item {
    width: 310px;
  }
}
.card-report__item a {
  color: var(--main-purple-color);
  font-weight: 500;
  margin-right: 10px;
}
.card-report__date {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.card-report__wrapper {
  display: flex;
  flex-direction: column;
}
.card-report__delete-btn {
  background: var(--red-color);
  color: white;
  text-align: center;
  display: inline-flex;
  padding: 5px;
  margin-top: 10px;
  width: 72px;
  border-radius: 10px;
  cursor: pointer;
}
.card-report__title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-progress {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--medium-bg);
  border-radius: 10px;
  margin-bottom: 15px;
  justify-content: space-between;
  flex-shrink: 0;
}
.cards-progress__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
}
.cards-progress__count-bar {
  height: 10px;
  width: 100%;
  background: var(--light-bg);
  border-radius: 4px;
}
.cards-progress__count-bar--filled {
  background: linear-gradient(45deg, #672895, #3c2141, #4c2577);
  height: 10px;
  border-radius: 4px;
}
.cards-progress__number {
  font-size: 13px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 14px;
}

.deck-owners {
  padding: 10px 15px;
  background: var(--medium-bg);
  border-radius: 10px;
  margin-bottom: 15px;
}
.deck-owners__list {
  display: flex;
  margin-left: 1px;
  align-items: center;
}
.deck-owners__item {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: -0.5em !important;
  transition: all 0.2s;
}
.deck-owners__item:hover {
  z-index: 3;
  transform: scale(1.1);
}
.deck-owners__item img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1c1c1c;
}
.deck-owners__more {
  margin-left: 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.deck-owners__empty {
  font-size: 14px;
  line-height: 20px;
}
.deck-owners__title {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 400;
}

.card-rules-text {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 15px;
}

@keyframes bounceX {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.lootbox__card[data-rank=X] {
  animation: bounceX 1s ease;
}

.trade {
  display: flex;
  justify-content: center;
}
.trade__thanks {
  display: flex;
  align-items: center;
}
.trade__thanks-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  flex-shrink: 0;
}
.trade__thanks-avatar img {
  border-radius: 50%;
}
.trade__thanks-text {
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 20px;
  width: 100%;
}
.trade__search {
  position: relative;
}
.trade__search::before {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  content: "\e8b6";
  position: absolute;
  right: 6px;
  top: 35%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}
.trade__search-input {
  width: 100%;
}
.trade__pages {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;
}
.trade__paginate {
  margin: 0 15px;
  font-size: 15px;
  color: var(--secondary-text-color);
}
.trade__rank {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.trade__rank-button {
  padding: 6px 11px;
  margin-right: 10px;
  cursor: pointer;
  background: var(--medium-bg);
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}
@media screen and (max-width: 460px) {
  .trade__rank-button {
    padding: 5px 8px;
    margin-right: 7px;
    font-size: 14px;
  }
}
@media screen and (max-width: 355px) {
  .trade__rank-button {
    padding: 5px 7px;
    font-size: 13px;
  }
}
.trade__rank-button:hover {
  opacity: 0.8;
}
.trade__rank-button:last-of-type {
  margin-right: 0;
}
.trade__rank-button--active {
  background: var(--purple-btn-bg);
  color: white;
}
.trade__status {
  background: var(--dark-grey-bg);
  padding: 10px 10px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade__status i {
  color: white;
  background: var(--red-color);
  padding: 4px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
}
.trade__status--accepted i {
  background: var(--green-color);
}
.trade__inventory {
  padding: 15px;
  background: var(--dark-grey-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.trade__inventory-list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .trade__inventory-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .trade__inventory-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .trade__inventory-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trade__inventory-item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.trade__inventory-item--not-need-card::after, .trade__inventory-item--need-card::after {
  transition: all 0.3s;
  content: "\f854";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 153, 51, 0.7019607843);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade__inventory-item:not(.trade__inventory-item--not-available):hover {
  transform: scale(1.04);
}
.trade__inventory-item--not-available img, .trade__inventory-item--lock img {
  filter: grayscale(1);
}
.trade__inventory-item--not-available::before, .trade__inventory-item--lock::before {
  content: "\e897";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--light-bg);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
}
.trade__inner {
  width: 800px;
  overflow: hidden;
}
.trade__controls {
  display: flex;
  justify-content: space-between;
}
.trade__controls button {
  flex-basis: 100%;
}
.trade__controls button:nth-child(2) {
  margin-left: 10px;
}
.trade__list {
  margin-bottom: 20px;
}
.trade__list-name {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  max-width: 250px;
}
.trade__list-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 20px 10px;
  width: 100%;
  transition: all 0.3s;
  border-radius: 9px;
  overflow: hidden;
}
@media screen and (max-width: 350px) {
  .trade__list-item {
    padding: 20px 5px;
  }
}
.trade__list-item:hover {
  background: var(--light-bg);
}
.trade__list-item:last-of-type {
  margin-bottom: 0;
}
.trade__list-image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  flex-shrink: 0;
}
.trade__list-image img {
  border-radius: 50%;
}
.trade__list-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.trade__list-header i {
  margin-right: 5px;
}
.trade__list-info {
  width: 100%;
}
.trade__list-date {
  margin-left: auto;
}
.trade__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.trade__header span {
  flex-shrink: 0;
}
.trade__header-avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  position: relative;
}
@media screen and (max-width: 380px) {
  .trade__header-avatar {
    width: 40px;
    height: 40px;
  }
}
.trade__header-avatar img {
  border-radius: 6px;
}
.trade__header-name {
  font-size: 20px;
  font-weight: 500;
  margin-right: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 380px) {
  .trade__header-name {
    font-size: 17px;
  }
}
.trade__main {
  background: var(--dark-grey-bg);
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 20px;
  overflow: hidden;
}
.trade__main-user {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.trade__main-avatar {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  position: relative;
}
.trade__main-avatar img {
  border-radius: 4px;
}
.trade__main-coins {
  margin-left: auto;
}
.trade__main-coins input {
  border: 1px solid transparent;
  font-size: 13px;
  max-width: 41px;
  border-radius: 3px;
  padding: 1px 5px;
  outline: none;
}
.trade__main-coins input:active, .trade__main-coins input:focus {
  border: 1px solid var(--purple-btn-bg);
}
.trade__main-items {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 340px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .trade__main-items {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .trade__main-items {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .trade__main-items {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trade__main-item {
  background: var(--light-bg);
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
}
.trade__main-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  margin: 30px 0;
  position: relative;
}
.trade__main-divider:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "\e028";
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  background: var(--dark-grey-bg);
  width: 50px;
  height: 30px;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icons-color);
}

.history {
  display: flex;
  justify-content: center;
}
.history__inner {
  width: 600px;
  overflow: hidden;
}
.history__item {
  background: var(--light-bg);
  padding: 15px;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 15px;
}
.history__item:last-of-type {
  margin-bottom: 0;
}
.history__item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.history__date {
  font-size: 14px;
  color: var(--secondary-text-color);
  flex-shrink: 0;
  margin-left: 10px;
}
.history__name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.history__name a {
  font-weight: 500;
  color: var(--main-purple-color);
  max-width: 350px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .history__name a {
    max-width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media screen and (max-width: 360px) {
  .history__name a {
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media screen and (max-width: 330px) {
  .history__name a {
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.history__body {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.history__body:last-of-type {
  margin-bottom: 0;
}
.history__body::before {
  content: "+";
  height: 35px;
  width: 35px;
  background: var(--medium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 500;
  line-height: 8px;
  flex-shrink: 0;
}
.history__body--gained::before {
  content: "+";
  color: var(--green-color);
}
.history__body--lost::before {
  content: "-";
  color: var(--red-color);
}
.history__body-item {
  width: 75px;
  margin-right: 10px;
  flex-shrink: 0;
}

.news {
  display: flex;
  justify-content: center;
}
.news--comments {
  margin-top: 30px;
}
.news__inner {
  width: 100%;
  background: var(--light-bg);
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding-bottom: 10px;
}
.news__image {
  margin-bottom: 20px;
  height: 330px;
}
.news__image img {
  border-radius: 16px 16px 0 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.news__wrapper {
  padding: 15px 20px;
}
@media screen and (max-width: 420px) {
  .news__wrapper {
    padding: 10px 15px;
  }
}
.news__title {
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 420px) {
  .news__title {
    font-size: 25px;
  }
}
.news__text {
  line-height: 24px;
  font-size: 15px;
}
.news__stat {
  display: flex;
  justify-content: space-between;
}
.news__stat div {
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 5px;
}
.news__stat div i {
  margin-right: 5px;
  font-size: 20px;
  margin-top: 1px;
  color: var(--icons-color);
}

.deck {
  display: flex;
  justify-content: center;
}
.deck__inner {
  width: 800px;
}
.deck__search-input {
  width: 100%;
}
.deck__controls {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.deck__increase-price {
  flex-shrink: 0;
  background: var(--purple-btn-bg);
  color: white;
  padding: 9px 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-align: center;
  border-radius: 8px 0 0 8px;
}
.deck__increase-btn {
  display: flex;
  align-items: center;
  border-radius: 0 8px 8px 0 !important;
}
.deck__increase-btn span {
  font-weight: 500;
  background: var(--light-bg);
  padding: 5px 9px;
  border-radius: 6px;
  margin-right: 3px;
}
.deck__increase-btn .diamond {
  margin-top: 2px;
  margin-right: 0;
}
.deck__warning {
  font-size: 14px;
  text-align: center;
  background: rgba(119, 44, 232, 0.7490196078);
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  color: white;
}
.deck__inventory, .deck__showcase {
  padding: 10px;
  background: var(--light-bg);
  border-radius: 15px;
  margin-bottom: 20px;
}
.deck__inventory-list, .deck__showcase-list {
  display: grid;
  overflow-y: auto;
  min-height: 150px;
  max-height: 320px;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
  padding: 5px;
}
@media screen and (max-width: 900px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .deck__inventory-list, .deck__showcase-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.deck__inventory-item, .deck__showcase-item {
  background: var(--light-bg);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--dark-grey-bg);
  aspect-ratio: 9/13;
}
.deck__inventory-item::before, .deck__showcase-item::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-number);
  font-size: 30px;
  color: var(--secondary-text-color);
}
.deck__like-btn span {
  font-size: 14px;
  margin-left: 3px;
}
.deck__create-name input {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 15px;
  background: var(--light-bg);
  color: var(--main-text-color);
}
.deck__header {
  background: var(--light-bg);
  border-radius: 18px;
  padding: 15px;
  margin-bottom: 20px;
}
.deck__title {
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}
.deck__desc {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 10px;
}
.deck__creator {
  display: flex;
  justify-content: center;
  align-items: center;
}
.deck__creator button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
}
.deck__creator button i {
  font-size: 18px;
}
.deck__creator a {
  margin-left: 7px;
  margin-right: 7px;
}
.deck__creator-wrapper {
  display: flex;
  align-items: center;
  margin-right: 25px;
}
.deck__creator-image {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.deck__creator-image img {
  border-radius: 50%;
}
.deck__stat {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
.deck__stat-item {
  width: 33.3%;
  text-align: center;
}
.deck__stat-item div:first-of-type {
  font-size: 16px;
  font-weight: 600;
}
.deck__stat-item div:last-of-type {
  font-size: 12px;
  color: var(--secondary-text-color);
}
.deck__item {
  cursor: pointer;
}
.deck__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 13px;
  background: var(--light-bg);
}
@media screen and (max-width: 600px) {
  .deck__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .deck__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.profile-cards__deck-btn {
  display: inline-flex;
  margin-bottom: 20px;
}
.profile-cards__deck-btn i {
  font-size: 17px;
  margin-right: 5px;
}
.profile-cards__deck-btn:first-of-type {
  margin-right: 10px;
}

.faq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 24px;
}
@media screen and (max-width: 700px) {
  .faq {
    grid-template-columns: repeat(1, 1fr);
  }
}
.faq__title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}
.faq__text {
  font-size: 15px;
  line-height: 20px;
  color: var(--secondary-text-color);
}
.faq__section:nth-of-type(1) .faq__image {
  background: #b966ff;
}
.faq__section:nth-of-type(2) .faq__image {
  background: #cc66ff;
}
.faq__section:nth-of-type(3) .faq__image {
  background: #6633cc;
}
.faq__section:nth-of-type(3) .faq__image img {
  fill: white;
}
.faq__image {
  border-radius: 10px;
  padding: 36px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.faq__image img {
  width: 170px;
}
@media screen and (max-width: 800px) {
  .faq__image img {
    width: 150px;
  }
}

.accordion {
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .accordion {
    width: 100%;
  }
}
.accordion__item {
  margin-top: 20px;
}
.accordion__header {
  background-color: var(--notification-not-read-color);
  padding: 15px;
  cursor: pointer;
  font-weight: 500;
  border-radius: 10px;
  color: var(--secondary-purple-color);
}
.accordion__content {
  display: none;
  padding: 15px;
}

.faq-description {
  color: var(--secondary-text-color);
  margin-bottom: 24px;
  font-size: 1rem;
}

.club {
  display: flex;
  justify-content: center;
}
.club__inner {
  width: 800px;
  overflow: hidden;
}
.club__header {
  position: relative;
  background: var(--light-bg);
  border-radius: 14px;
}
.club__cover {
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  height: 326px;
}
.club__cover-wrapper {
  position: relative;
  height: 100%;
  background: var(--light-bg);
}
.club__cover-image {
  height: 303px;
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 3;
  position: relative;
  padding-bottom: 40%;
}
.club__info {
  position: relative;
  margin-top: -20px;
  padding: 58px 16px 12px 16px;
}
.club__logo {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px solid var(--light-bg);
  z-index: 4;
}
.club__logo img {
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.club__name {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}
.club__count {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin-bottom: 10px;
}
.club__middle, .club__block {
  margin-top: 10px;
  position: relative;
  background: var(--light-bg);
  border-radius: 14px;
  padding: 12px 16px 12px 16px;
}
.club__bonus-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.club__bonus-item:last-of-type {
  margin-bottom: 0;
}
.club__bonus-item:nth-of-type(1) .club__bonus-icon {
  background: #4cd863;
}
.club__bonus-item:nth-of-type(2) .club__bonus-icon {
  background: #007aff;
}
.club__bonus-item:nth-of-type(3) .club__bonus-icon {
  background: #ff9501;
}
.club__bonus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  color: white;
  font-size: 18px;
  margin-right: 10px;
}
.club__level-header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.club__level-header div {
  display: flex;
}
.club__level-header div span {
  margin: 0 5px;
}
.club__level-header div div:last-of-type {
  color: var(--secondary-text-color);
}
.club__level-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.club__level-footer div:first-of-type {
  color: var(--secondary-text-color);
}
.club__level-bar {
  width: 100%;
  height: 6px;
  background-color: var(--medium-bg);
  border-radius: var(--main-border-radius);
  margin: 8px 0;
  position: relative;
}
.club__level-bar--fill {
  position: absolute;
  background: var(--purple-btn-bg);
  height: 6px;
  top: -1px;
  left: -1px;
  border-radius: var(--main-border-radius);
}
.club__description {
  font-size: 15px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 4.5em; /* регулируйте высоту в зависимости от строки */
}
.club__description-read-button {
  font-size: 15px;
  color: var(--main-purple-color);
  margin: 5px 0;
  display: none;
  cursor: pointer;
}
.club__description.club__description-show {
  -webkit-line-clamp: unset;
  height: auto;
}
.club__description.club__description-show + .club__description-read-button {
  display: none;
}
.club__description.club__description-show + .club__description-read-button {
  display: block;
}
.club__members {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(5, 1fr);
  -moz-column-gap: 25px;
       column-gap: 25px;
  row-gap: 15px;
  margin: 10px 0;
}
@media screen and (max-width: 680px) {
  .club__members {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@media screen and (max-width: 540px) {
  .club__members {
    -moz-column-gap: 10px;
         column-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 360px) {
  .club__members {
    -moz-column-gap: 10px;
         column-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}
.club__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-bottom: 10px;
}
@media screen and (max-width: 380px) {
  .club__member {
    width: 80px;
  }
}
.club__member-image {
  position: relative;
  margin-bottom: 5px;
  width: 90px;
}
@media screen and (max-width: 540px) {
  .club__member-image {
    width: 70px;
  }
}
.club__member-image img {
  border-radius: 50%;
}
.club__member-contribution {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--main-purple-color);
  color: white;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 5px;
  border: 1px solid var(--border-color);
}
.club__member-name {
  white-space: nowrap; /* Отключает перенос текста */
  overflow: hidden; /* Скрывает все, что выходит за границы контейнера */
  text-overflow: ellipsis; /* Добавляет многоточие (...) в конце обрезанного текста */
  display: block; /* Убедитесь, что элемент блоковый, если это необходимо */
  max-width: 100%; /* Установите максимальную ширину для корректного отображения */
  margin-bottom: 5px;
  font-weight: 500;
}
@media screen and (max-width: 540px) {
  .club__member-name {
    font-size: 14px;
  }
}
.club__member-status {
  font-size: 14px;
  color: var(--secondary-text-color);
  text-align: center;
}
@media screen and (max-width: 540px) {
  .club__member-status {
    font-size: 13px;
  }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

button, hr, input {
  overflow: visible;
}

progress, sub, sup {
  vertical-align: baseline;
}

[type=checkbox], [type=radio], legend {
  box-sizing: border-box;
  padding: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

details, main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: ButtonText dotted 1px;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

[hidden], template {
  display: none;
}

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

.icon {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
}

.icon-search::before {
  content: "\e8b6";
}

.icon-bookmarks::before {
  content: "\e98b";
}

.icon-sun::before {
  content: "\e3ab";
}

.icon-notification::before {
  content: "\e7f7";
}

.icon-profile::before {
  content: "\e853";
}

.icon-add-friend::before {
  content: "\e7fe";
}

.icon-remove-friend::before {
  content: "\ef66";
}

.icon-message::before {
  content: "\e158";
}

.icon-arrow-right::before {
  content: "\e409";
}

.icon-arrow-left::before {
  content: "\e408";
}

.icon-arrow-up {
  font-weight: 400;
  transform: rotate(-90deg);
}

.icon-arrow-up::before {
  content: "\e5e1";
}

.icon-arrow-down {
  font-weight: 400;
  transform: rotate(90deg);
}

.icon-arrow-down::before {
  content: "\e5e1";
}

.icon-expand-less::before {
  content: "\e5ce";
}

.icon-expand-more::before {
  content: "\e5cf";
}

.icon-arrow-reverse::before {
  content: "\ea18";
}

.icon-star::before {
  content: "\e743";
}

.icon-single-star::before {
  content: "\e838";
}

.icon-delete::before {
  content: "\e872";
}

.icon-all-list::before {
  content: "\e54b";
}

.icon-reading::before {
  content: "\e0e0";
}

.icon-will-read::before {
  content: "\e666";
}

.icon-read-already::before {
  content: "\ea19";
}

.icon-abandoned::before {
  content: "\eb80";
}

.icon-comment::before {
  content: "\e0b9";
}

.icon-number-list::before {
  content: "\e242";
}

.icon-heart::before {
  content: "\e87d";
}

.icon-close::before {
  content: "\e5cd";
}

.icon-settings::before {
  content: "\e8b8";
}

.icon-dots::before {
  content: "\e5d3";
}

.icon-lamp::before {
  content: "\e79a";
}

.icon-done::before {
  content: "\e877";
}

.icon-reply::before {
  content: "\e15e";
}

.icon-report::before {
  content: "\e160";
}

.icon-smile::before {
  content: "\e813";
}

.icon-spoiler::before {
  content: "\e86f";
}

.icon-heart-plus::before {
  content: "\f884";
}

.icon-rating::before {
  content: "\e7af";
}

.icon-login::before {
  content: "\ea77";
}

.icon-logout::before {
  content: "\e9ba";
}

.icon-swap-vert::before {
  content: "\e8d5";
}

.icon-eye::before {
  content: "\e8f4";
}

.icon-burger::before {
  content: "\e5d2";
}

.icon-new-arrow-prev {
  transform: rotate(180deg);
}

.icon-new-arrow-prev::before {
  content: "\e8e4";
}

.icon-new-arrow-next::before {
  content: "\e8e4";
}

.icon-home::before {
  content: "\e88a";
}

.icon-catalog::before {
  content: "\ef42";
}

.icon-popular::before {
  content: "\e7af";
}

.icon-collections::before {
  content: "\e1bd";
}

.icon-genres::before {
  content: "\e241";
}

.icon-copy::before {
  content: "\e14f";
}

.icon-link::before {
  content: "\e157";
}

.icon-edit::before {
  content: "\e9a2";
}

.icon-check-circle::before {
  content: "\e86c";
}

.icon-monitoring::before {
  content: "\f190";
}

.icon-wordstat::before {
  content: "\eae2";
  color: var(--red-color);
}

.icon-shop::before {
  content: "\ea12";
}

.icon-arrow-back::before {
  content: "\e5e0";
}

.icon-send::before {
  content: "\e163";
}

.icon-mail::before {
  content: "\e158";
}

.icon-lock::before {
  content: "\e897";
}

.icon-unlock::before {
  content: "\f656";
}

.icon-leaderboard::before {
  content: "\f6a0";
}

.icon-folder::before {
  content: "\e2c7";
}

.icon-add-folder::before {
  content: "\e2cc";
}

.icon-edit-folder::before {
  content: "\f775";
}

.icon-mass-edit-folder::before {
  content: "\f586";
}

.icon-user-add::before {
  content: "\e7fe";
}

.icon-user-del::before {
  content: "\ef66";
}

.icon-user-accept::before {
  content: "\f565";
}

.icon-user-decline::before {
  content: "\f566";
}

.icon-pending::before {
  content: "\ef64";
}

.icon-yuan::before {
  content: "\eaf9";
}

.icon-yen::before {
  content: "\eafb";
}

.icon-korean::before {
  content: "\f75d";
}

.icon-paint::before {
  content: "\e243";
}

.icon-chat::before {
  content: "\e0b7";
}

.icon-drag::before {
  content: "\e25d";
}

.icon-gift::before {
  content: "\ef91";
}

.icon-summon::before {
  content: "\e0e6";
}

.icon-negative::before {
  content: "\e811";
}

.icon-neutral::before {
  content: "\e812";
}

.icon-positive::before {
  content: "\e813";
}

.icon-feather::before {
  content: "\ea3e";
}

.icon-ignore::before {
  content: "\e510";
}

.icon-info::before {
  content: "\e887";
}

.k-arrow-down::before {
  content: "\e313";
}

.icon-photo::before {
  content: "\e43f";
}

.icon-pro::before {
  content: "\e031";
}

.icon-ad-off::before {
  content: "\f7b2";
}

.icon-like-plus::before {
  content: "\f884";
}

.icon-fire::before {
  content: "\ef55";
}

.icon-sms::before {
  content: "\e625";
}

.icon-feed::before {
  content: "\eb81";
}

.icon-loop::before {
  content: "\e028";
}

.icon-cards::before {
  content: "\f5dc";
}

.icon-upload::before {
  content: "\f09b";
}

.icon-thump-up::before {
  content: "\e8dc";
}

.icon-thump-down::before {
  content: "\e8db";
}

.icon-handshake::before {
  content: "\ebcb";
}

.icon-question::before {
  content: "\eb8b";
}

.icon-deck::before {
  content: "\f562";
}

.icon-deck-create::before {
  content: "\f563";
}

.icon-pin::before {
  content: "\e6aa";
}

.icon-done-all::before {
  content: "\e877";
}

.icon-arrow-drop-down::before {
  content: "\e5c5";
}

.icon-arrow-drop-up::before {
  content: "\e5c7";
}

.icon-notification-off::before {
  content: "\e7f6";
}

.icon-book::before {
  content: "\e0e0";
}

.icon-discount::before {
  content: "\f05b";
}

:root {
  --ss-primary-color: #5897fb;
  --ss-bg-color: #ffffff;
  --ss-font-color: #4d4d4d;
  --ss-font-placeholder-color: #8d8d8d;
  --ss-disabled-color: #8a8a8a;
  --ss-border-color: #dcdee2;
  --ss-highlight-color: #fffb8c;
  --ss-error-color: #dc3545;
  --ss-main-height: 30px;
  --ss-content-height: 300px;
  --ss-spacing-l: 25px;
  --ss-spacing-m: 10px;
  --ss-spacing-s: 3px;
  --ss-animation-timing: 0.2s;
  --ss-border-radius: 4px;
}

@keyframes ss-valueIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ss-valueOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.ss-hide {
  display: none !important;
}

.ss-main {
  display: flex;
  flex-direction: row;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--ss-font-color);
  min-height: var(--ss-main-height);
  width: 100%;
  padding: var(--ss-spacing-s);
  cursor: pointer;
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
  background-color: var(--ss-bg-color);
  outline: 0;
  box-sizing: border-box;
  transition: background-color var(--ss-animation-timing);
}

.ss-main.ss-disabled {
  background-color: var(--ss-border-color);
}

.ss-main.ss-disabled .ss-values .ss-disabled {
  color: var(--ss-font-color);
}

.ss-main.ss-open-above {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.ss-main.ss-open-below {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ss-main .ss-values {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ss-spacing-m);
  flex: 1 1 100%;
}

.ss-main .ss-values .ss-placeholder {
  display: flex;
  padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);
  margin: auto 0px auto 0px;
  line-height: 1em;
  align-items: center;
  width: 100%;
  color: var(--ss-font-placeholder-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-main .ss-values .ss-single {
  display: flex;
  margin: auto 0px auto var(--ss-spacing-s);
}

.ss-main .ss-values .ss-value {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--purple-btn-bg);
  border-radius: var(--ss-border-radius);
  animation-name: ss-valueIn;
  animation-duration: var(--ss-animation-timing);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.ss-main .ss-values .ss-value.ss-value-out {
  animation-name: ss-valueOut;
  animation-duration: var(--ss-animation-timing);
  animation-timing-function: ease-out;
}

.ss-main .ss-values .ss-value .ss-value-text {
  font-size: 12px;
  color: var(--ss-bg-color);
  line-height: 11px;
  padding: var(--ss-spacing-s) var(--ss-spacing-m);
}

.ss-main .ss-values .ss-value .ss-value-delete {
  display: flex;
  align-items: center;
  height: var(--ss-spacing-l);
  width: var(--ss-spacing-l);
  padding: var(--ss-spacing-s) var(--ss-spacing-m);
  cursor: pointer;
  border-left: solid 1px transparent;
}

.ss-main .ss-values .ss-value .ss-value-delete svg {
  height: var(--ss-spacing-l);
  width: var(--ss-spacing-l);
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
  fill: none;
  stroke: var(--ss-bg-color);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-main .ss-deselect {
  display: flex;
  align-self: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 8px;
  height: 8px;
  margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
}

.ss-main .ss-deselect svg {
  width: 8px;
  height: 8px;
}

.ss-main .ss-deselect svg path {
  fill: none;
  stroke: var(--ss-font-color);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-main .ss-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 12px;
  height: 12px;
  margin: auto 5px auto 5px;
}

.ss-main .ss-arrow path {
  fill: none;
  stroke: #685e5e;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-timing-function: ease-out;
  transition: var(--ss-animation-timing);
}

.ss-content {
  position: absolute;
  display: flex;
  height: auto;
  flex-direction: column;
  width: auto;
  max-height: var(--ss-content-height);
  box-sizing: border-box;
  border: solid 1px var(--ss-border-color);
  background-color: var(--ss-bg-color);
  transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing);
  opacity: 0;
  transform: scaleY(0);
  overflow: hidden;
  z-index: 10000;
}

.ss-content.ss-relative {
  position: relative;
  height: 100%;
}

.ss-content.ss-open-above {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center bottom;
  border-top-left-radius: var(--ss-border-radius);
  border-top-right-radius: var(--ss-border-radius);
}

.ss-content.ss-open-below {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
  border-bottom-left-radius: var(--ss-border-radius);
  border-bottom-right-radius: var(--ss-border-radius);
}

.ss-content .ss-search {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  padding: var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
}

.ss-content .ss-search input {
  display: inline-flex;
  font-size: inherit;
  line-height: inherit;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0px;
  padding: var(--ss-spacing-m) var(--ss-spacing-l);
  margin: 0;
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
  background-color: var(--ss-bg-color);
  outline: 0;
  text-align: left;
  box-sizing: border-box;
}

.ss-content .ss-search input::-moz-placeholder {
  color: var(--ss-font-placeholder-color);
  vertical-align: middle;
}

.ss-content .ss-search input::placeholder {
  color: var(--ss-font-placeholder-color);
  vertical-align: middle;
}

.ss-content .ss-search input:focus {
  box-shadow: 0 0 5px var(--ss-primary-color);
}

.ss-content .ss-search .ss-addable {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  height: auto;
  margin: 0 0 0 var(--ss-spacing-m);
  border: 1px solid var(--ss-border-color);
  border-radius: var(--ss-border-radius);
}

.ss-content .ss-search .ss-addable svg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: 12px;
  height: 12px;
  margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m);
}

.ss-content .ss-search .ss-addable svg path {
  fill: none;
  stroke: var(--ss-font-color);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-content .ss-list {
  flex: 1 1 auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.ss-content .ss-list .ss-error {
  color: var(--ss-error-color);
  padding: var(--ss-spacing-l);
}

.ss-content .ss-list .ss-searching {
  color: var(--ss-font-color);
  padding: var(--ss-spacing-l);
}

.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
  padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
  font-weight: bold;
}

.ss-content .ss-list .ss-optgroup .ss-option {
  padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3);
}

.ss-content .ss-list .ss-optgroup-selectable {
  cursor: pointer;
}

.ss-content .ss-list .ss-optgroup-selectable:hover {
  color: var(--ss-bg-color);
  background-color: var(--ss-primary-color);
}

.ss-content .ss-list .ss-option {
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ss-content .ss-list .ss-option:last-of-type {
  border-bottom: none;
}

.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: rgba(0, 0, 0, 0.07);
}

.ss-content .ss-list .ss-option.ss-disabled {
  color: var(--ss-disabled-color);
  background-color: var(--medium-bg);
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
  color: var(--ss-font-color);
  background-color: var(--ss-highlight-color);
}

.ss-content .ss-list .ss-option .ss-search-highlight {
  background-color: var(--ss-highlight-color);
} /**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel, .owl-carousel .owl-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.owl-carousel {
  display: none;
  width: 100%;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

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

.owl-carousel .owl-item, .owl-carousel .owl-wrapper {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item {
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}

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

.no-js .owl-carousel, .owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

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

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

.owl-carousel .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

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

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

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

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.owl-height {
  transition: height 0.5s ease-in-out;
}

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
  max-height: 0;
}

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}

.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 0.1s ease;
}

.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
  display: none;
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.4s ease;
}

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

.owl-carousel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
  overflow: hidden;
}

.owl-carousel.owl-loaded {
  visibility: visible;
  opacity: 1;
}

.cards.owl-carousel {
  flex-wrap: nowrap;
}

/*
 * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance,
 * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use,
 * make sure you copy the url from the website since the url may change between versions.
 * */
.toast-title {
  font-weight: 500;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  margin-left: 10px;
}

.toast-message a,
.toast-message label {
  color: var(--main-purple-color);
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
  line-height: 1;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

.rtl .toast-close-button {
  left: -0.3em;
  float: left;
  right: 0.3em;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0%);
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  /*overrides*/
}

#toast-container * {
  box-sizing: border-box;
}

#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 20px 15px 20px 50px;
  width: 350px;
  border-radius: var(--main-border-radius);
  background-position: 15px center;
  background-repeat: no-repeat;
  color: var(--main-text-color);
  font-size: 15px;
  line-height: 20px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);
  background: var(--light-bg);
}

#toast-container > div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center;
}

#toast-container > div:hover {
  cursor: pointer;
}

#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.toast {
  background-color: #030303;
}
.toast::before {
  font-family: "Material Symbols Rounded";
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 300;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translate(0%, -50%);
  font-size: 24px;
}

.toast-success::before {
  content: "\e876";
  background: #0abf30;
}

.toast-error::before {
  content: "\e5cd";
  background: #f33950;
}

.toast-info::before {
  content: "\e876";
  background: #35c4fc;
}

.toast-warning::before {
  content: "\e645";
  background: #ffb70a;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Responsive Design*/
@media all and (max-width: 359px) {
  #toast-container > div {
    padding: 12px 8px 12px 50px;
    width: 290px;
  }
  #toast-container > div.rtl {
    padding: 12px 50px 12px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 360px) and (max-width: 480px) {
  #toast-container > div {
    padding: 16px 8px 16px 50px;
    width: 340px;
  }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 20px 15px 20px 50px;
    width: 25em;
  }
  #toast-container > div.rtl {
    padding: 20px 50px 20px 15px;
  }
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */
.cropper-container {
  -webkit-touch-callout: none;
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cropper-container img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-canvas, .cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:after, .cropper-center:before {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face, .cropper-line, .cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
  cursor: not-allowed;
}

body {
  font-family: "Exo 2", sans-serif;
  height: 100%; /*прижать футер*/
  color: var(--main-text-color);
}

:root {
  --title-color: #232323;
  --icons-color: #5f6368;
  --main-text-color: rgba(0,0,0,.87);
  --secondary-text-color: rgba(0,0,0,.6);
  --dark-bg: rgba(14,13,32,.4);
  --main-border-radius: 8px;
  --grey-background: linear-gradient( 90deg,#fff,#f9f9f9 5%,#f9f9f9 95%,#fff);
  --main-purple-color: #8b00ff;
  --secondary-purple-color: #8b00ff;
  --purple-btn-bg: #772ce8;
  --light-bg: #fff;
  --medium-bg: hsla(0, 0%, 55%, 0.05);
  --red-color: #fc363b;
  --green-color: #093;
  --border-color: rgba(0, 0, 0, 0.09);
  --secondary-border-radius: 15px;
  --white-color: #fff;
  --rating-bg-green: #eefbf3;
  --rating-bg-red: #fff1f1;
  --bg-inverse: #323232;
  --seconday-bg-color: rgba(34,36,38,.1);
  --chapters-hover: rgb(144 150 155 / 10%);
  --chapters-isRead: hsla(0,0%,55%,.01);
  --indicator-border: #f9f9f9;
  --checkbox-color: #f3f3f3;
  --chapter-visited: #772ce8;
  --gradient-color: linear-gradient(90deg,#ff5c4d,#eb469f 30%,#8341ef 75%,#3f68f9);
  --notification-not-read-color: #efe6f6;
  --dark-grey-bg: #ececec;
  --invert: invert(0);
}

body.dark {
  --title-color: hsla(0,0%,100%,.77);
  --main-text-color: hsla(0,0%,100%,.77);
  --icons-color: hsla(0,0%,100%,.77);
  --secondary-text-color:hsla(0,0%,100%,.6);
  --dark-bg: rgba(14, 13, 32, 0.4);
  --main-border-radius: 6px;
  --grey-background: #121212;
  --main-purple-color: #8b00ff;
  --secondary-purple-color: #bf94ff;
  --purple-btn-bg: #772ce8;
  --light-bg: #171717;
  --medium-bg: #1b1b1b;
  --border-color: hsla(0,0%,59%,.1);
  --rating-bg-green: rgba(89,89,89,.05);
  --rating-bg-red: rgba(89,89,89,.05);
  --bg-inverse: #fff;
  --seconday-bg-color: #2a2a2a;
  --chapters-hover: rgb(144 150 155 / 10%);
  --indicator-border: #121212;
  --checkbox-color: #1b1b1b;
  --chapter-visited: #000;
  --notification-not-read-color: #261f2d;
  --dark-grey-bg: #202020;
  --invert: invert(1);
}

.wrapper {
  min-height: 100vh; /*прижать футер*/
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 993px) {
  .col.l9 {
    width: 80%;
    margin-left: auto;
    left: auto;
    right: auto;
    padding-right: 30px;
  }
  .col.l3 {
    width: 20%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
}
.red-color {
  color: var(--red-color);
}

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

.switch {
  margin-bottom: 20px;
}

.switch-for {
  cursor: pointer;
  font-size: 14px;
  position: relative;
}

.switch-for::after {
  content: "";
  width: 30px;
  height: 8px;
  border-radius: 15px;
  position: absolute;
  top: 6px;
  right: -40px;
  background: var(--medium-bg);
  transition-duration: 300ms;
}

.switch-for::before {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--purple-btn-bg);
  border-radius: 50%;
  position: absolute;
  right: -24px;
  top: 3px;
  z-index: 1;
  transition-duration: 300ms;
}

.switch-input {
  display: none;
}

.switch-input:checked + .switch-for::before {
  transform: translateX(18px);
}

.switch-input:checked + .switch-for::after {
  background: var(--purple-btn-bg);
}

.main-title {
  color: var(--title-color);
  font-weight: 600;
  margin: 15px 0;
  font-size: 30px;
}
@media screen and (max-width: 550px) {
  .main-title {
    font-size: 25px;
  }
}

.secondary-title {
  color: var(--title-color);
  font-weight: 600;
  margin: 15px 0;
  font-size: 1.5em;
}

.small-title {
  color: var(--main-text-color);
  font-weight: 400;
  font-size: 17px;
  margin: 15px 0;
}

.button {
  border: none;
  background: var(--medium-bg);
  border-radius: var(--main-border-radius);
  color: var(--main-text-color);
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-align: center;
}
.button--left-icon {
  display: flex;
  align-items: center;
}
.button--left-icon i {
  margin-right: 3px;
  font-size: 17px;
}
.button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 900px) {
  .button:hover {
    opacity: 1;
  }
}
.button:active {
  transform: translateY(1px);
}
.button--block {
  width: 100%;
  display: block;
}
.button--primary {
  background-color: var(--purple-btn-bg);
  color: white;
}
.button--primary:hover {
  color: white;
}
.button--danger {
  background-color: var(--red-color);
  color: white;
}
.button--danger:hover {
  color: white;
}
.button--attention {
  background: var(--gradient-color);
  color: white;
}
.button--attention:hover {
  background: linear-gradient(90deg, #fc5546, #ea3b99 30%, #7f3bee 75%, #3964f8);
  color: white;
}
.button--loading {
  color: transparent !important;
  position: relative;
}
.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
.button-link {
  font-size: 13px;
}

.logo {
  color: var(--title-color);
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  margin-right: 25px;
  outline: none;
  transition: color 0.4s;
}
.logo span {
  color: var(--main-purple-color);
  transition: color 0.4s;
}
.logo:hover span {
  color: var(--main-text-color);
}
@media screen and (max-width: 500px) {
  .logo {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 350px) {
  .logo {
    font-size: 2em;
    margin-right: 10px;
  }
}

.container {
  margin: 0 auto;
  max-width: 1400px;
  padding-left: 10px;
  padding-right: 10px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.cards__footer {
  display: flex;
  color: var(--secondary-text-color);
  font-size: 13px;
}
.cards__footer-volume {
  margin-right: 10px;
}
@media screen and (max-width: 1200px) {
  .cards--full-page .cards__item {
    width: 16.6666%;
  }
}
@media screen and (max-width: 1050px) {
  .cards--full-page .cards__item {
    width: 20%;
  }
}
@media screen and (max-width: 850px) {
  .cards--full-page .cards__item {
    width: 25%;
  }
}
@media screen and (max-width: 650px) {
  .cards--full-page .cards__item {
    width: 33.3333%;
  }
}
@media screen and (max-width: 374px) {
  .cards--full-page .cards__item {
    width: 50%;
  }
}
.cards__item {
  width: 12.5%;
  height: auto;
  margin-bottom: 25px;
  padding: 0 10px;
  position: relative;
}
.cards__item:hover .cards__img, .cards__item:hover .cards__name {
  opacity: 0.7;
}
.cards__img {
  display: block;
  width: 100%;
  padding-top: 140%;
  background-size: cover;
  background-position: 50%;
  margin-bottom: 10px;
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}
.cards__name {
  margin-bottom: 5px;
  color: var(--main-text-color);
  font-weight: 500;
  font-size: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cards__info {
  color: var(--secondary-text-color);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards-detailed {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.cards-detailed__inner {
  display: flex;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  height: 170px;
}
.cards-detailed__inner:hover {
  background: var(--medium-bg);
}
.cards-detailed__item {
  padding: 0 10px;
  width: 50%;
  margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
  .cards-detailed__item {
    width: 100%;
  }
}
.cards-detailed__poster {
  width: 120px;
  flex-shrink: 0;
}
.cards-detailed__poster img {
  border-radius: var(--main-border-radius);
}
.cards-detailed__wrapper {
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.cards-detailed__type {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.cards-detailed__name {
  font-weight: 500;
  font-size: 17px;
  color: var(--main-text-color);
  margin-bottom: 6px;
}
.cards-detailed__genres {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.cards-detailed__info {
  font-size: 14px;
  color: var(--main-text-color);
}
.cards-detailed__info span {
  color: var(--secondary-text-color);
  margin-left: 5px;
}

.main {
  background: var(--grey-background);
  padding: 15px 0;
  flex: 1 1 auto;
}

.footer {
  padding: 20px 0;
  background: var(--light-bg);
}
.footer__desc {
  font-size: 13px;
  color: var(--main-text-color);
  line-height: 20px;
  letter-spacing: 0.4px;
}
@media screen and (max-width: 640px) {
  .footer__desc {
    text-align: center;
  }
}
.footer__desc-link {
  color: var(--secondary-purple-color);
}
.footer__copyright {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--main-text-color);
}
@media screen and (max-width: 640px) {
  .footer__copyright {
    flex-direction: column;
  }
}
.footer__copyright-name {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  margin-right: 20px;
}
@media screen and (max-width: 640px) {
  .footer__copyright-name {
    margin-right: 0;
  }
}
.footer__item {
  margin-left: 20px;
}
.footer__item:first-of-type {
  margin-left: 0;
}
@media screen and (max-width: 640px) {
  .footer__item {
    padding: 5px 0;
  }
}

.manga {
  display: flex;
  padding-top: 20px;
}
.manga__report {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 760px) {
  .manga__report {
    display: none;
  }
}
.manga__report i {
  font-size: 18px;
  margin-right: 5px;
}
@media screen and (max-width: 760px) {
  .manga {
    flex-direction: column;
    padding-top: 0;
  }
}
.manga__translator {
  margin-bottom: 15px;
}
.manga__translator-image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.manga__translator-image img {
  border-radius: 50%;
}
.manga__translator-item {
  display: flex;
  align-items: center;
}
.manga__translator-title {
  font-weight: 400;
  margin-bottom: 10px;
  font-size: 15px;
}
.manga__left {
  flex-shrink: 0;
  width: 250px;
  margin-right: 35px;
}
@media screen and (max-width: 760px) {
  .manga__left {
    margin-right: 0;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
.manga__poster {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 760px) {
  .manga__poster {
    position: sticky;
    top: 10px;
  }
}
.manga__img {
  margin-bottom: 10px;
  width: 250px;
  height: 400px;
  background-color: var(--medium-bg);
}
.manga__img img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--main-border-radius);
  -o-object-fit: cover;
     object-fit: cover;
}
.manga__rating {
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
}
.manga__rating-info {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}
.manga__rating--red {
  color: var(--red-color);
}
.manga__rating--green {
  color: var(--green-color);
}
.manga__rating--grey {
  color: var(--secondary-text-color);
}
.manga__controls {
  display: flex;
  justify-content: space-between;
}
.manga__favourite-btn {
  margin-left: 10px;
  color: var(--secondary-text-color);
  font-size: 18px;
  line-height: 16px;
  height: 34px;
  display: flex;
  align-items: center;
}
.manga__views {
  color: var(--secondary-text-color);
  text-align: right;
  font-size: 13px;
}
.manga__middle {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.manga__middle-wrapper {
  display: flex;
}
.manga__middle-link {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.manga__middle-link:not(:last-child)::after {
  content: "·";
  padding: 0 5px;
}
.manga__name {
  font-size: 30px;
  font-weight: 500;
  margin: 0 5px 10px 0;
  color: var(--main-text-color);
}
.manga__name-alt {
  font-size: 14px;
  color: var(--secondary-text-color);
  margin: 0 0 10px;
  font-weight: 400;
  padding-right: 30px;
  line-height: 22px;
}
.manga__name-alt span:not(:last-of-type)::after {
  content: "/";
  padding: 0 5px;
}
@media screen and (max-width: 550px) {
  .manga__name-alt {
    padding-right: 0;
  }
}
.manga__description {
  margin-top: 20px;
  font-size: 15px;
  line-height: 22px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.manga__information {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  overflow-x: auto;
}
.manga__information-number {
  width: 15px;
}
@media screen and (max-width: 1060px) {
  .manga__information-table {
    margin-right: 20px;
    padding-bottom: 10px;
  }
  .manga__information-table:last-of-type {
    margin-bottom: 0;
  }
}
.manga__information-table:last-of-type {
  margin-right: 0;
}
.manga__information-table:last-of-type-item:nth-child(1) .manga__information-bar-fill {
  background-color: #b5e48c;
}
.manga__information-table:last-of-type-item:nth-child(2) .manga__information-bar-fill {
  background-color: #B9C79D;
}
.manga__information-table:last-of-type-item:nth-child(3) .manga__information-bar-fill {
  background-color: #EADB7F;
}
.manga__information-table:last-of-type-item:nth-child(4) .manga__information-bar-fill {
  background-color: #fbb851;
}
.manga__information-table:last-of-type-item:nth-child(5) .manga__information-bar-fill {
  background-color: #eb7476;
}
.manga__information i {
  font-size: 18px;
  margin-left: 5px;
}
.manga__information-title {
  font-weight: 400;
  margin-bottom: 15px;
  color: var(--main-text-color);
  font-size: 15px;
}
.manga__information-item {
  display: flex;
  align-items: center;
  color: var(--secondary-text-color);
  margin-bottom: 8px;
  font-size: 0.9em;
}
.manga__information-item:nth-child(1) .manga__information-bar-fill-rating {
  background-color: #b5e48c;
}
.manga__information-item:nth-child(2) .manga__information-bar-fill-rating {
  background-color: #B9C79D;
}
.manga__information-item:nth-child(3) .manga__information-bar-fill-rating {
  background-color: #EADB7F;
}
.manga__information-item:nth-child(4) .manga__information-bar-fill-rating {
  background-color: #fbb851;
}
.manga__information-item:nth-child(5) .manga__information-bar-fill-rating {
  background-color: #eb7476;
}
.manga__information-type {
  margin-right: 5px;
  width: 73px;
}
.manga__information-bar {
  height: 10px;
  background-color: var(--medium-bg);
  width: 250px;
  position: relative;
  margin: 0 10px;
  border-radius: 5px;
}
@media screen and (max-width: 360px) {
  .manga__information-bar {
    width: 200px;
  }
}
.manga__information-bar-fill, .manga__information-bar-fill-rating {
  background-color: var(--purple-btn-bg);
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
}
.manga__information-percent {
  font-weight: 500;
  margin-left: auto;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}
.tags__item {
  flex-shrink: 0;
  font-size: 13px;
  padding: 10px;
  background: var(--medium-bg);
  margin: 0 5px 5px 0;
  border-radius: var(--secondary-border-radius);
}
.tags__item:nth-child(n+6) {
  display: none;
}
.tags__item--warning {
  color: var(--red-color);
}
.tags__item-more {
  font-size: 13px;
  padding: 10px;
  color: var(--main-text-color);
}
.tags__item-more span {
  color: var(--main-purple-color);
}
.tags__item-more:hover {
  color: var(--main-purple-color);
}

.feed {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 750px) {
  .feed {
    flex-direction: column;
  }
}
.feed__left {
  width: 65%;
}
@media screen and (max-width: 750px) {
  .feed__left {
    width: 100%;
  }
}
.feed__right {
  width: 30%;
}
@media screen and (max-width: 750px) {
  .feed__right {
    width: 100%;
  }
}

.view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.view__controls--friends {
  display: flex;
}
.view__controls--friends .button {
  padding: 9px 10px !important;
  display: flex;
  align-items: center;
}
.view__controls--friends .button i {
  font-size: 18px;
}
.view__controls button {
  padding: 4px;
}
.view__controls button:hover {
  background: var(--medium-bg);
  border-radius: 6px;
}

.grid__small::before {
  content: "\e9b0";
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  font-weight: 300;
  color: var(--icons-color);
}
.grid__big::before {
  content: "\e5c3";
  font-family: "Material Symbols Rounded";
  font-size: 22px;
  color: var(--icons-color);
}

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  margin: 0 auto;
}
.auth__social {
  font-size: 14px;
  color: var(--main-text-color);
  margin-bottom: 16px;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form__field {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  padding: 10px 15px;
  outline: var(--main-purple-color);
  color: var(--main-text-color);
}
.form__field--full {
  width: 100%;
}
.form__field:focus, .form__field:active {
  border-color: var(--main-purple-color);
}
.form__field::-moz-placeholder {
  font-size: 14px;
  color: var(--main-text-color);
}
.form__field::placeholder {
  font-size: 14px;
  color: var(--main-text-color);
}
.form__link {
  font-size: 13px;
  color: var(--main-text-color);
  margin-bottom: 20px;
}
.form__hr {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 15px;
}
.form__title {
  margin-bottom: 12px;
}

.social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 23px;
  margin-bottom: 23px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}
.social::after {
  content: "или";
  position: absolute;
  display: inline-block;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grey-background);
  padding: 0 15px;
  color: var(--main-text-color);
  font-size: 13px;
}
.social__item {
  color: white;
  height: 40px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  border-radius: var(--secondary-border-radius);
}
.social__item svg {
  height: 15px;
  width: 15px;
  fill: white;
}
.social__item:last-of-type {
  margin-right: 0;
}
.social__item:hover {
  opacity: 0.7;
  color: white;
}
.social__google {
  background-color: #db4437;
}
.social__discord {
  background-color: #737af4;
}
.social__vk {
  background-color: #1da1f2;
}
.social__yandex {
  background-color: #fc3f1d;
}

/*.search {
    display: flex;
    align-items: center;
    input {
        border: 1px solid transparent;
        background: var(--medium-bg);
        font-size: 15px;
        height: 44px;
        border-radius: var(--main-border-radius);
        margin-right: 10px;
        padding: 0 10px;
        width: 100%;
        outline: var(--main-purple-color);
        color: var(--main-text-color);
        &:focus,
        &:active {
            border-color: var(--main-purple-color);
        }
        &::placeholder {
            font-size: 15px;
            color: var(--secondary-text-color);
        }
    }
    button {
        width: 35px;
        height: 35px;
        font-size: 18px;
        color: var(--white-color);
    }
}*/
.sort-select {
  border: none;
  background-color: unset;
}
.sort-select .ss-single {
  font-size: 15px;
  color: var(--main-text-color);
  cursor: pointer;
  letter-spacing: 0.5px;
  font-weight: 400;
  padding-left: 15px;
}
.sort-select .ss-single::before {
  font-family: "Material Symbols Rounded";
  content: "\e164";
  font-size: 18px;
  position: absolute;
  top: 51%;
  left: 0px;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  font-weight: 300;
  color: var(--main-text-color);
}
.sort-select .ss-list {
  margin-top: 7px;
  background-color: var(--light-bg);
  border-radius: var(--main-border-radius);
}
.sort-select .ss-values {
  flex: 0 1 auto;
}
.sort-select .ss-content .ss-list .ss-option:hover {
  background-color: var(--border-color);
}
.sort-select .ss-arrow {
  width: 9px;
  height: 9px;
  margin: 9px 5px auto 5px;
}

.default-select.ss-main {
  padding: 10px 15px;
  font-size: 14px;
  color: var(--main-text-color);
  border-radius: var(--main-border-radius);
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.default-select.ss-content {
  margin-top: 5px !important;
  border-color: var(--border-color);
  border-radius: var(--main-border-radius);
  background-color: var(--light-bg);
}

.ss-content {
  display: none;
}

.ss-content.ss-open-below,
.ss-content.ss-open-above {
  display: flex;
}

.status-type-popular i {
  color: var(--red-color);
  margin-right: 2px;
}

.status-type-new i {
  color: var(--green-color);
  margin-right: 2px;
}

.dot {
  height: 4px;
  width: 4px;
  background-color: var(--dark-bg);
  border-radius: 50%;
  margin: auto 8px;
}

.list--limit .list__item:nth-child(n+7) {
  display: none;
}
.list__item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}
.list__item:last-of-type {
  margin-bottom: 0;
}
.list__img {
  width: 70px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 10px;
  background-color: var(--light-bg);
}
.list__img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  border-radius: var(--main-border-radius);
}
.list__img:hover {
  opacity: 0.7;
}
.list__name {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 6px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list__type {
  color: var(--secondary-text-color);
  font-size: 14px;
  margin-bottom: 6px;
}
.list__status {
  font-size: 14px;
  color: var(--secondary-text-color);
}
.list__status--green {
  color: var(--green-color);
}
.list__status--red {
  color: var(--red-color);
}
.list__status--grey {
  color: var(--grey-color);
}
.list__show-all {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--secondary-text-color);
  display: block;
}
.list__info {
  overflow: hidden;
}

.friends__item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
}
.friends__avatar {
  width: 60px;
  padding-top: 60px;
  background-size: cover;
  border-radius: var(--main-border-radius);
  margin-right: 10px;
}
.friends__name {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 15px;
}
.friends__time {
  font-size: 13px;
  color: var(--secondary-text-color);
}
.friends__more {
  color: var(--main-text-color);
  font-size: 13px;
  padding: 10px;
  letter-spacing: 0.3px;
}
.friends__more span {
  color: var(--main-purple-color);
}
.friends__more:hover {
  color: var(--main-purple-color);
}

@media screen and (max-width: 375px) {
  .cards.owl-carousel {
    margin: 0 -5px;
  }
}

.owl-carousel .cards__item {
  width: 173px;
  display: block;
}
@media screen and (max-width: 375px) {
  .owl-carousel .cards__item {
    width: 149px;
    padding: 0 5px;
  }
}
@media screen and (max-width: 360px) {
  .owl-carousel .cards__item {
    width: 145px;
    padding: 0 5px;
  }
}
@media screen and (max-width: 330px) {
  .owl-carousel .cards__item {
    width: 140px;
  }
}

.side-menu {
  width: 280px;
  margin-bottom: 20px;
  margin-right: 20px;
}
@media screen and (max-width: 750px) {
  .side-menu {
    display: flex;
    overflow-x: auto;
    width: 100%;
  }
}
.side-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: var(--main-border-radius);
  line-height: 20px;
}
@media screen and (max-width: 750px) {
  .side-menu__item {
    flex-shrink: 0;
    margin-bottom: 20px;
  }
}
.side-menu__item:hover {
  background: var(--medium-bg);
  color: var(--main-text-color);
}
.side-menu__item--active {
  background: var(--medium-bg);
  font-weight: 500;
}
.side-menu__item--active i {
  font-weight: 600;
}
.side-menu__name {
  color: var(--main-text-color);
  display: flex;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .side-menu__name {
    margin-right: 10px;
  }
}
.side-menu__name i {
  margin-right: 10px;
  font-size: 21px;
  color: var(--icons-color);
}

.section-bg {
  position: relative;
  overflow: hidden;
  background: var(--light-bg);
}
.section-bg img {
  width: 100%;
  height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 20% 20%;
     object-position: 20% 20%;
  display: block;
  -webkit-filter: blur(3px);
}
@media screen and (max-width: 1200px) {
  .section-bg img {
    height: 200px;
    -webkit-filter: unset;
  }
}
.section-bg__content {
  font-size: 15px;
  line-height: 23px;
  padding: 0 10px;
}
@media screen and (min-width: 1200px) {
  .section-bg__content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 65%;
    padding: 0;
  }
}
.section-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}
@media screen and (max-width: 1200px) {
  .section-bg::after {
    display: none;
  }
}

.list-detailed__item {
  margin-bottom: 15px;
}
.list-detailed__name {
  display: block;
  font-size: 18px;
  margin-bottom: 15px;
}
.list-detailed__img {
  width: 120px;
  height: 172px;
  margin-right: 15px;
  flex-shrink: 0;
  display: block;
}
.list-detailed__img img {
  border-radius: var(--main-border-radius);
}
.list-detailed__info {
  font-size: 15px;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}
.list-detailed__info span {
  margin-right: 10px;
}
.list-detailed__info span:last-of-type {
  margin-right: 0;
}
.list-detailed__wrapper {
  display: flex;
}
.list-detailed__desc {
  font-size: 15px;
  color: var(--main-text-color);
}

.spoiler {
  display: inline;
  cursor: pointer;
}
.spoiler:hover {
  opacity: 0.7;
}
.spoiler__button {
  display: inline;
  color: var(--secondary-purple-color);
}
.spoiler__content {
  display: none;
  border-bottom: 1px dashed var(--secondary-purple-color);
}

.active-users {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  height: 70px;
  overflow: hidden;
}
.active-users__item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  padding: 10px 15px;
  background: var(--light-bg);
  border-radius: var(--main-border-radius);
  flex-shrink: 0;
}
.active-users__item:hover .active-users__name {
  color: var(--secondary-purple-color);
}
.active-users__avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  display: block;
  position: relative;
}
.active-users__avatar img {
  border-radius: var(--main-border-radius);
}
.active-users__name {
  display: block;
  font-size: 15px;
  color: var(--main-text-color);
  margin-bottom: 5px;
}
.active-users__chapters {
  font-size: 14px;
  color: var(--secondary-text-color);
}

.favourite-send-btn.active i {
  color: var(--red-color);
}
.favourite-send-btn.active i::before {
  content: "\e87d";
  font-weight: 400;
}

.icon-liked {
  color: var(--red-color);
}

.text {
  font-size: 15px;
  margin: 5px 0;
  color: var(--main-text-color);
}

@media screen and (max-width: 1000px) {
  .phpdebugbar {
    display: none;
  }
}
.back-link {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.back-link i {
  font-size: 20px;
  margin-right: 3px;
}

.next-link {
  display: flex;
  font-size: 14px;
}
.next-link i {
  font-size: 20px;
  margin-left: 3px;
}

.venok {
  position: absolute;
  transform: scale(1.1);
}

.load-more-similar {
  font-size: 14px;
}

.custom-icon {
  font-size: 12px !important;
  font-family: "Exo 2", sans-serif;
  border: 1px solid var(--icons-color) !important;
  padding: 2px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--icons-color);
}