[js-handle="lineCheck"],
.line-expand,
.line-link {
    cursor: pointer;
}

.line-hidden {
    display: none;
}

.currency {
    font-size: 1rem;
}

.currency>span {
    font-size: var(--size-11);
}

.cursor-pointer {
    cursor: pointer;
}


/* quote */

.quote {
    quotes: "“" "”";
    font-size: var(--size-16);
    line-height: normal;
}

.quote::after,
.quote::before {
    font-size: 1.6rem;
}

.quote::before {
    content: open-quote;
}

.quote::after {
    content: close-quote;
}


/* Other */

.maxLength {
    font-size: var(--size-11);
}

hr {
    margin: 10px auto;
    opacity: 1;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border2-color) !important;
    background-color: transparent;
}

.bg-main {
    background-color: var(--main-color) !important;
}

.bg-main1 {
    background-color: var(--main1-color) !important;
}

.bg-main2 {
    background-color: var(--main2-color) !important;
}

.bg-main3 {
    background-color: var(--main3-color) !important;
}

.bg-main4 {
    background-color: var(--main4-color) !important;
}

.bg-main5 {
    background-color: var(--main5-color) !important;
}

.bg-main6 {
    background-color: var(--main6-color) !important;
}

.bg-main7 {
    background-color: var(--main7-color) !important;
}

.character-stats {
    padding: 10px !important;
    border-bottom: 1px solid var(--border-color);
}


/* .character-stats .bar-title strong {
	color: var(--font-hover-color);
} */

.shadow-panel {
    box-shadow: var(--box-shadow-panel);
}

.image-outlined {
    border: 1px solid var(--border2-color);
    outline: 1px solid var(--border-color);
}

.table-outlined {
    border: 1px solid var(--border2-color);
    outline: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.user_info_layout {
    margin-top: 10px;
    display: flex;
}

.user_info_layout>.user_avatar-wrapper {
    flex: 0 1 50px;
}

.user_info_layout>.user_info {
    flex: 1 1 0;
    padding-inline-start: 10px;
}

.user_avatar {
    display: inline-block;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    user-select: none;
}

.user_avatar::after {
    border: 1px solid var(--border2-color);
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    inset: 0;
    z-index: 0;
}

.user_avatar>.level-box {
    --bh: 20px;
    position: absolute;
    z-index: 1;
    bottom: -10px;
    width: 100%;
    display: grid;
    place-items: center;
}

.user_avatar>.level-box>span {
    height: var(--bh);
    line-height: var(--bh);
    min-width: 25px;
    max-width: 40px;
    padding: 0 .3rem;
    text-align: center;
    color: var(--font-hover-color);
    font-size: var(--size-12);
    border: 1px solid var(--border-color);
    background-color: var(--main-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    box-shadow: var(--box-shadow-sm), inset 0 0 0 1px var(--border2-color);
}

.character-icons {
    display: flex;
    background-color: var(--main-color);
    background-image: var(--particles-image-bg), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    border-top: none !important;
}

.character-icons>div:first-of-type {
    border-inline-start: none;
}

.character-icons>div:last-of-type {
    border-inline-end: none;
}

.character-icons>div {
    position: relative;
    border-top: 1px solid var(--border2-color) !important;
    flex: 1 1 0;
    border-inline-start: 1px solid var(--border2-color);
    border-inline-end: 1px solid var(--border-color);
}

.character-icons>div>a {
    display: block;
    padding: .6rem 0;
    text-align: center;
    font-size: var(--size-14);
}

.location-box {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    font-size: var(--size-12);
    color: var(--font-hover-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--main-color);
    background-image: var(--particles-image-bg), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}


/* user_info */

.user_info>div {
    display: flex;
    gap: 5px;
    font-size: var(--size-12);
    align-items: center;
}

.user_info>div>*:first-of-type {
    flex: 0 1 40px;
    color: var(--font-hover-color);
}

.user_info>div>*:last-of-type {
    flex: 1 1 0;
}


/* user_icons style */

.user_icons {
    --icons-gap: 3px;
    display: flex;
    font-size: 0;
    gap: var(--icons-gap);
    flex-wrap: wrap;
}

.user_icons>* {
    font-size: 1rem;
    display: inline-block;
    color: var(--color);
    width: 1.25em;
    text-align: center;
}

@media (min-width: 992px) {
     :not(.icons_fullwidth)>.user_icons {
        column-gap: 2px;
    }
    /* :not(.icons_fullwidth) > .user_icons > *{
		width: calc(100% / 7);
	} */
}

.user_icons>*>* {
    vertical-align: middle;
    font-size: 1rem;
}

.user_icons img {
    min-width: 1rem;
    max-width: 1rem;
    min-height: 1rem;
    max-height: 1rem;
}


/* page_title */

.page_title {
    color: var(--font-color);
    font-size: 1rem;
    text-decoration: none;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 1rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--main2-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page_title a {
    font-weight: 400;
    text-decoration: none;
}

.page_title .module-links {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.page_title .module-links .dropdown li>a i,
.page_title .module-links .dropdown li>a svg,
.page_title .module-links>a i,
.page_title .module-links>a svg {
    margin-right: 5px;
}

.page_title .module-links>a {
    font-weight: 700;
    text-decoration: none;
    font-size: var(--size-12);
    margin-inline-start: .7rem;
}

.page_title .module-links>a:focus-visible,
.page_title .module-links>a:active,
.page_title .module-links>a:hover {
    color: #FFF;
}

.page_title .module-links .dropdown {
    position: relative;
    font-size: 1rem;
}

.page_title .module-links .dropdown ul {
    color: var(--font-color);
    background-color: var(--main-color) !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: var(--border-radius);
    position: relative;
}

.page_title .module-links .dropdown li>a {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    clear: both;
    color: var(--font-color);
    font-weight: 700;
    font-size: var(--size-12);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.page_title .module-links .dropdown li>a:focus-visible,
.page_title .module-links .dropdown li>a:active,
.page_title .module-links .dropdown li>a:hover {
    /* background-color: var(--main2-color); */
    color: #FFF;
}


/* main menu */

ul.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.main-menu>li {
    background-color: var(--main-color);
}

ul.main-menu:not(.mobile-menu)>li {
    border-radius: var(--border-radius);
}

ul.main-menu.mobile-menu>li.menu-title,
ul.main-menu>li>a {
    --link-color: var(--font-color);
    --link-hover-color: var(--font-hover-color);
    position: relative;
    display: block;
    padding: .3rem 0 .3rem .8rem;
    color: var(--link-color);
    font-weight: 700;
    font-size: var(--size-13);
    text-decoration: none;
    text-transform: capitalize;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    border-top: 1px solid var(--border2-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--main-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .1));
}

ul.main-menu.mobile-menu>li.menu-title {
    background-color: var(--main3-color);
    color: var(--font-hover-color);
    background-image: var(--particles-image-bg-module), repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

ul.main-menu.mobile-menu>li.menu-title,
ul.main-menu.mobile-menu>li>a {
    padding: .5rem 0 .5rem .8rem;
}

ul.main-menu:not(.mobile-menu)>li>a {
    border-radius: var(--border-radius);
}

ul.main-menu>li>a.active,
ul.main-menu>li>a:active,
ul.main-menu>li>a:focus-visible,
ul.main-menu>li>a:hover {
    color: var(--link-hover-color);
    font-weight: 700;
    outline: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, .9);
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

ul.main-menu>li>a.doAction {
    --link-color: #FFF;
    --link-hover-color: #FFF;
    /* background-color: rgba(var(--bg-success-rgb-color), .2) !important; */
    /* background-color: rgba(var(--bg-light-rgb-color), .2) !important; */
    background-color: rgba(var(--bg-primary-rgb-color), .1) !important;
    background-image: var(--line-pattern-image-bg-module), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

ul.main-menu>li>a>span {
    inset-inline-end: .8rem;
    position: absolute;
    font-size: var(--size-11);
    font-weight: 600;
}

ul.main-menu.mobile-menu:last-of-type>li:last-of-type>a,
ul.main-menu:not(.mobile-menu)>li:last-of-type>a {
    border-bottom: none;
}

ul.main-menu>li>a.text-pulse {
    animation: text-pulse 1s infinite;
}

.dropdown-menu {
    text-transform: capitalize;
    text-decoration: none;
    min-width: 100px;
    padding: 0;
    margin: 0;
    font-size: var(--size-12);
    /* border: none; */
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--main-color);
}

.dropdown-menu>li {
    border-top: 1px solid var(--border2-color);
    border-bottom: 1px solid var(--border-color);
}

.dropdown-menu>li:last-of-type {
    border-bottom: none;
}

.dropdown-menu>li>a {
    color: var(--color);
    padding: .4rem 1rem;
    font-weight: 700;
}

.dropdown-menu>li>a.active {
    background-color: var(--main3-color);
}


/* .dropdown-menu > li.active > a:hover,
.dropdown-menu > li.active > a:focus-visible,
.dropdown-menu > li.active > a, */

.dropdown-menu>li>a.active,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus-visible {
    background-color: transparent;
    color: var(--font-hover-color);
}

.dropdown-menu .dropdown-header {
    font-size: var(--size-13);
    text-align: center;
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    background-color: var(--main2-color);
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
    color: var(--font-color);
}

.dropdown-menu .dropdown-divider {
    margin: 0;
    height: .2rem;
    background-color: var(--main2-color);
}


/* panels */

.panel {
    background-color: transparent;
    border: none;
    box-shadow: var(--box-shadow-panel);
    border-radius: var(--border-radius);
}

.panel .panel-preview {
    --h: 150px;
    --h: 9.375rem;
    height: var(--h);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-color: var(--main-color);
    border-bottom: 1px solid var(--border-color);
}

.panel .panel-body {
    padding: 1rem;
    background-color: var(--main-color);
    border: none;
    font-size: var(--size-13);
    box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, .2);
    text-align: start;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
    border-top: 1px solid var(--border2-color);
}

.panel .panel-body:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}

.panel>*:first-of-type {
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
}

.panel .panel-heading-buttons,
.panel .panel-heading {
    background-color: var(--main3-color);
    background-image: var(--panel-heading);
    color: var(--font-hover-color);
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    padding: .5rem .6rem;
    font-weight: 700;
    font-size: var(--size-13);
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.panel .panel-heading-buttons {
    padding: 0;
    display: flex;
}

.panel .panel-heading-buttons>span {
    padding: 0.5rem 0.6rem;
    flex: 1 1 auto;
    border-inline-end: 1px solid var(--border-color);
}

.panel .panel-heading-buttons>.heading-buttons {
    flex: 0 1 0;
    display: flex;
}

.panel .panel-heading-buttons>.heading-buttons>*:hover {
    color: var(--font-hover-color);
}

.panel .panel-heading-buttons>.heading-buttons>* {
    min-width: 33px;
    display: grid;
    place-items: center;
    text-decoration: none;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--font-color);
    border-inline-start: 1px solid var(--border2-color);
    border-inline-end: 1px solid var(--border-color);
}

.panel .panel-heading-buttons>.heading-buttons>*.active {
    background-color: var(--main-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent);
}

.panel .panel-heading-buttons>.heading-buttons>*:last-child {
    border-inline-end: none;
}

.panel .panel-heading .float-end {
    position: absolute;
    inset-inline-end: .5rem;
}

.panel .panel-heading .floating-btns {
    inset-inline-end: 5px;
    min-width: 25px;
    font-weight: normal;
    color: var(--font-hover-color);
    text-align: center;
    font-size: var(--size-12);
    background-color: var(--main2-color);
    padding: 0 0.5rem;
    min-height: 1.5rem;
    line-height: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-top: -4px;
}

.panel-heading[data-bs-toggle="collapse"] {
    cursor: pointer;
}

.panel-heading.collapsed {
    border-radius: var(--border-radius);
}

.panel .panel-footer {
    padding: .5rem 1rem;
    background-color: var(--main2-color);
    border-top: 1px solid var(--border-color);
    border-end-end-radius: var(--border-radius);
    border-end-start-radius: var(--border-radius);
}

.panel .panel-footer .panel-links {
    display: flex;
    flex-direction: row;
}

.panel .panel-footer .panel-links a {
    flex: 1 1 0;
    padding: .5rem 0;
    font-size: .9375rem;
    text-align: center;
    border-inline-end: 1px solid var(--border-color);
    background-color: var(--main-color);
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3));
}

.panel .panel-footer .panel-links a:first-of-type {
    border-end-start-radius: var(--border-radius);
}

.panel .panel-footer .panel-links a:last-of-type {
    border-end-end-radius: var(--border-radius);
    border-inline-end: none;
}

.panel .panel-footer .panel-links a:active,
.panel .panel-footer .panel-links a:focus-visible,
.panel .panel-footer .panel-links a:hover {
    outline: none;
    color: var(--font-hover-color);
    background-color: var(--main3-color);
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
}

.panel.panel-primary>.panel-heading {
    background-color: var(--bs-primary);
}

.panel.panel-danger>.panel-heading {
    background-color: var(--bs-danger);
}

.panel.panel-success>.panel-heading {
    background-color: var(--bs-success);
}

.panel.panel-info>.panel-heading {
    background-color: var(--bs-info);
}

.panel.panel-warning>.panel-heading {
    background-color: var(--bs-warning);
    color: #222;
}

.panel.panel-dark>.panel-heading {
    background-color: var(--bg-dark-color);
}

.panel.panel-light>.panel-heading {
    background-color: var(--bg-light-color);
    color: #222;
}

.panel.panel-secondary>.panel-heading {
    background-color: var(--bg-secondary-color);
}

.accordion-panels .accordion-panels-item .panel-body,
.accordion-panels .accordion-panels-item .panel-heading {
    border-radius: 0;
}

.accordion-panels .accordion-panels-item:first-of-type .panel-heading {
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
}

.accordion-panels .accordion-panels-item:last-of-type .panel-heading.collapsed {
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

.accordion-panels .accordion-panels-item:last-of-type .panel-body {
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}


/* cars */

.car_img {
    position: relative;
    display: inline-block;
    background-color: var(--main-color);
    background-image: linear-gradient(360deg, transparent, rgba(0, 0, 0, .3)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 2px);
    overflow: hidden;
    box-sizing: content-box;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    min-width: 130px;
    max-width: 130px;
    min-height: 80px;
    max-height: 80px;
}

.car_img.medium {
    min-width: 80px;
    max-width: 80px;
    min-height: 50px;
    max-height: 50px;
}

.car_img.small {
    min-width: 40px;
    max-width: 40px;
    min-height: 25px;
    max-height: 25px;
}

i.car_class {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #FFF;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent);
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 3px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

i.car_class.S {
    background-color: rgb( var(--car_class_S));
}

i.car_class.A {
    background-color: rgb( var(--car_class_A));
}

i.car_class.B {
    background-color: rgb( var(--car_class_B));
}

i.car_class.C {
    background-color: rgb( var(--car_class_C));
}

i.car_class.D {
    background-color: rgb( var(--car_class_D));
}

i.car_class.E {
    background-color: rgb( var(--car_class_E));
}

li.car_class.S div {
    background-color: rgba( var(--car_class_S), .02);
}

li.car_class.A div {
    background-color: rgba( var(--car_class_A), .02);
}

li.car_class.B div {
    background-color: rgba( var(--car_class_B), .02);
}

li.car_class.C div {
    background-color: rgba( var(--car_class_C), .02);
}

li.car_class.D div {
    background-color: rgba( var(--car_class_D), .02);
}

li.car_class.E div {
    background-color: rgba( var(--car_class_E), .02);
}

.car_bar {
    --w: 110px;
    --w: 110px;
    display: inline-flex;
    flex-direction: row;
    height: .4rem;
    overflow: hidden;
    font-size: 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 0 2px var(--border2-color), var(--box-shadow);
    min-width: var(--w);
    max-width: var(--w);
    background-image: linear-gradient(to top, rgba(0, 0, 0, .3), transparent), repeating-linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 1px, transparent 1px, transparent 3px);
    background-color: var(--main-color);
}

.car_bar>.bar {
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .3), transparent), repeating-linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 1px, transparent 1px, transparent 3px);
}

.car_bar>.bar.base {
    background-color: var(--main5-color);
}

.car_bar>.bar.tune {
    background-color: var(--bg-success-color);
}


/* rarity icons */

.rarity-wrapper {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    position: absolute;
}

.rarity-wrapper>.rarity-number {
    color: var(--c);
    font-weight: 700;
}

.rarity-wrapper>i.rarity-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain!important;
    background-position: center center!important;
}

.rarity-wrapper.common>i.rarity-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAQAAAAm93DmAAABmUlEQVR4Ae3VN5bbMBgEYFTkFXCJ1TV4L5TOCXyu7NIZoEOPiqBT65wBdo4M/ThIK9ACf2V1O9N/bwgmdpLDBonLaumNf+O7P33jTS1dhmQr7AV3uWscRtq4vOcbYe9SK2z/Do5oDfQQSNfknvKyKlHiOQm2+JcK6+x8PLG+xLTvqH3H8ThauS5w1MYWGJJ86dlNLzb0HbUvpAJ9llYEitrYIoogOMNtX2JVHaL0xEOk80cw2JT8hk9wOYvzItGNgsI6qBtif9uMvD1FpjDtOqgL2LRZfMFSYdjVK4etZQyaXUBvYvDNTuCbCFTdTmC3b7A99CXvflMO+djED3aBa7i5AnyOd/SDHV69KXb6b2OSRhskox+HgFEkgeZsLNf5mT5g65O2f0F9tU+LRfAq1EJNDApG5VJ6pvofvBWBjxbB6l3K6Eh+2tP74o3WP131K70wCWTYN77RenvEVkfyM9XYvmhjRa+LzvK0ONOHffFG21tBnx3xEOlcN2OcbnRuONsmL5Ii01Ib/UZ1qtNvtNGyyF4k7CQHzW+F0LWGTEkgHAAAAABJRU5ErkJggg==)!important
}

.rarity-wrapper.uncommon>i.rarity-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAG1BMVEUAAAAA2LJ5//8MmVoAxYo95s4Dvog969gHuIZLzJsQAAAAAXRSTlMAQObYZgAAAFlJREFUeNrtyjsKwCAABTDt//4nLnRoHgpdi2DmlFHsy6fzjZuJV0UTL6KJF9HEi2jiRTTx2mh6fXzU1owz/hePtXH10cMUPUzRw8zoYYoeZkYPU/TIWQZxA2eFCQFv4kbwAAAAAElFTkSuQmCC)!important
}

.rarity-wrapper.rare>i.rarity-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABwElEQVR4Ae2UNcyUQRRFB9cKaXAqqNk+SIm7u0O1LfRZ3KH53d2l/d1dW7TCPxdsVh+6MsndwU/y2pebe5PDfjX/+c+GeqvqztMPPO/1x9/qMl985BdH3Cq2vdFaNOOGqh9pcX6bcLcevefnOm39ZBdfxIKsyDS8zKfwlZk6x9vEWrsw7PITbRY/2eF4GVHC+aQpV5W+YMjp11R+pNn+Ja2d7bTC4dqsvmAm9jWr8k0Pu6R+CIaE2gRaC5/94WTXOw+Lxqyb+m0KKK3N6K19uXbrNovFmkY+m11SnlFAsTbx1uhOtlvPzo/z2Swec+9pWymYWJt4a3SnO9ytTIhLalUwVLRbV2nQQ+SitVfFRFmYai1iPkWP1eT+RjO54dq+OE8cn+qN1eLyVC25Ab84T5xdJXwSu6T0yZ46ivPEmXJdITfKmZqcB3FJvS1lanIeyvwH5EZoahHnAVwJuxGYGnAeAbiRpsadh3Al7EZgasB5uBtpatx5EORGwakB5wFciu5GOrnOw90o7jypxHajfOehbpTvPNCN8p0HulG+80A3ynce6Eb5zgPdKN95oBvlOw90o3zngW4EnPdb8p//+AFtgx5rolkuxAAAAABJRU5ErkJggg==)!important
}

.rarity-wrapper.veryRare>i.rarity-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABUklEQVR4Ae3Ug27EQRCA8f/10dqg9jvUtm3bblTbD1EbQW27nXbiamePc2l2ki/GL7PQTDlT6ee+y8N31QCg06xtJtPP/T+B76cbL7A2c19lVbjp9PPAybQzwBB4tfcKG9P3FVayuYtghH0HYutT92XMm7sIRdRfQGx98r6EBTeVfhaOIAqIrU3cF1l4c2eRiJEFYqvj9wUW2tx5NELkgN+QE/d55n6tsSIcNtd98ycQWxm/zzHX5uIRINNcL4Ecu8sy9VeSSMK+tdB/K0Quj95lmGhzF8lCjKClITFyaeQuzWhgu/sBCCKRi80PwowGtrkcgqB/DlRABVRABVRABVRABZxvvBdlPLDB9iA1UduBv2q02yeRglI1HHMjWxwOuHDyyDa3Aw6cPDJJtwOd3ocsOHmkzY48jgvJjKORNI4ZSeOYkTSOGUnjmJE0jhlpatwHBEdriqfbIaUAAAAASUVORK5CYII=)!important
}

.rarity-wrapper.epic>i.rarity-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAHlBMVEUAAADpLo/XInLvbrH3rNPoLI7tbK/GFVXXIHHvbLDOJb5lAAAABHRSTlMAgICAhJ1mcQAAAHRJREFUeNrVy0sOgCAAxFARv/e/sAkumjBi13T9ukxWObrqwO093Oq3S9hkuoRNpkuIxI0gEpcQiRtAJC67kTiROJE4lev5dv0PZUGKE4kTiROJE4kTiROJCxlOJE4kzmS6lDiROJE4kTiROJE4kTiRuLl6AEakD4mcqQ1LAAAAAElFTkSuQmCC)!important
}

.rarity-wrapper.legendary>i.rarity-icon {
    background-image: url(data:image/png;base64,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)!important
}


/* small-circle */

.small-circle-border {
    --color: #999;
    --size: 8px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    width: var(--size);
    height: var(--size);
    border: 2px solid var(--color);
    border-radius: 100%;
    box-shadow: var(--box-shadow-sm);
}

.small-circle {
    --color: #999;
    --size: 8px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    width: var(--size);
    height: var(--size);
    background-color: var(--color);
    border-radius: 100%;
    box-shadow: var(--box-shadow-sm);
}


/* item-wrapper */

.item-wrapper {
    --ih: 52px;
    --iw: 102px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    max-width: var(--iw);
    min-width: var(--iw);
    max-height: var(--ih);
    min-height: var(--ih);
    background-image: var(--particles-image-bg), linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
    background-color: var(--main2-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 1rem rgba(0, 0, 0, .6);
}

.loadout-slot .item-wrapper,
.shadow-inset-col .item-wrapper {
    border: none;
    background: transparent;
    box-shadow: 0 0 0 transparent !important;
}

.item-wrapper.small {
    --ih: 32px;
    --iw: 62px;
    box-shadow: inset 0 0 .7rem rgba(0, 0, 0, .6);
}

.item-wrapper.xsmall {
    --ih: 26px;
    --iw: 50px;
    box-shadow: inset 0 0 .5rem rgba(0, 0, 0, .6);
}

.item-wrapper>img {
    border-radius: var(--border-radius);
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
}

.item-wrapper.xsmall>.qty {
    bottom: 1px;
    inset-inline-end: 1px;
}

.item-wrapper.small>.qty,
.item-wrapper>.qty {
    margin: 0;
    position: absolute;
    bottom: 2px;
    inset-inline-end: 2px;
    color: var(--font-hover-color);
    font-family: 'visitor';
    font-size: 10px;
    line-height: 5px;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    letter-spacing: 1px;
}

.cursor-default {
    cursor: default;
}

.item-wrapper:not(.cursor-default) * {
    cursor: pointer;
}

@font-face {
    font-family: 'visitor';
    src: local('visitor1'), url('../webfonts/visitor1.ttf') format('truetype');
}

@font-face {
    font-family: 'visitor2';
    src: local('visitor2'), url('../webfonts/visitor2.ttf') format('truetype');
}

@font-face {
    font-family: 'the-fozderien';
    src: local('the-fozderien'), url('../webfonts/the-fozderien.ttf') format('truetype');
}

.typesSVG i,
.typesSVG svg {
    height: 14px;
    max-height: 14px;
    color: var(--font-color);
    fill: var(--font-color);
}


/* list table */

.div-table {
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.div-table>li {
    display: flex;
    text-align: start;
}

.div-table>li.empty {
    --h: .2rem;
    height: var(--h);
    background-color: var(--main2-color);
}

.div-table>li.empty.gradient {
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
}

.div-table>li.empty:last-of-type {
    display: none;
}

.div-table>li.medium-padding>div {
    padding: .35rem .7rem;
}

.div-table>li.small-padding>div {
    padding: .2rem .5rem;
}

.div-table>li.xsmall-padding>div {
    padding: .15rem .4rem;
}

.div-table>li.no-padding>div {
    padding: 0 .5rem;
}

.div-table>li>div {
    flex: 1 0 0;
    min-width: var(--min-width);
    max-width: var(--max-width);
    padding: .5rem .7rem;
    font-size: var(--size-12);
    background-color: rgba(0, 0, 0, .1);
    vertical-align: middle;
    border-top: 1px solid var(--border2-color);
    border-bottom: 1px solid var(--border-color);
    border-inline-start: 1px solid var(--border2-color);
    border-inline-end: 1px solid var(--border-color);
}

.div-table>li.heading {
    border-color: var(--border-color);
}

.div-table>li.heading-sub>div,
.div-table>li.heading>div {
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    background-color: var(--main2-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    color: var(--font-color);
}

.div-table>li.heading-sub>div {
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
}

.div-table>li:last-of-type {
    border-bottom: none;
}

.div-table>li:first-of-type>div {
    border-top: none;
}

.div-table>li:last-of-type>div {
    border-bottom: none;
}

.div-table>li:last-of-type>div:first-of-type {
    border-end-start-radius: var(--border-radius);
}

.div-table>li:last-of-type>div:last-of-type {
    border-end-end-radius: var(--border-radius);
}

.div-table>li>div:first-of-type {
    border-inline-start: none;
}

.div-table>li>div:last-of-type {
    border-inline-end: none;
}

.hidden {
    display: none !important;
}

.div-table>li>div.shadow-inset-col {
    box-shadow: 0 0 20px rgba(0, 0, 0, .3) inset;
}

.div-table>li>div.button-col {
    padding: 0 !important;
}

.div-table>li.heading-sub>div.button-col>a {
    padding: .7rem .5rem;
}

.div-table>li>div.button-col>a {
    padding: .5rem;
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: 700;
}

.div-table>li .button {
    width: 100%;
    display: block;
    font-weight: 700;
    padding: .5rem;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--font-color);
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.div-table>li .button:disabled {
    font-style: italic;
    opacity: .3;
    font-weight: normal;
}

.div-table>li>div.limit-text {
    max-width: 100%;
}

.div-table>li>div.limit-text a,
.div-table>li>div.limit-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div-table>li>div.limit-text2 {
    overflow: hidden;
    max-width: 100%;
}

.div-table>li>div.limit-text2 div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.div-table>li.active,
.div-table>li.new,
.div-table>li.selected {
    --bg-color: var(--main-color);
}

.div-table>li.active>div,
.div-table>li.new>div,
.div-table>li.selected>div {
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    color: var(--font-hover-color);
    font-weight: 700;
}

.div-table>li.custom-bg>div,
.div-table>li.active>div {
    background-color: var(--bg-color);
}

.div-table>li.equipped>div {
    color: var(--font-hover-color);
    background-color: rgba(68, 146, 255, .3);
}

.div-table>li.equipped.gradient>div {
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.div-table>li>div.col_custombg {
    background-color: var(--bg);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.div-table>li.lh-20>div {
    line-height: 20px;
}

.div-table>li.lh-25>div {
    line-height: 25px;
}

.div-table>li.lh-30>div {
    line-height: 30px;
}

.div-table>li.lh-40>div {
    line-height: 40px;
}

.div-table-border-start {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.div-table-border-end {
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 1200px) {
    .div-table-border-start {
        border-top: none;
        border-inline-start: 1px solid rgba(255, 255, 255, .1);
    }
    .div-table-border-end {
        border-bottom: none;
        border-inline-end: 1px solid var(--border-color);
    }
}


/* inline ajax result */

.div-table>.ajax-result {
    position: relative;
    overflow: hidden;
    transition: height .5s linear;
}

.div-table>.ajax-result>.outcome-wrapper-position {
    transition: height .2s linear;
}

.div-table>.ajax-result>.outcome-wrapper-position:not(:last-of-type) {
    /* .div-table > .ajax-result > .outcome-wrapper-position{ */
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}


/* .div-table > .ajax-result > .outcome-wrapper-position:last-of-type{
	z-index: 20;
} */

.div-table>.ajax-result .outcome-wrapper {
    --outcome-bg-color: var(--main3-color);
    --outcome-text-color: var(--font-hover-color);
    --outcome-title-color: var(--font-hover-color);
    overflow: hidden;
    position: relative;
    width: 100%;
    border-top: 1px solid var(--border2-color) !important;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--outcome-bg-color);
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3)), linear-gradient(to top, var(--outcome-bg-color), var(--outcome-bg-color));
    color: var(--outcome-text-color);
    transition: background-color 1s ease, height .05s linear;
}

.div-table>.ajax-result:last-of-type .outcome-wrapper {
    border-bottom: none;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

.div-table>.ajax-result .outcome-wrapper>.divider {
    border-top: 1px dashed var(--main4-color);
}

.div-table>.ajax-result .outcome-wrapper.outcome-success {
    --outcome-bg-color: rgba(112, 137, 73, .2);
    --outcome-title-color: #63ff2a;
}

.div-table>.ajax-result .outcome-wrapper.outcome-failure {
    --outcome-bg-color: rgba(137, 107, 73, 0.2);
    --outcome-title-color: #ffa32a;
}

.div-table>.ajax-result .outcome-wrapper.outcome-critical {
    --outcome-bg-color: rgba(137, 73, 73, .2);
    --outcome-title-color: #ff2a2a;
}

.div-table>.ajax-result .outcome-wrapper>.outcome-message {
    font-size: var(--size-13);
    padding: .7rem;
}

.div-table>.ajax-result .outcome-wrapper>.outcome-rewards {
    display: flex;
    padding: .5rem .7rem;
    align-items: center;
    min-height: 3rem;
    gap: .7rem;
}

.div-table>.ajax-result .outcome-wrapper>.outcome-rewards>.outcome-reward>.outcome-money,
.div-table>.ajax-result .outcome-wrapper>.outcome-rewards>.outcome-title {
    color: var(--outcome-title-color);
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 1rem;
    text-transform: uppercase;
    font-weight: 700;
}

.div-table>.ajax-result .outcome-wrapper>.outcome-rewards>.outcome-reward {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.div-table>.ajax-result .outcome-wrapper>.close-button {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background-color: transparent;
    border: none;
    color: var(--font-hover-color);
}

.div-table>li>div.col_half {
    flex: 0 1 50%;
}

.div-table>li>div.col_5px {
    max-width: 5px
}

.div-table>li>div.col_10px {
    max-width: 10px
}

.div-table>li>div.col_16px {
    max-width: 16px
}

.div-table>li>div.col_20px {
    max-width: 20px
}

.div-table>li>div.col_30px {
    max-width: 30px
}

.div-table>li>div.col_40px {
    max-width: 40px
}

.div-table>li>div.col_50px {
    max-width: 50px
}

.div-table>li>div.col_60px {
    max-width: 60px
}

.div-table>li>div.col_70px {
    max-width: 70px
}

.div-table>li>div.col_80px {
    max-width: 80px
}

.div-table>li>div.col_90px {
    max-width: 90px
}

.div-table>li>div.col_100px {
    max-width: 100px
}

.div-table>li>div.col_110px {
    max-width: 110px
}

.div-table>li>div.col_120px {
    max-width: 120px
}

.div-table>li>div.col_130px {
    max-width: 130px
}

.div-table>li>div.col_140px {
    max-width: 140px
}

.div-table>li>div.col_150px {
    max-width: 150px
}

.div-table>li>div.col_160px {
    max-width: 160px
}

.div-table>li>div.col_170px {
    max-width: 170px
}

.div-table>li>div.col_180px {
    max-width: 180px
}

.div-table>li>div.col_190px {
    max-width: 190px
}

.div-table>li>div.col_200px {
    max-width: 200px
}

.div-table>li>div.col_220px {
    max-width: 220px
}

.div-table>li>div.col_240px {
    max-width: 240px
}

.div-table>li>div.col_min50px {
    min-width: 50px
}

.div-table>li>div.col_min80px {
    min-width: 80px
}

.div-table>li>div.col_min100px {
    min-width: 100px
}

.div-table>li>div.col_min120px {
    min-width: 120px
}

.div-table>li>div.col_min140px {
    min-width: 140px
}

.div-table>li>div.col_min150px {
    min-width: 140px
}

.div-table>li>div.col_min220px {
    min-width: 220px
}

.div-table>li>div.col_min240px {
    min-width: 240px
}

.center-items {
    display: grid;
    place-items: center;
    text-align: center;
}


/* badge */

.badge {
    text-decoration: none;
    text-shadow: 0 0 0 #000 !important;
    text-transform: capitalize;
    box-shadow: var(--box-shadow-sm);
}


/* list-group */

.list-group,
.list-group>.list-group-item {
    border-color: #151515;
    border: none;
    color: var(--font-color);
}

.list-group>.list-group-item {
    padding: .5rem .7rem;
    font-size: var(--size-12);
    background-color: rgba(0, 0, 0, .1);
    vertical-align: middle;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid var(--border-color);
}

.list-group>.list-group-item:first-of-type {
    border-top: none;
}

.list-group>.list-group-item:last-of-type {
    border-bottom: none;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

.list-group .list-group-item .badge {
    padding: .2rem .5rem;
    background-color: rgba(0, 0, 0, .2);
    color: var(--font-color);
    font-size: var(--size-11);
    text-align: center;
    margin-inline-start: .5rem;
    text-shadow: 0 0 2px #000;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius) !important;
}


/* table */

.table {
    color: var(--font-color) !important;
}

.table thead>tr>* {
    border-bottom: none !important;
}

.table tbody {
    border: none !important;
}

.table>:not(:first-child) {
    border-color: var(--table-border-color) !important;
}

.table tr:last-child td {
    border-bottom: none !important;
}

.table a {
    text-decoration: none;
    color: var(--font-hover-color) !important;
}

.table tbody td {
    border-color: var(--border-color);
}

.table thead th {
    font-weight: 600;
    text-transform: capitalize;
    border-color: var(--border-color) !important;
    padding: .7rem 1rem;
    text-decoration: none;
    background-color: #252525;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .2));
    color: var(--font-color);
}


/* notification */

.notification-list {
    display: flex;
    align-items: center;
}

.notification-list>div {
    position: relative;
    --cbh: 100%;
    padding-inline-end: .5rem;
}

.notification-list>div:not(:first-of-type) {
    padding-inline-start: .5rem;
}

.notification-list>div:not(:first-of-type)::before {
    position: absolute;
    content: '';
    height: var(--cbh);
    top: 0;
    left: -1px;
    width: 1px;
    background-image: linear-gradient(to top, transparent 0%, var(--border-color) 50%, transparent 100%);
}

.notification-list>div:not(:first-of-type):after {
    position: absolute;
    content: '';
    height: var(--cbh);
    top: 0;
    left: 0;
    width: 1px;
    background-image: linear-gradient(to top, transparent 0%, var(--border2-color) 50%, transparent 100%);
}


/* grahp wrapper */

.graph-wrapper {
    background-color: var(--main-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent);
    padding: .5rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.graph-info>* {
    font-weight: 700;
    text-decoration: none;
    color: var(--font-color);
}

.graph-info>*:hover {
    color: var(--font-hover-color);
}


/* icons */

.game-icons {
    --icon-size: 22px;
    --icon-bg: var(--main5-color);
    /* --icon-color: var(--font-hover-color); */
    --icon-color: #FFF;
    display: inline-grid;
    place-items: center;
    font-size: var(--size-12);
    padding: .1rem;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    border-radius: 50%;
    color: var(--icon-color);
    background-color: var(--icon-bg);
    background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .3) 70%);
    box-shadow: var(--box-shadow);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.game-icons.icon-cash {
    --icon-bg: var(--text-money);
}

.game-icons.icon-points {
    --icon-bg: var(--text-points);
    /* --icon-color: var(--bg-dark-color); */
    --icon-color: #222;
}

.game-icons.icon-respect {
    --icon-bg: #2697d3;
}


/* Status icon */

.bobble {
    display: inline-block;
    height: 5px;
    width: 5px;
    vertical-align: middle;
    margin-inline-start: 1rem;
    /* margin-right: 4px; */
    border-radius: 50%;
    position: relative;
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
}

.bobble.no-animation {
    animation: none !important
}

.bobble.big {
    height: 12px;
    width: 12px;
    margin: 0;
    border: 1px solid rgb(var(--color));
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
}

.bobble.online {
    --color: 51, 175, 0;
    background-color: rgb(var(--color));
    animation: bobble-pulse 1s infinite;
}

.bobble.afk {
    --color: 175, 145, 0;
    background-color: rgb(var(--color));
    animation: bobble-pulse 3s infinite;
}

.bobble.offline {
    --color: 175, 0, 0;
    background-color: rgb(var(--color));
    animation: none !important;
}


/* paginations */

.paginations {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 1rem 0;
    padding: .5rem;
    border-radius: var(--border-radius);
    background-color: var(--main2-color);
}

.paginations__numbers,
.paginations__btn,
.paginations__dots {
    flex: 0 0 auto;
    font-size: var(--size-14);
    vertical-align: middle;
}

.paginations__numbers>a,
.paginations__btn>span,
.paginations__btn>a,
.paginations__dots>span {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    line-height: 2rem;
    min-height: 1.8rem;
    max-height: 1.8rem;
    min-width: 1.8rem;
    max-width: 1.8rem;
    border-radius: var(--border-radius);
}

.paginations__dots>span {
    color: var(--font-dark-color);
    cursor: initial;
    pointer-events: none;
}

.paginations__numbers>a {
    cursor: pointer;
    border-radius: var(--border-radius);
}

.paginations__btn>a:hover,
.paginations__btn>a:active,
.paginations__numbers>a:hover,
.paginations__numbers>a:active,
.paginations__numbers.active>a {
    color: var(--font-hover-color);
    background: var(--main-color);
    font-weight: 700;
}

.paginations__numbers.active>a {
    pointer-events: none;
}

.paginations__btn {
    flex: 2 2 auto;
}

.paginations__btn.prev>span,
.paginations__btn.prev>a,
.paginations__btn.next>span,
.paginations__btn.next>a {
    display: inline-block;
    max-width: 100px;
}

.paginations__btn.next {
    text-align: right;
}

.paginations__btn>span,
.paginations__btn>a {
    width: 100%;
    min-width: 1.8rem;
    max-width: 100%;
}

.paginations__btn>span {
    color: var(--font-dark-color);
    pointer-events: none;
    cursor: default;
}

.paginations__btn>a {
    cursor: pointer;
}

@media (min-width: 992px) {
    .paginations {
        gap: .8rem;
    }
    .paginations__numbers,
    .paginations__btn,
    .paginations__dots {
        flex: 0 0 auto;
    }
    .paginations__btn {
        flex: 5 5 auto;
    }
}

.nav-pills>li>a {
    padding: 5px;
    margin-bottom: 10px;
    font-size: var(--size-12);
}

.nav-pills>li>a:hover {
    background-color: #474747;
}


/* tabs */

.nav.nav-pills {
    font-size: 0;
}

.nav.nav-pills>a {
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--border-radius);
    padding: 5px 10px;
    text-decoration: none;
    margin-right: 5px;
    background-color: #252525;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    color: var(--font-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.nav.nav-pills>a:hover {
    color: var(--font-hover-color);
    background-color: #444;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4));
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4);
}

.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus-visible,
.nav-tabs.nav-justified>.active>a:hover {
    border: 1px solid #252525;
    color: var(--font-hover-color);
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus-visible,
.nav-tabs>li.active>a:hover {
    color: var(--font-color);
    cursor: default;
    background-color: #252525;
    border: 1px solid #202020;
    border-bottom-color: transparent;
}

.alert {
    /* padding: .8rem; */
    padding: 0;
    position: relative;
    color: var(--font-hover-color);
    font-size: var(--size-14);
    box-shadow: var(--box-shadow) !important;
    border-radius: var(--border-radius) !important;
    border: none;
    /* background-color: var(--color);
	background-image: 
		repeating-linear-gradient(90deg, transparent, transparent 2px,rgba(0, 0, 0, .1) 2px,rgba(0, 0, 0, .1) 3px),
		linear-gradient(to bottom, transparent, rgba(0,0,0,.4)); */
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    /* display: flex; */
}

.alert .btn-close {
    line-height: .5 !important;
    opacity: .8;
    padding: .8rem;
    text-align: center;
    outline: none !important;
    border: none !important;
    border-radius: var(--border-radius);
    background: transparent;
    color: #FFF !important;
    box-shadow: 0 0 0 transparent;
}

.alert .btn-close:hover {
    opacity: 1;
}

.alert.alert-info .timer-active,
.alert.alert-info .text-muted {
    color: var(--font-hover-color) !important;
}

.alert ul {
    padding-inline-start: 1rem;
    margin-top: .5rem;
    margin-bottom: 0;
    list-style: disc;
}

.alert ul>li {
    font-size: var(--size-13);
    font-weight: initial;
}

.alert .show-more.more {
    max-height: 10rem;
}

.alert .more-less {
    color: var(--font-hover-color);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--size-12);
}

.alert .show-more {
    margin-top: .3rem;
    padding: .3rem 1rem;
    max-height: 50px;
    overflow: auto;
    background-color: rgba(0, 0, 0, .1);
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}

.alert .show-more ul {
    list-style: none;
    padding-left: 0;
    color: var(--font-hover-color);
    margin: 0;
}


/* .alert.alert-image {
	padding: 0;
	overflow: hidden;
	background-color: var(--main-color);
	background-image: linear-gradient(to top, transparent, rgba(0,0,0,.3));
	box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, .2);
} */


/* 
.alert.alert-image .text-side {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: start;
    justify-content: center;
    align-items: start;
} */


/* 
.alert>.text-side {
    border-inline-start: 1px solid var(--border2-color);
} */

.alert.alert-image .text-side {
    padding: 0;
}

.alert.alert-image .alert-text {
    padding: 1rem;
}

.alert .portrait-wrapper {
    padding: .3rem;
    float: inline-start;
    margin-inline-end: 1rem;
    text-align: center;
}

.alert.alert-image .portrait-wrapper .owner {
    text-transform: capitalize;
    color: var(--font-hover-color);
    font-size: var(--size-12);
    font-weight: 700;
}

.alert.alert-image .portrait-wrapper a {
    text-decoration: none;
}

.alert .portrait-wrapper,
.alert .icon-side {
    background-color: var(--color);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    border-start-start-radius: var(--border-radius);
    border-end-start-radius: var(--border-radius);
    border-inline-end: 1px solid var(--border-color);
    display: grid;
    padding: .5rem;
    place-items: center;
}

.alert.type-2 .portrait-wrapper {
    border-block-end: 1px solid var(--border-color);
    box-shadow: 1px 1px 0 0 var(--border2-color);
    border-end-end-radius: var(--border-radius);
    border-end-start-radius: 0;
}

.alert.type-2 {
    border-inline-start: none;
}


/* @media (min-width: 576px) {
    .alert.type-2 .portrait-wrapper {
        box-shadow: 0 0 0 0 transparent;
        border-block-end: none;
        border-end-end-radius: 0;
        border-end-start-radius: 0;
    }
} */

.alert .text-side strong {
    color: var(--font-hover-color);
}

.alert>* {
    padding: .8rem;
}

.portrait {
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: var(--main-color);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    border: 2px solid var(--main5-color);
    max-width: 70px;
    min-width: 70px;
    min-height: 70px;
    max-height: 70px;
    border-radius: 100%;
    box-shadow: var(--box-shadow-panel) inset;
}

.portrait>img {
    width: 100%;
    height: 100%;
}


/* tutorial */

.tutorial-portrait-wrapper {
    float: left;
    float: inline-start;
    margin-inline-end: 1rem;
}

.alert.alert-primary {
    --color: var(--bg-primary-color);
}

.alert.alert-danger {
    --color: var(--bg-danger-color);
}

.alert.alert-success {
    --color: var(--bg-success-color);
}

.alert.alert-info {
    --color: var(--bg-info-color);
}

.alert.alert-warning {
    --color: var(--bg-warning-color);
}

.alert.alert-dark {
    --color: var(--bg-dark-color);
}

.alert.alert-light {
    --color: var(--bg-light-color);
}

.alert.alert-secondary {
    --color: var(--bg-secondary-color);
}


/* bg-gradient */

.bg-gradient.primary {
    --color: var(--bg-primary-color);
}

.bg-gradient.danger {
    --color: var(--bg-danger-color);
}

.bg-gradient.success {
    --color: var(--bg-success-color);
}

.bg-gradient.info {
    --color: var(--bg-info-color);
}

.bg-gradient.warning {
    --color: var(--bg-warning-color);
}

.bg-gradient.dark {
    --color: var(--bg-dark-color);
}

.bg-gradient.light {
    --color: var(--bg-light-color);
}

.bg-gradient.secondary {
    --color: var(--bg-secondary-color);
}

.bg-gradient {
    background-color: var(--color);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5)) !important;
}

.bg-gradient.to-top {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to top, transparent, rgba(0, 0, 0, .5)) !important;
}

.bg-gradient.to-left {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to left, transparent, rgba(0, 0, 0, .5)) !important;
}

.bg-gradient.to-right {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), linear-gradient(to right, transparent, rgba(0, 0, 0, .5)) !important;
}


/* limit_img_size */

.limit_img_size img {
    max-width: 100%;
}

.break-words {
    word-break: break-all;
}


/* postbit */

.postbit_side {
    position: relative;
    z-index: 1;
    /* background-color: var(--main-color); */
}

.postbit_side>.postbit_info {
    /* border-bottom: 1px solid var(--border-color); */
    z-index: 2;
}

.postbit_side>.postbit_info li div {
    background-color: transparent;
}

.postbit_side>.background_container {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.postbit_side>.background_container>.background {
    background-size: cover;
    min-height: 220px;
    max-height: 220px;
    min-width: 160px;
    max-width: 160px;
    position: relative;
    opacity: .2;
}

.postbit_side>.background_container>.background:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, transparent, var(--main-color));
}


/* gangTabs */

.gangTabs {
    background-color: var(--main3-color);
    display: flex;
    border-radius: var(--border-radius);
}

.gangTabs>a {
    flex: 1 1 0;
    padding: .6rem .1rem;
    font-weight: 700;
    font-size: var(--size-13);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-inline-start: 1px solid var(--border2-color);
    border-inline-end: 1px solid var(--border-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent);
}

@media (min-width: 991px) {
    .gangTabs>a {
        padding: 1rem .3rem;
    }
}

.gangTabs>a .gangTab-title {
    display: none;
}

@media (min-width: 991px) {
    .gangTabs>a .gangTab-title {
        display: block;
    }
}

.gangTabs>a i {
    font-size: var(--size-14);
}

@media (min-width: 991px) {
    .gangTabs>a i {
        font-size: 1.3rem;
    }
}

.gangTabs>a.active,
.gangTabs>a:active,
.gangTabs>a:focus-visible,
.gangTabs>a:hover {
    color: var(--font-hover-color);
    background-image: linear-gradient(to top, rgba(0, 0, 0, .3), transparent);
}

.gangTabs>a:first-of-type {
    border-start-start-radius: var(--border-radius);
    border-end-start-radius: var(--border-radius);
    border-inline-start: none;
}

.gangTabs>a:last-of-type {
    border-inline-end: none;
    border-start-end-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

@media (min-width: 991px) {}


/* gang-tab */


/* 
.gang-tab {
    position: relative;
    background-color: var(--main-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: var(--border-radius);
    color: var(--font-hover-color);
    text-decoration: none;
}

.gang-tab::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: var(--border-radius);
    background-image: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3));
}

.gang-tab.active,
.gang-tab:focus-visible,
.gang-tab:hover {
    outline: none;
    box-shadow: 0 0 0 transparent;
    color: #fff;
}

.gang-tab.active::after,
.gang-tab:focus-visible::after,
.gang-tab:hover::after {
    outline: none;
    box-shadow: 0 0 0 transparent;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
}

.gang-tab>* {
    z-index: 2;
}

.gang-tab>.tab-title {
    font-size: var(--size-12);
    font-weight: 700;
} */


/* info-list */

.info-list u {
    border-bottom: 1px dotted #555;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 3px 3px 0;
    margin-bottom: 5px;
    display: inline-block;
    text-decoration: none;
}

.info-list ul:last-of-type {
    margin-bottom: 0;
}

.info-list ul {
    list-style: none;
    margin-bottom: 20px;
    padding-inline-start: 0;
}

.info-list ul>li {
    text-align: start;
    margin-bottom: .5rem;
    vertical-align: middle;
}

.info-list ul>li>strong:first-of-type {
    display: inline-block;
    min-width: 100px;
}


/* info-block style */

.info-block {
    padding: 1rem;
    border-radius: var(--border-radius);
    font-size: var(--size-13);
    background-color: var(--main-color);
    border: 2px solid #555;
}


/* avatar/gang img style */

.gang-leader {
    font-weight: 700;
    color: #FFF;
}

.gang-coLeader {
    font-weight: 700;
}

.gang-pic {
    background-color: var(--main2-color);
    width: 40px;
    height: 20px;
}


/* avatar */

.user-pic {
    border: 1px solid var(--border-color);
    background-color: var(--main2-color);
    width: 102px;
    height: 102px;
    position: relative;
    margin: 0 auto;
}

.user-pic>img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.user-pic::after {
    border: 1px solid var(--border2-color);
    border-radius: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    inset: 0;
    z-index: 0;
}

.user-pic.small {
    width: 45px;
    height: 45px;
}

.user-pic.medium {
    width: 70px;
    height: 70px;
}


/* postbit */

.postbit-pic {
    border: 1px solid var(--border-color);
    background-color: var(--main2-color);
    box-shadow: var(--box-shadow);
    width: 160px;
    height: 220px;
    border-radius: var(--border-radius);
}


/* honorBar style */

.honorBar {
    min-width: 100px;
    max-width: 200px;
    max-height: 19px;
    background-color: var(--main-color);
    box-shadow: var(--box-shadow-sm);
}


/* honorBar style */

.characterModel {
    min-width: 240px;
    max-width: 240px;
    min-height: 384px;
    max-height: 384px;
    background-color: var(--main2-color);
    box-shadow: var(--box-shadow);
}

.characterModel.character-avatar {
    min-width: 142px;
    max-width: 142px;
    min-height: 142px;
    max-height: 142px;
    background-color: var(--main2-color);
    box-shadow: var(--box-shadow);
}

.character-model-box {
    margin: 0 auto;
    position: relative;
    height: 144px;
    width: 144px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    cursor: pointer;
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
}

.character-model-box::before {
    border: 1px solid var(--border2-color);
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}


/* perks tabs */

.custom-tabs {
    --bgcolor: var(--main-color);
    display: flex;
    align-items: center;
    overflow-x: auto;
    background-image: linear-gradient(to right, var(--bgcolor), var(--bgcolor)), linear-gradient(to right, var(--bgcolor), var(--bgcolor)), linear-gradient(to right, rgba(0, 0, 0, .3), transparent), linear-gradient(to left, rgba(0, 0, 0, .3), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: var(--bgcolor);
    background-size: 1.25rem 100%, 1.25rem 100%, .625rem 100%, .625rem 100%;
    background-attachment: local, local, scroll, scroll;
}

.custom-tabs>* {
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
    border-inline-end: 1px solid var(--border-color);
    flex: 1 1 0;
    text-align: center;
    padding: .4rem;
    min-height: 2rem;
    max-height: 2rem;
    cursor: default;
    font-weight: 700;
}

.custom-tabs>*[disabled] {
    --inv-font-color: var(--font-muted-color);
    text-shadow: none;
    filter: none;
}

.custom-tabs>*:not([disabled]) {
    --inv-font-color: var(--font-color);
    cursor: pointer;
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
}

.custom-tabs>*.active {
    --inv-font-color: var(--font-hover-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    background-image: linear-gradient(to top, transparent, rgba(255, 255, 255, .2));
}

.custom-tabs>*:first-of-type {
    border-inline-start: none;
}

.custom-tabs>*:last-of-type {
    border-inline-end: none;
}

.custom-tabs>*,
.custom-tabs>*>* {
    color: var(--inv-font-color);
    fill: var(--inv-font-color);
}

.custom-tabs>*>svg {
    height: 14px;
    max-height: 14px;
}

.custom-tabs.custom-rows>* {
    flex: 1 1 50%;
}

@media (min-width: 767px) {
    .custom-tabs.custom-rows>* {
        flex: 1 1 calc(100% / 3);
    }
}

@media (min-width: 991px) {
    .custom-tabs.custom-rows>* {
        flex: 1 1 calc(100% / 5);
    }
}

@media (min-width: 1199px) {
    .custom-tabs.custom-rows>* {
        flex: 0 1 calc(100% / 6);
    }
}

.tab-content {
    max-height: 200px;
    overflow-y: auto;
}


/* Filter */

.filter {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    overflow-x: auto;
    background-color: var(--main-color);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, .3));
}

.filter>li {
    flex: 1 1 50%;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    color: var(--font-color);
    text-transform: capitalize;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--main-color);
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3));
    transition: .3s all ease;
}

.filter>li>a {
    display: block;
    padding: .5rem 0;
    color: var(--font-color);
    text-decoration: none;
}

.filter>li:active,
.filter>li:focus-visible,
.filter>li:hover,
.filter>li.selected {
    outline: none;
    color: var(--font-hover-color);
    background-color: var(--main2-color);
    background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, .3));
}

.filter>li.selected>a {
    color: var(--font-hover-color);
}

@media (min-width: 767px) {
    .filter>li {
        flex: 1 1 calc(100% / 3);
    }
}

@media (min-width: 991px) {
    .filter>li {
        flex: 1 1 calc(100% / 5);
    }
}

@media (min-width: 1199px) {
    .filter>li {
        flex: 0 1 calc(100% / 6);
    }
}


/* autocomplete */

[class$='-suggesstion'] {
    position: relative;
}

.autocomplete_wrapper {
    width: 100%;
    position: relative;
}

.input-group>.autocomplete_wrapper {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group>.autocomplete_wrapper>.form-control {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

#autocomplete-list {
    position: absolute;
    z-index: 10;
    min-width: 130px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: var(--main-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

#autocomplete-list li {
    background-color: var(--main-color);
    padding: .375rem .75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--font-color);
    cursor: pointer;
}

#autocomplete-list li .autocomplete-badge {
    color: var(--font-hover-color);
}

#autocomplete-list li:hover {
    color: var(--font-hover-color);
    text-decoration: none;
    background-color: var(--main3-color);
}

#autocomplete-list li:first-of-type {
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
}

#autocomplete-list li:last-of-type {
    border-bottom: none;
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}


/* * bbcodes * */

.bbcode_list {
    padding-inline-start: 1rem;
}


/* .bbcode_align{} */

.bbcode_spoiler {
    color: transparent;
    text-shadow: 0 0 1rem var(--font-color);
    background-color: var(--main2-color);
    padding: .2rem .5rem;
    transition: 2s;
}

.bbcode_spoiler:hover {
    color: var(--font-hover-color);
    text-shadow: 0 0 3px var(--font-hover-color);
}

.bbcode_url,
.bbcode_wiki {
    text-decoration: underline;
    /* color: var(--font-hover-color);	 */
    text-decoration-color: currentColor;
}

.bbcode_wiki:before {
    content: "";
}

.bbcode_code>.bbcode_code_body,
.bbcode_quote>.bbcode_quote_body {
    font-weight: 400;
}

.bbcode_code>.bbcode_code_head,
.bbcode_quote>.bbcode_quote_head {
    font-weight: 600;
    color: var(--font-hover-color);
    display: block;
    padding-bottom: .3rem;
    font-size: var(--size-12);
    font-style: normal;
}

.forum_text pre,
.forum_text h1,
.forum_text h2,
.forum_text h3,
.forum_text h4,
.forum_text h5,
.forum_text h6,
.forum_text pre code,
.forum_text p {
    max-width: 100% !important;
}

.forum_text pre code {
    overflow: auto;
    cursor: text;
}

.forum_text pre,
.bbcode_code,
.bbcode_quote {
    overflow: auto;
    margin: .3rem 0;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
    background-color: var(--main2-color);
    background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3));
    padding: .3rem .5rem;
    font-size: var(--size-12);
    display: block;
    border: 1px solid var(--border2-color);
    border-inline-start: 1px solid var(--border-color);
}

.bbcode_code {
    width: auto;
    max-height: 600px;
    overflow: auto;
}


/* form-check-input */

.form-check-input {
    background-color: var(--main3-color);
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:focus-visible {
    border-color: var(--border-color);
    box-shadow: 0 0 0 .2rem var(--main2-color);
}


/* inputs / buttons */

.input-group-addon,
.form-select,
.form-control {
    color: var(--font-color);
    font-size: var(--size-12);
    /* border: 1px solid var(--main3-color); */
    border: 1px solid var(--border-color);
    background-color: var(--main1-color);
    background-image: var(--particles-image-bg), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent);
    height: 2rem;
    box-shadow: var(--box-shadow-input);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-select::placeholder {
    color: var(--font-color);
}

.input-group>.form-control:focus-visible,
.form-select:focus-visible,
.form-control:focus-visible {
    color: var(--font-hover-color);
    background-color: var(--main1-color);
    border-color: var(--border2-color);
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .3);
}

.form-group .form-control {
    color: var(--font-color);
}

textarea.form-control {
    min-width: 100%;
    max-width: 100%;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--main3-color);
}

.form-control-inline {
    display: inline-block;
    width: 200px;
}


/* input-group */

.input-group {
    box-shadow: var(--box-shadow-panel);
    border-radius: var(--border-radius);
}

.input-group>.btn {
    box-shadow: inset 0 0 0 1px var(--border2-color);
}

.input-group>.form-control {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.input-group-text {
    color: var(--font-color);
    font-size: var(--size-14);
    border-color: var(--border-color);
    background-color: var(--main2-color) !important;
    padding: .175rem .5rem;
    box-shadow: inset 0 0 0 1px var(--border2-color);
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -2px;
}

.input-group-addon {
    background-color: var(--main2-color) !important;
}

.input-group-inline {
    width: 200px;
    margin: auto;
}

.input-group-addon {
    background-color: var(--main2-color);
    border: 1px solid rgba(255, 255, 255, 0.14);
}


/* btn--loader */

.btn--loader {
    border-radius: 100%;
    height: 1rem;
    width: 1rem;
    animation: .7s loader-rotation ease infinite;
    background: radial-gradient(var(--bg-color) 58%, transparent 59%), conic-gradient(from 190.16deg at 50% 50%, #FFF 0deg, var(--bg-color) 360deg);
}

@keyframes loader-rotation {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(-360deg);
    }
}


/* btn */

.btn.btn-primary {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-primary-rgb), .3);
    /* --btn-hover-font-color: var(--bs-primary); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-primary-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-primary-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-primary-rgb), .3);
}

.btn.btn-success {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-success-rgb), .3);
    /* --btn-hover-font-color: var(--bs-success); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-success-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-success-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-success-rgb), .3);
}

.btn.btn-danger {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-danger-rgb), .3);
    /* --btn-hover-font-color: var(--bs-danger); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-danger-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-danger-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-danger-rgb), .3);
}

.btn.btn-info {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-info-rgb), .3);
    /* --btn-hover-font-color: var(--bs-info); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-info-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-info-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-info-rgb), .3);
}

.btn.btn-warning {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-warning-rgb), .3);
    /* --btn-hover-font-color: var(--bs-warning); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-warning-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-warning-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-warning-rgb), .3);
}

.btn.btn-dark {
    --bs-dark: #000;
    --bs-dark-rgb: 0, 0, 0;
    --btn-font-color: var(--font-dark-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-dark-rgb), .5);
    /* --btn-hover-font-color: var(--font-muted-color); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-dark-rgb), .9);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: transparent;
    --btn-disabled-gradient-to-color: rgba(var(--bs-dark-rgb), .5);
    --btn-disabled-font-color: var(--font-dark-color);
}

.btn.btn-light {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-light-rgb), .3);
    /* --btn-hover-font-color: var(--bs-light); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-light-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-light-rgb), .1);
    --btn-disabled-font-color: rgba(var(--bs-light-rgb), .3);
}

.btn.btn-secondary {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-secondary-rgb), .3);
    /* --btn-hover-font-color: var(--bs-secondary); */
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-secondary-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-secondary-rgb), .3);
    --btn-disabled-font-color: rgba(var(--bs-secondary-rgb), .7);
}

.btn.btn-pink {
    --bs-pink-rgb: 214, 51, 133;
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main2-color);
    --btn-gradient-from-color: transparent;
    --btn-gradient-to-color: rgba(var(--bs-pink-rgb), .3);
    --btn-hover-background-color: var(--main2-color);
    --btn-hover-gradient-from-color: rgba(var(--bs-pink-rgb), .6);
    --btn-hover-gradient-to-color: transparent;
    --btn-disabled-gradient-from-color: rgba(var(--bs-pink-rgb), .3);
    --btn-disabled-font-color: rgba(var(--bs-pink-rgb), .7);
}

.btn {
    --btn-font-color: var(--font-color);
    --btn-background-color: var(--main-color);
    --btn-gradient-from-color: rgba(0, 0, 0, .5);
    --btn-gradient-to-color: transparent;
    --btn-hover-font-color: var(--font-hover-color);
    --btn-hover-background-color: var(--main3-color);
    --btn-hover-gradient-from-color: transparent;
    --btn-hover-gradient-to-color: rgba(0, 0, 0, .6);
    --btn-disabled-gradient-from-color: rgba(0, 0, 0, .6);
    --btn-disabled-gradient-to-color: transparent;
    --btn-disabled-font-color: var(--font-muted-color);
    position: relative;
    padding: 0 .5rem;
    height: 2rem;
    line-height: 2rem;
    color: var(--btn-font-color);
    font-size: var(--size-12);
    text-decoration: none;
    text-transform: capitalize;
    text-align: center;
    font-weight: 700;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    outline: none !important;
    /* transition: all .1s ease; */
    white-space: nowrap;
    text-shadow: 0 1px 0 #000;
    /* box-shadow: 0 0 .3rem rgba(0, 0, 0, .3); */
    box-shadow: 0 0 0.3rem rgba(0, 0, 0, .3), inset 0 0 0 1px var(--border2-color);
    background-color: var(--btn-background-color);
    background-image: var(--particles-image-bg), linear-gradient(to top, var(--btn-gradient-from-color), var(--btn-gradient-to-color));
}

.btn:not(:disabled).active,
.btn:not(:disabled):active,
.btn:not(:disabled):focus-visible,
.btn:not(:disabled):hover {
    border-color: var(--border-color);
    color: var(--btn-hover-font-color);
    background-color: var(--btn-hover-background-color);
    background-image: var(--particles-image-bg), linear-gradient(to bottom, var(--btn-hover-gradient-from-color), var(--btn-hover-gradient-to-color));
    /* box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .3); */
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .3), inset 0 0 0 1px var(--border2-color);
}

.btn:disabled {
    color: var(--btn-disabled-font-color);
    background-color: var(--main2-color);
    background-image: var(--particles-image-bg), linear-gradient(to top, var(--btn-disabled-gradient-from-color), var(--btn-disabled-gradient-to-color));
    box-shadow: 0 0 0 transparent;
    /* border-color: var(--main-color); */
    border: none;
    border-bottom: 1px solid var(--main3-color);
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.btn.btn-full {
    display: block;
    width: 100%;
}

.btn.btn-sm {
    padding: 0 .4rem;
    height: 1.7rem;
    line-height: 1.7rem;
}


/* text-colors */

.text-success {
    color: #20b948 !important;
}

.text-danger {
    color: #c30000 !important;
}

.text-info {
    color: #00f3ff !important;
}

.text-warning {
    color: #ffd400 !important;
}

.text-muted {
    color: var(--font-muted-color) !important;
}

.text-money {
    color: var(--text-money) !important;
}

.text-points {
    color: var(--text-points) !important;
}

.text-gold {
    color: var(--text-gold) !important;
}

.discount {
    color: var(--text-discount);
    font-size: var(--size-12);
}


/* timers */

.timer-done {
    color: #20b948 !important;
}


/* .timer-active{
	color: var(--font-muted-color) !important;
} */

[timer-cost="0"] {
    display: none;
}


/* Modal */

.modal-content {
    background-color: var(--main-color);
}

.modal-header {
    border-color: var(--border-color);
    background-color: var(--main3-color);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), var(--particles-image-bg), linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
    color: var(--font-hover-color);
    font-weight: 700;
    font-size: var(--size-13);
    text-transform: uppercase;
    padding: .5rem .6rem;
}

.modal-title {
    color: var(--font-hover-color);
    font-weight: 700;
    font-size: var(--size-13);
}

.modal-header .btn-close {
    color: var(--font-hover-color);
    background: transparent;
    font-size: var(--size-13);
}

.modal-body {
    box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, .2);
}

.modal-footer {
    border-color: var(--border-color);
}


/* loader */

.loader-small {
    background: rgba(255, 255, 255, .1);
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: block;
    animation: loader-small 1.5s infinite linear;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, .2);
}

@keyframes loader-small {
    50% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, .3);
        background: rgba(255, 255, 255, .8);
        border: 2px solid rgba(255, 255, 255, .5);
    }
}

.loader {
    background: rgba(255, 255, 255, .1);
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    animation: big-loader 1.5s infinite linear;
    margin: 0 auto;
    border: 4px solid rgba(255, 255, 255, .2);
}

@keyframes big-loader {
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, .3);
        background: rgba(255, 255, 255, .8);
        border: 4px solid rgba(255, 255, 255, .5);
    }
}

[data-ajax-element="alerts"]>.loader {
    margin: 1rem auto;
}


/* .ajax-page-loading{
	border-radius: var(--border-radius);
	width: 200px;
	padding: 15px;
	margin: 0 auto;
	font-size: 14px;
	font-weight: 600;
	background-color: #333;
	box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, .3);
	text-align: center;
}
.ajax-page-loading>.text{
	margin-top: 10px;
} */

.inline-loader {
    height: 8px;
    width: 36px;
}

.inline-loader>.circle {
    display: inline-block;
    border-radius: 50%;
    border-radius: var(--border-radius);
    height: 10px;
    width: 10px;
    margin: 0px 2px;
    background-color: rgba(255, 255, 255, .6);
    animation-name: fadeOutIn;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-shadow: var(--box-shadow);
}

.inline-loader>.circle:nth-child(1) {
    animation-delay: 250ms;
}

.inline-loader>.circle:nth-child(2) {
    animation-delay: 500ms;
}

.inline-loader>.circle:nth-child(3) {
    animation-delay: 750ms;
}

@keyframes fadeOutIn {
    0% {
        background-color: rgba(255, 255, 255, .6);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

.limited-height-10 {
    max-height: 10rem;
    overflow-y: auto;
}

.limited-height-20 {
    max-height: 20rem;
    overflow-y: auto;
}

.limited-height-30 {
    max-height: 30rem;
    overflow-y: auto;
}

@media (min-width: 767px) {
    .limited-height-md-auto {
        max-height: initial;
    }
}

@media (min-width: 992px) {
    .limited-height-lg-auto {
        max-height: initial;
    }
}

@media (min-width: 1200px) {
    .limited-height-xl-auto {
        max-height: initial;
    }
}

@media (min-width: 1400px) {
    .limited-height-xxl-auto {
        max-height: initial;
    }
}


/*** Effects ***/


/*
animation: effect_bounce 1.45s forwards;
animation: effect_changing .593s forwards;
animation: effect_dropStart 1.3s forwards;
animation: effect_dropForce .2s forwards;
animation: effect_shiftFromRight .3s forwards;
*/

@keyframes text-pulse {
    50% {
        color: var(--link-color);
        text-shadow: 0 0 2px var(--link-color);
    }
}

@keyframes bobble-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--color), .4)
    }
    70% {
        box-shadow: 0 0 3px 7px transparent
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes effect_blick {
    0% {
        left: 0;
        opacity: .9;
        margin-left: -100px;
    }
    34% {
        left: 120%;
        opacity: .5;
        margin-left: 80px;
    }
    100% {
        left: 120%;
        opacity: .5;
        margin-left: 80px;
    }
}

@keyframes effect_bounce {
    0% {
        transform: translateY(-160px);
        animation-timing-function: ease-in
    }
    26.32%,
    27.25% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    42.82% {
        transform: translateY(-56px);
        animation-timing-function: ease-in
    }
    58.39%,
    59.11% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    68.32% {
        transform: translateY(-20px);
        animation-timing-function: ease-in
    }
    77.53%,
    78.08% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    83.53% {
        transform: translateY(-7px);
        animation-timing-function: ease-in
    }
    88.98%,
    89.41% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    92.63% {
        transform: translateY(-3px);
        animation-timing-function: ease-in
    }
    95.86%,
    96.18% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    98.09% {
        transform: translateY(-1px);
        animation-timing-function: ease-in
    }
    to {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
}

@keyframes effect_changing {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    22.52% {
        transform: translateY(-20px);
        animation-timing-function: ease-in
    }
    45.04%,
    46.39% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    59.72% {
        transform: translateY(-7px);
        animation-timing-function: ease-in
    }
    73.05%,
    74.1% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    81.97% {
        transform: translateY(-3px);
        animation-timing-function: ease-in
    }
    89.87%,
    90.66% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
    95.33% {
        transform: translateY(-1px);
        animation-timing-function: ease-in
    }
    to {
        transform: translateY(0);
        animation-timing-function: ease-out
    }
}

@keyframes effect_dropStart {
    0% {
        transform: translateY(0);
        animation-timing-function: linear
    }
    to {
        transform: translateY(10px)
    }
}

@keyframes effect_dropForce {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-in
    }
    to {
        transform: translateY(160px)
    }
}

@keyframes effect_shiftFromRight {
    0% {
        transform: translateX(350px);
        opacity: 0;
        animation-timing-function: ease-in
    }
    50% {
        opacity: 1
    }
    to {
        transform: translateX(0)
    }
}