/* Estilos */
@import url(no-strap.css);
@import url(variables.css);
@import url(root.css);
@import url(streamers.css);
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 !important;
  padding: 0;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 !important;
}
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}
html {
  font-family: "Rajdhani", serif;
  height: 100%;
  scroll-behavior: smooth;
}
body {
  background: #160d1c;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: #fff;
}
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #7e69bf;
}
::-webkit-scrollbar-thumb:hover {
  background: #6b54b6;
}
::-webkit-scrollbar-track {
  background: #060307;
}

hr {
  width: 100%;
}

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

.icon--download-direct {
  background: url("../img/icons/direct.svg") center no-repeat;
  background-size: 24px 24px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg)
    brightness(101%) contrast(103%);
}
.icon--download-google-drive {
  background: url("../img/icons/google-drive.svg") center no-repeat;
  background-size: 24px 24px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg)
    brightness(101%) contrast(103%);
}
.icon--download-mega-nz {
  background: url("../img/icons/mega-nz.svg") center no-repeat;
  background-size: 24px 24px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg)
    brightness(101%) contrast(103%);
}

.button__normal {
  min-height: 50px !important;
  height: 100% !important;
  transform: skew(0deg) !important;
}

.button__top {
  align-items: center;
  background: #554097;
  border-radius: 50%;
  bottom: 20px;
  color: #fff;
  display: flex;
  height: 50px;
  justify-content: center;
  opacity: 0;
  position: fixed;
  right: 20px;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out, visibility 0.3s linear;
  visibility: hidden;
  width: 50px;
  z-index: calc(9999 + 9999 - 1);
}
.button__top > i {
  font-size: 22px;
}
.button--top-visible {
  opacity: 1;
  visibility: visible;
}
.button__small {
  align-items: center;
  background: linear-gradient(to right, #5435b8 50%, #6b54b6 50%);
  background-position: 100% 0;
  background-size: 200% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 500;
  height: 25px;
  padding: 0 20px 0 20px;
  outline: none;
  text-decoration: none;
  text-transform: capitalize;
  transform: skew(-22deg);
  transition: background-position 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  width: max-content;
}
.button__small:hover {
  background-position: 0 0;
}
.button__small > span {
  display: block;
  transform: skew(22deg);
}
.button__medium {
  align-items: center;
  background: linear-gradient(to right, #5435b8 50%, #6b54b6 50%);
  background-position: 100% 0;
  background-size: 200% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 18px;
  font-weight: 600;
  height: 40px;
  padding: 0 20px 0 20px;
  outline: none;
  transform: skew(-22deg);
  text-decoration: none;
  text-transform: capitalize;

  transition: background-position 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  width: 100%;
}

.button--light {
  background: linear-gradient(to right, #b5b5b4 50%, #909090 50%);
}

.button--light:hover {
  background-position: 0 0;
}

.button--warning {
  background: linear-gradient(
    to right,
    rgb(245, 147, 33) 50%,
    rgb(254, 205, 47) 50%
  );

  color: rgb(110, 81, 5);
}

.button--warning:hover {
  background-position: 0 0;
}

.button--success {
  background: linear-gradient(to right, #3dc75b 50%, #29b64b 50%);
}

.button--success:hover {
  background-position: 0 0;
}

.button--danger {
  background: linear-gradient(to right, #f44336 50%, #d32f2f 50%);
}

.button--danger:hover {
  background-position: 0 0;
}

.button--info {
  background: linear-gradient(to right, #3090e6 50%, #2579b9 50%);
}

.button--light,
.button--warning,
.button--success,
.button--info,
.button--danger {
  background-position: 100% 0;
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.button--info:hover,
.button--light:hover,
.button--warning:hover,
.button--success:hover {
  background-position: 0 0;
}

.button__medium:hover,
.button__medium.active {
  background-position: 0 0;
}

.button__medium > span {
  display: block;
  text-transform: capitalize;
  transform: skew(22deg);
}
.button__slogan {
  align-items: center;
  background: rgba(15, 15, 16, 0.42);
  border: 4px solid #6b54b6;
  color: #fff;
  display: flex;
  font-size: 22px;
  font-weight: 500;
  height: 48px;
  padding: 0 36px 0 36px;
  text-decoration: none;
  transform: skew(22deg);
  transition: all 0.18s ease-in-out;
  width: max-content;
}
.button__slogan:hover {
  background: #5435b8;
  border: 4px solid #5435b8;
}
.button__slogan > span {
  display: block;
  transform: skew(-22deg);
}
.button__download {
  align-items: center;
  background: transparent;
  border: 3px solid #6b54b6;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  max-width: 368px;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  transform: skew(22deg);
  transition: all 0.18s ease-in-out;
  width: 100%;
}
.button__download:hover {
  background: #5435b8;
  border: 3px solid #5435b8;
}
.button__download .button__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  transform: skew(-22deg);
  width: 100%;
}
.button__download .button__body > .icon {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.alerts {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.alerts__alert {
  background: #1d1127;
  border-left: 4px solid #6b54b6;
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 17px;
  font-weight: 600;
  padding: 20px 20px 20px 20px;
  width: 100%;
}
.window {
  background: rgba(0, 0, 0, 0.4);
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.3s ease-in-out;
  width: 100vw;
  z-index: calc(9999 + 1);
}
.window--visible {
  opacity: 1;
  pointer-events: all;
}
.sidebar {
  background: #141016;
  box-shadow: 0px 0px 16px -3px rgba(52, 34, 66, 0.25);
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 290px;
  overflow: auto;
  position: fixed;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  width: 290px;
  z-index: calc(9999 + 2);
}
.sidebar__top {
  border-bottom: 1px solid #342242;
  display: flex;
  justify-content: center;
  padding: 10px 0 10px 0;
  position: relative;
  width: 100%;
}
.sidebar__close {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: 10px;
  width: 26px;
}
.sidebar__close:hover .close__line {
  background: #6b54b6;
}
.sidebar__close .close__line {
  background: #fff;
  height: 3px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform-origin: center;
  transition: background-color 0.15s ease-in-out;
  width: 22px;
}
.sidebar__close .close__line:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.sidebar__close .close__line:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.sidebar__logo {
  height: 70px;
  width: 70px;
  object-fit: contain;
}
.sidebar__heading {
  align-items: center;
  background: #0f0f10;
  border-bottom: 1px solid #342242;
  display: flex;
  height: 46px;
  min-height: 46px;
  padding: 0 20px 0 20px;
}
.sidebar__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.sidebar__menu {
  padding: 0 0 120px 0;
}
.sidebar__menu .menu__item {
  align-items: center;
  border-bottom: 1px solid #342242;
  cursor: pointer;
  display: flex;
  height: 52px;
  padding: 0 20px 0 0;
}
.sidebar__menu .menu__item .arrow {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 20px;
  justify-content: center;
  transform: rotate(-180deg);
  transition: transform 0.3s ease-in-out;
  width: 20px;
}
.sidebar__menu .menu__item .arrow > i {
  color: #fff;
  font-size: 16px;
}
.sidebar__menu .menu__item .arrow--open {
  transform: rotate(0deg);
}
.sidebar__menu .menu__link {
  align-items: center;
  color: #fff;
  display: flex;
  flex: 1;
  height: 100%;
  font-family: "Rajdhani", serif;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
}
.sidebar__menu .menu__link::before,
.sidebar__menu .menu__link.active::before {
  background: #6b54b6;
  content: "";
  display: inline-block;
  height: 100%;
  margin: 0 14px 0 0;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  width: 6px;
}
.sidebar__menu .menu__link.active::before {
  opacity: 1 !important;
}
.sidebar__menu .menu__link:hover::before {
  opacity: 1;
}
.sidebar__menu .menu__collapsible {
  background: #0f0f10;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  row-gap: 10px;
  transition: max-height 0.3s ease-in-out,
    border-bottom 0.001s ease-in-out 0.001s;
}
.sidebar__menu .menu__collapsible.collapsible--border {
  border-bottom: 1px solid #342242;
}
.sidebar__menu .menu__collapsible .collapsible__item {
  align-items: center;
  display: flex;
  padding: 0 20px 0 30px;
}
.sidebar__menu .menu__collapsible .collapsible__item:first-child {
  padding: 20px 20px 0 30px;
}
.sidebar__menu .menu__collapsible .collapsible__item:last-child {
  padding: 0 20px 20px 30px;
}
.sidebar__menu .menu__collapsible .collapsible__link {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
  transition: color 0.15s ease-in-out;
}
.sidebar__menu .menu__collapsible .collapsible__link:hover {
  color: #6b54b6;
}
.sidebar--visible {
  transform: translateX(0);
}
.header__top {
  align-items: center;
  background: #141016;
  border-bottom: 1px solid #6b54b6;
  display: flex;
  height: 62px;
  justify-content: center;
  width: 100%;
}
.header__top .container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
}
.header__auth {
  column-gap: 16px;
  display: flex;
}
.header__social {
  display: none;
}
.header__nav {
  align-items: center;
  background: #150b1d;
  display: flex;
  height: 88px;
  justify-content: center;
  width: 100%;
  position: relative;
}
.header__nav .header__portable {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  max-width: 1280px;
  position: relative;
  width: 100%;
}
.header__nav .header__desktop {
  display: none;
}
.header__mobile {
  align-items: center;
  display: flex;
  height: 88px;
  justify-content: center;
  left: 0;
  position: absolute;
  width: 88px;
}
.header .mobile__button {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  row-gap: 6px;
  width: 48px;
}
.header .mobile__button:hover .mobile__line {
  background: #6b54b6;
}
.header .mobile__line {
  background: #fff;
  height: 3px;
  transform: skew(-14deg);
  transition: background-color 0.15s ease-in-out;
  width: 30px;
}
.header__logo {
  align-items: center;
  display: flex;
  height: 88px;
  justify-content: center;
  width: 88px;
}
.header__logo > img {
  height: 70px;
  width: 70px;
  object-fit: contain;
}
@media screen and (min-width: 610px) {
  .header__top .container {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0 20px 0 20px;
  }
  .header__social {
    column-gap: 10px;
    display: flex;
  }
  .header__social .social__box {
    align-items: center;
    background: #22132d;
    border-radius: 6px;
    color: #fff;
    display: flex;
    font-size: 18px;
    height: 35px;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.03s ease-in-out,
      color 0.03s ease-in-out 0.03s;
    width: 35px;
  }
  .header__social .social__box:hover {
    background: #f2f2f2;
    color: #6b54b6;
  }
}
@media screen and (min-width: 1240px) {
  .header__top .container {
    padding: 0 70px 0 70px;
  }
  .header__nav {
    height: 100px;
    position: relative;
  }
  .header__nav .header__portable {
    display: none;
  }
  .header__nav .header__desktop {
    display: flex;
    height: 100%;
    justify-content: center;
    max-width: 1280px;
    padding: 0 60px 0 60px;
    position: relative;
    width: 100%;
  }
  .header__nav .header__desktop .wrapper {
    display: flex;
    height: 100%;
    justify-content: center;
    max-width: 1280px;
    overflow: hidden;
    width: 100%;
  }
  .header__nav .header__menu-box {
    border-left: 1px solid #6b54b6;
    border-right: 1px solid #6b54b6;
    height: calc(100% + 8px);
    width: 100%;
    transform: perspective(22px) rotateX(-1deg);
    transform-origin: top;
  }
  .header__nav .header__menu-area {
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0 60px 0 60px;
    position: absolute;
    top: 0;
    width: inherit;
  }
  .header__nav .header__menu-area .logo-reference {
    height: 100%;
    width: 236px;
  }
  .header__nav .header__menu-area .menu__left {
    justify-content: end;
    padding: 6px 30px 0 0;
  }
  .header__nav .header__menu-area .menu__right {
    justify-content: start;
    padding: 6px 0 0 30px;
  }
  .header__nav .header__menu-area .menu__right,
  .header__nav .header__menu-area .menu__left {
    display: flex;
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .header__nav .header__menu-area .menu__links {
    column-gap: 20px;
    display: flex;
    height: 100%;
  }
  .header__nav .header__menu-area .menu__item {
    height: 100%;
    position: relative;
  }
  .header__nav .header__menu-area .menu__item:hover .menu__link::after {
    opacity: 1;
  }
  .header__nav .header__menu-area .menu__item:hover .menu__dropdown {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
    visibility: visible;
  }
  .header__nav .header__menu-area .menu__link {
    align-items: center;
    color: #fff;
    display: flex;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600;
    height: 100%;
    padding: 0 10px 0 10px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    width: max-content;
  }
  .header__nav .header__menu-area .menu__link::after,
  .header__nav .header__menu-area .menu__link.active::after {
    background: #6b54b6;
    bottom: 0;
    content: "";
    height: 10px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: skew(22deg);
    transition: opacity 0.15s ease-in-out;
    width: 100%;
  }
  .header__nav .header__menu-area .menu__link.active::after {
    opacity: 1 !important;
  }
  .header__nav .header__menu-area .menu__link:hover::after {
    opacity: 1;
  }
  .header__nav .header__menu-area .menu__dropdown {
    background: rgba(21, 11, 29, 0.97);
    display: flex;
    flex-direction: column;
    left: -2px;
    opacity: 0;
    padding: 20px 20px 20px 20px;
    position: absolute;
    row-gap: 18px;
    transform: translateY(10%);
    transition: opacity 0.1s ease-out 0.05s, transform 0.1s ease-out,
      visibility 0s linear 0.1s;
    visibility: hidden;
    width: 260px;
    z-index: calc(9999 - 1);
  }
  .header__nav .header__menu-area .menu__dropdown .dropdown__item {
    align-items: center;
    display: flex;
    height: 100%;
  }
  .header__nav .header__menu-area .menu__dropdown .dropdown__link {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 600;
    height: 100%;
    padding: 2px 0 2px 0;
    text-decoration: none;
    text-transform: uppercase;
    transition: margin 0.5s ease-in-out;
  }
  .header__nav .header__menu-area .menu__dropdown .dropdown__link::before {
    background: #6b54b6;
    content: "";
    display: inline-block;
    height: 3px;
    margin: 0 0 0 0;
    transform: skew(22deg);
    transition: margin 0.05s ease-in-out, width 0.15s ease-in-out 0.05s;
    vertical-align: middle;
    width: 0px;
  }
  .header__nav
    .header__menu-area
    .menu__dropdown
    .dropdown__link:hover::before {
    margin: 0 8px 0 0;
    width: 20px;
  }
  .header__nav .header__logo-box {
    background: #fff;
    height: 210px;
    position: absolute;
    top: 0;
    transform: perspective(5px) rotateX(-1deg);
    transform-origin: top;
    width: 236px;
    z-index: 10;
  }
  .header__nav .header__logo-area {
    align-items: center;
    background: transparent;
    display: flex;
    height: 122px;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 236px;
    z-index: 11;
  }
  .header__nav .header__logo-area > img {
    object-fit: contain;
    width: 104px;
    height: 104px;
    filter: sepia(1%) brightness(91%) contrast(95%);
  }
}
.banner {
  background: #0f0f10;
  height: 242px;
  max-height: 320px;
  min-height: 242px;
  width: 100%;
}
.banner .wrapper {
  display: flex;
  height: inherit;
  justify-content: center;
  max-height: inherit;
  min-height: inherit;
  position: relative;
  width: 100%;
}
.banner .wrapper .container {
  height: inherit;
  max-width: 1280px;
  position: absolute;
  width: 100%;
}
.banner__image {
  height: inherit;
  max-height: inherit;
  max-width: 1920px;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}
.banner__slogan {
  display: none;
}
@media screen and (min-width: 880px) {
  .banner {
    height: 320px;
    min-height: 320px;
    max-height: 320px;
  }
}
@media screen and (min-width: 910px) {
  .banner .wrapper .container {
    display: flex;
    justify-content: center;
  }
  .banner__slogan {
    background: rgba(15, 15, 16, 0.4);
    bottom: 52px;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 20px 20px;
    position: absolute;
    row-gap: 20px;
  }
  .banner__slogan .slogan__title {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 62px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .banner__slogan .slogan__buttons {
    column-gap: 20px;
    display: flex;
    justify-content: center;
  }
}
@media screen and (min-width: 1200px) {
  .banner {
    height: 362px;
    min-height: 362px;
    max-height: 362px;
  }
  .banner__slogan {
    left: 100px;
  }
  .banner__slogan .slogan__buttons {
    justify-content: start;
    padding: 0 0 0 14px;
  }
}
@media screen and (min-width: 1600px) {
  .banner {
    height: 380px;
    min-height: 380px;
    max-height: 380px;
  }
}
.marquee {
  background: #0f0f10;
  display: flex;
  height: 40px;
  width: 100%;
}
.marquee__left,
.marquee__right {
  background: #ff3147;
  flex: 1;
  position: relative;
  width: 100%;
  z-index: 100;
}
.marquee__left::after {
  background: inherit;
  content: "";
  height: 100%;
  position: absolute;
  right: -15px;
  top: 0;
  transform: skewX(-22deg);
  width: 35px;
}
.marquee__right::after {
  background: inherit;
  content: "";
  height: 100%;
  position: absolute;
  left: -15px;
  top: 0;
  transform: skewX(22deg);
  width: 35px;
}
.marquee__content {
  background: transparent;
  display: flex;
  justify-content: center;
  max-width: calc(918px + 30px);
  width: 75%;
}
.marquee__track {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  visibility: hidden;
  width: 100%;
}
.marquee__track p {
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.marquee__track p > span {
  margin: 0 0 0 80px;
}
.marquee__track p > span::before {
  content: "//";
  color: #6b54b6;
  margin: 0 8px 0 0;
}
.marquee__track p > span > a {
  color: #6b54b6;
  font-style: italic;
  margin: 0 0 0 10px;
  text-decoration: none;
}
.marquee__track p > span > a:hover {
  text-decoration: underline;
}
.breadcrumbs {
  align-items: center;
  background: rgba(16, 9, 21, 0.6) url(../img/breadcrumb.jpg) no-repeat
    center/cover;
  background-blend-mode: lighten;
  display: flex;
  justify-content: center;
  padding: 40px 10px 40px 10px;
  width: 100%;
}
.breadcrumbs .wrapper {
  width: 100%;
}
.breadcrumbs .container {
  max-width: 1280px;
  width: 100%;
  z-index: calc(9999 - 3);
}
.breadcrumbs__body {
  align-items: center;
  display: flex;
  height: 46px;
  width: 100%;
}
.breadcrumbs__body::before {
  background: #6b54b6;
  display: inline-block;
  content: "";
  height: 46px;
  margin: 0 18px 0 10px;
  transform: skew(-22deg);
  vertical-align: middle;
  width: 4px;
}
.breadcrumbs__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 0 -2px;
  text-transform: uppercase;
  width: 100%;
}
.breadcrumbs__pages {
  display: none;
}
@media screen and (min-width: 410px) {
  .breadcrumbs .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    row-gap: 2px;
    width: 100%;
  }
  .breadcrumbs__body {
    height: 68px;
  }
  .breadcrumbs__body::before {
    height: 58px;
    margin: 0 20px 0 12px;
  }
  .breadcrumbs__title {
    font-size: 38px;
  }
  .breadcrumbs__pages {
    align-items: center;
    column-gap: 4px;
    display: flex;
    height: max-content;
  }
  .breadcrumbs__pages > li:not(:first-child)::before {
    color: #6b54b6;
    content: "/";
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 600;
  }
  .breadcrumbs__link {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
  }
}
@media screen and (min-width: 610px) {
  .breadcrumbs {
    padding: 40px 20px 40px 20px;
  }
  .breadcrumbs__body {
    height: 80px;
  }
  .breadcrumbs__body::before {
    height: 80px;
    margin: 0 34px 0 16px;
    width: 6px;
  }
  .breadcrumbs__title {
    font-size: 58px;
  }
}
@media screen and (min-width: 768px) {
  .breadcrumbs {
    height: 242px;
    padding: 0 20px 0 20px;
  }
}
@media screen and (min-width: 1200px) {
  .breadcrumbs {
    padding: 0 0 0 0;
  }
  .breadcrumbs .container {
    padding: 0 100px 0 100px;
  }
}
.content {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.content .container {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 40px 0 70px 0;
  max-width: 1280px;
  min-width: 0;
  padding: 0 10px 0 10px;
  row-gap: 40px;
  width: 100%;
}
@media screen and (min-width: 610px) {
  .content .container {
    padding: 0 20px 0 20px;
  }
}
@media screen and (min-width: 768px) {
  .content .container {
    align-items: start;
    column-gap: 40px;
    display: flex;
    flex-direction: row;
  }
}
@media screen and (min-width: 1200px) {
  .content .container {
    padding: 0 60px 0 60px;
  }
}
.heading__column-title {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 26px;
  font-weight: 700;
  height: 30px;
  text-transform: uppercase;
}
.heading__column-title::before {
  background: #6b54b6;
  display: inline-block;
  content: "";
  height: 26px;
  margin: 0 18px 0 0;
  transform: skew(-22deg);
  vertical-align: middle;
  width: 3px;
}
.heading__main-title {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
}
.heading__main-title::before {
  background: #6b54b6;
  display: inline-block;
  content: "";
  height: 32px;
  margin: 0 18px 0 0;
  transform: skew(-22deg);
  vertical-align: middle;
  width: 3px;
}
.heading__main-subtitle {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
}
.heading__main-subtitle::before {
  background: #6b54b6;
  display: inline-block;
  content: "";
  height: 28px;
  margin: 0 14px 0 0;
  transform: skew(-22deg);
  vertical-align: middle;
  width: 3px;
}
@media screen and (min-width: 768px) {
  .heading__main-title {
    font-size: 40px;
  }
  .heading__main-title::before {
    height: 40px;
    margin: 0 20px 0 0;
    width: 4px;
  }
}
.column {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 36px;
  width: 100%;
}
.column__default {
  align-items: center;
  row-gap: 6px;
  display: flex;
  flex-direction: column;
}
.column__content.collapsed .column__default {
  display: none; /* já controlado no JS, mas garante fallback */
}

.column--heading {
  cursor: pointer;
}
.column__content {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  width: 100%;
}
.column__box {
  align-items: center;
  background: #281834;
  display: flex;
  padding: 20px 26px 20px 26px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .column {
    flex: 1;
    min-width: 256px;
    width: 256px;
  }
}
.status__loading {
  background: #342242;
  height: 24px;
  transform: skew(-27deg);
  width: 100%;
}
.status__loaded {
  background: repeating-linear-gradient(
    45deg,
    #20d15b,
    #20d15b 12px,
    #48d474 12px,
    #48d474 24px
  );
  height: 24px;
}
.status__description {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.status__total {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 46px;
  font-weight: 700;
}
.summary__definition {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.summary__detail {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.event__time {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.event__description {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  width: 100%;
}
.event__name {
  color: #ffffff;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.event__hour {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

.page__events .column__default {
  justify-content: space-between;
  flex-direction: row-reverse;
}

.page__events .event__description {
  flex-basis: 20%;
  text-align: left;
  align-items: start;
}

.main:not(.inventory > .main) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  row-gap: 40px;
  width: 100%;
}
.main__title {
  align-items: center;
  display: flex;
  height: 80px;
  margin: 0 0 14px 0;
  padding: 0 16px 0 20px;
  width: 100%;
}
.main__title .title__link {
  display: none;
}
.main__subtitle {
  align-items: center;
  display: flex;
  height: 56px;
  margin: 0 0 10px 0;
  padding: 0 16px 0 20px;
  width: 100%;
}
.main__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
@media screen and (min-width: 610px) {
  .main__title {
    display: flex;
    justify-content: space-between;
  }
  .main__title .title__link {
    display: block;
  }
}
@media screen and (min-width: 920px) {
  .main__title {
    padding: 0 20px 0 20px;
  }
}
.table {
  display: flex;
  flex-direction: column;
  letter-spacing: 0.1px;
  row-gap: 2px;
  width: 100%;
}
.table__wrapper {
  overflow-x: auto !important;
  width: 100%;
}
.table thead,
.table tbody {
  height: 100%;
  width: 100%;
}
.table thead,
.table tbody {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}
.table tr {
  column-gap: 2px;
  display: flex;
  height: 100%;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}
.table th,
.table td {
  align-items: center;
  background: #281834;
  display: flex;
  font-family: "Rajdhani", serif;
  font-weight: 600;
  justify-content: center;
  padding: 14px 16px 14px 16px;
  text-transform: uppercase;
  width: 100%;
}
.table th {
  color: #6b54b6;
  font-size: 16px;
}
.table th > span {
  color: #fff;
}
.table td {
  color: #fff;
  font-size: 15px;
}
.table td > span:not(span.badge) {
  color: #6b54b6;
}
.news {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
.news__item {
  align-items: center;
  background: #281834;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 20px 20px 20px;
  row-gap: 8px;
  transition: background-color 0.15s ease-in-out;
  width: 100%;
}
.news__item:hover {
  background: #352045;
}
.news__item:has(.news__title:hover) {
  background: #382249;
}
.news__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.05s ease-in-out 0.03s;
  width: 100%;
}
.news__title:hover {
  color: #7053cd;
}
.news__description {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
@media screen and (min-width: 610px) {
  .news__item {
    justify-content: start;
  }
  .news__title {
    text-align: start;
  }
  .news__description {
    text-align: start;
  }
}
@media screen and (min-width: 840px) {
  .news--grid {
    column-gap: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.post {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 100%;
}
.post__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  word-break: break-word;
}
.post__content {
  border-bottom: 1px solid #5435b8;
  display: flex;
  flex-direction: column;
  padding: 0 0 30px 0;
  row-gap: 20px;
  width: 100%;
}
.post__text {
  color: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.2;
  line-height: 1.2;
}
.post__figure {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 100%;
}
.post__img {
  border: 4px solid #6b54b6;
  height: auto;
  object-fit: cover;
  width: 100%;
}
.post__figcaption {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.post__list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  width: 100%;
}
.post__list .list__item {
  align-items: center;
  display: inline-flex;
  font-size: 20px;
  font-weight: 500;
  height: 100%;
  letter-spacing: 0.2;
  line-height: 1.2;
}
.post__list .list__item::before {
  background: #6b54b6;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 10px 0 0;
  width: 7px;
}
.post__description {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

@media screen and (min-width: 700px) {
  .post__img {
    height: auto;
    width: auto;
  }
}

.comments__post {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}

.comment-box {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 15px;
  background-color: #281834;
  position: relative;
}

.comment-box .comment-author-avatar {
  width: 40px;
  height: 40px;
  border: 3px solid #6b54b6;
}

.comment-box .comment-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-box .comment-date {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  color: #b8b8b8;
}

.castle {
  background: url(../img/bg_cs.png) no-repeat center/cover #281834;
  padding: 20px 20px 20px 20px;
  width: 100%;
}
.castle__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  row-gap: 18px;
  width: 100%;
}
.castle__guild {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  row-gap: 14px;
  width: 100%;
}
.castle__guild .guild__emblem {
  border: 3px solid #6b54b6;
  height: 60px;
  width: 60px;
}
.castle__guild .guild__name {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 28px;
  font-weight: 700;
}
.castle__description {
  display: none;
}
@media screen and (min-width: 460px) {
  .castle__description {
    border-top: 1px solid #0f0f10;
    column-gap: 40px;
    display: flex;
    justify-content: space-around;
    padding: 20px 0 0 0;
    width: 100%;
  }
  .castle__description .description__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: 6px;
  }
  .castle__description .description__definition {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 20px;
    font-weight: 700;
  }
  .castle__description .description__definition > span {
    color: #6b54b6;
  }
  .castle__description .description__detail {
    color: #6b54b6;
    font-family: "Rajdhani", serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
  }
}
@media screen and (min-width: 960px) {
  .castle__content {
    flex-direction: row;
    justify-content: space-between;
  }
  .castle__guild {
    column-gap: 20px;
    flex-direction: row;
    row-gap: 0;
    width: max-content;
  }
  .castle__description {
    border-top: none;
    column-gap: 36px;
    flex: 1;
    justify-content: end;
    width: 100%;
    padding: 0 0 0 0;
  }
  .castle__description .description__item {
    align-items: start;
  }
}
.rankings__title {
  display: none;
}
.rankings__content {
  column-gap: 20px;
  display: flex;
  user-select: none;
  width: 100% !important;
}
.rankings__item {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  width: 100%;
}
.rankings__box {
  align-items: center;
  background: #281834;
  display: flex;
  padding: 20px 26px 20px 26px;
  width: 100%;
}
.rankings__menu {
  background: #281834;
  display: flex;
  justify-content: center;
  padding: 20px 20px 0 20px;
  width: 100%;
}
.rankings__menu .menu__links {
  align-items: start;
  column-gap: 2px;
  height: 44px;
  display: flex;
}
.rankings__menu .menu__link {
  align-items: start;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 13px;
  font-weight: 600;
  height: 0;
  padding: 0 8px 0 8px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: max-content;
}
.rankings__menu .menu__link::after,
.rankings__menu .menu__link.active::after {
  background: #6b54b6;
  bottom: -43px;
  content: "";
  height: 10px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: skew(22deg);
  transition: opacity 0.15s ease-in-out;
  width: 100%;
}
.rankings__menu .menu__link.active::after {
  opacity: 1 !important;
}
.rankings__menu .menu__link:hover::after {
  opacity: 1;
}
.rankings--rating {
  height: 68px !important;
  padding: 0 22px 0 10px !important;
  column-gap: 10px;
}
.rankings__rank {
  align-items: center;
  background: #342242;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 18px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 42px;
  color: #fff;
}
.rankings__rank > span {
  color: #6b54b6;
}
.rankings__player {
  align-items: start;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  row-gap: 2px;
  width: 100%;
}
.rankings__character,
.rankings__character a {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 17px;
  font-weight: 700;
}
.rankings__class {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.rankings__guild {
  align-items: center;
  column-gap: 6px;
  display: flex;
  flex: 1;
}
.rankings__guild-name,
.rankings__guild-name a {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 17px;
  font-weight: 700;
}
.rankings__emblem {
  border: 1px solid #6b54b6;
  height: 28px;
  width: 28px;
}
.rankings__score {
  align-items: center;
  background: #342242;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 500;
  height: 25px;
  padding: 0 14px 0 14px;
  transform: skew(-22deg);
  width: max-content;
}
.rankings__score > span {
  transform: skew(22deg);
  display: inline-block;
}
@media screen and (min-width: 320px) {
  .rankings__item {
    max-width: 286px;
  }
}
@media screen and (min-width: 460px) {
  .rankings__flag-title {
    display: none !important;
  }
  .rankings__title {
    align-items: center;
    display: flex;
    justify-content: end;
    height: 100%;
    margin: 0 0 14px 0;
    width: 100%;
  }
  .rankings__heading {
    color: #fff;
    flex: 1;
    font-family: "Rajdhani", serif;
    font-size: 50px;
    font-weight: 700;
    text-align: end;
    text-transform: uppercase;
    width: 100%;
  }
  .rankings__tag {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .rankings__title {
    height: 136px;
    position: relative;
  }
  .rankings__heading {
    font-size: 64px;
    margin: 0 52px 0 0 !important;
  }
  .rankings__tag {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    right: -30px;
    text-transform: uppercase;
    transform: rotate(270deg);
  }
  .rankings__tag > span {
    color: #6b54b6 !important;
  }
}

.form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
.form__content {
  background: #281834;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 20px;
  width: 100%;
}
.form__columns {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
  width: 100%;
}
.form__group {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
}
.form__group > label {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.form__group > input[type="text"],
.form__group > input[type="tel"],
.form__group > input[type],
.form__group > input[type="search"],
.form__group > input[type="email"],
.form__group > input[type="password"],
.form__group > input[type="file"],
.form-group > input[type="text"],
.form-group > input[type="search"],
.form-group > input[type="password"],
.form-group > input[type="file"],
.form__group > textarea.form-control,
textarea.form-control,
select.form-control,
select.form-select {
  background: #1d1127;
  border: 2px solid var(--color-primary);
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  padding: 10px 20px;
  transition: border 0.15s ease-in-out, box-shadow 0.1s ease-in-out 0.1s;
  width: 100%;
  /* transform: skew(-22deg); */
  border-radius: 0;
  position: relative;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 10px 10px !important;
}

.select.form-select::after {
  position: absolute;
  right: 15px;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='%23343a40' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form__group button[type="submit"].button__medium {
  width: 100px;
  height: 47px;
  justify-content: center;
}

.form__group > textarea {
  padding: 15px;
}

.form__group > input[type="text"]:focus,
.form__group > input[type="password"]:focus,
.form__group > input[type="search"],
.form__group > textarea:focus,
textarea.form-control:focus,
textarea:focus {
  background-color: var(--color-secondary);
  border: 2px solid #6b54b6;
  box-shadow: 0 0 0 2px #342242;
  color: #ffffffce;
}
.form__group > input[type="text"]::placeholder,
.form__group > input[type="password"]::placeholder,
.form__group > input[type="search"]::placeholder,
.form__group > textarea::placeholder {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
}
.form__checkbox {
  align-items: center;
  background: #342242;
  cursor: pointer;
  display: flex;
  height: 56px;
  padding: 0 20px 0 calc(20px + 18px + 10px);
  position: relative;
}
.form__checkbox > .description {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
}
.form__checkbox > .description > a {
  color: #6b54b6;
  text-decoration: none;
}
.form__checkbox input[type="checkbox"] {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.form__checkbox .checkmark {
  background: #1d1127;
  cursor: pointer;
  height: 18px;
  left: 20px;
  position: absolute;
  width: 18px;
}
.form__checkbox input[type="checkbox"]:checked ~ .checkmark {
  background: #1d1127 url(../img/icons/checked.svg) center no-repeat;
  background-size: 10px 10px;
}
.form__button {
  padding: 0 8px 0 8px;
}
.form__button button {
  justify-content: center;
}
@media screen and (min-width: 700px) {
  .form__columns {
    column-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
  .form .button--submit {
    width: 186px;
  }
}
.info {
  background: #281834;
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px 20px 20px 20px;
  row-gap: 20px;
  width: 100%;
}
.info__item {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
}
.info__definition {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.info__box {
  align-items: center;
  background: #342242;
  display: flex;
  height: 50px;
  max-height: 100%;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  width: 100%;
  word-break: break-word;
}
.info__detail {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
}
@media screen and (min-width: 700px) {
  .info {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .info {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 996px) {
  .info {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 700px) {
  .register--checkbox {
    max-width: 280px;
  }
  .register--checkbox a:hover {
    text-decoration: underline;
  }
}
.login {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  width: 100%;
}
.login__heading {
  background: #281834;
  display: flex;
  padding: 28px 26px 28px 30px;
  width: 100%;
}
.login__title {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 26px;
  font-weight: 700;
  height: 30px;
  text-transform: uppercase;
}
.login__title::before {
  background: #6b54b6;
  display: inline-block;
  content: "";
  height: 26px;
  margin: 0 18px 0 0;
  transform: skew(-22deg);
  vertical-align: middle;
  width: 3px;
}
.login__content {
  background: #281834;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 20px;
  width: 100%;
}
.login__additional {
  align-items: center;
  border-top: 1px solid #0f0f10;
  display: flex;
  flex-direction: column;
  padding: 20px 0 0 0;
  row-gap: 10px;
}
.login__additional > span {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
}
.login__additional a {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.login__additional a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 410px) {
  .login {
    max-width: 506px;
  }
  .login__heading {
    padding: 30px 26px 30px 30px;
  }
  .login__title {
    font-size: 40px;
  }
  .login__title::before {
    height: 40px;
    margin: 0 20px 0 0;
    width: 4px;
  }
}
.characters {
  display: flex;
  flex-direction: column;
  row-gap: 36px;
  width: 100%;
}
.characters__item {
  align-items: start;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.characters__content {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
.characters__guild {
  column-gap: 8px;
}
.characters__emblem {
  border: 1px solid #6b54b6;
  height: 22px;
  width: 22px;
}
.package {
  align-items: center;
  background: #281834;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 10px;
  width: 100%;
}
.package__title {
  border-bottom: 1px solid #0f0f10;
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 26px;
  font-weight: 700;
  padding: 0 0 10px 0;
  text-align: center;
  width: 100%;
}
.package__body {
  align-items: center;
  border-bottom: 1px solid #0f0f10;
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 0;
  row-gap: 6px;
  width: 100%;
}
.package__amount {
  color: #ebcd0e;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 600;
}
.package__bonus {
  color: #ff3147;
  font-family: "Rajdhani", serif;
  font-size: 18px;
  font-weight: 600;
}
.package__price {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 700;
}
.package__button {
  width: 100%;
  padding: 0 8px 0 8px;
}
@media screen and (min-width: 700px) {
  .package__title {
    font-size: 22px;
  }
}
@media screen and (min-width: 920px) {
  .package__title {
    font-size: 26px;
  }
}
.cards {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 36px;
  width: 100%;
}
@media screen and (min-width: 518px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 700px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1054px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.payments {
  background: #281834;
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px 20px 20px 20px;
  row-gap: 20px;
  width: 100%;
}
.payments__box {
  align-items: center;
  background: #342242;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 10px;
  width: 100%;
}
.payments__logo {
  align-items: center;
  display: flex;
  height: 108px;
  justify-content: center;
  width: 100%;
}
.payments__logo > img {
  height: 92px;
  object-fit: contain;
  width: calc(100% - 16px);
}
@media screen and (min-width: 560px) {
  .payments {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .payments__logo {
    height: 94px;
  }
  .payments__logo > img {
    height: 78px;
  }
}
@media screen and (min-width: 940px) {
  .payments__logo {
    height: 108px;
  }
  .payments__logo > img {
    height: 92px;
  }
}
.security {
  display: flex;
  flex-direction: column;
  row-gap: 36px;
  width: 100%;
}
.about {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 36px;
  width: 100%;
}
.about__item {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  width: 100%;
}
.about__box {
  align-items: center;
  background-color: #281834;
  display: flex;
  flex-direction: column;
  padding: 20px 26px 20px 26px;
  text-align: center;
  width: 100%;
}
.about__definition {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.about__detail {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
@media screen and (min-width: 586px) {
  .about {
    grid-template-columns: repeat(4, 1fr);
  }
  .about__item {
    grid-column: span 2;
  }
  .about__item:last-child {
    grid-column: 2 / span 2;
  }
}
@media screen and (min-width: 890px) {
  .about {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 840px;
  }
  .about__item {
    grid-column: auto !important;
  }
}
.evolution {
  align-items: center;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
}
.evolution__content {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}
.evolution__line {
  display: none;
}
.evolution__badge {
  display: none;
}
.evolution__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.evolution__heading {
  align-items: center;
  display: flex;
  font-family: "Rajdhani", serif;
  flex-direction: column;
  margin: 0 0 10px 0;
  row-gap: 2px;
  width: 100%;
}
.evolution__title {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
}
.evolution__subtitle {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}
.evolution__box {
  align-items: center;
  background: #281834;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 10px;
  width: 100%;
}
.evolution__points {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.evolution__award {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: max-content;
}
.evolution__award:hover .evolution__tooltip {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
  visibility: visible;
}
.evolution__tooltip {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  opacity: 0;
  padding: 10px 20px 10px 20px;
  pointer-events: none;
  position: absolute;
  row-gap: 4px;
  top: calc(100% + 10px);
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
  visibility: hidden;
  width: 210px;
}
.evolution__tooltip::after {
  bottom: calc(100% - 5px);
  border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: 50%;
  margin-left: -5x;
  position: absolute;
  transform: translate(-50%, -50%);
}
.evolution__tooltip .tooltip__item {
  color: #141016;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 600;
}
.evolution__tooltip .tooltip__detail {
  color: #6b54b6;
}
.evolution__description {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  row-gap: 4px;
  width: 100%;
}
@media screen and (min-width: 380px) {
  .evolution__item {
    max-width: 312px;
  }
}
@media screen and (min-width: 710px) {
  .evolution {
    height: 100%;
    max-width: 820px;
    position: relative;
  }
  .evolution__content {
    justify-content: end;
    padding: 20px 0 20px 0;
    position: relative;
  }
  .evolution__content:nth-child(even) {
    justify-content: start;
  }
  .evolution__line {
    background: #2d2137;
    display: block;
    height: 100%;
    position: absolute;
    width: 5px;
  }
}
@media screen and (min-width: 740px) {
  .evolution__badge {
    background: #281834;
    display: block;
    height: 40px;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 40px;
  }
}
.awards {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 36px;
  width: 100%;
}
.awards__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .awards {
    grid-template-columns: 1fr 1fr;
  }
}
.commands {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 36px;
  width: 100%;
}
.commands__column {
  display: flex;
  flex-direction: column;
  row-gap: 36px;
  width: 100%;
}
.commands__item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.commands__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 18px 0;
  text-transform: uppercase;
}
.commands__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.commands__definition {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px 0;
}
.commands__detail {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 12px 0;
  text-transform: uppercase;
}
.commands__detail:last-child,
.commands__detail:only-child {
  margin: 0 0 0 0;
}
@media screen and (min-width: 680px) {
  .commands {
    grid-template-columns: 1fr 1fr;
  }
  .commands__list {
    padding: 0 0 0 20px;
  }
}
.downloads {
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 36px;
  width: 100%;
}
.downloads__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  row-gap: 2px;
  width: 100%;
}
.downloads__box {
  background: #281834;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 30px 20px 30px;
  row-gap: 20px;
  width: 100%;
}
@media screen and (min-width: 860px) {
  .downloads {
    grid-template-columns: 1fr 1fr;
  }
}
.drivers {
  background: #281834;
  column-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px 20px 20px 20px;
  row-gap: 20px;
  width: 100%;
}
.drivers__box {
  align-items: center;
  background: #342242;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 20px;
  row-gap: 10px;
  width: 100%;
}
.drivers__logo {
  align-items: center;
  background: #fff;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}
.drivers__logo > img {
  height: 84px;
  object-fit: cover;
  width: 84px;
}
.drivers__description {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 4px;
  width: 100%;
}
.drivers__title {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-size: 24px;
  font-weight: 600;
}
.drivers__link {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}
.drivers__link:hover {
  text-decoration: underline;
}
@media screen and (min-width: 480px) {
  .drivers__box {
    column-gap: 14px;
    flex-direction: row;
  }
  .drivers__description {
    align-items: start;
  }
  .drivers__title {
    font-size: 26px;
  }
}
@media screen and (min-width: 710px) {
  .drivers {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .drivers__title {
    font-size: 28px;
  }
}
.ranking {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  width: 100%;
}
.ranking__menu {
  background: #281834;
  display: flex;
  justify-content: center;
  padding: 20px 20px 0 20px;
  width: 100%;
}
.ranking__menu .menu__links {
  align-items: start;
  column-gap: 2px;
  height: 40px;
  display: flex;
}
.ranking__menu .menu__link {
  align-items: start;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 17px;
  font-weight: 600;
  height: 40px;
  padding: 0 4px 0 4px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: max-content;
}
.ranking__menu .menu__link::after,
.ranking__menu .menu__link.active::after {
  background: #6b54b6;
  bottom: 0;
  content: "";
  height: 10px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: skew(22deg);
  transition: opacity 0.15s ease-in-out;
  width: 100%;
}
.ranking__menu .menu__link.active::after {
  opacity: 1 !important;
}
.ranking__menu .menu__link:hover::after {
  opacity: 1;
}
.ranking__score {
  align-items: center;
  background: #342242;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 15px;
  font-weight: 500;
  height: 25px;
  padding: 0 14px 0 14px;
  transform: skew(-22deg);
  width: max-content;
}
.ranking__score > span {
  transform: skew(22deg);
  display: inline-block;
}
.ranking__character {
  column-gap: 2px;
}
.ranking__character > .status {
  column-gap: 4px;
  display: flex;
  height: 100%;
  margin: -10px 0 0 0;
  position: relative;
}
.ranking__character > .status > .online,
.ranking__character > .status > .vip {
  align-items: center;
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-family: "Rajdhani", serif;
  font-size: 10px;
  font-weight: 700;
  height: 15px;
  padding: 0 8px 0 8px;
  text-transform: uppercase;
}
.ranking__character > .status > .online {
  background: #6ab961;
  position: absolute;
}
.ranking__character > .status > .vip {
  background: #6b54b6;
}

.text-indent--1-4 {
  text-indent: 1.4rem;
}

.ranking__character > .status > .vip .badge {
  font-size: inherit;
  background: inherit !important;
  padding: 0;
}

.ranking__guild {
  column-gap: 8px;
}
.ranking__emblem {
  border: 1px solid #6b54b6;
  height: 22px;
  width: 22px;
}
@media screen and (min-width: 410px) {
  .ranking__menu {
    justify-content: start;
  }
  .ranking__menu .menu__links {
    height: 44px;
  }
  .ranking__menu .menu__link {
    font-size: 18px;
    height: 44px;
    padding: 0 8px 0 8px;
  }
}
.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}
.pagination__list {
  column-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 20px;
}
.pagination__link {
  align-items: center;
  border: 2px solid transparent;
  color: #fff;
  background: #281834;
  font-family: "Rajdhani", serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  height: 40px;
  justify-content: center;
  text-decoration: none;
  transition: all 0.18s ease-in-out;
  width: 40px;
}
.pagination__link:not(.disabled):hover {
  border: 2px solid #6b54b6;
  color: #6b54b6;
}
.pagination__link.disabled {
  color: #7f6c8d;
}
.pagination__link.active {
  border: 2px solid #6b54b6;
  color: #6b54b6;
}
.footer {
  margin-top: auto;
}
.footer__top {
  background: #141016;
  border-bottom: 1px solid #6b54b6;
  border-top: 1px solid #6b54b6;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.footer__portable {
  padding: 34px 10px 34px 10px;
}
.footer__desktop {
  display: none;
}
.footer__social {
  gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__social .social__box {
  align-items: center;
  background: #291538;
  border-radius: 6px;
  color: #fff;
  display: flex;
  font-size: 20px;
  height: 42px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.03s ease-in-out, color 0.03s ease-in-out 0.03s;
  width: 42px;
}
.footer__social .social__box:hover {
  background: #f2f2f2;
  color: #6b54b6;
}
.footer__copy {
  background: #0f0f10;
  width: 100%;
}
.footer__copy .container {
  align-items: center;
  background: #0f0f10;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1280px;
  padding: 22px 10px 22px 10px;
  width: 100%;
}
.footer__copy .copy__made-by {
  display: none;
}
.footer__copy .copy__text {
  color: #6b54b6;
  font-family: "Rajdhani", serif;
  font-weight: 700;
  font-size: 15px;
  height: 100%;
  text-align: center;
  text-transform: uppercase;
}
.footer__copy .copy__text .symbol {
  color: #6b54b6 !important;
  font-size: 22px;
  vertical-align: middle;
}
.footer__copy .copy__text > a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-transform: none;
  transition: text-decoration-color 0.15s ease-in-out;
}
.footer__copy .copy__text > a:hover {
  text-decoration-color: #6b54b6;
}
@media screen and (min-width: 610px) {
  .footer__portable {
    padding: 34px 10px 34px 10px;
  }
  .footer__copy .container {
    padding: 22px 20px 22px 20px;
  }
}
@media screen and (min-width: 796px) {
  .footer__copy .container {
    justify-content: space-between;
  }
  .footer__copy .copy__made-by {
    color: #6b54b6;
    display: inline-block;
    font-family: "Rajdhani", serif;
    font-weight: 700;
    font-size: 15px;
    height: 100%;
    text-transform: capitalize;
  }
  .footer__copy .copy__made-by > a {
    color: #fff;
    transition: color 0.15s ease-in-out;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    transition: text-decoration-color 0.15s ease-in-out;
  }
  .footer__copy .copy__made-by > a:hover {
    text-decoration-color: #6b54b6;
  }
}
@media screen and (min-width: 1200px) {
  .footer__portable {
    display: none;
  }
  .footer__desktop {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .footer__desktop .wrapper {
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .footer__menu-box {
    border-bottom: 1px solid #6b54b6;
    border-left: 1px solid #6b54b6;
    border-right: 1px solid #6b54b6;
    height: 120px;
    max-width: 930px;
    transform: perspective(22px) rotateX(-1deg);
    transform-origin: bottom;
    width: 930px;
  }
  .footer__menu-area {
    height: 120px;
    top: 0;
    padding: 0 56px 0 56px;
    position: absolute;
    width: 1038px;
  }
  .footer__menu-area .menu__links {
    align-items: center;
    column-gap: 20px;
    display: flex;
    height: 100%;
    justify-content: center;
  }
  .footer__menu-area .menu__item {
    align-items: center;
    display: flex;
    height: 100%;
  }
  .footer__menu-area .menu__link {
    color: #fff;
    font-family: "Rajdhani", serif;
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px 0 10px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
  }
  .footer__menu-area .menu__link::after {
    background: #6b54b6;
    bottom: -50px;
    content: "";
    height: 10px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: skew(22deg);
    transition: opacity 0.15s ease-in-out;
    width: 100%;
  }
  .footer__menu-area .menu__link:hover::after {
    opacity: 1;
  }
  .footer__social {
    padding: 30px 0 30px 0;
  }
  .footer__copy .container {
    padding: 22px 60px 22px 60px;
  }
}
/* 0% até 100% */

.end-1 {
  right: 8.333333% !important;
}

.end-2 {
  right: 16.666667% !important;
}

.end-3 {
  right: 25% !important;
}

.end-4 {
  right: 33.333333% !important;
}

.end-5 {
  right: 41.666667% !important;
}

.end-6 {
  right: 50% !important;
}

.end-7 {
  right: 58.333333% !important;
}

.end-8 {
  right: 66.666667% !important;
}

.end-9 {
  right: 75% !important;
}

.end-10 {
  right: 83.333333% !important;
}

.end-11 {
  right: 91.666667% !important;
}

.end-12 {
  right: 100% !important;
}

.alert--warning {
  border-left: 4px solid #fecd2f !important;
  color: #fecd2f !important;
}
.alert--danger {
  border-left: 4px solid #e64340 !important;
  color: #e64340 !important;
}
.alert--success {
  border-left: 4px solid #6ab961 !important;
  color: #6ab961 !important;
}
.alert--info {
  border-left: 4px solid #548ab6 !important;
  color: #548ab6 !important;
}
.button--red {
  background: linear-gradient(to right, #df243a 50%, #ff3147 50%) !important;
  background-position: 100% 0 !important;
  background-size: 200% 100% !important;
}
.button--red:hover {
  background-position: 0 0 !important;
}
.button--red-slogan {
  border: 4px solid #ff3147 !important;
}
.button--red-slogan:hover {
  background: #df243a !important;
  border: 4px solid #df243a !important;
}
.button--orange {
  background: linear-gradient(to right, #eaba11 50%, #ebcd0e 50%) !important;
  background-position: 100% 0 !important;
  background-size: 200% 100% !important;
}
.button--orange:hover {
  background-position: 0 0 !important;
}
.button span {
  transform: skew(0deg) !important;
}
.input--danger {
  border: 2px solid #ff3147 !important;
}
.input--success {
  border: 2px solid #6ab961 !important;
}
.column--heading {
  padding: 28px 26px 28px 30px !important;
}
.column--heading-rankings {
  padding: 28px 20px 28px 24px !important;
}
.text--align-start {
  text-align: start !important;
}
.text--transform-none {
  text-transform: none !important;
}
.text--transform-capitalize {
  text-transform: capitalize !important;
}
.text--primary {
  color: var(--color-primary) !important;
}
.text-dark-primary {
  color: var(--color-dark-primary) !important;
}
.text--green {
  color: #6ab961 !important;
}
.text--red {
  color: #ff3147 !important;
}
.text--orange {
  color: #ebcd0e !important;
}
.bg--green {
  background-color: #29b64b !important;
}
.bg--red {
  background-color: #ff3147 !important;
}
.bg--orange {
  background-color: #ebcd0e !important;
}
.bg--dark--primary {
  background-color: var(--color-dark-primary) !important;
}
.bg--green.badge span,
.bg--red.badge span,
.bg--orange.badge span {
  color: #fff !important;
}
.event--open {
  color: #6ab961 !important;
}
.width--content {
  width: max-content !important;
}

.width--60 {
  width: 60px !important;
}
.width--112 {
  width: 112px !important;
}

.width--120 {
  width: 120px !important;
}
.width--152 {
  width: 152px !important;
}
.width--180 {
  width: 180px !important;
}
.width--184 {
  width: 184px !important;
}
.width--208 {
  width: 208px !important;
}
.width--220 {
  width: 220px !important;
}
.width--290 {
  width: 290px !important;
}
.width--320 {
  width: 320px !important;
}
.width--380 {
  width: 380px !important;
}
.width--512 {
  width: 512px !important;
}
.width--max-280 {
  max-width: 280px;
}
.width--max-247 {
  max-width: 247px;
}

.width--min-60 {
  min-width: 60px !important;
}
.width--min-100 {
  min-width: 100px !important;
}
.width--min-128 {
  min-width: 128px !important;
}
.width--min-190 {
  min-width: 190px !important;
}
.width--min-394 {
  min-width: 394px !important;
}
.width--min-440 {
  min-width: 440px !important;
}
.width--min-520 {
  min-width: 520px !important;
}
.width--min-610 {
  min-width: 610px !important;
}
.width--min-746 {
  min-width: 746px !important;
}
.width--min-820 {
  min-width: 820px !important;
}
.width--min-864 {
  min-width: 864px !important;
}
.width--min-880 {
  min-width: 880px !important;
}
.width--min-1050 {
  min-width: 1050px !important;
}
.d-table-cell {
  display: table-cell !important;
}
@media screen and (max-width: 576px) {
  .w-sm-100 {
    width: 100%;
  }
}
.flex {
  display: flex !important;
}
.flex--justify-start {
  justify-content: start !important;
}
.flex--justify-center {
  justify-content: center !important;
}
.flex--1 {
  flex: 1 !important;
}
.preloader {
  align-items: center;
  background: #554097;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: auto;
  pointer-events: all;
  position: fixed;
  width: 100vw;
  z-index: calc(9999 + 9999);
}
.preloader__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 16px;
}
.preloader__logo {
  align-items: center;
  background-color: #160d1c;
  border-radius: 18px;
  display: flex;
  height: 120px;
  justify-content: center;
  width: 120px;
}
.preloader__img {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg)
    brightness(101%) contrast(103%);
  height: 82px;
  object-fit: contain;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  transform: scaleX(-1);
}
.preloader__text {
  color: #fff;
  font-family: "Rajdhani", serif;
  font-weight: 700;
  font-size: 23px;
  margin: 0 0 0 16px 0;
  text-transform: uppercase;
}
.preloader__loaded {
  color: #6ab961;
}

.frame {
  visibility: hidden;
}

/* #wolf {
  fill: white;
} */
/*# sourceMappingURL=styles.min.css.map */

/* Container dos botões das abas */
.custom-tabs {
  display: flex;
  border-bottom: 2px solid #333; /* Linha separadora, ajuste a cor */
  margin-bottom: 15px;
}

/* Estilo de cada botão da aba */
.tab-button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px; /* Ajuste o tamanho da fonte */
  color: #888; /* Cor do texto inativo, ajuste */
  transition: color 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 3px solid transparent; /* Borda inferior invisível para transição suave */
  margin-bottom: -2px; /* Alinha o botão com a borda do container */
}

/* Estilo do botão quando o mouse está sobre ele */
.tab-button:hover {
  color: #fff; /* Cor ao passar o mouse, ajuste */
}

/* Estilo do botão da aba ATIVA */
.tab-button.active {
  color: #fff; /* Cor do texto ativo, ajuste */
  border-bottom: 3px solid #5435b8; /* Cor da linha indicadora, ajuste */
}

/* Painel de conteúdo da aba (por padrão, fica escondido) */
.tab-pane {
  display: none;
  animation: fadeIn 0.5s; /* Efeito de transição suave */
}

/* Animação para o conteúdo aparecer */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Countdown */
.container-countdown {
  background-color: #ff3147;
  padding: 15px 0;
}

.countdown-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.container-countdown .countdown-timer {
  display: flex;
  justify-content: center;
}

.container-countdown .countdown-timer > div {
  width: 100px;
  background-color: rgb(20, 16, 22);
  border-radius: 7px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.container-countdown .countdown-timer > div span {
  font-size: 1.3rem;
}

/* Wrapper principal do slider */
.custom-tabs {
  border: 0;
}

.custom-tabs .nav-item {
  white-space: nowrap;
}

.custom-scrollbar-wrapper {
  position: relative;
  width: 100%;
}

.custom-scrollbar-wrapper .scroll-content {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-scrollbar-wrapper .scroll-content::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar-wrapper .nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 4px;
}

.custom-scrollbar-wrapper .scrollbar-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 5px;
  cursor: pointer;
}

.custom-scrollbar-wrapper .scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #6b54b6;
  border-radius: 2px;
  cursor: grab;
}

.custom-scrollbar-wrapper .scrollbar-thumb:active {
  cursor: grabbing;
}

/* Modal */
.modal .modal-content {
  background-color: var(--color-secondary);
}

.modal .modal-header,
.modal .modal-footer {
  border-color: rgb(54, 33, 72);
}

.widget__social {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  position: fixed;
  right: 35px;
  top: 25%;
  z-index: 150;
}

.widget__social a.social__box__item:not(span.badge) {
  color: #fff;
  position: relative;
}

.widget__social a > div {
  width: 40px;
  height: 40px;
  /* border-radius: 5px; */
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.31s ease-in-out;
  transform: skew(-12deg);
}

/* .widget__social a.social__box__item > div i {
  font-size: 24px;
} */

.widget__social a > div:hover {
  background-color: #fff;
  transform: skew(0deg);
}

.widget__social a > div:hover i {
  color: var(--color-secondary);
}

.widget__social a:hover {
  color: #fff;
}

.widget__social a i {
  transition: color 0.3s ease-in-out;
}

.widget__social a:hover i {
  color: #fff;
}

/* Dropdown */

.dropdown__container {
  position: relative;
  display: inline-block;
}

.dropdown__toggle {
  background-color: rgb(21, 11, 29);
  color: rgb(216, 215, 218);
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown__toggle:hover {
  opacity: 0.9;
}

.dropdown__menu {
  position: absolute;
  background-color: rgb(21, 11, 29);
  min-width: 220px;
  list-style: none;
  padding: 15px 0;
  z-index: 9999;
  display: none;
}

.dropdown__menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.dropdown__menu.opens__up {
  bottom: 100%;
  top: auto;
  margin-top: 0;
  margin-bottom: 5px;
  transform: translateY(-20px);
}

.dropdown__menu.opens__up.show {
  transform: translateY(0);
}

/* Padrão: abre para baixo */
.dropdown__container.dropdown--down .dropdown__menu {
  top: 100%;
  left: 0;
}

/* Se não houver espaço: abre para cima */
.dropdown__container.dropdown--up .dropdown__menu {
  bottom: 100%;
  left: 0;
}

.dropdown__menu__item {
  color: rgb(216, 215, 218);
  padding: 15px 30px;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-weight: bold;
  position: relative;
}

.dropdown__menu__item::before {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  background-color: rgb(107, 84, 182);
  transition: width 0.3s ease, margin-right 0.3s ease;
}

.dropdown__menu__item:hover::before {
  width: 20px;
  margin-right: 15px;
}

/* --- AJUSTES PARA MOBILE --- */
@media (max-width: 768px) {
  .dropdown__container {
    width: 100%;
  }
  .dropdown__toggle {
    width: 100%;
    justify-content: space-between;
  }
  .dropdown__menu {
    width: 100%;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    bottom: auto;
    top: auto;
    transition: none;
  }

  .dropdown__menu:not(.show) {
    display: none;
  } /* mobile: escondemos com display para remover do fluxo */
  .dropdown__menu.show {
    display: block;
  }

  .header__auth {
    justify-content: start;
    width: 100%;
  }

  .header__auth .btn--panel {
    max-width: 35%;
  }

  .header__auth .btn--notifications {
    max-width: 10%;
  }
}

@media screen and (max-width: 576px) {
  .accounts-service .row {
    flex-direction: column;
  }

  .column--heading::after {
    position: absolute;
    content: "☰";
    color: #fff;
    right: 50px;
    font-size: 2rem;
  }
}