/* 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: #150b1d;
        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="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;
}

.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;
    }
}