html,
body {
    padding: 0;
    margin: 0
}

.mobile-dock {
    display: none;
    z-index: 201;
    border-bottom: 4px solid #0682c3;
    box-shadow: 0 0 0 2px #00609d;
    height: 64px;
    background: #0576bc;
    justify-content: space-between;
    align-items: flex-end
}

.mobile-dock .buttons {
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    background-position: top
}

.mobile-dock .buttons.menu-icon {
    margin-left: 16px
}

.mobile-dock .buttons .button {
    margin-right: 16px;
    height: 48px;
    width: 48px;
    overflow: hidden;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.mobile-dock .buttons .button.shownews {
    background-image: url("assets/dock/buttons/news_button.png")
}

.mobile-dock .buttons .button.home {
    background-image: url("assets/dock/buttons/home_button.png")
}

.mobile-dock .buttons .button.dressing {
    background-image: url("assets/dock/buttons/dressing_button.png")
}

.mobile-dock .buttons .button.bizness {
    background-image: url("assets/dock/buttons/bizness_button.png")
}

.mobile-dock .buttons .button.wishlist {
    background-image: url("assets/dock/buttons/wishlist_button.png")
}

.mobile-dock .buttons .button.mazo,
.mobile-dock .buttons .button.reward-waiting {
    background-image: url("assets/dock/buttons/mazo_button.png");
    position: relative
}

.mobile-dock .buttons .button.mazo .num,
.mobile-dock .buttons .button.reward-waiting .num {
    position: absolute;
    right: 3px;
    bottom: 8px;
    width: 25px;
    height: 17px;
    background: url("assets/dock/buttons/mazo_nums.png?v=2") no-repeat right
}

.mobile-dock .buttons .button.mazo .num.num-0,
.mobile-dock .buttons .button.reward-waiting .num.num-0 {
    display: none
}

.mobile-dock .buttons .button.mazo .num.num-1,
.mobile-dock .buttons .button.reward-waiting .num.num-1 {
    background-position-y: -0px
}

.mobile-dock .buttons .button.mazo .num.num-2,
.mobile-dock .buttons .button.reward-waiting .num.num-2 {
    background-position-y: -17px
}

.mobile-dock .buttons .button.mazo .num.num-3,
.mobile-dock .buttons .button.reward-waiting .num.num-3 {
    background-position-y: -34px
}

.mobile-dock .buttons .button.mazo .num.num-4,
.mobile-dock .buttons .button.reward-waiting .num.num-4 {
    background-position-y: -51px
}

.mobile-dock .buttons .button.mazo .num.num-5,
.mobile-dock .buttons .button.reward-waiting .num.num-5 {
    background-position-y: -68px
}

.mobile-dock .buttons .button.mazo .num.num-6,
.mobile-dock .buttons .button.reward-waiting .num.num-6 {
    background-position-y: -85px
}

.mobile-dock .buttons .button.mazo .num.num-7,
.mobile-dock .buttons .button.reward-waiting .num.num-7 {
    background-position-y: -102px
}

.mobile-dock .buttons .button.mazo .num.num-8,
.mobile-dock .buttons .button.reward-waiting .num.num-8 {
    background-position-y: -119px
}

.mobile-dock .buttons .button.mazo .num.num-9,
.mobile-dock .buttons .button.reward-waiting .num.num-9 {
    background-position-y: -136px
}

.mobile-dock .buttons .button.mazo .num.num-10,
.mobile-dock .buttons .button.reward-waiting .num.num-10 {
    background-position-y: -153px
}

.mobile-dock .buttons .button.mazo .num.num-11,
.mobile-dock .buttons .button.reward-waiting .num.num-11 {
    background-position-y: -170px
}

.mobile-dock .buttons .button.mazo .num.num-12,
.mobile-dock .buttons .button.reward-waiting .num.num-12 {
    background-position-y: -187px
}

.mobile-dock .buttons .button.mazo .num.num-13,
.mobile-dock .buttons .button.reward-waiting .num.num-13 {
    background-position-y: -204px
}

.mobile-dock .buttons .button.mazo .num.num-14,
.mobile-dock .buttons .button.reward-waiting .num.num-14 {
    background-position-y: -221px
}

.mobile-dock .buttons .button.mazo .num.num-15,
.mobile-dock .buttons .button.reward-waiting .num.num-15 {
    background-position-y: -238px
}

.mobile-dock .buttons .button.mazo .num.num-16,
.mobile-dock .buttons .button.reward-waiting .num.num-16 {
    background-position-y: -255px
}

.mobile-dock .buttons .button.mazo .num.num-17,
.mobile-dock .buttons .button.reward-waiting .num.num-17 {
    background-position-y: -272px
}

.mobile-dock .buttons .button.mazo .num.num-18,
.mobile-dock .buttons .button.reward-waiting .num.num-18 {
    background-position-y: -289px
}

.mobile-dock .buttons .button.mazo .num.num-19,
.mobile-dock .buttons .button.reward-waiting .num.num-19 {
    background-position-y: -306px
}

.mobile-dock .buttons .button.mazo .num.num-20,
.mobile-dock .buttons .button.reward-waiting .num.num-20 {
    background-position-y: -323px
}

.mobile-dock .buttons .button.mazo .num.num-21,
.mobile-dock .buttons .button.reward-waiting .num.num-21 {
    background-position-y: -340px
}

.mobile-dock .buttons .button.mazo.supercharged,
.mobile-dock .buttons .button.reward-waiting.supercharged {
    filter: hue-rotate(170deg)
}

.mobile-dock .buttons .button.mazo.disabled .num,
.mobile-dock .buttons .button.reward-waiting.disabled .num {
    background-image: url("assets/dock/buttons/mazo_nums_disabled.png?v=2")
}

.mobile-dock .buttons .button.dice {
    background-image: url("assets/dock/buttons/dice_button.png")
}

.mobile-dock .buttons .button.rebootz {
    background-image: url("assets/dock/buttons/rebootz_button.png")
}

.mobile-dock .buttons .button.card {
    background-image: url("assets/dock/buttons/card_button.png")
}

.mobile-dock .buttons .button.reward-waiting {
    background-image: url("assets/dock/buttons/waiting_rewards_button.png")
}

.mobile-dock .buttons .button.sit {
    background-image: url("assets/dock/buttons/sit_button.png")
}

.mobile-dock .buttons .button.jump {
    background-image: url("assets/dock/buttons/jump_button.png")
}

.mobile-dock .buttons .button.settings {
    background-image: url("assets/dock/buttons/settings_button.png")
}

.mobile-dock .buttons .button.radio {
    background-image: url("assets/dock/buttons/radio_button.png")
}

.mobile-dock .buttons .button.radio.playing {
    background-image: url("assets/dock/buttons/radio_button_playing.png")
}

.mobile-dock .buttons .button.map {
    background-image: url("assets/dock/buttons/map_button.png")
}

.mobile-dock .buttons .button.more {
    background-image: url("assets/dock/mobile_right_menu_button.png")
}

.mobile-dock .buttons .button.menu-open {
    background-image: url("assets/dock/mobile_left_menu_button.png")
}

.mobile-dock .buttons .button.disabled {
    background-position: bottom !important
}

.mobile-dock .buttons .button.more.active {
    background-position: bottom
}

.mobile-dock .see-more {
    display: none
}

.mobile-dock .see-more.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 11px;
    top: 50px;
    background: url("assets/dock/background_menu_icon_mobile.png") no-repeat;
    width: 56px;
    height: 626px;
    background-size: cover;
    padding-top: 8px
}

.mobile-dock .see-more.open a {
    margin-top: 4px;
    margin-left: 4px
}

body>div.dock,
#mobile-menu .left-dock {
    font-family: "Titillium Web", sans-serif;
    height: 64px;
    width: 100%;
    text-transform: uppercase;
    background: #0576bc;
    display: flex;
    border-bottom: 2px solid #00609d
}

body>div.dock>*::after,
#mobile-menu .left-dock>*::after {
    content: "";
    width: calc(100% - 4px);
    height: calc(100% - 2px);
    position: absolute;
    top: 0px;
    left: 0px;
    border: 2px solid #0682c3;
    border-top: none;
    pointer-events: none
}

body>div.dock span.space,
#mobile-menu .left-dock span.space {
    flex: 1;
    position: relative;
    border-left: 1px solid #00609d
}

body>div.dock span.space::after,
#mobile-menu .left-dock span.space::after {
    content: none
}

body>div.dock a.credits,
#mobile-menu .left-dock a.credits {
    display: block
}

body>div.dock>a,
body>div.dock>div,
body>div.dock>div ul.menu li a,
#mobile-menu .left-dock>a,
#mobile-menu .left-dock>div,
#mobile-menu .left-dock>div ul.menu li a {
    border: 1px solid #00609d;
    border-bottom: 0;
    border-top: 0;
    font-weight: bold;
    font-size: 22px;
    color: #42b3f9;
    padding-left: 72px;
    padding-right: 24px;
    padding-bottom: 24px;
    text-decoration: none;
    line-height: 68px;
    position: relative;
    cursor: pointer
}

body>div.dock>a:hover,
body>div.dock>div:hover,
body>div.dock>div ul.menu li a:hover,
#mobile-menu .left-dock>a:hover,
#mobile-menu .left-dock>div:hover,
#mobile-menu .left-dock>div ul.menu li a:hover {
    color: #fff;
    box-shadow: inset 0 0 48px #08a8d5
}

body>div.dock>a.hmc,
body>div.dock>div.hmc,
body>div.dock>div ul.menu li a.hmc,
#mobile-menu .left-dock>a.hmc,
#mobile-menu .left-dock>div.hmc,
#mobile-menu .left-dock>div ul.menu li a.hmc {
    background: url("assets/dock/minimal_logo.png");
    background-position: 20px 8px;
    background-repeat: no-repeat;
    width: 48px;
    padding-left: 24px
}

body>div.dock>a.hmc:hover,
body>div.dock>div.hmc:hover,
body>div.dock>div ul.menu li a.hmc:hover,
#mobile-menu .left-dock>a.hmc:hover,
#mobile-menu .left-dock>div.hmc:hover,
#mobile-menu .left-dock>div ul.menu li a.hmc:hover {
    box-shadow: inset 0 0 48px #08a8d5
}

body>div.dock>a.hmc.noel,
body>div.dock>div.hmc.noel,
body>div.dock>div ul.menu li a.hmc.noel,
#mobile-menu .left-dock>a.hmc.noel,
#mobile-menu .left-dock>div.hmc.noel,
#mobile-menu .left-dock>div ul.menu li a.hmc.noel {
    background: url("assets/dock/minimal_logo_noel.png")
}

body>div.dock>a.mi::before,
body>div.dock>div.mi::before,
body>div.dock>div ul.menu li a.mi::before,
#mobile-menu .left-dock>a.mi::before,
#mobile-menu .left-dock>div.mi::before,
#mobile-menu .left-dock>div ul.menu li a.mi::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_mi_icon.png")
}

body>div.dock>a.logout::before,
body>div.dock>div.logout::before,
body>div.dock>div ul.menu li a.logout::before,
#mobile-menu .left-dock>a.logout::before,
#mobile-menu .left-dock>div.logout::before,
#mobile-menu .left-dock>div ul.menu li a.logout::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_login_icon.png")
}

body>div.dock>a.bbs::before,
body>div.dock>div.bbs::before,
body>div.dock>div ul.menu li a.bbs::before,
#mobile-menu .left-dock>a.bbs::before,
#mobile-menu .left-dock>div.bbs::before,
#mobile-menu .left-dock>div ul.menu li a.bbs::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_bbs_icon.png")
}

body>div.dock>a.planning::before,
body>div.dock>div.planning::before,
body>div.dock>div ul.menu li a.planning::before,
#mobile-menu .left-dock>a.planning::before,
#mobile-menu .left-dock>div.planning::before,
#mobile-menu .left-dock>div ul.menu li a.planning::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_planning_icon.png")
}

body>div.dock>a.shop::before,
body>div.dock>div.shop::before,
body>div.dock>div ul.menu li a.shop::before,
#mobile-menu .left-dock>a.shop::before,
#mobile-menu .left-dock>div.shop::before,
#mobile-menu .left-dock>div ul.menu li a.shop::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_shop_icon.png?v=3")
}

body>div.dock>a.tchat::before,
body>div.dock>div.tchat::before,
body>div.dock>div ul.menu li a.tchat::before,
#mobile-menu .left-dock>a.tchat::before,
#mobile-menu .left-dock>div.tchat::before,
#mobile-menu .left-dock>div ul.menu li a.tchat::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_chat_icon.png")
}

body>div.dock>a.idees::before,
body>div.dock>div.idees::before,
body>div.dock>div ul.menu li a.idees::before,
#mobile-menu .left-dock>a.idees::before,
#mobile-menu .left-dock>div.idees::before,
#mobile-menu .left-dock>div ul.menu li a.idees::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_ideabox_icon.png")
}

body>div.dock>a.instagram,
body>div.dock>a.tiktok,
body>div.dock>a.discord,
body>div.dock>div.instagram,
body>div.dock>div.tiktok,
body>div.dock>div.discord,
body>div.dock>div ul.menu li a.instagram,
body>div.dock>div ul.menu li a.tiktok,
body>div.dock>div ul.menu li a.discord,
#mobile-menu .left-dock>a.instagram,
#mobile-menu .left-dock>a.tiktok,
#mobile-menu .left-dock>a.discord,
#mobile-menu .left-dock>div.instagram,
#mobile-menu .left-dock>div.tiktok,
#mobile-menu .left-dock>div.discord,
#mobile-menu .left-dock>div ul.menu li a.instagram,
#mobile-menu .left-dock>div ul.menu li a.tiktok,
#mobile-menu .left-dock>div ul.menu li a.discord {
    padding-left: 40px;
    padding-right: 16px
}

body>div.dock>a.mi,
body>div.dock>div.mi,
body>div.dock>div ul.menu li a.mi,
#mobile-menu .left-dock>a.mi,
#mobile-menu .left-dock>div.mi,
#mobile-menu .left-dock>div ul.menu li a.mi {
    padding-left: 40px;
    padding-right: 25px;
    order: 10
}

body>div.dock>a.instagram::before,
body>div.dock>div.instagram::before,
body>div.dock>div ul.menu li a.instagram::before,
#mobile-menu .left-dock>a.instagram::before,
#mobile-menu .left-dock>div.instagram::before,
#mobile-menu .left-dock>div ul.menu li a.instagram::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_insta_icon_w.png");
    left: 16px
}

body>div.dock>a.tiktok::before,
body>div.dock>div.tiktok::before,
body>div.dock>div ul.menu li a.tiktok::before,
#mobile-menu .left-dock>a.tiktok::before,
#mobile-menu .left-dock>div.tiktok::before,
#mobile-menu .left-dock>div ul.menu li a.tiktok::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_tiktok_icon.png");
    left: 16px
}

body>div.dock>a.discord::before,
body>div.dock>div.discord::before,
body>div.dock>div ul.menu li a.discord::before,
#mobile-menu .left-dock>a.discord::before,
#mobile-menu .left-dock>div.discord::before,
#mobile-menu .left-dock>div ul.menu li a.discord::before {
    position: absolute;
    left: 24px;
    bottom: 22px;
    width: 24px;
    height: 24px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/small_discord_icon.png");
    left: 16px
}

body>div.dock>a.logout,
body>div.dock>div.logout,
body>div.dock>div ul.menu li a.logout,
#mobile-menu .left-dock>a.logout,
#mobile-menu .left-dock>div.logout,
#mobile-menu .left-dock>div ul.menu li a.logout {
    padding-right: 0;
    order: 11
}

body>div.dock>a:hover::before,
body>div.dock>div:hover::before,
body>div.dock>div ul.menu li a:hover::before,
#mobile-menu .left-dock>a:hover::before,
#mobile-menu .left-dock>div:hover::before,
#mobile-menu .left-dock>div ul.menu li a:hover::before {
    background-position: bottom
}

body>div.dock>a ul.menu,
body>div.dock>div ul.menu,
body>div.dock>div ul.menu li a ul.menu,
#mobile-menu .left-dock>a ul.menu,
#mobile-menu .left-dock>div ul.menu,
#mobile-menu .left-dock>div ul.menu li a ul.menu {
    display: none;
    position: absolute;
    top: -1px;
    left: -2px;
    line-height: 1;
    padding: 0;
    margin: 0;
    margin-top: 66px;
    z-index: 300;
    text-align: center;
    list-style: none;
    width: 100%
}

body>div.dock>a ul.menu li a,
body>div.dock>div ul.menu li a,
body>div.dock>div ul.menu li a ul.menu li a,
#mobile-menu .left-dock>a ul.menu li a,
#mobile-menu .left-dock>div ul.menu li a,
#mobile-menu .left-dock>div ul.menu li a ul.menu li a {
    background-color: #0682c3;
    text-align: center;
    padding: 0;
    width: 100%;
    display: block;
    border: 2px solid #00609d;
    border-bottom-width: 1px;
    border-top-width: 1px
}

body>div.dock>a ul.menu li a:hover,
body>div.dock>div ul.menu li a:hover,
body>div.dock>div ul.menu li a ul.menu li a:hover,
#mobile-menu .left-dock>a ul.menu li a:hover,
#mobile-menu .left-dock>div ul.menu li a:hover,
#mobile-menu .left-dock>div ul.menu li a ul.menu li a:hover {
    background-color: #42b3f9;
    color: #0576bc
}

body>div.dock>a.open ul.menu,
body>div.dock>div.open ul.menu,
body>div.dock>div ul.menu li a.open ul.menu,
#mobile-menu .left-dock>a.open ul.menu,
#mobile-menu .left-dock>div.open ul.menu,
#mobile-menu .left-dock>div ul.menu li a.open ul.menu {
    display: block
}

body>div.dock .login,
#mobile-menu .left-dock .login {
    display: none
}

body>div.dock .notif,
#mobile-menu .left-dock .notif {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    width: 24px;
    height: 24px;
    position: relative;
    left: 14px;
    bottom: 14px;
    background: #c00000;
    border: 1px solid red;
    line-height: 24px;
    text-align: center
}

body>div.dock .notif:empty,
#mobile-menu .left-dock .notif:empty {
    display: none
}

body>div.dock .credits,
#mobile-menu .credits {
    position: relative;
    display: block;
    background: url("assets/dock/currency_icon.png") no-repeat #006090;
    border: 1px solid #0682c3;
    font-size: 18px;
    font-weight: bold;
    color: #fbe365;
    padding-left: 20px;
    padding-right: 56px;
    padding-top: 16px;
    line-height: 1;
    height: 52px;
    box-sizing: border-box;
    align-self: center;
    margin-left: 24px;
    margin-right: 24px;
    background-position: right 22px top 12px
}

body>div.dock .credits::after,
#mobile-menu .credits::after {
    content: none
}

body>div.dock .credits:hover,
#mobile-menu .credits:hover {
    border-color: #00deff;
    background-color: #00436e
}

body>div.dock .credits:hover .buy,
#mobile-menu .credits:hover .buy {
    background-position: bottom
}

body>div.dock .credits .buy,
#mobile-menu .credits .buy {
    text-indent: -999px;
    overflow: hidden;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 3px;
    right: 3px;
    background: url("assets/dock/button_plus_currency.png") no-repeat;
    cursor: pointer
}

#mobile-menu .credits {
    position: absolute;
    left: 0;
    margin-left: 12px
}

body.disconnected>div.dock .credits,
body.disconnected #mobile-menu .credits {
    display: none
}

body.disconnected>div.dock .mi,
body.disconnected #mobile-menu .mi {
    display: none
}

body.disconnected>div.dock .login,
body.disconnected #mobile-menu .login {
    margin-left: 8px;
    margin-right: 8px;
    display: flex;
    align-items: center
}

body.disconnected>div.dock .logout,
body.disconnected #mobile-menu .logout {
    display: none
}

#mobile-menu-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20000;
    visibility: hidden;
    background: rgba(0, 0, 0, 0);
    transition: all .3s ease-out
}

#mobile-menu-back.open {
    visibility: visible;
    background: rgba(0, 0, 0, .8)
}

#mobile-menu {
    display: flex;
    position: absolute;
    z-index: 20001;
    height: 100%;
    top: 0;
    visibility: hidden;
    left: -98px;
    transition: all .3s ease-out;
    background: #fff
}

#mobile-menu.open {
    visibility: visible;
    left: 0
}

#mobile-menu .left-dock {
    width: 96px;
    height: 100%;
    padding-bottom: 72px;
    box-sizing: border-box;
    flex-direction: column;
    border-right: 2px solid #004570
}

#mobile-menu .left-dock>a,
#mobile-menu .left-dock>a.hmc,
#mobile-menu .left-dock>div {
    height: 56px;
    padding-bottom: 8px;
    border: 1px solid #00609d;
    border-left: 0
}

#mobile-menu .left-dock>a.tchat::before,
#mobile-menu .left-dock>a.hmc.tchat::before,
#mobile-menu .left-dock>div.tchat::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_chat_icon.png")
}

#mobile-menu .left-dock>a.mi::before,
#mobile-menu .left-dock>a.hmc.mi::before,
#mobile-menu .left-dock>div.mi::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_mi_icon.png")
}

#mobile-menu .left-dock>a.bbs::before,
#mobile-menu .left-dock>a.hmc.bbs::before,
#mobile-menu .left-dock>div.bbs::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_bbs_icon.png")
}

#mobile-menu .left-dock>a.planning::before,
#mobile-menu .left-dock>a.hmc.planning::before,
#mobile-menu .left-dock>div.planning::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_planning_icon.png")
}

#mobile-menu .left-dock>a.shop::before,
#mobile-menu .left-dock>a.hmc.shop::before,
#mobile-menu .left-dock>div.shop::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_shop_icon.png?v=3")
}

#mobile-menu .left-dock>a.idees::before,
#mobile-menu .left-dock>a.hmc.idees::before,
#mobile-menu .left-dock>div.idees::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_ideabox_icon.png")
}

#mobile-menu .left-dock>a.discord::before,
#mobile-menu .left-dock>a.hmc.discord::before,
#mobile-menu .left-dock>div.discord::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_discord_icon.png");
    width: 40px;
    height: 40px;
    left: 28px;
    top: 12px
}

#mobile-menu .left-dock>a.logout::before,
#mobile-menu .left-dock>a.hmc.logout::before,
#mobile-menu .left-dock>div.logout::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_login_icon.png?v=2")
}

#mobile-menu .left-dock>a.instagram::before,
#mobile-menu .left-dock>a.hmc.instagram::before,
#mobile-menu .left-dock>div.instagram::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_insta_icon.png");
    width: 40px;
    height: 40px;
    left: 28px;
    top: 12px
}

#mobile-menu .left-dock>a.tiktok::before,
#mobile-menu .left-dock>a.hmc.tiktok::before,
#mobile-menu .left-dock>div.tiktok::before {
    position: absolute;
    left: 24px;
    bottom: auto;
    top: 8px;
    width: 48px;
    height: 48px;
    content: "";
    background-repeat: no-repeat;
    background-image: url("assets/dock/big_tiktok_icon.png?v=2");
    width: 40px;
    height: 40px;
    left: 28px;
    top: 12px
}

#mobile-menu .left-dock>a.space,
#mobile-menu .left-dock>a.hmc.space,
#mobile-menu .left-dock>div.space {
    flex: 1
}

#mobile-menu .left-dock>a.instagram,
#mobile-menu .left-dock>a.tiktok,
#mobile-menu .left-dock>a.discord,
#mobile-menu .left-dock>a.mi,
#mobile-menu .left-dock>a.logout,
#mobile-menu .left-dock>a.hmc.instagram,
#mobile-menu .left-dock>a.hmc.tiktok,
#mobile-menu .left-dock>a.hmc.discord,
#mobile-menu .left-dock>a.hmc.mi,
#mobile-menu .left-dock>a.hmc.logout,
#mobile-menu .left-dock>div.instagram,
#mobile-menu .left-dock>div.tiktok,
#mobile-menu .left-dock>div.discord,
#mobile-menu .left-dock>div.mi,
#mobile-menu .left-dock>div.logout {
    padding-left: 72px;
    padding-right: 24px
}

#mobile-menu .left-dock>a .arrow,
#mobile-menu .left-dock>a.hmc .arrow,
#mobile-menu .left-dock>div .arrow {
    width: 9px;
    height: 18px;
    background: url("assets/dock/menu-arrow.png?v=2") no-repeat;
    position: absolute;
    right: 6px;
    top: 21px
}

#mobile-menu .left-dock>a.mi .notif,
#mobile-menu .left-dock>a.hmc.mi .notif,
#mobile-menu .left-dock>div.mi .notif {
    left: -15px
}

#mobile-menu .left-dock>a ul.menu,
#mobile-menu .left-dock>a.hmc ul.menu,
#mobile-menu .left-dock>div ul.menu {
    left: 111px;
    top: -68px;
    width: auto
}

#mobile-menu .left-dock>a ul.menu::before,
#mobile-menu .left-dock>a.hmc ul.menu::before,
#mobile-menu .left-dock>div ul.menu::before {
    content: "";
    position: absolute;
    background: url("assets/dock/menu-arrow-inside.png") no-repeat;
    width: 14px;
    height: 14px;
    top: 20px;
    left: -14px
}

#mobile-menu .left-dock>a ul.menu li a,
#mobile-menu .left-dock>a.hmc ul.menu li a,
#mobile-menu .left-dock>div ul.menu li a {
    width: auto;
    padding: 8px 24px;
    line-height: 48px;
    white-space: nowrap
}

#mobile-menu .bottom-bar {
    border: 1px solid #00609d;
    background: #0576bc;
    height: 72px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 95px;
    border-top: 2px solid #004570;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

#mobile-menu .bottom-bar .credits .amount {
    display: none
}

#mobile-menu .bottom-bar .credits {
    padding-left: 10px
}

#mobile-menu .inside-menu header a,
#mobile-menu .bottom-bar a.help {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 72px;
    color: #42b3f9;
    text-align: center;
    margin-right: 8px;
    font-weight: bold;
    font-size: 16px
}

#mobile-menu .inside-menu header a:last-child,
#mobile-menu .bottom-bar a.help:last-child {
    margin-right: 0
}

#mobile-menu .inside-menu header a.help:last-child,
#mobile-menu .bottom-bar a.help.help:last-child {
    margin-right: 8px
}

#mobile-menu .inside-menu header a.active,
#mobile-menu .bottom-bar a.help.active {
    background: #004570;
    color: #fff
}

#mobile-menu .bottom-bar a.help {
    display: none
}

#mobile-menu .bottom-bar a:last-child {
    margin-right: 16px;
    background: rgba(0, 69, 112, .5);
    color: #fff
}

#mobile-menu .content.list {
    padding-top: 24px
}

#mobile-menu .content.list ul li {
    padding-bottom: 8px
}

#mobile-menu .content.list ul li .nick,
#mobile-menu .content.list ul li .title {
    font-size: 22px
}

body.tchat #mobile-menu {
    left: -472px
}

body.tchat #mobile-menu.open {
    visibility: visible;
    left: 0
}

body.tchat #mobile-menu .inside-menu {
    display: flex
}

body.tchat #mobile-menu .help,
body.tchat #mobile-menu .credits .amount {
    display: block
}

body.tchat #mobile-menu .bottom-bar {
    width: 100%
}

body.tchat #mobile-menu .credits {
    padding-left: 0
}

body.disconnected #mobile-menu .bottom-bar {
    display: none
}

body.disconnected #mobile-menu .left-dock {
    padding-bottom: 0
}

.notif-count {
    display: block;
    background: #e83939;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    line-height: 17px;
    margin-bottom: 16px;
    margin-left: 8px;
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff
}

.notif-count:empty {
    display: none
}

.mobile-dock .buttons .menu-open {
    position: relative;
    overflow: visible
}

.mobile-dock .buttons .menu-open .notif-count {
    position: absolute;
    right: -16px;
    top: -8px;
    text-indent: 0
}

.btn-primary-auto {
    position: relative;
    display: block;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #1d1d1d;
    text-align: center;
    line-height: 43px;
    text-decoration: none;
    cursor: pointer;
    z-index: 6;
    text-transform: uppercase;
    background: linear-gradient(#60D227, #8CFC4E);
    padding: 0 24px
}

.btn-primary-auto::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(#7AFF40, #B5FF81);
    box-shadow: 0 4px #51cb15, 0 5px rgba(0, 0, 0, .32), 1px 0 rgba(0, 0, 0, .32), -1px 0 rgba(0, 0, 0, .32), 0 -1px rgba(0, 0, 0, .32)
}

.btn-primary-auto:hover {
    background: linear-gradient(#8FFF3F, #CAFF77)
}

@media only screen and (max-width: 540px) {
    body>div.dock {
        display: none
    }

    body .mobile-dock {
        display: flex
    }
}

@media only screen and (min-width: 1440px)and (max-width: 1800px)and (min-height: 720px) {
    body>div.dock {
        height: 48px
    }

    body>div.dock>a,
    body>div.dock>div,
    body>div.dock>div ul.menu li a {
        padding-left: 55px;
        line-height: 50px;
        font-size: 17px
    }

    body>div.dock>a.mi::before,
    body>div.dock>div.mi::before,
    body>div.dock>div ul.menu li a.mi::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_mi_icon.png")
    }

    body>div.dock>a.logout::before,
    body>div.dock>div.logout::before,
    body>div.dock>div ul.menu li a.logout::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_login_icon.png")
    }

    body>div.dock>a.tchat::before,
    body>div.dock>div.tchat::before,
    body>div.dock>div ul.menu li a.tchat::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_chat_icon.png")
    }

    body>div.dock>a.planning::before,
    body>div.dock>div.planning::before,
    body>div.dock>div ul.menu li a.planning::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_planning_icon.png")
    }

    body>div.dock>a.bbs::before,
    body>div.dock>div.bbs::before,
    body>div.dock>div ul.menu li a.bbs::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_bbs_icon.png")
    }

    body>div.dock>a.shop::before,
    body>div.dock>div.shop::before,
    body>div.dock>div ul.menu li a.shop::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_shop_icon.png?v=3")
    }

    body>div.dock>a.idees::before,
    body>div.dock>div.idees::before,
    body>div.dock>div ul.menu li a.idees::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_ideabox_icon.png")
    }

    body>div.dock>a.instagram::before,
    body>div.dock>div.instagram::before,
    body>div.dock>div ul.menu li a.instagram::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_insta_icon_w.png");
        left: 19px
    }

    body>div.dock>a.tiktok::before,
    body>div.dock>div.tiktok::before,
    body>div.dock>div ul.menu li a.tiktok::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_tiktok_icon.png");
        left: 19px
    }

    body>div.dock>a.discord::before,
    body>div.dock>div.discord::before,
    body>div.dock>div ul.menu li a.discord::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_discord_icon.png");
        left: 19px
    }

    body>div.dock>a.hmc,
    body>div.dock>div.hmc,
    body>div.dock>div ul.menu li a.hmc {
        width: 39px;
        padding-left: 20px;
        padding-right: 20px;
        background-position: 18px 4px;
        background-image: url("assets/dock/mini_logo.png")
    }

    body>div.dock>a.hmc.noel,
    body>div.dock>div.hmc.noel,
    body>div.dock>div ul.menu li a.hmc.noel {
        background: url("assets/dock/mini_logo_noel.png");
        background-position: 6px -15px
    }

    body>div.dock>a ul.menu,
    body>div.dock>div ul.menu,
    body>div.dock>div ul.menu li a ul.menu {
        margin-top: 50px
    }

    body>div.dock>a ul.menu li a,
    body>div.dock>div ul.menu li a,
    body>div.dock>div ul.menu li a ul.menu li a {
        padding: 0
    }
}

@media only screen and (max-height: 720px),
only screen and (max-width: 1439px) {
    body>div.dock {
        height: 48px
    }

    body>div.dock>a,
    body>div.dock>div,
    body>div.dock>div ul.menu li a {
        padding-left: 55px;
        line-height: 50px;
        font-size: 17px
    }

    body>div.dock>a.mi::before,
    body>div.dock>div.mi::before,
    body>div.dock>div ul.menu li a.mi::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_mi_icon.png")
    }

    body>div.dock>a.logout::before,
    body>div.dock>div.logout::before,
    body>div.dock>div ul.menu li a.logout::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_login_icon.png")
    }

    body>div.dock>a.tchat::before,
    body>div.dock>div.tchat::before,
    body>div.dock>div ul.menu li a.tchat::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_chat_icon.png")
    }

    body>div.dock>a.planning::before,
    body>div.dock>div.planning::before,
    body>div.dock>div ul.menu li a.planning::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_planning_icon.png")
    }

    body>div.dock>a.bbs::before,
    body>div.dock>div.bbs::before,
    body>div.dock>div ul.menu li a.bbs::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_bbs_icon.png")
    }

    body>div.dock>a.shop::before,
    body>div.dock>div.shop::before,
    body>div.dock>div ul.menu li a.shop::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_shop_icon.png?v=3")
    }

    body>div.dock>a.idees::before,
    body>div.dock>div.idees::before,
    body>div.dock>div ul.menu li a.idees::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_ideabox_icon.png")
    }

    body>div.dock>a.instagram::before,
    body>div.dock>div.instagram::before,
    body>div.dock>div ul.menu li a.instagram::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_insta_icon_w.png");
        left: 19px
    }

    body>div.dock>a.tiktok::before,
    body>div.dock>div.tiktok::before,
    body>div.dock>div ul.menu li a.tiktok::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_tiktok_icon.png");
        left: 19px
    }

    body>div.dock>a.discord::before,
    body>div.dock>div.discord::before,
    body>div.dock>div ul.menu li a.discord::before {
        position: absolute;
        left: 24px;
        bottom: 16px;
        width: 19px;
        height: 19px;
        content: "";
        background-repeat: no-repeat;
        background-image: url("assets/dock/mini_discord_icon.png");
        left: 19px
    }

    body>div.dock>a.hmc,
    body>div.dock>div.hmc,
    body>div.dock>div ul.menu li a.hmc {
        width: 39px;
        padding-left: 20px;
        padding-right: 20px;
        background-position: 18px 4px;
        background-image: url("assets/dock/mini_logo.png")
    }

    body>div.dock>a.hmc.noel,
    body>div.dock>div.hmc.noel,
    body>div.dock>div ul.menu li a.hmc.noel {
        background: url("assets/dock/mini_logo_noel.png")
    }

    body>div.dock>a ul.menu,
    body>div.dock>div ul.menu,
    body>div.dock>div ul.menu li a ul.menu {
        margin-top: 50px
    }

    body>div.dock>a ul.menu li a,
    body>div.dock>div ul.menu li a,
    body>div.dock>div ul.menu li a ul.menu li a {
        padding: 0
    }
}