.loader {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0
}

.loader,
.loader.loader-absolute {
    position: absolute
}

.loader.page-preloader .spinnerContainer,
.loader.page-preloader .spinnerContainerV2 {
    position: relative
}

.loader.page-preloader .spinnerContainer .loadingSpinner,
.loader.page-preloader .spinnerContainerV2 .loadingSpinner {
    left: calc(50vw - 1.25rem);
    position: absolute
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.spinnerContainer,
.spinnerContainerV2 {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%
}

.spinnerContainer .loadingSpinner,
.spinnerContainerV2 .loadingSpinner {
    animation: spinner 1.5s linear infinite;
    animation-play-state: inherit;
    border-radius: 50%;
    height: 2.5rem;
    left: calc(50% - 1.25rem);
    position: absolute;
    top: calc(50% - 1.25rem);
    width: 2.5rem;
    will-change: transform
}

.spinnerContainer .loadingSpinner {
    border: .3125rem solid #cfd0d1;
    border-bottom-color: #1c87c9
}

.spinnerContainerV2 .loadingSpinner {
    border: .125rem solid #544bc9;
    border-top-color: transparent
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

body {
    background-color: #fff
}

@media(max-width:849px) {
    .hidden-mobile {
        display: none
    }
}

@media(min-width:850px) {
    .hidden-desktop {
        display: none
    }
}

*,
:after,
:before {
    box-sizing: border-box
}

:root {
    --palette-text-primary: #222;
    --palette-custom-text-link: #544bc9;
    --vh: 100%
}

@supports(padding-top:constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(padding-top:env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width:850px) {
    ::-webkit-scrollbar {
        height: 0;
        width: .375rem
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        border-radius: .1875rem
    }
}

.desktop body input:-webkit-autofill,
.mobile body input:-webkit-autofill,
.tablet body input:-webkit-autofill {
    -webkit-animation-fill-mode: both !important;
    -webkit-transition: background-color 9999s linear 0s;
    transition: background-color 9999s linear 0s;
    will-change: background-color
}

a {
    color: var(--palette-custom-text-link);
    cursor: pointer;
    text-decoration: none
}

body,
html {
    margin: 0
}

html.ios:not(.hasSiteAccessGate),
html.ios:not(.hasSiteAccessGate) body {
    height: calc(var(--vh, 1vh)*100);
    -webkit-text-size-adjust: 100%
}

body {
    color: var(--palette-text-primary);
    font-family: Open Sans, sans-serif;
    font-size: 16px
}

body>img {
    display: none !important
}

body :export {
    navBarHeight-desktop: 5rem;
    navBarHeight-mobile: 4.5rem;
    tabBarHeight: 4rem;
    inGameNavBarHeight-desktop: 5rem;
    inGameNavBarHeight-mobile: 3.75rem;
    languageBarHeight: 3.5rem;
    baseFontSize: 16px;
    sidebarwidth-desktop: 23.4375rem;
    sidebarwidth-mobile: 100%;
    lobbyCategoryMenuHeight-desktop: 7.375rem;
    lobbyCategoryMenuHeight-mobile: 3.5rem;
    lobbyBalanceComponentHeight: 4rem
}

body :export {
    palettePrimaryMain: #544bc9;
    palettePrimaryLight: #766fd3;
    paletteErrorMain: #f44336;
    slateBlue: #544bc9;
    paletteTextPrimary: #222;
    navBarActiveTab: rgba(84, 75, 201, .1);
    paletteSuccessDark: #388e3c;
    allTimeHighsCardBgColor: #a44bc9
}

body .MuiButton-root,
body .MuiFormHelperText-root,
body .MuiFormLabel-root,
body .MuiInputBase-input,
body .MuiInputBase-root,
body .MuiTypography-body1 {
    font-family: Open Sans, sans-serif;
    text-transform: none
}

body .visuallyDisabledButton {
    opacity: .6
}

body .MuiBackdrop-root {
    background: rgba(84, 75, 201, .5);
    z-index: -1
}

body .MuiFormLabel-root.Mui-focused {
    color: #3f51b5
}

body .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline,
body .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline {
    border-color: #868686
}

body .link-as-btn {
    align-items: center;
    background: #544bc9;
    border-radius: .75rem;
    box-shadow: none;
    color: #fff;
    display: inline-flex;
    font-size: 1rem;
    font-size: .875rem;
    font-weight: 600;
    height: 3.125rem;
    justify-content: center;
    line-height: 1.5rem;
    margin-bottom: .9375rem;
    opacity: 1;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: none;
    width: 9.375rem
}

body .link-as-btn:focus,
body .link-as-btn:hover {
    background-color: #655dce;
    box-shadow: none
}

body .link-as-btn:active {
    background: #544bc9;
    color: #fff
}

body .link-as-btn:disabled {
    background-color: #eeedfa;
    color: #9893df
}

body .link-as-btn.inverted {
    background: #fff;
    color: #544bc9
}

body .link-as-btn:hover {
    background-color: #655dce
}

body .link-as-btn.secondary {
    background: transparent;
    border: .125rem solid #544bc9;
    border-radius: .75rem;
    box-shadow: none;
    color: #544bc9;
    font-size: 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .125rem;
    transition: none
}

body .link-as-btn.secondary:focus,
body .link-as-btn.secondary:hover {
    background: transparent;
    box-shadow: 0 0 0 2px #544bc9
}

body .link-as-btn.secondary:active {
    background: #544bc9;
    color: #fff
}

body .link-as-btn.secondary:disabled {
    border-color: #9893df;
    color: #9893df
}

body .msg-response {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.625rem;
    margin: 1rem 0;
    text-align: center
}

body .msg-response.error-msg {
    color: #d83939
}

body .msg-response.success-msg {
    color: #00c02a
}

html[lang=ja-jp] body {
    font-family: Noto Sans JP, sans-serif
}

.top-nav {
    background-color: #fff;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .17);
    display: flex;
    height: 5rem;
    justify-content: center;
    left: 0;
    padding: 0 calc(1rem - 100vw + 100%) 0 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

.top-nav.in-game-nav {
    height: 3.75rem
}

@media(min-width:1024px) {
    .top-nav {
        padding: 0 5rem
    }
}

@media(max-width:850px) {
    .top-nav {
        display: flex;
        height: 4.5rem;
        justify-content: center
    }
}

.top-nav.no-box-shadow {
    box-shadow: unset
}

.content {
    display: flex;
    flex-flow: column;
    margin: 0;
}

@media(min-width:2048px) {
    .content {
        margin: 0 auto;
        max-width: 120rem
    }

    .content:has(.errorWrapper, .gamePage, .register) {
        max-width: 100%
    }
}

 
.content.navBarVisible.in-game-nav {
    padding-top: 3.75rem
}

@media(max-width:850px) {
    .content.navBarVisible {
        padding-top: 4.5rem
    }
}

.content.custom-page {
    align-items: center;
    display: flex;
    justify-content: center
}

.desktop .bottom,
.mobile .bottom,
.tablet .bottom {
    background: #fff;
    bottom: 0;
    box-shadow: 0 -.0625rem .3125rem 0 rgba(0, 0, 0, .25);
    box-sizing: content-box;
    height: 4rem;
    left: 0;
    padding-bottom: var(--safe-area-inset-bottom);
    position: fixed;
    transform: translateZ(0);
    width: 100%;
    z-index: 100
}

.desktop .bottom.hidden,
.desktop .bottomNavBar,
.mobile .bottom.hidden,
.mobile .bottomNavBar,
.tablet .bottom.hidden,
.tablet .bottomNavBar {
    display: none
}

.desktop .newTabbarMenu,
.mobile .newTabbarMenu,
.tablet .newTabbarMenu {
    height: unset
}

body .regily-module {
    background: rgba(0, 0, 0, .4)
}

.content-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem
}

.mobile.ios .safeAreaDarken {
    background-color: #000
}

.tooltip {
    z-index: 1301
}