/*
< 576px none
≥ 576px sm
≥ 768px md
≥ 992px lg
≥ 1200px xl
≥ 1400px xl
@media (min-width: 576px) and (max-width: 767.98px) {}
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (min-width: 992px) and (max-width: 1199.98px) {}
@media (min-width: 1200px) and (max-width: 1399.98px) {}
@media (min-width: 1400px) {}
*/

/*
* {
    outline: 1px solid skyblue;
}
*/

html,
body {

    height: 100%;
}

body {

    min-height: 100vh;

    font-family: 'Inter', sans-serif;
}

.corpo {

    min-height: 100%;
}

.fundo {

    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/**/

.col-1-5 {

    flex: 0 0 auto;
    width: 12.5%;
}

.col-1-2 {

    flex: 0 0 auto;
    width: 10%;
}

@media (min-width: 576px) and (max-width: 767.98px) {

    .col-sm-1-5 {

        flex: 0 0 auto;
        width: 12.5%;
    }

    .col-sm-1-2 {

        flex: 0 0 auto;
        width: 10%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .col-md-1-5 {

        flex: 0 0 auto;
        width: 12.5%;
    }

    .col-md-1-2 {

        flex: 0 0 auto;
        width: 10%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .col-lg-1-5 {

        flex: 0 0 auto;
        width: 12.5%;
    }

    .col-lg-1-2 {

        flex: 0 0 auto;
        width: 10%;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .col-xl-1-5 {

        flex: 0 0 auto;
        width: 12.5%;
    }

    .col-xl-1-2 {

        flex: 0 0 auto;
        width: 10%;
    }
}

@media (min-width: 1400px) {

    .col-xxl-1-5 {

        flex: 0 0 auto;
        width: 12.5%;
    }

    .col-xxl-1-2 {

        flex: 0 0 auto;
        width: 10%;
    }
}

/**/

.col-10-5 {

    flex: 0 0 auto;
    width: 87.5%;
}

.col-10-8 {

    flex: 0 0 auto;
    width: 90%;
}

@media (min-width: 576px) and (max-width: 767.98px) {

    .col-sm-10-5 {

        flex: 0 0 auto;
        width: 87.5%;
    }

    .col-sm-10-8 {

        flex: 0 0 auto;
        width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .col-md-10-5 {

        flex: 0 0 auto;
        width: 87.5%;
    }

    .col-md-10-8 {

        flex: 0 0 auto;
        width: 90%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .col-lg-10-5 {

        flex: 0 0 auto;
        width: 87.5%;
    }

    .col-lg-10-8 {

        flex: 0 0 auto;
        width: 90%;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .col-xl-10-5 {

        flex: 0 0 auto;
        width: 87.5%;
    }

    .col-xl-10-8 {

        flex: 0 0 auto;
        width: 90%;
    }
}

@media (min-width: 1400px) {

    .col-xxl-10-5 {

        flex: 0 0 auto;
        width: 87.5%;
    }

    .col-xxl-10-8 {

        flex: 0 0 auto;
        width: 90%;
    }
}

/**/

.row-cols-8>* {

    flex: 0 0 12.5%;
    width: 12.5%;
}

.row-cols-10>* {

    flex: 0 0 10%;
    width: 10%;
}

.row-cols-12>* {

    flex: 0 0 8.33%;
    width: 8.33%;
}

@media (min-width: 576px) and (max-width: 767.98px) {

    .row-cols-sm-8>* {

        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .row-cols-sm-10>* {

        flex: 0 0 10%;
        width: 10%;
    }

    .row-cols-sm-12>* {

        flex: 0 0 8.33%;
        width: 8.33%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .row-cols-md-8>* {

        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .row-cols-md-10>* {

        flex: 0 0 10%;
        width: 10%;
    }

    .row-cols-md-12>* {

        flex: 0 0 8.33%;
        width: 8.33%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .row-cols-lg-8>* {

        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .row-cols-lg-10>* {

        flex: 0 0 10%;
        width: 10%;
    }

    .row-cols-lg-12>* {

        flex: 0 0 8.33%;
        width: 8.33%;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .row-cols-xl-8>* {

        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .row-cols-xl-10>* {

        flex: 0 0 10%;
        width: 10%;
    }

    .row-cols-xl-12>* {

        flex: 0 0 8.33%;
        width: 8.33%;
    }
}

@media (min-width: 1400px) {

    .row-cols-xxl-8>* {

        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .row-cols-xxl-10>* {

        flex: 0 0 10%;
        width: 10%;
    }

    .row-cols-xxl-12>* {

        flex: 0 0 8.33%;
        width: 8.33%;
    }
}

/**/

.nav-link,
.nav-link:hover {

    color: white;
}

/**/

/*
< 576px none
≥ 576px sm
≥ 768px md
≥ 992px lg
≥ 1200px xl
≥ 1400px xl
@media (min-width: 576px) and (max-width: 767.98px) {}
@media (min-width: 768px) and (max-width: 991.98px) {}
@media (min-width: 992px) and (max-width: 1199.98px) {}
@media (min-width: 1200px) and (max-width: 1399.98px) {}
@media (min-width: 1400px) {}
*/

.icone-menu {

    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    background-size: contain !important;
    background-color: #323947 !important;
    min-height: 32px;
    min-width: 32px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50% !important;
}

.icone-menu-inicio {

    background: url("/recurso/imagem/menu/ic_gema_essencial.png");
}

.icone-menu-produto {

    background: url("/recurso/imagem/menu/ic_produto.png");
}

.icone-menu-artefato {

    background: url("/recurso/imagem/menu/ic_artefato.png");
}

.icone-menu-arma {

    background: url("/recurso/imagem/menu/ic_arma.png");
}

.icone-menu-inimigo {

    background: url("/recurso/imagem/menu/ic_inimigo.png");
}

.icone-menu-personagem {

    background: url("/recurso/imagem/menu/ic_personagem.png");
}

.icone-menu-banner {

    background: url("/recurso/imagem/menu/ic_gema_essencial.png");
}

.icone-menu-checkin-diario {

    background: url("/recurso/imagem/menu/ic_checkin_diario.png");
}

.icone-menu-mapa-interativo {

    background: url("/recurso/imagem/menu/ic_mapa_interativo.png");
}

.icone-menu-calculador-aprimoramento {

    background: url("/recurso/imagem/menu/ic_calculador_aprimoramento.png");
}

.icone-menu-simulador-formacao {

    background: url("/recurso/imagem/menu/ic_simulador_formacao.png");
}

.icone-menu-conquista {

    background: url("/recurso/imagem/menu/ic_conquista.png");
}

.icone-menu-replica-bule {

    background: url("/recurso/imagem/menu/ic_replica_bule.png");
}

.icone-menu-codigo-resgate {

    background: url("/recurso/imagem/menu/ic_gema_essencial.png");
}

.icone-item {

    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    background-size: contain !important;
    height: 32px;
    width: 32px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50% !important;
}

.icone-item-topico {

    background: url("/recurso/imagem/menu/ic_gema_essencial.png");
}

.icone-elemento {

    background-repeat: no-repeat !important;
    background-size: contain !important;
    height: 24px;
    width: 24px;
    display: block;
    position: absolute;
}

.icone-elemento-anemo {

    background: url("/recurso/imagem/elemento/perfil/anemo.png");
}

.icone-elemento-cryo {

    background: url("/recurso/imagem/elemento/perfil/cryo.png");
}

.icone-elemento-dendro {

    background: url("/recurso/imagem/elemento/perfil/dendro.png");
}

.icone-elemento-electro {

    background: url("/recurso/imagem/elemento/perfil/electro.png");
}

.icone-elemento-geo {

    background: url("/recurso/imagem/elemento/perfil/geo.png");
}

.icone-elemento-hydro {

    background: url("/recurso/imagem/elemento/perfil/hydro.png");
}

.icone-elemento-pyro {

    background: url("/recurso/imagem/elemento/perfil/pyro.png");
}

.icone-topico {

    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    background-size: contain !important;
    background-color: transparent !important;
    min-height: 32px;
    min-width: 32px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50% !important;
}

.icone-topico-padrao {

    background: url("/recurso/imagem/menu/ic_gema_essencial.png");
}

.cor-elemento-anemo {

    color: #38d4a4;
}

.cor-elemento-cryo {

    color: #80f4f4;
}

.cor-elemento-dendro {

    color: #a0e43c;
}

.cor-elemento-electro {

    color: #d084fc;
}

.cor-elemento-geo {

    color: #ffb40c;
}

.cor-elemento-hydro {

    color: #08c4fc;
}

.cor-elemento-pyro {

    color: #ff6444;
}

.imagem-perfil-produto {

    border-radius: 50% !important;
    overflow: visible;
    aspect-ratio: 1 / 1;
}

.imagem-perfil-arma {

    border-radius: 50% !important;
    overflow: visible;
    aspect-ratio: 1 / 1;
}

.imagem-perfil-artefato {

    border-radius: 50% !important;
    overflow: visible;
    aspect-ratio: 1 / 1;
}

.imagem-perfil-inimigo {

    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}

.imagem-perfil-personagem {

    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}

.imagem-fundo-qualidade-1 {

    background-image: linear-gradient(to right, #323947, #4a5366);
}

.imagem-fundo-qualidade-2 {

    background-image: linear-gradient(to right, #4b6c67, #519072);
}

.imagem-fundo-qualidade-3 {

    background-image: linear-gradient(to right, #567496, #5392b8);
}

.imagem-fundo-qualidade-4 {

    background-image: linear-gradient(to right, #5e5789, #9c75b7);
}

.imagem-fundo-qualidade-5 {

    background-image: linear-gradient(to right, #945c2c, #b27330);
}

.texto-limitado {

    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.item-qualidade {

    color: #ffd600;
}

.link-atributo {

    color: #FFD780;
}