@import url(debug.css);
:root {
    font-size: 16px;
    --line-height: 1.2rem;
    /* main colors */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    --box-shadow-panel: 0 2px 5px rgba(0, 0, 0, .5);
    --box-shadow-sm: 0 0 3px rgba(0, 0, 0, .3);
    /* --box-shadow-input: 0 0 3px 1px rgba(0, 0, 0, .5); */
    --box-shadow-input: 0 0 3px 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2);
    --main-color: #333;
    --main-color-rgb: 51, 51, 51;
    --main1-color: #111;
    --main2-color: #222;
    --main3-color: #505050;
    --main4-color: #666;
    --main5-color: #777;
    --main6-color: #999;
    --main7-color: #b5b5b5;
    /* font colors */
    --font-color: #999;
    --font-hover-color: #CCC;
    /* --font-dark-color: #4d4d4d; */
    /* --font-muted-color: #606060; */
    --font-dark-color: #505050;
    --font-muted-color: #808080;
    --color: var(--font-color);
    --color-hover: var(--font-hover-color);
    /* font size */
    --size-16: 1rem;
    --size-15: .9375rem;
    --size-14: .875rem;
    --size-13: .8125rem;
    --size-12: .75rem;
    --size-11: .6875rem;
    --size-10: .625rem;
    /* text */
    --text-discount: #0eb943;
    --text-money: #29b153;
    --text-points: #d2bd4f;
    /* tiers */
    --text-bronze: #CD7F32;
    --text-silver: #C0C0C0;
    --text-gold: #ffd700;
    --text-platinum: #748ffc;
    --text-diamond: #8a3bdb;
    --text-bronze-rgb: 205, 127, 50;
    --text-silver-rgb: 192, 192, 192;
    --text-gold-rgb: 255, 215, 0;
    --text-platinum-rgb: 116, 143, 252;
    --text-diamond-rgb: 138, 59, 231;
    /* layout variables */
    --header-height: 40px;
    --logo-height: 80px;
    --mobile-tab-height: 64px;
    --side-width: 220px;
    --layout-bg: rgba(0, 0, 0, .1);
    --side-border-color: rgba(0, 0, 0, .5);
    /* utiliti colors */
    --border-radius: .25rem;
    --border-radius-md: .3rem;
    --border-radius-lg: .5rem;
    --border-radius-xl: 1rem;
    --border-color: #111;
    --border-rgb-color: 17, 17, 17;
    --border2-color: rgba(255, 255, 255, .1);
    --honorbar-bg: #111;
    --medal-bg: #111;
    --particles-image-bg: url("../images/particles/particles.png");
    --particles-image-bg-module: url("../../../themes/lostcity/images/particles/particles.png");
    --line-pattern-image-bg: url("../images/particles/line-pattern.png");
    --line-pattern-image-bg-module: url("../../../themes/lostcity/images/particles/line-pattern.png");
    /* Panel Styles */
    /* --panel-heading: 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)); */
    --panel-heading: var(--particles-image-bg), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    /* cars Classes */
    --car_class_S: 255, 215, 0;
    --car_class_A: 255, 78, 54;
    --car_class_B: 208, 22, 255;
    --car_class_C: 0, 252, 21;
    --car_class_D: 55, 148, 255;
    --car_class_E: 190, 190, 190;
    /* stats colors */
    --stats_health: #ca3600;
    --stats_energy: #00c421;
    --stats_will: #0088cc;
    --stats_nerve: #ca7300;
    --stats_exp: #ffd700;
    --stats_wanted: #999;
    /* bg colors */
    --bg-primary-rgb-color: 13, 110, 253;
    --bg-danger-rgb-color: 148, 0, 0;
    --bg-success-rgb-color: 0, 148, 29;
    --bg-info-rgb-color: 0, 117, 148;
    --bg-warning-rgb-color: 148, 76, 0;
    --bg-dark-rgb-color: 68, 68, 68;
    --bg-light-rgb-color: 219, 219, 219;
    --bg-secondary-rgb-color: 119, 119, 119;
    --bg-primary-color: rgb(var(--bg-primary-rgb-color));
    --bg-danger-color: rgb(var(--bg-danger-rgb-color));
    --bg-success-color: rgb(var(--bg-success-rgb-color));
    --bg-info-color: rgb(var(--bg-info-rgb-color));
    --bg-warning-color: rgb(var(--bg-warning-rgb-color));
    --bg-dark-color: rgb(var(--bg-dark-rgb-color));
    --bg-light-color: rgb(var(--bg-light-rgb-color));
    --bg-secondary-color: rgb(var(--bg-secondary-rgb-color));
}

:root body.jail {
    --main-color: #27403e;
    --main2-color: #1a2a29;
    --main3-color: #3d6461;
    --main4-color: #4d7f7b;
    --main5-color: #5a9591;
    --font-color: #80b2ae;
    --font-hover-color: #c0d9d7;
    --font-dark-color: #3a605d;
    --font-muted-color: #477572;
    --border-color: #0d1514;
}

:root body.hospital {
    --main-color: #402727;
    --main2-color: #2a1a1a;
    --main3-color: #643d3d;
    --main4-color: #7f4d4d;
    --main5-color: #955a5a;
    --font-color: #b28080;
    --font-hover-color: #d9c0c0;
    --font-dark-color: #603a3a;
    --font-muted-color: #754747;
    --border-color: #150d0d;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    height: var(--viewport-height);
    padding: 0;
    margin: 0;
    font-family: 'Roboto', 'Arial', 'tahoma', 'sans-serif';
    /* font-family: 'Fredoka', 'Roboto', 'Arial', 'tahoma', sans-serif; */
    font-size: var(--size-13);
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--font-color);
    text-align: start;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body {
    background-image: var(--particles-image-bg);
    background-color: var(--border-color);
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

body.jail .panel-heading,
body.hospital .panel-heading {
    background-color: var(--main3-color) !important;
}


/* Utilities */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #333;
}

::-webkit-scrollbar-thumb {
    background-color: #777;
}

::selection {
    background: rgba(255, 255, 255, .1)
}

::-moz-selection {
    background: rgba(255, 255, 255, .1)
}

::-webkit-selection {
    background: rgba(255, 255, 255, .1)
}

.panel ::selection {
    background: rgba(0, 0, 0, .3)
}

.panel ::-moz-selection {
    background: rgba(0, 0, 0, .3)
}

.panel ::-webkit-selection {
    background: rgba(0, 0, 0, .3)
}

.form-control::selection {
    background: rgba(255, 255, 255, .1)
}

.form-control::-moz-selection {
    background: rgba(255, 255, 255, .1)
}

.form-control::-webkit-selection {
    background: rgba(255, 255, 255, .1)
}

svg {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
}

a,
a:focus-visible,
a:active,
a:hover {
    color: inherit;
}

ul {
    /* list-style: none; */
    padding-inline-start: 1rem;
}


/* font sizes */

.fs-0 {
    font-size: 0 !important;
}

.fs-10px {
    font-size: var(--size-10) !important;
}

.fs-11px {
    font-size: var(--size-11) !important;
}

.fs-12px {
    font-size: var(--size-12) !important;
}

.fs-13px {
    font-size: var(--size-13) !important;
}

.fs-14px {
    font-size: var(--size-14) !important;
}

[js-loading] {
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 1px;
    white-space: nowrap;
}


/* layout */

.gl--layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gl--layout>.gl--main {
    flex: 1 1 0;
}

.gl--layout>.gl--footer {
    margin-top: 3rem;
    padding-bottom: var(--mobile-tab-height);
    flex: 0 1 0;
    background-color: var(--main2-color);
    background-image: var(--particles-image-bg);
}

.gl--footer-top {
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    /* padding-inline: 1rem; */
}

@media (min-width: 768px) {
    .gl--footer-top {
        padding-top: 3rem;
        /* padding-inline: 0; */
    }
}

.gl--footer-bottom {
    border-top: 1px solid var(--border2-color);
}

.gl--footer .footer-list-menu {
    padding: 0;
    list-style: none;
}

.footer-list-menu li {
    padding-inline-start: calc(3px + 1rem);
    position: relative;
    --color: var(--bg-secondary-color);
}

@media (min-width: 767px) {
    .gl--footer .footer-list-menu li {
        margin-bottom: .5rem;
    }
}

.footer-list-menu a {
    text-decoration: none;
    font-weight: 700;
    color: var(--color);
}

.gl--footer .footer-list-menu li a::before {
    position: absolute;
    content: '';
    height: 6px;
    width: 6px;
    top: calc(50% - 3px);
    left: 0;
    background-color: var(--bg-secondary-color);
    border-radius: 2px;
}

.footer-list-menu li:hover a::before {
    background-color: var(--bg-primary-color);
}

.gl--layout>.gl--footer .copyright-heart {
    color: #ff1519;
    transform-origin: center;
    font-size: 0.775rem;
}


/*
.gl--layout > .gl--footer .footer-menu{
	padding: 0;
	font-size: var(--size-12);
	display: block;
}
.gl--layout > .gl--footer .footer-menu > *{
	padding-inline-end: .8rem;
	text-align: center;
	display: inline-block;
}
.gl--layout > .gl--footer .footer-menu > * > a{
	text-decoration: none;
	display: block;
	padding: .5rem 0;
}
.gl--layout > .gl--footer .footer-menu > .sep{
	padding-block: .8rem;
}
@media (min-width: 992px) {
	.gl--layout > .gl--footer .footer-menu > *{
		text-align: start;
	}
	.gl--layout > .gl--footer{
		padding-bottom: 1rem;
	}
}
*/


/* social links */

.footer__socials-list {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: end;
}

.footer__socials-link {
    border-radius: var(--border-radius);
    color: var(--font-hover-color);
    display: block;
    font-size: 1rem;
    padding: .5rem;
    text-decoration: none;
    text-shadow: 0 0 0 transparent;
    background-color: var(--s-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.footer__socials-link:hover {
    color: #fff;
}

.footer__socials-link_twitter {
    --s-color: #33749c;
}

.footer__socials-link_facebook {
    --s-color: #3f5889;
}

.footer__socials-link_telegram {
    --s-color: #2b7498;
}

.footer__socials-link_discord {
    --s-color: #404ab3;
}

.gl--layout>.gl--main .gl--page-design {
    display: flex;
    gap: 1rem;
}

.gl--layout>.gl--main .gl--page-design>.gl--page-design__side {
    flex: 0 1 0;
    display: none;
}

.gl--layout>.gl--main .gl--page-design>.gl--page-design__content {
    flex: 1 1 0;
    max-width: 100%;
}

@media (min-width: 992px) {
    .gl--layout>.gl--main .gl--page-design>.gl--page-design__side {
        flex: 0 1 var(--side-width);
        min-width: var(--side-width);
        max-width: var(--side-width);
        display: block;
    }
    .gl--layout>.gl--main .gl--page-design>.gl--page-design__content {
        max-width: calc(100% - var(--side-width));
    }
}

@media (min-width: 767px) {
    .gl--login-content {
        max-width: 800px;
        margin: 0 auto;
    }
}

.gl--layout .gl--main .gl--header {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.gl--header>.gl--info-container {
    flex: 1 1 0;
}

.gl--header>.gl--logo {
    flex: 0 1 var(--side-width);
    min-width: var(--side-width);
    max-width: var(--side-width);
    min-height: var(--logo-height);
    max-height: var(--logo-height);
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
    box-shadow: var(--box-shadow);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    text-align: center;
}

.gl--header .logo-nav {
    border-end-start-radius: var(--border-radius);
}

.gl--header .logo-nav>img {
    height: 40px;
}

.gl--header>.gl--logo [js-flashing] {
    -moz-animation: flash 1s ease-out infinite;
    -webkit-animation: flash 1s ease-out infinite;
    -ms-animation: flash 1s ease-out infinite;
    animation: flash 1s ease-out infinite;
}

.gl--header>.gl--logo:hover [js-flashing] {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.gl--header .logo-nav {
    padding: 0;
    border-inline: 1px solid var(--border-color);
    background-color: var(--main4-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
}

.gl--header>.gl--info-container>.gl--top-nav {
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    box-shadow: var(--box-shadow);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.gl--top-nav .header-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    display: flex;
    flex-direction: row;
}

.gl--top-nav .header-nav>li {
    position: relative;
    display: grid;
    place-items: center;
}

.gl--top-nav .header-nav>li>div,
.gl--top-nav .header-nav>li>a {
    padding: 0 .5rem;
}

.gl--top-nav .header-nav>li>a {
    --link-color: var(--font-color);
    --link-hover-color: var(--font-hover-color);
    display: inline-block;
    font-size: var(--size-12);
    text-transform: uppercase;
    text-decoration: none;
    line-height: var(--header-height);
    font-weight: 700;
    color: var(--link-color);
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

.gl--top-nav .header-nav>li>a.link-icons-text {
    font-size: var(--size-13);
}

.gl--top-nav .header-nav>li>a.active,
.gl--top-nav .header-nav>li>a:active,
.gl--top-nav .header-nav>li>a:focus-visible,
.gl--top-nav .header-nav>li>a:hover {
    color: var(--link-hover-color);
    text-shadow: 0 0 2px rgba(0, 0, 0, .9);
    background-color: var(--main4-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4));
}

.gl--top-nav .header-nav>li:first-of-type>a {
    border-end-start-radius: var(--border-radius);
}

.gl--top-nav .header-nav>li:last-of-type>a {
    border-end-end-radius: var(--border-radius);
}

.gl--top-nav .header-nav>li {
    border-inline-start: 1px solid var(--border2-color);
    border-inline-end: 1px solid var(--border-color);
}

.gl--top-nav .header-nav.leftSide>li:first-of-type {
    border-inline-start: none;
}

.gl--top-nav .header-nav.leftSide>li:last-of-type {
    border-inline-end: none;
}

.gl--top-nav .header-nav.rightSide {
    border-inline-start: 1px solid var(--border-color);
}

.gl--top-nav .header-nav.rightSide>li:last-of-type {
    border-inline-end: none;
}

.gl--top-nav .header-nav .header_search,
.gl--top-nav .header-nav .header_dropdown {
    min-width: 200px;
    max-width: 100%;
    font-size: var(--size-13);
}

.gl--top-nav .header-nav .header_dropdown>* {
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.gl--top-nav .header-nav .header_dropdown>*>a {
    --link-color: var(--font-color);
    --link-hover-color: var(--font-hover-color);
    padding: .5rem 1rem;
    color: var(--link-color);
}

.gl--top-nav .header-nav .header_dropdown>*:last-of-type {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-bottom: none;
}

.gl--top-nav .header-nav .circle-link {
    padding: 0;
}

.gl--top-nav .header-nav .circle-link {
    padding: .3rem .5rem;
}

.gl--top-nav .header-nav .circle-link>div {
    position: relative;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    box-shadow: var(--box-shadow);
}

.gl--top-nav .header-nav .circle-link>div>span {
    position: absolute;
    top: -5px;
    right: -5px;
}

.nav-badge:after {
    position: absolute;
    top: -2px;
    right: -3px;
    max-width: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    max-height: 1rem;
    line-height: 1rem;
    font-size: var(--size-10);
    text-align: center;
    color: #fff;
    background-color: #bf1f1f;
    background-color: #f5424e;
    border-radius: 50%;
    content: attr(data-badge-limited);
    animation: wave 1s linear infinite;
}

.nav-badge[data-badge="0"] {
    display: none;
    animation: none;
}

.gl--header>.gl--info-container>.gl--user-info {
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: .5rem;
    color: var(--font-hover-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.gl--header>.gl--info-container>.gl--user-info>.user-icons {
    /* border-inline-start: 1px solid var(--border-color);
	padding-inline-start: .3rem; */
    flex: 1 1 100%;
}

@media (min-width: 767px) {
    .gl--header>.gl--info-container>.gl--user-info {
        flex-wrap: nowrap;
    }
    .gl--header>.gl--info-container>.gl--user-info>.user-icons {
        flex: 1 1 auto;
    }
}

.gl--header>.gl--info-container>.gl--user-info>* {
    flex: 1 1 auto;
    display: flex;
    gap: .2rem;
    align-items: center;
}


/* .gl--header > .gl--info-container > .gl--user-info .icon{ */


/* bars */

.gl--header>.gl--info-container>.gl--bars-container {
    background-color: var(--main3-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    overflow: initial;
}

.head-bars {
    flex: 1 1 0;
    position: relative;
}

.head-bars>.icon {
    top: -5px;
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 2;
    font-size: var(--size-12);
    padding: .1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    --icon-color: var(--font-hover-color);
    color: var(--icon-color);
    /* color: var(--font-hover-color); */
    background-color: var(--main5-color);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    box-shadow: var(--box-shadow);
}

.head-bars>.bar-holder {
    margin-inline-start: 15px;
    background-image: linear-gradient(to bottom, var(--main2-color), var(--main-color));
    color: var(--font-hover-color);
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
    /* border-radius: 0 var(--border-radius) var(--border-radius) 0; */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

.head-bars>.bar-holder>.bar {
    height: 12px;
    max-width: 100%;
    transition: width 1s linear;
    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), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4));
    box-shadow: var(--box-shadow);
}

.head-bars>.bar-holder>span {
    position: absolute;
    right: 0;
    top: 0;
    font-size: var(--size-10);
    height: 12px;
    line-height: 12px;
    padding: 0 .3rem;
    color: #fff;
}

.head-bars>.bar-holder.energy>.bar {
    background-color: var(--stats_energy);
}

.head-bars>.bar-holder.will>.bar {
    background-color: var(--stats_will);
}

.head-bars>.bar-holder.nerve>.bar {
    background-color: var(--stats_nerve);
}

.head-bars>.bar-holder.health>.bar {
    background-color: var(--stats_health);
}

.head-bars>.bar-holder.exp>.bar {
    background-color: var(--stats_exp);
}

.head-bars>.bar-holder.chaining>.bar,
.head-bars>.bar-holder.wanted>.bar {
    background-color: var(--stats_wanted);
}

.head-bars.overDosed>.icon {
    animation: overDosed 1s infinite;
}

.head-bars.overDosed>.bar-holder>.bar {
    animation: overDosed-bar 1s infinite;
}

@keyframes overDosed-bar {
    50% {
        background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .2) 2px, rgba(0, 0, 0, .2) 3px), linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(0, 0, 0, .3));
    }
}

@keyframes overDosed {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
    }
    100% {
        box-shadow: 0 0 0 .3rem transparent;
    }
}


/* animations classes */

.pulse {
    animation: pulse 1.5s infinite;
}


/* .nav-pulse{
	animation: nav-pulse 1s linear infinite;
} */


/* animations */

@keyframes pulse {
    0% {
        color: #24d21c;
        background-color: rgba(0, 121, 0, .1);
    }
    100% {
        color: #007900;
    }
}


/* @keyframes nav-pulse {
	50% {
		color: #079100;
		background-color: rgba(255, 255, 255, .1);
	}
} */

@keyframes wave {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 66, 78, 0.5);
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

@keyframes flash {
    50% {
        opacity: .6;
    }
}

@-webkit-keyframes flash {
    50% {
        opacity: .6;
    }
}

@-moz-keyframes flash {
    50% {
        opacity: .6;
    }
}

@-ms-keyframes flash {
    50% {
        opacity: .6;
    }
}


/* mobile-navigation */

.mobile-tab-wrapper {
    position: fixed;
    z-index: 1050;
    bottom: 0;
    width: 100%;
    max-height: var(--viewport-height);
}

.mobile-tab-wrapper>.mobile-menu-wrapper {
    display: none;
    background-color: var(--main2-color);
    width: 100%;
    height: var(--viewport-height);
    max-height: calc(var(--viewport-height) - var(--mobile-tab-height));
    overflow-y: auto;
}

.mobile-tab-wrapper>.mobile-menu-wrapper.menu-open {
    display: block;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .chat-box {
    top: 0;
    --minus-h: var(--chat-rooms-height) + var(--chat-toolbar-height) - var(--mobile-tab-height);
    height: calc(var(--viewport-height) - var(--minus-h));
}

body.menu-open .chat-box .chat-over-panel.emojis-panel {
    max-height: calc(calc(var(--viewport-height) - var(--minus-h) + var(--chat-info-height)) - 57px);
    min-height: calc(calc(var(--viewport-height) - var(--minus-h) + var(--chat-info-height)) - 57px);
}

.mobile-tab-wrapper .mobile-tabs {
    padding: 0 .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    min-height: var(--mobile-tab-height);
    max-height: var(--mobile-tab-height);
    background: var(--main-color);
    background-image: var(--line-pattern-image-bg), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
    background-image: var(--particles-image-bg), linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.mobile-tab-wrapper .mobile-tabs .item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    text-decoration: none;
    cursor: pointer;
    padding: .4rem 0;
    font-size: var(--size-13);
}

.mobile-tab-wrapper .mobile-tabs .item .item-icon {
    color: var(--font-muted-color);
    background-color: var(--main2-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    text-align: center;
    min-width: 1.8rem;
    min-height: 1.8rem;
    display: grid;
    place-items: center;
    transition: all .3s ease;
    margin-bottom: .2rem;
}

.mobile-tab-wrapper .mobile-tabs .item .item-icon img {
    vertical-align: baseline;
}

.mobile-tab-wrapper .mobile-tabs .item:active .item-icon,
.mobile-tab-wrapper .mobile-tabs .item:focus-visible .item-icon,
.mobile-tab-wrapper .mobile-tabs .item:hover .item-icon,
.mobile-tab-wrapper .mobile-tabs .item.active .item-icon {
    animation: giggle-wiggle .1s 2;
    color: #FFF;
    background-color: var(--main3-color);
}

@keyframes giggle-wiggle {
    0% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}

.mobile-tab-wrapper .mobile-tabs .item .item-title {
    color: var(--font-color);
    transition: all .3s ease;
}

.mobile-tab-wrapper .mobile-tabs .item:active .item-title,
.mobile-tab-wrapper .mobile-tabs .item:focus-visible .item-title,
.mobile-tab-wrapper .mobile-tabs .item:hover .item-title,
.mobile-tab-wrapper .mobile-tabs .item.active .item-title {
    opacity: 1;
    color: var(--font-hover-color);
}