@font-face {
    font-family: swiss721;
    src: url('../fonts/swiss-721.ttf');
    font-size: 10rem;
}

@font-face {
    font-family: AltonaSans;
    src: url('../fonts/altona-sans-regular.ttf');
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

html {
    --nav_color: #141d26;
    --primary: #293849;
    --accent: #181b20;
    --gray1: #252525;
    --gray2: #555555;
    --white: #FFFFFF;
    --white2: #f7fff7;
    --orange-light: #f39736;
    --orange-dark: #ff5a00;
    --blue1: rgba(33, 47, 65, 1);

    --_11: #5a2d7b;
    --_10-109: #4a4488;
    --_10-104: #3b5b95;
    --_8-99: #0b8743;
    --_6-79: #659c55;
    --_4-59: #be7e0b;
    --_2-39: #b95556;
    --_1-19: #b93436;
    --_1: #464646;

    --iron-blood: #bc3f3e;
    --eagle-union: #2256a4;
    --sakura-empire: #f8b4fd;
    --royal-navy: #7242bc;
    --sardegna-empire: #318a47;
    --vichya-dominion: #58476d;
    --iris-libre: #f8d88e;
    --northern-parliament: #d6d6d7;
    --dragon-empery: #f8ca21;
    --other: #6f6f6f;

    --any: #59fe1c;
    --flagship: #f35800;
    --off-flag: #fefd00;
    --mid: #3481af;
    --offtank: #55b678;
    --tank: #e01b1f;

    --rare: rgba(190, 228, 246, 255);
    --normal: rgba(228, 228, 228, 255);
    --elite: rgba(203, 187, 238, 255);
    --sr: rgba(228, 224, 142, 255);

    --blue-button: #003663;
    --blue-button-active: #0072bc;

}


.nav-item>.selected {
    color: #FFFFFF;
}


.nav-item>a {
    color: #a4a2a2;
}

.nav-item>a:hover {
    color: #FFFFFF;
}


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

    .chibi-img {
        object-fit: cover;
        object-position: 0 -0.7em;
        height: 5rem;
        width: 6rem;
    }

    .score-box {
        width: 3.5em;
        height: 3.5em;
    }

    .r-grid {
        display: flex !important;
    }

    .boss-card {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 1em;
    }

    .bg-overlay {
        padding: 2em;
    }

    .columns-three {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .columns-four {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }

    .columns-two {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }

    .columns-two__3-6 {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 2fr;
    }

    .columns-two__1-5 {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 5fr;
    }

    .columns-two__4-2 {
        display: grid;
        grid-template-columns: 4fr 2fr;
    }

    .columns-two__2-4 {
        display: grid;
        grid-template-columns: 2fr 4fr;
    }

    .columns-two__2-6 {
        display: grid;
        grid-template-columns: 2fr 6fr;
    }


    .columns-two__5-1 {
        display: grid;
        gap: 1rem;
        grid-template-columns: 5fr 1fr;
    }


    .columns-six {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(6, 1fr);
    }

    .columns-five {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(5, 1fr);
    }

    .columns-eight {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(8, 1fr);
        height: fit-content;
    }

    .image-out {
        position: absolute;
        top: -7em;
        right: 0em;
        max-width: 100%;
        max-height: 38em;
    }

    .character-card-common {
        background-image: url('../img/rarity/frame/common.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .character-card-elite {
        background-image: url('../img/rarity/frame/elite.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .character-card-rare {
        background-image: url('../img/rarity/frame/rare.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .character-card-sr {
        background-image: url('../img/rarity/frame/sr.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .character-card-ur {
        background-image: url('../img/rarity/frame/ur.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .r-show {
        display: none !important;
    }

}



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

    .post-tags {
        font-size: 0.6rem !important;
    }

    html {
        font-size: min(max(1rem, 4vw), 1.2rem) !important;
    }

    .details {
        transition: 0.4s
    }

    .r-round-right {
        border-radius: 0 0.175em 0.175em 0 !important;
    }

    .chibi-img {
        object-fit: cover;
        height: 3rem !important;
        width: 3rem !important;
        object-position: 0 0.3em;
        margin: auto;
    }

    .r-overflow-x {
        overflow-x: scroll;
    }

    .card {
        overflow-x: scroll;
    }

    .iron-blood {
        background-size: contain !important;
    }

    /* change img */
    .dragon-empery {
        background-size: contain !important;
    }

    /* change img */
    .eagle-union {
        background-size: contain !important;
    }

    .iris-libre {
        background-size: contain !important;
    }

    .northern-parliament {
        background-size: contain !important;
    }

    /* change image */
    .royal-navy {
        background-size: contain !important;
    }

    /* change image */
    .sakura-empire {
        background-size: contain !important;
    }

    .sardegna-empire {
        background-size: contain !important;
    }

    .vichya-dominion {
        background-size: contain !important;
    }

    .faction img {
        height: 100% !important;
    }

    .w-80 {
        width: 80vw;
    }

    .ships {

        overflow-x: auto;
    }

    .table {
        max-width: 10em;
        overflow-x: scroll;
    }

    .ship-table th a {
        font-size: 0.8rem !important;
        font-weight: 100;

    }

    .ship-table td {
        font-size: 0.8rem !important;
        font-weight: 100;
    }


    .post-table {
        width: 25em !important;
    }

    .r-grid {
        display: grid !important;
    }

    .boss-card {
        max-width: 80vw;
    }


    .score-table td {
        font-family: AltonaSans;
        font-size: 1rem;
    }

    .score-box {
        width: 2.1em;
        height: 2.1em;
    }

    .score {
        font-family: AltonaSans !important;
        font-size: 1.0rem !important;
    }

    .details-table,
    .score-table {
        grid-template-columns: 1fr;
        gap: 1em;
        overflow-x: scroll;
    }

    .grey-table {
        overflow-x: auto;
    }

    .mob-boss {
        display: flex !important;
        justify-content: center;
    }

    .ship-table td:nth-child(2) {
        border-radius: 0 0.35em 0.35em 0;
    }


    .r-hide {
        display: none !important;
    }

    .image-out {
        position: relative;
        width: 10em;
    }

    .character-card-common {
        background-color: var(--gray1);
        border-radius: 0.35em;
        border: 0.2em solid var(--normal);
        padding: 1em;
    }

    .character-card-elite {
        background-color: var(--gray1);
        border-radius: 0.35em;
        border: 0.2em solid var(--elite);
        padding: 1em;

    }

    .character-card-rare {

        background-color: var(--gray1);
        border-radius: 0.35em;
        border: 0.2em solid var(--rare);
        padding: 1em;
    }

    .character-card-sr {

        background-color: var(--gray1);
        border-radius: 0.35em;
        border: 0.2em solid var(--sr);
        padding: 1em;
    }

    .character-card-ur {

        background-color: var(--gray1);
        border-radius: 0.35em;
        border: 0.2em solid var(--_11);
        padding: 1em;
    }

    .character-name {
        display: flex;
        justify-items: start;
    }

    .brand-image-page {
        width: 15em;

    }

    .columns-two {
        display: grid;
    }

    .columns-two>.brand {
        grid-column-start: 1;
        grid-row-start: 1;
    }
}

.r-columns-two {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.siren-img {
    width: 100%;
    height: 10em;
    object-fit: cover;
}

.downarrow {
    max-width: 50%;
    height: 5em;
}

section {
    display: grid;
}

.score-1 {
    background-color: var(--_1);
}

.score-2 {
    background-color: var(--_1-19);
}

.score-3 {
    background-color: var(--_2-39);
}

.score-4 {
    background-color: var(--_4-59);
}

.score-5 {
    background-color: var(--_6-79);
}

.score-6 {
    background-color: var(--_8-99);
}

.score-7 {
    background-color: var(--_10-104);
}

.score-8 {
    background-color: var(--_10-109);
}

.score-9 {
    background-color: var(--_11);
}

body {
    background-color: var(--primary) !important;
}



.justify-right {
    margin-left: auto;
}

.rotate--90 {
    display: grid;
    transform: rotate(-90deg);
}

.image-wrapper {
    position: relative;
}

.character-name {
    margin-top: 8em;
}


.character-card {
    min-height: 20em;
    max-height: 40em;
}




.img-small {
    object-fit: cover;
    height: 5em;
    width: 5em;
}

.skill-img {
    object-fit: cover;
    height: 50px;
    width: 50px;
    clip-path: polygon(0 0, 0 90%, 10% 100%, 100% 100%, 100% 10%, 90% 0);
}

.position-row-img {
    height: 3rem;
}

.medium-img {
    object-fit: contain;
    width: 8em;
}

.small-img {
    object-fit: contain;
    width: 1em;
}

.img-4em {
    max-width: 4em;
    max-height: 4em;
}

.hull-type-img {
    height: 100%;
    width: 100%;
    object-fit: none;
}

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

.relative-2 {
    position: relative;
    z-index: 200;
}


.swiss-font-10 {
    font-family: swiss721;
    font-size: 1rem;
}

.swiss-font-12 {
    font-family: swiss721;
    font-size: 1.2rem;
}

.swiss-font-18 {
    font-family: swiss721;
    font-size: 1.8rem;
}

.swiss-font-36 {
    font-family: swiss721;
    font-size: 3.6rem;
}

.swiss-font-24 {
    font-family: swiss721;
    font-size: 2.4rem;
}

.text-orange {
    color: var(--orange-dark);
}

.altona-sans-10 {
    font-family: AltonaSans;
    font-size: 1rem;
}

.altona-sans-6 {
    font-family: AltonaSans;
    font-size: 0.6rem;
}

.altona-sans-18 {
    font-family: AltonaSans;
    font-size: 1.8rem;
}

.altona-sans-12 {
    font-family: AltonaSans;
    font-size: 1.2rem;
}



h1,
h2,
h3,
td {
    font-family: swiss721;
    font-size: 1.2rem;
    font-weight: 100;
}

p,
a {
    font-family: AltonaSans;
    font-size: 1.2rem;
    font-weight: 100;
}



.ship-table {
    border-collapse: separate;
    border-spacing: 0 1em;
    border: none !important;
}

.ship-table th {
    vertical-align: middle;
    text-align: center;


}

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

.ship-table td:first-child {
    border-radius: 0.35em 0 0 0.35em;
}

.ship-table td:nth-child(8) {
    border-radius: 0 0.35em 0.35em 0;
}

.two-score td:nth-child(7) {
    border-radius: 0 0.35em 0.35em 0;

}

.ship-table thead {
    border: 2px solid white;
}

.navbar-image {
    height: 3rem;
}

.navbar {
    font-size: 24px;
}

.navbar-nav {
    display: flex;
    align-items: center;
}

.overflow-x {
    overflow-x: scroll;
}

.nav-style-none {
    list-style: none;
}

.ul-h-3 {
    line-height: 3em;
}

.brand-image {
    width: 5rem;
}

.brand-image-page {
    max-height: 30em;
}

.opacity-1 {
    opacity: 0.2;
}

.content {
    justify-content: end;
}

.orange-button {
    background-image: linear-gradient(to top right, #c3651e, #f8a853, #f79a38);
    height: 5em;
    max-width: 25em;
    margin: auto;
    border: 0;
}

.orange-button:hover {
    border: solid 1px white;
}

.orange-btn {
    padding: 0.5rem 2rem;
    background-color: var(--orange-light);
    border: 0;
    border-radius: 10px;
    box-shadow: 5px -6px 5px 0px rgba(0, 0, 0, 0.34) inset;
    -webkit-box-shadow: 5px -6px 5px 0px rgba(0, 0, 0, 0.34) inset;
    -moz-box-shadow: 5px -6px 5px 0px rgba(0, 0, 0, 0.34) inset;
    transition: 0.4s;
}

.orange-btn:hover {
    box-shadow: 4px -4px 5px 0px rgba(0, 0, 0, 0.34) inset;
    -webkit-box-shadow: 4px -4px 5px 0px rgba(0, 0, 0, 0.34) inset;
    -moz-box-shadow: 4px -4px 5px 0px rgba(0, 0, 0, 0.34) inset;
    background-color: var(--orange-light);
}

.btn-none {
    border: none;
    background-color: rgba(0, 0, 0, 0);
}

.btn-none:hover,
.btn-none:active {
    background-color: #f4f4f4;
    color: var(--nav_color);
}



.button-square {
    height: 8em;
    width: 8em;
}

.carousel-item {
    height: 20em;
}

.carousel-title {
    color: var(--orange);
    background-color: var(--gray2);
    border-radius: 10px 10px 0 0;
    padding: 0.2em;
}

.carousel-item img {
    max-height: 20em;
    object-fit: cover;
    margin: auto;
    transition: 0.2s;
    max-width: 100%;
    height: 100%;
}

.carousel-item img:hover {
    opacity: 0.4;
}


.carousel {
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgba(0, 0, 0, 0.3);
}

.score-box {
    display: grid;
    border-radius: 10px;

}

.score {
    margin: auto;
}

.bosses {
    display: grid;
    gap: 1em;
}



.grid-col-span-2 {
    grid-column: span 2;
}

.grid-col-span-3 {
    grid-column: span 3;
}

.grid-col-span-4 {
    grid-column: span 4;
}

.background-primary {
    background-color: var(--nav_color);
    padding: 2em;
}

.bg-overlay {
    background-color: rgba(33, 47, 65, 0.5);

    margin-top: 5em;
}


.boss-card img {
    max-width: 100%;
    background-color: var(--gray1);
    padding: 1em;
    border-radius: 20px;
}

table {
    width: 100%;
    max-height: 10rem;
    font-family: AltonaSans;
    font-size: 1rem;
}

td {
    padding: 0.5em 0.2em;
    font-family: AltonaSans;
    font-size: 1rem;
}

.vertical-align-top {
    vertical-align: top;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.ul-roles {
    list-style: none;
    padding: 0;
}

.grey-table,
.grey-table td {
    background-color: var(--gray1);
    padding: 1rem;
    max-height: 100%;
    border: 10px solid var(--nav_color);
}

.grey-table {
    width: 100%;
}

.grey-table td {
    padding: 0.5rem;
    margin: 0.5rem;
    font-family: AltonaSans;
    font-size: 1rem;
    width: 50%;
}

.grey-table td:nth-child(even) {
    background-color: var(--gray2);
}

.hero {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #293849 90%), url('../img/web-assets/bg_gradient.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg-enterprise {
    background-image: url('../img/web-assets/web-bg.png');
    background-repeat: no-repeat;
    object-fit: fill;
    background-size: auto 100%;
}

.bg-nav {
    background-color: var(--nav_color);
}

.bg-gray1 {
    background-color: var(--gray1);
}

.bg-gray2 {
    background-color: var(--gray2);
}

._100vh {
    height: calc(100vh - 80px);
}

._100vh-full {
    height: 100vh;
}

.link-none,
.link-none:hover,
.link-none:visited {
    text-decoration: none;
}

.font-inherit {
    font-size: inherit;
}

.tab-content {
    display: none;
}

.tab__content,
.tab__content--2,
.tab__content--3,
.tab-inside__content,
.tab-inside__content--2,
.tab-inside__content--3,
.tab-inside__content--4 {
    display: none;
    gap: 1em;
}

.tab__links,
.tab__links--2,
.tab__links--3,
.tab-inside__links,
.tab-inside__links--2,
.tab-inside__links--3,
.tab-inside__links--4 {
    width: 4em;
    color: var(--white);
    background-color: var(--gray1);
    border: none;
    padding: 0.2em;
    border-radius: 5px;
}

.tab__links:hover,
.tab__links--2:hover,
.tab__links--3:hover,
.tab-inside__links:hover,
.tab-inside__links--2:hover,
.tab-inside__links--3:hover,
.tab-inside__links--4:hover {
    border: 1px solid var(--white);
    box-shadow: 1px 1px 10px 0 white;
}

.tab__links.active,
.tab__links--2.active,
.tab__links--3.active,
.tab-inside__links.active,
.tab-inside__links--2.active,
.tab-inside__links--3.active,
.tab-inside__links--4.active {
    border: 1px solid var(--white);
    box-shadow: 1px 1px 10px 0 white;
}

.tab-links__blue.active {

    background-color: var(--blue-button-active);
}

.tab__blue {
    background-color: var(--blue-button);
    max-width: fit-content;
    border-radius: 7px;
}

.tab-links__blue {
    --blue-button: #003663;
    color: white;
    background-color: var(--blue-button);
    border: none;
    padding: 0.4em;
    border-radius: 7px;
}

.tab-content__blue {
    display: none;
    animation-duration: 1s;
}


.iron-blood {
    background-image: url('../img/faction-logo/iron-blood.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

/* change img */
.dragon-empery {
    background-image: url('../img/faction-logo/dragon-empery.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

/* change img */
.eagle-union {
    background-image: url('../img/faction-logo/eagle-union.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

.iris-libre {
    background-image: url('../img/faction-logo/iris-libre.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

.northern-parliament {
    background-image: url('../img/faction-logo/northern-parliament.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

/* change image */
.royal-navy {
    background-image: url('../img/faction-logo/royal-navy.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

/* change image */
.sakura-empire {
    background-image: url('../img/faction-logo/sakura-empire.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

.sardegna-empire {
    background-image: url('../img/faction-logo/sardegna-empire.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

.vichya-dominion {
    background-image: url('../img/faction-logo/vichya-dominion.png');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: 100%;
    display: grid;
}

.faction img {
    transform: scaleX(-1);
    margin: auto 0 0 auto;
    object-fit: contain;
    width: 50%;
    height: 50%;
}

.pill {
    border-radius: 10px;
    border: none;
}

.hull-type {
    cursor: pointer;
    object-fit: cover;
    width: 10em;
}

.wrapper {
    display: inline-grid;
    width: fit-content;
}

.battleship {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #252525), url('https://unsplash.it/150/200');
    background-size: 100% 100%;
    object-fit: cover;
    background-repeat: no-repeat;
}

.pill-white {
    background-color: var(--white2);
    color: var(--gray1);
    padding: 0.3em;
    border-radius: 0.5em;
    border: none;
}

.pill-dark {
    background-color: var(--gray1);
    color: var(--white);
    padding: 0.3em;
    border-radius: 0.35em !important;
    z-index: 99;
    border: none;
}

.pill-dark--tag {
    background-color: var(--gray1);
    color: var(--white);
    padding: 0.3em;
    border-radius: 10px 0 0 10px;
}

.pill-tag--IB {
    background-color: var(--iron-blood);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--RN {
    background-color: var(--royal-navy);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--EU {
    background-color: var(--eagle-union);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--SE {
    background-color: var(--sakura-empire);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--RM {
    background-color: var(--sardegna-empire);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--VD {
    background-color: var(--vichya-dominion);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--NP {
    background-color: var(--northern-parliament);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--DE {
    background-color: var(--dragon-empery);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}



.pill-tag--IL {
    background-color: var(--iris-libre);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.pill-tag--O {
    background-color: var(--other);
    padding: 0.3em;
    border-radius: 0px 0.35em 0.35em 0;
}

.border-left-white {
    border-left: solid 2px rgba(255, 255, 255, 0.547);
}

.border-right-white {
    border-right: solid 2px rgba(255, 255, 255, 0.547);
}

.gears {
    gap: 4em;
}

.text-form {
    display: block;
    width: 100%;
    padding: 0.5rem 0.5rem;
    font-family: AltonaSans;
    font-size: 1.2rem;
    color: white;
    background-color: var(--gray1);
    border-radius: 0.3rem;
    border: none;
}

.score-type {
    cursor: pointer;
    border: none;
}

.score-type:hover {}

.ship-row {
    background-color: var(--gray1);
    border: 0;
    border-radius: 0.35rem;
    height: 5em;
}

.rarity-tag {
    /* display: grid; */
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;
}

.short-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pagination {
    justify-content: center !important;

}

.pagination .page-item {
    --bs-pagination-active-bg: var(--nav_color);
    --bs-pagination-active-border-color: var(--nav_color);
}

.medium-text {
    display: inline-block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80ch;
}

.n-tag {
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;

    background-color: var(--normal);
}

.e-tag {

    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;

    background-color: var(--elite);
}

.r-tag {

    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;

    background-color: var(--rare);
}

.sr-tag {

    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;
    background-color: var(--sr);
}

.ur-tag {

    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 1.5em;
    align-content: center;

    background-image: url('../img/rarity/background/ur.png');
    object-fit: contain;
    background-size: 100% 100%;
}


.gear-n {
    display: grid;
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    align-content: center;
    width: 6em;

    background-image: url('../img/gears/rarities/n-gear.png');
    object-fit: cover;
    background-size: 100% 100%;
}

.gear-e {
    display: grid;
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    align-content: center;
    width: 6em;


    background-image: url('../img/gears/rarities/e-gear.png');
    object-fit: cover;
    background-size: 100% 100%;
}

.gear-r {
    display: grid;
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 6em;
    align-content: center;

    background-image: url('../img/gears/rarities/r-gear.png');
    object-fit: cover;
    background-size: 100% 100%;
}

.gear-sr {
    display: grid;
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 6em;
    align-content: center;


    background-image: url('../img/gears/rarities/sr-gear.png');
    object-fit: cover;
    background-size: 100% 100%;
}

.gear-ur {
    display: grid;
    color: black;
    font-family: swiss721;
    border-radius: 0.35rem 0 0 0.35rem;
    width: 6em;
    align-content: center;

    background-image: url('../img/gears/rarities/ur-gear.png');
    object-fit: cover;
    background-size: 100% 100%;
}

.medium-label {
    inline-size: 5em;
    overflow-wrap: break-word;
    hyphens: manual;
    margin: auto auto;
}

.post {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.text-color-any {
    color: var(--any);
}

.text-color-flagship {
    color: var(--flagship);
}

.text-color-offflag {
    color: var(--off-flag);
}

.text-color-mid {
    color: var(--mid);
}

.text-color-tank {
    color: var(--tank);
}

.text-color-offtank {
    color: var(--offtank);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fit-content {
    width: fit-content;
}

.filter-list li {
    display: inline-block;
}

.filter-option {
    opacity: 0;
    width: 0;
}

.filter-option+label {
    background-color: var(--gray1);
    opacity: 1;
    border-radius: 0.375em;
}

.filter-option:hover+label {
    background-color: var(--gray2);
    border-radius: 0.375em;
}


.filter-label {
    cursor: pointer;
    opacity: 0.4;
}


.filter-option:checked+label {
    background-color: var(--gray2);
    border-radius: 0.375em;
    opacity: 1;
}

.score-content {
    display: none;
}



/* Dropdown */

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 0px;
    padding-right: 0px;
    background-color: var(--gray1);
    border-radius: 0.35em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: relative;
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
}

.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container .select2-search--inline {
    float: left;
}

.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    padding: 0;
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.select2-dropdown {
    background-color: var(--gray1);
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-results {
    display: block;
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.select2-results__option {
    user-select: none;
    -webkit-user-select: none;
}

.select2-results__option[aria-selected] {
    cursor: pointer;
}

.select2-container--open .select2-dropdown {
    left: 0;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-search--dropdown {
    display: block;
    padding: 4px;
}

.select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.select2-search--dropdown.select2-search--hide {
    display: none;
}

.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--gray1);
    border: none;
    border-radius: 0.35em;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--gray1);
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    margin-top: 5px;
    float: left;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
    float: right;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 15em;
    width: max-content;
    overflow-y: auto;
    overflow-x: hidden;
}

.select2-container--default .select2-results__option[role=group] {
    padding: 0;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--accent);
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 0;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em;
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gray2);
    color: white;
}

.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
}

.select2-container--classic .select2-selection--single {
    background-color: var(--gray2);
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: 0;
    background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
    background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 10px;
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: var(--gray2);
    border: none;
    border-left: 1px solid var(--gray2);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    border: none;
    border-right: 1px solid #aaa;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 1px;
    right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--single {
    border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
    background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
    background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
}

.select2-container--classic .select2-selection--multiple {
    background-color: var(--gray2);
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    outline: 0;
}

.select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb;
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gray2);
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #555;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    float: right;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    outline: 0;
}

.select2-container--classic .select2-search--inline .select2-search__field {
    outline: 0;
    box-shadow: none;
}

.select2-container--classic .select2-dropdown {
    background-color: var(--gray2);
    border: 1px solid transparent;
}

.select2-container--classic .select2-dropdown--above {
    border-bottom: none;
}

.select2-container--classic .select2-dropdown--below {
    border-top: none;
}

.select2-container--classic .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

.select2-container--classic .select2-results__option[role=group] {
    padding: 0;
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
    color: grey;
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gray2);
    color: white;
}

.select2-container--classic .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #5897fb;
}

.img-invert {
    filter: invert(1);
}