@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

* {
  font-family: "Rubik", sans-serif;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 45px;
  scroll-margin-top: 45px;
}

body {
  background-color: #0b0c0f;
  overflow: auto;
  height: -moz-available;
  height: 100%;
  position: relative;
  width: 100%;
  scroll-padding-top: 45px;
  scroll-margin-top: 45px;
}

body.page-packages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./assets/ajja-green-background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.1;
  z-index: -1;
}

:is(h1, h2, h3) {
  scroll-padding-top: 45px;
  scroll-margin-top: 45px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

body.overlay-shown {
  overflow: hidden;
}

body.overlay-shown::before {
  opacity: 1;
}

.body-2 {
  background-image: linear-gradient(
      rgba(10, 23, 30, 0.7) 100%,
      rgba(10, 23, 30, 0.7) 100%
    ),
    url("./assets/background.jpg");
}

@keyframes subtle-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.watch-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.6px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: white;
  border-radius: 4px;
  padding: 6px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #1ae683 0%, #04ad5b 100%);
}

.watch-btn svg {
  stroke: #fff !important;
}

.watch-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #10a85e;
  opacity: 0;
  transition: all 0.3s;
}

.active .watch-btn::after {
  opacity: 1;
}

.warning-multistream {
  display: none;
}

.btn-error {
  background: linear-gradient(180deg, #ff0000 0%, #c72c2c 100%);
}

.chan-tab {
  border: 1px solid #1ae683;
  border-radius: 4px;
  background: #1ae68329;
  padding: 9px 15px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
}

.chan-tab.active::before {
  content: "";
  background: red;
  width: 8px;
  aspect-ratio: 1;
  display: block;
  border-radius: 50%;
}

.channel-header {
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 5px;
}

.paused {
  position: relative;
  cursor: pointer;
}

.paused::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='42' viewBox='0 0 40 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0.97451C8.9543 0.97451 0 9.94022 0 21C0 32.0598 8.9543 41.0255 20 41.0255C31.0457 41.0255 40 32.0598 40 21C40 9.94022 31.0457 0.97451 20 0.97451ZM14.5354 29.7099V12.2901L29.6022 21L14.5354 29.7099Z' fill='%231AE683'/%3E%3C/svg%3E%0A");
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}


.multistream-btn {
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 13px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}

.multistream-switch {
  width: 26px;
  height: 13.76px;
  border-radius: 100px;
  background: #333333;
  position: relative;
  overflow: hidden;
}

.multistream-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 0.2s;
  background: linear-gradient(180deg, #1ae683 0%, #04ad5b 100%);
}

.multistream-switch::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.2s;
}

input#multistream:checked + label .multistream-switch::before {
  opacity: 1;
}

input#multistream:checked + label .multistream-switch::after {
  left: calc(100% - 12px - 1px);
}

.stream-footer {
  display: flex !important;
}

.stream-footer a {
  cursor: pointer;
}

.report-box {
  display: none;
}

.report-radio {
  display: flex;
  align-items: center;
  gap: 17px;
  cursor: pointer;
  width: fit-content;
}

.report-radio::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  aspect-radio: 1/1;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11.2' stroke='%23C1C1C1' stroke-width='1.6'/%3E%3C/svg%3E%0A");
}

[name="report"]:checked + .report-radio::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_105_288' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 16.1699C14.303 16.1699 16.1699 14.303 16.1699 12C16.1699 9.69702 14.303 7.83008 12 7.83008C9.69702 7.83008 7.83008 9.69702 7.83008 12C7.83008 14.303 9.69702 16.1699 12 16.1699Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 16.1699C14.303 16.1699 16.1699 14.303 16.1699 12C16.1699 9.69702 14.303 7.83008 12 7.83008C9.69702 7.83008 7.83008 9.69702 7.83008 12C7.83008 14.303 9.69702 16.1699 12 16.1699Z' fill='%231AE683' fill-opacity='0.6'/%3E%3Cpath d='M23 12C23 18.0751 18.0751 23 12 23V25C19.1797 25 25 19.1797 25 12H23ZM12 1C18.0751 1 23 5.92487 23 12H25C25 4.8203 19.1797 -1 12 -1V1ZM1 12C1 5.92487 5.92487 1 12 1V-1C4.8203 -1 -1 4.8203 -1 12H1ZM12 23C5.92487 23 1 18.0751 1 12H-1C-1 19.1797 4.8203 25 12 25V23ZM15.1699 12C15.1699 13.7507 13.7507 15.1699 12 15.1699V17.1699C14.8553 17.1699 17.1699 14.8553 17.1699 12H15.1699ZM12 8.83008C13.7507 8.83008 15.1699 10.2493 15.1699 12H17.1699C17.1699 9.14473 14.8553 6.83008 12 6.83008V8.83008ZM8.83008 12C8.83008 10.2493 10.2493 8.83008 12 8.83008V6.83008C9.14473 6.83008 6.83008 9.14473 6.83008 12H8.83008ZM12 15.1699C10.2493 15.1699 8.83008 13.7507 8.83008 12H6.83008C6.83008 14.8553 9.14473 17.1699 12 17.1699V15.1699Z' fill='%2366BF94' mask='url(%23path-1-inside-1_105_288)'/%3E%3C/svg%3E%0A");
}

.report-btn {
  border-radius: 50px;
  width: fit-content;
  font-size: 16px;
  padding: 8px 16px;
  text-transform: unset;
  cursor: pointer;
}

.multi-channel > .selected,
.channel-2.active,
.channel.active {
  background-color: #fff !important;
}

:is(.multi-channel > .selected, .channel-2.active, .channel.active)
  :is(p, span, div):not(.watch-btn span):not(.watch-btn) {
  color: black !important;
}

.gameday:not(:last-child) {
  margin-bottom: 18px;
}

.gametime {
  margin-bottom: 6px;
  color: #fff;
  font-size: 14px;
}

.gametime b {
  margin-right: 8px;
}

.game {
  border: 1px solid transparent;
  width: fit-content;
  border-radius: 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

img.gameleague {
  width: 50px;
  height: 50px;
  display: block;
  padding: 6px;
  background: transparent;
}

img.gameteam {
  width: 30px;
  height: 30px;
}

.gameteams {
  display: flex;
  align-items: center;
  color: #e1e1e1;
  padding: 10px 31px 10px 19px;
  gap: 10px;
  font-size: 12px;
}

.game:not(:last-child) {
  margin-bottom: 10px;
}

.game.selected,
.game:hover {
  border-color: #383b48;
}

.game.selected img.gameleague {
  background: #383b48;
}

.notification-dropdown,
.share-dropdown,
.notification-modal {
  display: none;
}

.notification-progress {
  --theme: #fff;
  --progress-value: 60;
  --progress: calc(var(--progress-value) * 1%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #000;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-image: radial-gradient(
      70% 70% at 50% 50%,
      var(--theme) 58%,
      #ffffff00 58%
    ),
    conic-gradient(
      from 0deg at 50% 50%,
      #000000 0%,
      #000000 var(--progress),
      #d62323 var(--progress),
      #d62323 100%
    );
  transition: all 0.5s;
}

.notification-progress::after {
  content: attr(data-progress);
  font-size: 16px;
  font-family: sans-serif;
  color: black;
}

.pricing-list > li::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url("./assets/tick.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 3.5px;
}

.faq-accordion {
  position: relative;
  padding-right: 55px;
}

.faq-accordion::before {
  content: "";
  position: absolute;
  inset: 10px 10px auto auto;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='41' viewBox='0 0 40 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 27.6261C19.6803 27.6261 19.3603 27.5039 19.1162 27.2598L6.61621 14.7598C6.12777 14.2714 6.12777 13.4804 6.61621 12.9923C7.10464 12.5042 7.89558 12.5039 8.38371 12.9923L20 24.6086L31.6162 12.9923C32.1046 12.5039 32.8956 12.5039 33.3837 12.9923C33.8718 13.4807 33.8721 14.2717 33.3837 14.7598L20.8837 27.2598C20.6396 27.5039 20.3196 27.6261 20 27.6261Z' fill='white'/%3E%3C/svg%3E%0A");
  width: 40px;
  aspect-ratio: 1/1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s;
}

.faq-accordion.active::before {
  transform: rotate(180deg);
}

.nottification-badge {
  top: 8.86px;
  right: 3.79px;
}

/*  */
.font-light {
  font-weight: 300;
}

.font-rubikBold {
  font-weight: 700;
}

.font-rubikSemibold {
  font-weight: 600;
}

.font-rubikMedium {
  font-weight: 500;
}

.stroke-blue {
  stroke: #5a7d90;
}

.stroke-violet {
  stroke: #1ae683;
}

.fill-violet {
  fill: #1ae683;
}

.bg-white {
  background-color: #fff !important;
}

.bg-white .text-white {
  color: #000 !important;
}
.bg-white svg {
  stroke: #000;
}

.bg-whiteTransparent {
  background-color: rgba(255, 255, 255, 0.06);
}

.bg-whiteLighter {
  background-color: rgba(255, 255, 255, 0.16);
}

.bg-darkBlueOpacity {
  background-color: rgba(16, 33, 43, 0.65);
}

.border-violet {
  --tw-border-opacity: 1;
  border-color: rgb(26 230 131 / var(--tw-bg-opacity, 1));
}

.bg-blueOpacity {
  background-color: rgba(41, 80, 102, 0.5);
}

.bg-violet {
  --tw-bg-opacity: 1;
  background-color: rgb(251 98 63 / var(--tw-bg-opacity));
}

.bg-blackOpacity {
  background-color: rgba(5, 12, 16, 0.85);
}

.text-violet {
  --tw-text-opacity: 1;
  color: rgb(26 230 131 / var(--tw-bg-opacity, 1));
}

.hover\:text-violet:hover {
  --tw-text-opacity: 1;
  color: rgb(26 230 131 / var(--tw-bg-opacity, 1));
}

.bg-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(90 125 144 / var(--tw-bg-opacity));
}

.bg-darkBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(16 33 43 / var(--tw-bg-opacity));
}

.border-blue {
  --tw-border-opacity: 1;
  border-color: rgb(90 125 144 / var(--tw-border-opacity));
}

.bg-blueOpacity {
  background-color: rgba(41, 80, 102, 0.5);
}

.bg-blueOpacity {
  background-color: rgba(41, 80, 102, 0.5);
}

.text-blue-600 {
  color: rgb(68 95 109 / var(--tw-text-opacity)) !important;
}

.bg-darkBlueOpacity3 {
  background-color: rgba(41, 80, 102, 0.5);
}

.text-green {
  --tw-text-opacity: 1;
  color: rgb(34 150 101 / var(--tw-text-opacity));
}

.stroke-green {
  stroke: #229665;
}

.faq-accordion span:last-child {
  display: flex;
}

.hover\:bg-blueOpacity:hover {
  background-color: rgba(41, 80, 102, 0.5);
}

.hover\:bg-whiteTransparent:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.hover\:bg-whiteLighter:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.channel-2:hover .bg-darkBlueOpacity3 {
  background: #fff !important;
  color: #333;
}

.channel-2:hover .bg-darkBlueOpacity3 .stroke-violet {
  stroke: #333;
}

.bg-white2 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity));
}

.channel-header {
  max-width: 100%;
  overflow-x: auto;
}

.bg-otherBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(78 128 166 / var(--tw-bg-opacity));
}

/* Card Start */

.pricing {
  display: flex;
  align-items: flex-end;
  padding: 30px;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.card {
  text-align: center;
  background: #1ae683;
  border-radius: 15px;
  padding: 25px 5px 5px;
  flex: 1;
}

.card-content {
  border-radius: 15px;
  background: #121317;
  padding: 30px 16px 20px;
}

h4.card-sibtitle {
  color: #7a7a7a;
  font-size: 30px;
  font-weight: 800;
}

h3.card-title {
  color: #fff;
  font-size: 45px;
  font-weight: 800;
}

span.card-text {
  color: #7a7c7d;
  font-size: 13px;
  display: block;
  font-weight: 600;
}

button.card-btn {
  background: #1ae683;
  width: 100%;
  padding: 10px;
  border-radius: 15px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #fff;
}

.card ul {
  color: #727377;
  padding: 0px 8px;
  text-align: start;
}

.card ul li::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  margin-top: 5px;
  background: #312a49;
  border-radius: 50%;
  margin-right: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='30px' height='30px' viewBox='0 0 1024 1024'%3E%3Cpath d='M760 380.4l-61.6-61.6-263.2 263.1-109.6-109.5L264 534l171.2 171.2L760 380.4z' fill='%231AE683'/%3E%3C/svg%3E");
  background-size: 19px;
  background-position: center;
  background-repeat: no-repeat;
}

.card ul li {
  display: flex;
  font-size: 13px;
}

.card.featured h4.card-sibtitle {
  font-size: 37px;
}

.card ul li:not(:last-child) {
  margin-bottom: 7px;
}

.channel-header {
  min-height: 58px;
}

.card.featured h3.card-title {
  font-size: 60px;
}

.card.featured {
  background: #1ae683;
  flex: 1.1;
}

.card.featured .card-btn {
  background: #1ae683;
  font-size: 18px;
}

.card.featured ul li:not(:last-child) {
  margin-bottom: 8px;
}

.card.featured ul li {
  font-size: 20px;
}

.card.featured ul li::before {
  width: 25px;
  height: 25px;
  background-size: 26px;
  margin-right: 14px;
}

.card.featured ul {
  width: fit-content;
  margin: auto;
}

.card {
  container-name: pricing-card;
  container-type: inline-size;
}

@media only screen and (max-width: 1280px) {
  .pricing {
    flex-direction: column;
    align-items: stretch;
  }

  .card-content {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    padding: 20px;
  }

  button.card-btn {
    width: fit-content;
    padding-inline: 20px;
    order: 1;
    margin-bottom: 0;
  }

  h4.card-sibtitle {
    font-size: 25px;
  }

  h3.card-title {
    font-size: 40px;
  }

  .card.featured h4.card-sibtitle {
    font-size: 32px;
  }

  .card.featured h3.card-title {
    font-size: 55px;
  }
}

@media only screen and (max-width: 920px) {
  .channel-header.thinScrollbar + div {
    max-height: 500px;
  }

  .card ul {
    margin: auto;
    width: fit-content;
  }
}

@media only screen and (max-width: 640px) {
  .card {
    width: min(280px, 100%);
    margin: auto;
  }
}

@container pricing-card (width < 700px) {
  .card-content {
    display: grid;
    grid-template-areas:
      "header content"
      "cta content";
    column-gap: 20px;
    row-gap: 10px;
    justify-content: stretch;
  }
  .card ul {
    grid-area: content;
  }
  button.card-btn {
    margin: auto;
  }
}

@container pricing-card (width < 472px) {
  .card-content {
    display: block !important;
  }

  button.card-btn {
    margin: 20px 0 30px !important;
  }
}

/* Card End */

@media (min-width: 768px) {
  .md\:w-\[30px\] {
    width: 30px;
  }
}

@media (min-width: 920px) {
  .unique\:w-\[350px\] {
    width: 350px !important;
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:stroke-white {
    stroke: #fff !important;
  }
}

@media (min-width: 500px) {
  .mini\:w-\[450px\] {
    width: 450px !important;
  }
}

@media (min-width: 920px) {
  .unique\:h-\[100px\] {
    height: 100px !important;
  }
}

@media (min-width: 640px) {
  .thinScrollbar::-webkit-scrollbar {
    height: 6.4px;
    width: 6.4px;
  }

  .thinScrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.5rem;
  }

  .thinScrollbar::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
  }
}

@media (min-width: 920px) {
  .unique\:hidden {
    display: none !important;
  }
}

@media (min-width: 920px) {
  .unique\:flex {
    display: flex !important;
  }
}

@media (min-width: 920px) {
  .unique\:mr-15 {
    margin-right: 15px;
  }
}

/* @media (min-width: 1170px) {
  .header\:w-\[calc\(100\%-325px\)\] {
    width: calc(100% - 325px);
  }
} */

@media (min-width: 1170px) {
  .header\:w-\[340px\] {
    width: 340px !important;
    min-width: 340px;
  }
}
@media (min-width: 920px) {
  .unique\:h-\[50px\] {
    height: 50px !important;
  }
}

@media (min-width: 920px) {
  .unique\:px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 920px) {
  .unique\:text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
}

@media (min-width: 920px) {
  .unique\:max-w-max {
    max-width: -webkit-max-content !important;
    max-width: max-content !important;
  }
}

@media (min-width: 920px) {
  .unique\:w-\[25px\] {
    width: 25px !important;
  }
}

@media (min-width: 920px) {
  .unique\:h-\[25px\] {
    height: 25px !important;
  }
}

@media (min-width: 920px) {
  .unique\:pr-10 {
    padding-right: 10px !important;
  }
}

@media (min-width: 920px) {
  .unique\:pl-10 {
    padding-left: 10px !important;
  }
}

@media (min-width: 920px) {
  .unique\:pr-2 {
    padding-right: 0.5rem !important;
  }
}

@media (min-width: 920px) {
  .unique\:max-h-\[550px\] {
    max-height: 550px !important;
  }
}

/*  */

pre {
  @apply whitespace-normal w-full;
}

.tableItem:hover #watch {
  @apply bg-white text-black;
}

.tableItem:hover #watch > svg {
  @apply stroke-black;
}

.tableItem:hover #bet {
  @apply bg-green;
}

#root {
  @apply p-0 m-0 h-full;
}

.thinScrollbar::-webkit-scrollbar {
  @apply sm:w-[5px] sm:h-[5px];
}

.thinScrollbar::-webkit-scrollbar-thumb {
  @apply sm:bg-blue sm:rounded-3xl;
}

a {
  color: inherit;
  text-decoration: none;
}

.topBlock:hover > div > div > .topTeamLogoBlock {
  @apply lg:hidden;
}

.topBlock:hover > div > div > .topTeamNameBlock {
  @apply lg:block;
}

@keyframes spin {
  to {
    transform: rotate(-360deg);
  }
}

.loader {
  animation: spin 1s infinite linear;
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

@keyframes trick {
  100% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

.posSticky {
  @apply sticky lg:static;
}

.description > ul,
.description > ul {
  @apply list-disc pl-[30px];
}

.description > ol > li,
.description > ol > li {
  @apply float-left px-[5px] w-full text-justify;
}

.description > *,
.description {
  @apply m-0 mt-3 w-full text-blue-300 text-base font-rubikRegular text-justify;
}

.description > * > strong {
  @apply font-rubikBold;
}

.description > *:is(h1, h2, h3, h4, h5, h6) {
  @apply text-center font-rubikBold;
}

.description > h1 {
  @apply text-[36px];
}

.description > h2 {
  @apply text-[24px];
}

.description > h3 {
  @apply text-[18px];
}

@keyframes plug {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.plugGradient {
  animation: plug 2s linear infinite;
}

.tableItemPlug {
  animation: plug 2s linear infinite;
  @apply bg-gradient-to-r from-darkBlueOpacity3 to-darkBlueOpacity bg-[length:200%_200%];
}

input[type="checkbox"] {
  @apply accent-violet;
}

.absoluteBlock {
  @apply absolute w-full h-full z-50;
}

.topMatchHover:hover > .opacityBlock {
  @apply bg-blackOpacity1;
}

.borderRadius {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

input[type="checkbox"] {
  @apply accent-violet;
}

@keyframes spin {
  to {
    transform: rotate(-360deg);
  }
}

.loader {
  animation: spin 1s infinite linear;
}

.hoverStrokeLink:hover > svg {
  @apply stroke-violet;
}

.hoverFillLink:hover > svg {
  @apply fill-violet;
}

.hoverPlace:hover > div > svg {
  @apply rotate-90;
}

.hoverPlace:hover > .hoverBlock {
  @apply lg:flex;
}

.bgImage {
  background-image: linear-gradient(
      rgba(10, 23, 30, 0.45) 100%,
      rgba(10, 23, 30, 0.5) 100%
    ),
    url("../public/images/modal/background.jpg");
  background-size: contain;
  background-position: 50% 50%;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

input:-moz-autofill {
  box-shadow: 0 0 0 1000px white inset;
}

.half-colored {
  background: linear-gradient(
    to right,
    rgb(77, 197, 145) 50%,
    rgb(188, 235, 214) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.half-colored1 {
  background: linear-gradient(
    to right,
    rgb(77, 197, 145) 50%,
    rgb(255, 255, 255) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hasShadow {
  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.15), 0 0 2px 0 rgba(0, 0, 0, 0.05);
}

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

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

@media (max-width: 919px) {
  .chan-tab {
    font-size: 12px;
    line-height: 24px;
    padding: 2px 20px;
  }

  .channel-header {
    min-height: 44px;
    margin-bottom: 0;
  }
}

:is(#static-header > div, #static-nav > div).is-sticky {
  position: fixed;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  background: #0B0C0F;
  /* -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); */
  -webkit-animation: slideDown 0.35s ease-out;
  animation: slideDown 0.35s ease-out;
}

#static-header > div.is-sticky > div {
  padding: 8px 0;
  padding-block: 15px;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}