@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");

:root {
    font-family: "Raleway", sans-serif, "Noto Sans", "Noto Sans Mongolian";

    --color-background-: #ecf0f1;
    --color-disabled-: #493b50;
    --color-button-: #8e44ad;
    --color-primary-: #8e44ad;
    --color-secondary-: #c883e4;
    --color-statusError-: #e74c3c;
    --color-statusSuccess-: #2ecc71;
    --color-statusLoad-: #3498db;
    --color-statusWarn-: #e67e22;
    --color-textBody-: #2c3e50;
    --color-textButton-: #ecf0f1;
    --color-splash-: rgba(0, 0, 0, 0.2);
    --color-highlight-: rgba(0, 0, 0, 0.2);
    --color-textPrimary-: #ecf0f1;
    --image-gradient-instagram-: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    --color-facebook-: #3b5998;
    --color-boxShadow-: rgba(0, 0, 0, 0.2);

    --size-contentArea-: 100vw;

    --appBar-height-: 3.5rem;
    --appBar-button-size-: 3.2rem;

    --duration-idealShortAnimation-: 300ms;
    --duration-idealLongAnimation-: 800ms;

    --elastic-out-: cubic-bezier(0.75, -0.5, 0, 1.75);

    --hover-brightness-: brightness(0.8);

    --settingsPrefix--: " ⊱ ";
    --settingsSuffix--: " ⊰ ";
}

@media only screen and (min-width: 769px) {
    :root {
        --size-contentArea-: 70vw;

        --appBar-height-: 4rem;
        --appBar-button-size-: 3.6rem;
    }

    body > main {
        box-shadow: 0 10px 10px 5px var(--color-boxShadow-);
    }
}

* {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;

    transition: color 0ms, border-color var(--duration-idealShortAnimation-) ease-out, box-shadow var(--duration-idealShortAnimation-) ease-out, background-color var(--duration-idealShortAnimation-) ease-out, background var(--duration-idealShortAnimation-) ease-out;
}

*:not(input) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

*:focus-visible {
    outline: 2px solid var(--color-textBody-) !important;
}

body,
html {
    width: 100vw;
    height: max-content;
    min-height: calc(100vh - var(--appBar-height-)) !important;
    font-size: 16px;
    background: var(--color-background-);
    scroll-behavior: smooth;
    color: var(--color-textBody-);
    overflow-x: hidden;
    overflow-y: auto;
}

body.noScroll,
html.noScroll {
    overflow-y: hidden;
}

body.neomorphism {
    --appBar-height-: 3.5rem;
    --appBar-button-size-: 2.5rem;
    /* font-family: "Montserrat", sans-serif; */

    --color-background-: #ededed;
    --color-background-1: #777777;
    --color-background-2: #ffffff;
    --color-primary-1: #472257;
    --color-primary-2: #d566ff;
    --color-secondary-1: #644272;
    --color-secondary-2: #ffc5ff;
}

@media only screen and (min-width: 769px) {
    body.neomorphism {
        --appBar-height-: 4rem;
        --appBar-button-size-: 3rem;
    }
}

body {
    top: var(--appBar-height-);
    position: absolute;
}

body > main {
    min-height: calc(100vh - var(--appBar-height-));
    margin: 0 auto;
    padding-bottom: 1rem;
    height: max-content !important;
    width: var(--size-contentArea-);
}

.btn {
    cursor: pointer;
    text-align: center;
    font: inherit;
}

.btn .badge {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background: var(--color-statusError-);
    font-weight: normal;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 1.1em;
    margin-left: 0.5em;
}

* {
    scrollbar-color: var(--color-primary-) var(--color-background-);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-button-);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--color-button-);
}

::-webkit-scrollbar-track {
    background: var(--color-background-);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Texts */
h1.success,
h2.success,
h3.success,
a.success,
p.success,
b.success,
span.success {
    color: var(--color-statusSuccess-) !important;
}
h1.warn,
h2.warn,
h3.warn,
a.warn,
p.warn,
b.warn,
span.warn {
    color: var(--color-statusWarn-) !important;
}
h1.load,
h2.load,
h3.load,
a.load,
p.load,
b.load,
span.load {
    color: var(--color-statusLoad-) !important;
}
h1.error,
h2.error,
h3.error,
a.error,
p.error,
b.error,
span.error {
    color: var(--color-statusError-) !important;
}

.semi {
    opacity: 0.5;
}
.smaller {
    font-size: smaller !important;
}
.normalize {
    font-size: 1rem !important;
}

input,
textarea {
    color: var(--color-textBody-);
    font-family: "AGAvantGardeMon", sans-serif, "Noto Sans Mongolian";
}

hr {
    border-color: var(--color-textBody-);
    background: var(--color-textBody-);
    opacity: 0.15;
}

[data-title=""]::after {
    display: none !important;
}

[data-title] {
    position: relative;
}

[data-title]::after {
    --offset-: 10px;

    position: absolute;
    top: calc(100% + var(--offset-));
    left: calc(50% + var(--offset-));
    transform: translateX(-50%);
    background: var(--color-textBody-);
    color: var(--color-background-, var(--color-background-));
    border: 1px solid var(--color-textBody-);
    border-radius: 0.33rem;
    padding: 0.33rem;
    font-size: x-small;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    animation: fadeIn var(--duration-idealShortAnimation-) ease-out;
    line-height: 100%;
    max-width: 10em;
    text-align: center;
    white-space: normal;
    z-index: 1;
    overflow-wrap: normal;
}
[data-title-up]::after {
    top: unset;
    bottom: calc(100% + var(--offset-));
}
[data-title-safeRight]::after {
    right: 0;
    left: unset;
    transform: unset;
}
[data-title-big]::after {
    --offset-: 0px;
    width: 124px;
}
.gegee-tooltips [data-title]::after {
    content: attr(data-title);
    --offset-: 0px;
}

@media (hover: hover) {
    [data-title]:hover::after {
        content: attr(data-title);
    }
}
.data-title-shown[data-title]:active::after {
    content: attr(data-title);
}

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

@keyframes fader {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.noscrollbar::-webkit-scrollbar {
    display: none;
}

.noscrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Neo */
.neomorphism input,
.neomorphism textarea {
    outline: none !important;
    border: none !important;
    box-shadow: 0.2em 0.2em 0.3em var(--color-background-1), -0.2em -0.2em 0.3em var(--color-background-2);
}

.neomorphism input[data-changed],
.neomorphism textarea[data-changed] {
    box-shadow: inset 0.2em 0.2em 0.3em var(--color-background-1), inset -0.2em -0.2em 0.3em var(--color-background-2) !important;
}
.neomorphism input:active,
.neomorphism input:focus,
.neomorphism input:hover,
.neomorphism textarea:active,
.neomorphism textarea:focus,
.neomorphism textarea:hover {
    box-shadow: inset 0.2em 0.2em 0.3em var(--color-background-1), inset -0.2em -0.2em 0.3em var(--color-background-2);
}

.ico,
[class^="icon-"],
[class*=" icon-"] {
    font-family: "GegeeIcons" !important;
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;

    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GegeeIcons 1.20 */
@font-face {
    font-family: "GegeeIcons";
    src: url("fonts/GegeeIcons.ttf?dhx15") format("truetype"), url("fonts/GegeeIcons.woff?dhx15") format("woff"), url("fonts/GegeeIcons.svg?dhx15#GegeeIcons") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.icon-guitar-pick:before {
    content: "\1f6c6";
}
.icon-lock-open:before {
    content: "\1f513";
}
.icon-lock:before {
    content: "\1f512";
}
.icon-search:before {
    content: "\1f50d";
}
.icon-more-vert:before {
    content: "\22ee";
}
.icon-analytics:before {
    content: "\1f5e0";
}
.icon-tune:before {
    content: "\2726";
}
.icon-refresh:before {
    content: "\27f3";
}
.icon-menu:before {
    content: "\21de";
}
.icon-hide:before {
    content: "\1f648";
}
.icon-pin:before {
    content: "\1f4cc";
}
.icon-close:before {
    content: "\78";
}
.icon-chevron-double-up:before {
    content: "\2b6b";
}
.icon-chevron-double-down:before {
    content: "\2b6d";
}
.icon-magic-wand:before {
    content: "\2728";
}
.icon-link:before {
    content: "\1f517";
}
.icon-check:before {
    content: "\2714";
}
.icon-warn:before {
    content: "\21";
}
.icon-collapse-all:before {
    content: "\25b3";
}
.icon-expand-all:before {
    content: "\25bd";
}
.icon-more:before {
    content: "\2026";
}
.icon-edit:before {
    content: "\270f";
}
.icon-instrument-piano:before {
    content: "\1f3b9";
}
.icon-instrument-ukulele:before {
    content: "\1f3d6";
}
.icon-instrument-guitar:before {
    content: "\1f3b8";
}
.icon-music-note-quarter:before {
    content: "\1d15f";
}
.icon-music-note-eighth:before {
    content: "\1d160";
}
.icon-music-note-sixteenth:before {
    content: "\1d161";
}
.icon-arrow-up-bold:before {
    content: "\2191";
}
.icon-arrow-down-bold:before {
    content: "\2193";
}
.icon-send:before {
    content: "\2708";
}
.icon-delete:before {
    content: "\1f5d1";
}
.icon-flag:before {
    content: "\2691";
}
.icon-reply:before {
    content: "\21b3";
}
.icon-close-circle-outline:before {
    content: "\58";
}
.icon-coffee:before {
    content: "\2615";
}
.icon-cog:before {
    content: "\1f6e0";
}
.icon-compose:before {
    content: "\270d";
}
.icon-donate:before {
    content: "\1f4b2";
}
.icon-eye:before {
    content: "\1f441";
}
.icon-facebook:before {
    content: "\66";
}
.icon-favorite:before {
    content: "\2665";
}
.icon-format-font-size-decrease:before {
    content: "\2d";
}
.icon-format-font-size-increase:before {
    content: "\2b";
}
.icon-help-circle-outline:before {
    content: "\2754";
}
.icon-home:before {
    content: "\1f3e0";
}
.icon-instagram:before {
    content: "\1f4f7";
}
.icon-keyboard:before {
    content: "\2328";
}
.icon-leaderboard:before {
    content: "\1f51d";
}
.icon-login:before {
    content: "\2348";
}
.icon-music-accidental-flat:before {
    content: "\266d";
}
.icon-music-accidental-natural:before {
    content: "\266e";
}
.icon-music-accidental-sharp:before {
    content: "\266f";
}
.icon-pause:before {
    content: "\23f8";
}
.icon-play:before {
    content: "\23f5";
}
.icon-play-circle:before {
    content: "\25b6";
}
.icon-recent:before {
    content: "\1f195";
}
.icon-settings:before {
    content: "\2699";
}
.icon-shield-check:before {
    content: "\1f6e1";
}
.icon-songs:before {
    content: "\1f399";
}
.icon-star:before {
    content: "\2b50";
}
.icon-tools:before {
    content: "\1f527";
}
.icon-turtle:before {
    content: "\1f422";
}
.icon-twitter:before {
    content: "\1f426";
}
.icon-volume-high:before {
    content: "\1f50a";
}
.icon-volume-mute:before {
    content: "\1f508";
}
.icon-web:before {
    content: "\1f310";
}
.icon-xml:before {
    content: "\1f4bb";
}
.icon-youtube:before {
    content: "\25b7";
}
.icon-account-circle:before {
    content: "\c6c3";
}
.icon-account-edit:before {
    content: "\270e";
}
.icon-account-music:before {
    content: "\1f3a8";
}
.icon-arrow-left:before {
    content: "\2190";
}
.icon-book-music:before {
    content: "\1f4d4";
}
.icon-camera:before {
    content: "\1f4f8";
}
.icon-capo:before {
    content: "\5f";
}
.icon-chevron-down:before {
    content: "\76";
}
.icon-chevron-left:before {
    content: "\3c";
}
.icon-chevron-right:before {
    content: "\3e";
}