color.js

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

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;
    -webkit-text-decoration: underline dotted;
    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
}

@font-face {
    font-display: block;
    font-family: Source Code Pro;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/SourceCodePro-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: JetBrains Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/JetBrainsMono-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Montserrat-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Roboto-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Titillium Web;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/TitilliumWeb-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Oxygen;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Oxygen-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Itim;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Itim-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Comfortaa;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Comfortaa-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Coming Soon;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/ComingSoon-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Atkinson Hyperlegible;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/AtkinsonHyperlegible-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Lato-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Lalezar;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Lalezar-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Noto Naskh Arabic;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/NotoNaskhArabic-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Vazirmatn;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Vazirmatn-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Ubuntu-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Ubuntu Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/UbuntuMono-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Inconsolata;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Inconsolata-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: IBM Plex Sans;
    font-style: normal;
    font-weight: 600;
    src: url(../webfonts/IBMPlexSans-SemiBold.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Lexend Deca;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/LexendDeca-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Fira Code;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/FiraCode-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Nunito;
    font-style: normal;
    font-weight: 700;
    src: url(../webfonts/Nunito-Bold.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Roboto Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/RobotoMono-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Boon;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/Boon-400.ttf) format("truetype"),url(../webfonts/Boon-400.otf) format("opentype")
}

@font-face {
    font-display: block;
    font-family: Open Dyslexic;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/OpenDyslexic.otf) format("opentype")
}

@font-face {
    font-display: block;
    font-family: Cascadia Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/CascadiaMono-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: IBM Plex Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/IBMPlexMono-Regular.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Overpass Mono;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/OverpassMono-VariableFont_wght.ttf) format("truetype")
}

@font-face {
    font-display: block;
    font-family: Hack;
    font-style: normal;
    font-weight: 400;
    src: url(../webfonts/HackNerdFont-Regular.ttf) format("truetype")
}

.page404 {
    align-content: center;
    display: grid;
    height: 100%;
    justify-content: center
}

.page404 .content {
    display: grid;
    gap: 4rem;
    grid-auto-flow: column;
    grid-template-columns: 300px 300px
}

.page404 .content .image {
    align-self: center;
    aspect-ratio: 300/199;
    background-image: url(../images/monkeymeme.jpg);
    background-size: contain;
    border-radius: var(--roundness);
    width: 100%
}

.page404 .content .title {
    align-self: center;
    color: var(--main-color);
    font-size: 5rem;
    line-height: 4rem
}

.page404 .content .side {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center
}

.page404 .content .side .big {
    color: var(--sub-color);
    font-size: 10rem;
    line-height: 10rem
}

.page404 .content .side .button {
    padding: 1rem 2rem;
    width: -moz-max-content;
    width: max-content
}

#ad-vertical-left-wrapper,#ad-vertical-right-wrapper {
    margin-top: 2rem;
    transition: margin-top opacity .125s .125s
}

#ad-footer-small-wrapper,#ad-footer-wrapper {
    justify-self: center
}

#ad-result-small-wrapper,#ad-result-wrapper {
    margin: 1rem auto 0
}

.pageAbout .ad,.pageAccount .ad,.pageSettings .ad {
    margin: 0 auto
}

.ad {
    background: var(--sub-alt-color);
    display: grid;
    grid-template-areas: "col";
    transition: opacity .125s
}

.ad>div {
    grid-area: col
}

.ad.focus {
    opacity: 0
}

.ad .icon {
    align-items: center;
    color: var(--sub-color);
    display: grid;
    font-size: 3rem;
    height: 100%;
    justify-content: center;
    width: 100%
}

.ad .icon.small {
    font-size: 1.5rem
}

.ad.ad-v {
    height: 600px;
    width: 160px
}

.ad.ad-h {
    height: 90px;
    width: 728px
}

.ad.ad-h-s {
    display: none;
    height: 50px;
    width: 320px
}

.ad.testPage {
    display: none!important
}

#ad-result-wrapper .iconAndText {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-areas: "mid right";
    grid-template-columns: auto 1fr;
    justify-content: center;
    justify-self: center
}

#ad-result-wrapper .iconAndText .textLeft {
    display: none;
    grid-area: left;
    text-align: right
}

#ad-result-wrapper .iconAndText .textRight {
    grid-area: right
}

#ad-result-wrapper .iconAndText .icon {
    grid-area: mid;
    height: unset;
    width: unset
}

#ad-result-wrapper .iconAndText .text {
    color: var(--sub-color);
    font-size: 1rem
}

#ad-result-wrapper .iconAndText .text .smalltext {
    font-size: .7rem
}

#ad-result-wrapper .iconAndText.withLeft {
    grid-template-areas: "left mid right";
    grid-template-columns: 1fr auto 1fr
}

#ad-result-wrapper .iconAndText.withLeft .textLeft {
    display: block
}

.pageAbout {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.pageAbout h2 {
    font-size: 1rem;
    font-weight: unset;
    margin: 0
}

.pageAbout .created {
    color: var(--sub-color);
    text-align: center
}

.pageAbout .created a {
    text-decoration: none
}

.pageAbout .section {
    display: grid;
    gap: .25rem
}

.pageAbout .section .bigtitle {
    color: var(--sub-color);
    font-size: 2rem;
    line-height: 2rem;
    margin: 0 0 1rem
}

.pageAbout .section .title {
    color: var(--sub-color);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1rem;
    margin: 0
}

.pageAbout .section .contactButtons,.pageAbout .section .supportButtons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 1rem
}

.pageAbout .section .contactButtons .button,.pageAbout .section .supportButtons .button {
    font-size: 1.5rem;
    padding: 2rem 0;
    text-decoration: none
}

.pageAbout .section .contactButtons .button .fab,.pageAbout .section .contactButtons .button .fas,.pageAbout .section .supportButtons .button .fab,.pageAbout .section .supportButtons .button .fas {
    margin-right: 1rem
}

.pageAbout .section .supportButtons {
    grid-template-columns: 1fr
}

.pageAbout .section .contributors,.pageAbout .section .supporters {
    color: var(--text-color);
    display: grid;
    gap: .25rem;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.pageAbout .section p {
    color: var(--text-color);
    margin: 0;
    padding: 0
}

.pageAbout .section p.small {
    color: var(--sub-color);
    font-size: .75em;
    text-align: right
}

.pageAbout .triplegroup {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    margin-top: 1rem
}

.pageAbout .group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.pageAbout .group .label {
    color: var(--sub-color)
}

.pageAbout .group .val {
    font-size: 3rem;
    line-height: 3.5rem
}

.pageAbout .group .valSmall {
    font-size: 1.5rem;
    line-height: 1.5rem
}

.pageAbout .chart canvas {
    width: 100%!important
}

.pageAbout .chart {
    margin-top: 1rem;
    position: relative
}

.signOut {
    border-radius: var(--roundness);
    color: var(--sub-color);
    cursor: pointer;
    float: right;
    font-size: 1rem;
    justify-self: end;
    line-height: 1rem;
    padding: .5rem 0 .5rem .5rem;
    transition: .25s;
    width: fit-content;
    width: -moz-fit-content
}

.signOut:hover {
    color: var(--text-color)
}

.signOut .fas {
    margin-right: .5rem
}

.pageAccount {
    height: 100%
}

.pageAccount .preloader {
    align-self: center
}

.pageAccount .content {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.pageAccount .sendVerificationEmail {
    cursor: pointer
}

.pageAccount .timePbTable .sub,.pageAccount .wordsPbTable .sub {
    opacity: .5
}

.pageAccount .timePbTable td,.pageAccount .wordsPbTable td {
    text-align: right
}

.pageAccount .timePbTable tbody td:first-child,.pageAccount .wordsPbTable tbody td:first-child {
    border-radius: var(--roundness) 0 0 var(--roundness);
    font-size: 1.5rem
}

.pageAccount .timePbTable tbody td:last-child,.pageAccount .wordsPbTable tbody td:last-child {
    border-radius: 0 var(--roundness) var(--roundness) 0
}

.pageAccount .showAllTimePbs,.pageAccount .showAllWordsPbs {
    margin-top: 1rem
}

.pageAccount .topFilters .buttons {
    display: flex;
    gap: 1rem;
    justify-content: space-evenly
}

.pageAccount .topFilters .buttons .button {
    width: 100%
}

.pageAccount .presetFilterButtons .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

.pageAccount .miniResultChartWrapper {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: none;
    height: 15rem;
    padding: 1rem;
    position: absolute;
    width: 45rem;
    z-index: 999
}

.pageAccount .miniResultChartBg {
    background: rgba(0,0,0,.75);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 998
}

.pageAccount .doublegroup {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column
}

.pageAccount .doublegroup .titleAndTable .title {
    color: var(--sub-color)
}

.pageAccount .triplegroup {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

.pageAccount .triplegroup .text {
    align-self: center;
    color: var(--sub-color)
}

.pageAccount .group.estimatedWordsTyped {
    align-items: center;
    display: flex;
    justify-content: center
}

.pageAccount .group.estimatedWordsTyped .title {
    margin-right: 1rem
}

.pageAccount .group.noDataError {
    margin: 20rem 0;
    text-align: center
}

.pageAccount .group.aboveHistory {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.pageAccount .group.aboveHistory .exportCSV {
    grid-column: 3/4
}

.pageAccount .group.createdDate {
    color: var(--sub-color);
    text-align: center
}

.pageAccount .group.personalBestTables .tables {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr
}

.pageAccount .group .chart canvas {
    width: 100%!important
}

.pageAccount .group.history table td {
    -webkit-appearance: unset
}

.pageAccount .group.history .active {
    animation: flashHighlight 4s linear 0s 1
}

.pageAccount .group.history .loadMoreButton {
    align-content: center;
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    color: var(--text-color);
    cursor: pointer;
    display: grid;
    margin-top: 1rem;
    padding: .5rem;
    text-align: center;
    transition: .25s;
    -webkit-user-select: none
}

.pageAccount .group.history .loadMoreButton:focus,.pageAccount .group.history .loadMoreButton:hover {
    background: var(--text-color);
    color: var(--bg-color)
}

.pageAccount .group .title {
    color: var(--sub-color)
}

.pageAccount .group .val {
    font-size: 3rem;
    line-height: 3.5rem
}

.pageAccount .group .chartjs-render-monitor {
    width: 100%!important
}

.pageAccount .group.chart {
    position: relative
}

.pageAccount .group.chart .above {
    color: var(--sub-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem
}

.pageAccount .group.chart .above .group {
    align-items: center;
    display: flex
}

.pageAccount .group.chart .above .fas,.pageAccount .group.chart .above .punc {
    margin-right: .25rem
}

.pageAccount .group.chart .above .spacer {
    width: 1rem
}

.pageAccount .group.chart .below {
    align-items: center;
    color: var(--sub-color);
    display: grid;
    grid-template-columns: auto 400px;
    margin-top: 1rem;
    text-align: center
}

.pageAccount .group.chart .below .text {
    height: -moz-min-content;
    height: min-content
}

.pageAccount .group.chart .below .buttons {
    display: grid;
    font-size: .75rem;
    gap: .5rem;
    grid-template-columns: 1fr 1fr 1fr
}

.pageAccount .group.chart .chart {
    height: 400px
}

.pageAccount .group.chart .chartPreloader {
    align-items: center;
    background: rgba(0,0,0,.5);
    display: grid;
    font-size: 5rem;
    height: 100%;
    justify-content: center;
    position: absolute;
    text-shadow: 0 0 3rem #000;
    width: 100%
}

.pageAccount table {
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--text-color)
}

.pageAccount table td {
    padding: .5rem
}

.pageAccount table thead {
    color: var(--sub-color);
    font-size: .75rem
}

.pageAccount table tbody tr:nth-child(odd) td {
    background: var(--sub-alt-color)
}

.pageAccount table tbody td:first-child {
    border-radius: var(--roundness) 0 0 var(--roundness)
}

.pageAccount table tbody td:last-child {
    border-radius: 0 var(--roundness) var(--roundness) 0
}

.pageAccount table td.infoIcons span {
    margin: 0 .1rem
}

.pageAccount table .miniResultChartButton {
    cursor: pointer;
    opacity: .25;
    transition: .25s
}

.pageAccount table .miniResultChartButton:hover {
    opacity: 1
}

.pageAccount #resultEditTags {
    transition: .25s
}

.pageAccount #resultEditTags:hover {
    color: var(--text-color);
    cursor: pointer;
    opacity: 1!important
}

.pageAccount .group.presetFilterButtons .buttons.filterBtns .filterPresets {
    display: grid;
    gap: .5rem;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-template-columns: 1fr auto;
    width: 100%
}

.pageAccount .group.filterButtons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

.pageAccount .group.filterButtons .buttonsAndTitle {
    color: var(--sub-color);
    display: grid;
    font-size: 1rem;
    gap: .25rem;
    height: fit-content;
    height: -moz-fit-content;
    line-height: 1rem
}

.pageAccount .group.filterButtons .buttonsAndTitle.funbox .buttons,.pageAccount .group.filterButtons .buttonsAndTitle.languages .buttons,.pageAccount .group.filterButtons .buttonsAndTitle.layouts .buttons,.pageAccount .group.filterButtons .buttonsAndTitle.tags .buttons,.pageAccount .group.filterButtons .buttonsAndTitle.testDate .buttons {
    grid-auto-flow: unset;
    grid-template-columns: repeat(4,1fr)
}

.pageAccount .group.filterButtons .buttons {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column
}

.pageAccount .profile .details {
    padding-right: 3rem
}

.pageAccount .profile .pbsTime,.pageAccount .profile .pbsWords {
    padding-right: 2rem
}

.headerSorted {
    font-weight: 700
}

.sortable:hover {
    background-color: var(--sub-alt-color);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@keyframes loader {
    0% {
        left: 0;
        width: 0
    }

    50% {
        left: 0;
        width: 100%
    }

    to {
        left: 100%;
        width: 0
    }
}

@keyframes caretFlashSmooth {
    0%,to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@keyframes caretFlashHard {
    0%,50% {
        opacity: 1
    }

    51%,to {
        opacity: 0
    }
}

@keyframes flashKey {
    0% {
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: var(--bg-color)
    }

    to {
        background-color: var(--bg-color);
        border-color: var(--sub-color);
        color: var(--sub-color)
    }
}

@keyframes shake {
    0% {
        transform: translate(2px) rotate(0deg)
    }

    50% {
        transform: translate(-2px) rotate(0deg)
    }

    to {
        transform: translate(2px) rotate(0deg)
    }
}

@keyframes flashHighlight {
    0% {
        background-color: var(--bg-color)!important
    }

    10% {
        background-color: var(--main-color)!important
    }

    40% {
        background-color: var(--main-color)!important
    }

    to {
        background-color: var(--bg-color)!important
    }
}

@keyframes rgb-bg {
    0% {
        background: #4cae4c
    }

    20% {
        background: #409eb5
    }

    40% {
        background: #8134f4
    }

    60% {
        background: #f10e19
    }

    80% {
        background: #ffc505
    }

    to {
        background: #4cae4c
    }
}

@keyframes scanline {
    0% {
        bottom: 100%
    }

    80% {
        bottom: 100%
    }

    to {
        bottom: 0
    }
}

#bannerCenter {
    position: fixed;
    transition: opacity .25s;
    width: 100%;
    z-index: 1000
}

#bannerCenter .banner {
    background: var(--sub-color);
    color: var(--bg-color);
    display: flex;
    justify-content: center
}

#bannerCenter .banner .container {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
    justify-items: center;
    max-width: 1000px;
    width: 100%
}

#bannerCenter .banner .container .image {
    aspect-ratio: 6/1;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 2.35rem;
    margin-left: 2rem
}

#bannerCenter .banner .container .icon {
    margin-bottom: .5rem;
    margin-left: 1rem;
    margin-top: .5rem
}

#bannerCenter .banner .container .text {
    margin-bottom: .5rem;
    margin-top: .5rem
}

#bannerCenter .banner .container .closeButton {
    font-size: 1.4rem;
    margin-right: 1rem;
    transition: .125s
}

#bannerCenter .banner .container .closeButton:hover {
    color: var(--text-color);
    cursor: pointer
}

#bannerCenter .banner .container .righticon {
    margin-right: 1rem
}

#bannerCenter .banner.good {
    background: var(--main-color)
}

#bannerCenter .banner.bad {
    background: var(--error-color)
}

#bannerCenter .banner a {
    color: var(--bg-color);
    text-decoration: underline
}

#bannerCenter .banner a:hover {
    color: var(--text-color);
    cursor: pointer
}

#bannerCenter.focus {
    opacity: 0;
    pointer-events: none
}

#caret,#caret.outline,#paceCaret.outline {
    animation: caretFlashSmooth 1s infinite;
    background: var(--caret-color)
}

#caret,#caret.outline,#paceCaret,#paceCaret.outline {
    border-radius: var(--roundness);
    height: 1.2em;
    position: absolute;
    transform-origin: top left
}

#paceCaret {
    background: var(--sub-color);
    opacity: .5
}

#caret.off,#paceCaret.off {
    width: 0
}

#caret.default,#paceCaret.default {
    width: .1em
}

#caret.carrot,#paceCaret.carrot {
    background-image: url(../images/carrot.png);
    width: .25em
}

#caret.banana,#caret.carrot,#paceCaret.banana,#paceCaret.carrot {
    background-color: transparent;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

#caret.banana,#paceCaret.banana {
    background-image: url(../images/banana.png);
    width: 1em
}

#caret.block,#caret.outline,#paceCaret.block,#paceCaret.outline {
    border-radius: 0;
    border-radius: calc(var(--roundness)/4);
    width: .5em;
    z-index: -1
}

#caret.outline,#paceCaret.outline {
    animation-name: none;
    background: 0 0;
    border: .05em solid var(--caret-color);
    border-radius: calc(var(--roundness)/4)
}

#caret.underline,#paceCaret.underline {
    height: .1em;
    margin-top: 1.2em;
    width: .5em
}

#commandLineWrapper {
    align-items: start;
    background: rgba(0,0,0,.75);
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    justify-items: center;
    left: 0;
    padding: 5rem 2rem;
    position: fixed;
    top: 0;
    transition: background .125s;
    width: 100%;
    z-index: 1000
}

#commandLineWrapper #commandInput {
    background: var(--bg-color);
    border-radius: var(--roundness);
    max-width: 600px;
    width: 100%
}

#commandLineWrapper #commandInput input {
    background: var(--bg-color);
    border: none;
    border-radius: var(--roundness);
    color: var(--main-color);
    font-size: 1rem;
    outline: none;
    padding: 1rem;
    width: 100%
}

#commandLineWrapper #commandInput .shiftEnter {
    color: var(--sub-color);
    font-size: .75rem;
    line-height: .75rem;
    padding: .5rem 1rem;
    text-align: center
}

#commandLineWrapper #commandLine {
    background: var(--bg-color);
    border-radius: var(--roundness);
    box-shadow: 0 0 0 .2em transparent;
    max-width: 600px;
    transition: outline .125s;
    width: 100%
}

#commandLineWrapper #commandLine .searchicon {
    color: var(--sub-color);
    margin: 1px 1rem 0
}

#commandLineWrapper #commandLine input {
    background: var(--bg-color);
    border: none;
    border-radius: var(--roundness);
    color: var(--text-color);
    font-size: 1rem;
    outline: none;
    padding: 1rem 1rem 1rem 0;
    width: 100%
}

#commandLineWrapper #commandLine .separator {
    background: #000;
    height: 1px;
    margin-bottom: .5rem;
    width: 100%
}

#commandLineWrapper #commandLine .listTitle {
    color: var(--text-color);
    font-size: .75rem;
    line-height: .75rem;
    padding: .5rem 1rem
}

#commandLineWrapper #commandLine .suggestions {
    cursor: pointer;
    display: block;
    display: grid;
    max-height: calc(100vh - 13rem);
    overflow-y: scroll;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#commandLineWrapper #commandLine .suggestions .entry {
    color: var(--sub-color);
    display: grid;
    font-size: .75rem;
    grid-template-columns: auto 1fr;
    line-height: .75rem;
    padding: .5rem 1rem
}

#commandLineWrapper #commandLine .suggestions .entry div {
    pointer-events: none
}

#commandLineWrapper #commandLine .suggestions .entry .textIcon {
    color: var(--sub-color);
    display: inline-block;
    font-weight: 900;
    letter-spacing: -.1rem;
    margin-right: .5rem;
    text-align: center;
    width: 1.25em
}

#commandLineWrapper #commandLine .suggestions .entry .fas {
    color: var(--sub-color);
    margin-right: .5rem
}

#commandLineWrapper #commandLine .suggestions .entry:last-child {
    border-radius: 0 0 var(--roundness) var(--roundness)
}

#commandLineWrapper #commandLine .suggestions .entry.activeMouse {
    background: var(--text-color)!important;
    color: var(--bg-color)!important;
    cursor: pointer
}

#commandLineWrapper #commandLine .suggestions .entry.activeMouse .fab,#commandLineWrapper #commandLine .suggestions .entry.activeMouse .far,#commandLineWrapper #commandLine .suggestions .entry.activeMouse .fas {
    color: var(--bg-color)
}

#commandLineWrapper #commandLine .suggestions .entry.activeKeyboard {
    background: var(--text-color)!important;
    color: var(--bg-color)!important
}

#commandLineWrapper #commandLine .suggestions .entry.activeKeyboard .fab,#commandLineWrapper #commandLine .suggestions .entry.activeKeyboard .far,#commandLineWrapper #commandLine .suggestions .entry.activeKeyboard .fas {
    color: var(--bg-color)
}

#commandLineWrapper #commandLine .suggestions .entry.active {
    background: var(--text-color)!important;
    color: var(--bg-color)!important
}

#commandLineWrapper #commandLine .suggestions .entry.active .fab,#commandLineWrapper #commandLine .suggestions .entry.active .far,#commandLineWrapper #commandLine .suggestions .entry.active .fas {
    color: var(--bg-color)
}

#commandLineWrapper #commandLine .suggestions .entry.withThemeBubbles {
    grid-template-columns: auto 1fr auto
}

#commandLineWrapper #commandLine .suggestions .entry.withThemeBubbles .themeBubbles {
    border-radius: 1em;
    display: grid;
    gap: .5em;
    grid-auto-flow: column
}

#commandLineWrapper #commandLine .suggestions .entry.withThemeBubbles .themeBubbles .themeBubble {
    border-radius: 100%;
    height: 1em;
    width: 1em
}

#commandLineWrapper.noBackground {
    background: 0 0
}

#commandLineWrapper.noBackground #commandLine {
    box-shadow: 0 0 0 .2em var(--sub-alt-color)
}

:root {
    --roundness: 0.5rem;
    --font: "Roboto Mono","Vazirmatn",sans-serif;
    --crt-bg-color-shine: color-mix(in oklab,var(--main-color) 5%,var(--bg-color));
    --crt-bg-color-stripe: color-mix(in oklab,#000 50%,var(--bg-color));
    --crt-sub-color-glow: color-mix(in srgb,var(--sub-color) 20%,transparent);
    --crt-sub-alt-color-glow: color-mix(in srgb,var(--sub-alt-color) 20%,transparent);
    --crt-text-color-glow: color-mix(in srgb,var(--text-color) 20%,transparent);
    --crt-main-color-glow: color-mix(in srgb,var(--main-color) 20%,transparent);
    --crt-error-color-glow: color-mix(in srgb,var(--error-color) 20%,transparent);
    --crt-caret-color-glow: color-mix(in srgb,var(--caret-color) 20%,transparent);
    font-weight: 400;
    scroll-padding-top: 2rem
}

::-moz-placeholder {
    color: var(--sub-color);
    opacity: 1
}

::placeholder {
    color: var(--sub-color);
    opacity: 1
}

::-moz-selection {
    background-color: var(--main-color);
    color: var(--sub-alt-color)
}

::selection {
    background-color: var(--main-color);
    color: var(--sub-alt-color)
}

#app {
    display: grid;
    grid-template-columns: auto minmax(0,1000px) auto;
    justify-items: center
}

#app.wide125 {
    grid-template-columns: auto minmax(0,1250px) auto
}

#app.wide150 {
    grid-template-columns: auto minmax(0,1500px) auto
}

#app.wide200 {
    grid-template-columns: auto minmax(0,2000px) auto
}

#app.widemax {
    grid-template-columns: auto minmax(0,1fr) auto
}

#nocss {
    display: none!important;
    pointer-events: none
}

#commandLineWrapper #commandLine .suggestions,#contactPopupWrapper #contactPopup,#leaderboardsWrapper #leaderboards .tables .leftTableWrapper,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper,#supportMeWrapper #supportMe,#versionHistoryWrapper #versionHistory,.ffscroll,html {
    scrollbar-color: var(--sub-color) transparent;
    scrollbar-width: thin
}

html {
    line-height: 1.25;
    overflow-y: scroll;
    scroll-behavior: smooth
}

a {
    color: var(--sub-color);
    display: inline-block;
    transition: .125s
}

a:hover {
    color: var(--text-color)
}

a[router-link] * {
    pointer-events: none
}

a.button {
    text-decoration: none
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 0
}

.customBackground {
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    content: "";
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -999
}

#backgroundLoader {
    animation: loader 2s cubic-bezier(.38,.16,.57,.82) infinite;
    background: var(--main-color);
    height: 3px;
    position: fixed;
    width: 100%;
    z-index: 9999
}

label.checkbox span {
    color: var(--sub-color);
    display: block;
    font-size: .76rem;
    margin-left: 1.5rem
}

label.checkbox input {
    display: none;
    height: 0;
    margin: 0!important;
    width: 0
}

label.checkbox input,label.checkbox input~.customTextCheckbox {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

label.checkbox input~.customTextCheckbox {
    background: var(--sub-alt-color);
    border-radius: calc(var(--roundness)/2);
    display: inline-grid;
    height: 1.25rem;
    margin: 0 .5rem 0 0;
    width: 1.25rem
}

label.checkbox input~.customTextCheckbox .check {
    color: var(--main-color);
    opacity: 0;
    transition: .125s
}

label.checkbox input:checked~.customTextCheckbox .check {
    opacity: 1
}

#centerContent {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr auto;
    max-width: 1000px;
    min-height: 100vh;
    padding: 2rem;
    transition: padding-top .125s;
    width: 100%;
    z-index: 999
}

#centerContent.wide125 {
    max-width: 1250px
}

#centerContent.wide150 {
    max-width: 1500px
}

#centerContent.wide200 {
    max-width: 2000px
}

#centerContent.widemax {
    max-width: unset
}

#middle {
    display: grid
}

key {
    background-color: var(--sub-color);
    border-radius: .1rem;
    color: var(--bg-color);
    display: inline-block;
    font-size: .7rem;
    line-height: .7rem;
    margin: 0 .5rem;
    padding: .1rem .3rem
}

.pageLoading {
    align-items: center;
    display: grid;
    height: 100%
}

.pageAccount .preloader,.pageLoading .preloader {
    display: grid;
    justify-self: center;
    text-align: center
}

.pageAccount .preloader .barWrapper,.pageLoading .preloader .barWrapper {
    display: grid;
    gap: 1rem;
    grid-column: 1;
    grid-row: 1
}

.pageAccount .preloader .barWrapper .bar,.pageLoading .preloader .barWrapper .bar {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    height: .5rem;
    width: 20rem
}

.pageAccount .preloader .barWrapper .bar .fill,.pageLoading .preloader .barWrapper .bar .fill {
    background: var(--main-color);
    border-radius: var(--roundness);
    height: 100%;
    width: 0
}

.pageAccount .preloader .icon,.pageLoading .preloader .icon {
    color: var(--main-color);
    font-size: 2rem;
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 1rem
}

.devIndicator {
    color: var(--sub-color);
    font-size: 3rem;
    opacity: .25;
    position: fixed;
    z-index: -1
}

.devIndicator.tl {
    left: 2rem;
    top: 2rem
}

.devIndicator.tr {
    right: 2rem;
    top: 2rem
}

.devIndicator.bl {
    bottom: 2rem;
    left: 2rem
}

.devIndicator.br {
    bottom: 2rem;
    right: 2rem
}

* {
    box-sizing: border-box
}

.hidden {
    display: none!important
}

.invisible {
    opacity: 0!important;
    pointer-events: none!important
}

.button {
    align-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    height: -moz-min-content;
    height: min-content;
    line-height: 1.25em;
    padding: .5em;
    text-align: center;
    transition: background .125s,color .125s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.button.active {
    background: var(--main-color);
    color: var(--bg-color)
}

.button.active:hover {
    background: var(--text-color)
}

.button.active:active {
    background: var(--sub-color);
    color: var(--bg-color)
}

.button.disabled {
    cursor: default;
    opacity: .33;
    pointer-events: none
}

.button.disabled:hover {
    background: var(--text-color);
    outline: none
}

.button.disabled:active {
    background: var(--sub-color);
    color: var(--bg-color)
}

.button:hover {
    background: var(--text-color);
    color: var(--bg-color);
    outline: none
}

.button:focus {
    box-shadow: 0 0 0 .15em var(--text-color)
}

.button:active {
    background: var(--sub-color);
    color: var(--bg-color)
}

.textButton {
    align-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: var(--roundness);
    color: var(--sub-color);
    cursor: pointer;
    display: grid;
    font-family: inherit;
    font-size: 1em;
    gap: .25em;
    grid-auto-flow: column;
    height: -moz-min-content;
    height: min-content;
    line-height: 1.25em;
    padding: .5em;
    text-align: center;
    text-decoration: none;
    transition: background .125s,color .125s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-max-content;
    width: max-content
}

.textButton .far,.textButton .fas {
    display: grid;
    place-content: center center
}

.textButton.active {
    color: var(--main-color)
}

.textButton.active:hover {
    color: var(--text-color)
}

.textButton.active:active {
    color: var(--sub-color)
}

.textButton.disabled {
    cursor: default;
    opacity: .33;
    pointer-events: none
}

.textButton.disabled:hover {
    background: var(--text-color);
    outline: none
}

.textButton.disabled:active {
    background: var(--sub-color);
    color: var(--bg-color)
}

.textButton:focus,.textButton:hover {
    color: var(--text-color)
}

.textButton:focus {
    outline: none
}

.scrollToTopButton,.textButton:active {
    color: var(--sub-color)
}

.scrollToTopButton {
    background: var(--sub-alt-color);
    border-radius: 99rem;
    bottom: 2rem;
    cursor: pointer;
    font-size: 2rem;
    height: 4rem;
    line-height: 4rem;
    position: fixed;
    right: 2rem;
    text-align: center;
    transition: .25s;
    width: 4rem;
    z-index: 99
}

.scrollToTopButton:hover {
    background: var(--text-color);
    color: var(--bg-color)
}

.inputAndIndicator {
    position: relative
}

.inputAndIndicator input {
    width: 100%
}

.inputAndIndicator .statusIndicator {
    cursor: pointer;
    display: grid;
    grid-template-columns: 2.25em;
    grid-template-rows: 2.25em;
    height: 2.25em;
    place-items: center center;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.25em
}

.inputAndIndicator .statusIndicator .indicator {
    grid-column: 1/2;
    grid-row: 1/2
}

.inputAndIndicator .statusIndicator .indicator.level-1 {
    color: var(--error-color)
}

.inputAndIndicator .statusIndicator .indicator.level0 {
    color: var(--sub-color)
}

.inputAndIndicator .statusIndicator .indicator.level1 {
    color: var(--main-color)
}

.configureAPI.button {
    border-radius: 0 1rem 1rem 0;
    display: grid;
    gap: .5rem;
    grid-auto-flow: column;
    left: 0;
    padding: 1rem;
    position: fixed;
    text-decoration: none;
    top: 10rem;
    z-index: 999999999
}

.avatar {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 100%;
    height: 1.25rem;
    transition: opacity .125s,filter .125s,webkit-filter .125s;
    width: 1.25rem
}

.badge {
    align-items: baseline;
    background: var(--sub-color);
    border-radius: calc(var(--roundness)/2);
    color: var(--text-color);
    display: grid;
    grid-template-columns: max-content auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.badge .far,.badge .fas {
    font-size: .9em;
    margin: .15rem .3rem
}

.badge .text {
    margin-bottom: .15rem;
    margin-right: .3rem;
    margin-top: .15rem
}

.notificationBubble {
    background: var(--main-color);
    border-radius: 100rem;
    box-shadow: 0 0 0 .5em var(--bg-color);
    color: transparent;
    font-size: .5em;
    height: 1em;
    line-height: 2em;
    position: absolute;
    right: .5em;
    top: .5em;
    transition: .125s;
    width: 1em
}

#fpsCounter {
    background: var(--sub-alt-color);
    color: #ffd900;
    left: 0;
    padding: .25rem;
    position: fixed;
    text-align: center;
    top: 0;
    width: 10ch;
    z-index: 999999999
}

#fpsCounter.main {
    color: #1eff00
}

#fpsCounter.error {
    color: red
}

#bottom {
    color: var(--sub-color);
    font-size: .75rem;
    line-height: 1rem;
    padding: 0 5px;
    position: relative;
    text-align: center
}

#bottom .keyTips {
    line-height: 1.25rem;
    margin-bottom: 2rem;
    transition: .125s
}

#bottom .keyTips key {
    margin: 0 .25rem
}

#bottom .left .textButton,#bottom .right .textButton {
    transition: .125s
}

#bottom #supportMeButton:hover {
    color: var(--text-color);
    cursor: pointer
}

#bottom #commandLineMobileButton {
    background: var(--main-color);
    border-radius: 99rem;
    color: var(--bg-color);
    cursor: pointer;
    display: none;
    font-size: 1rem;
    height: 3rem;
    left: 0;
    line-height: 3rem;
    position: absolute;
    text-align: center;
    top: -4rem;
    transition: .25s;
    width: 3rem;
    z-index: 99
}

#bottom .leftright {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#bottom .leftright .textButton {
    font-size: .75rem;
    line-height: 1rem;
    padding: 0;
    text-decoration: none
}

#bottom .leftright .left {
    text-align: left
}

#bottom .leftright .left,#bottom .leftright .right {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    width: -moz-fit-content;
    width: fit-content
}

#bottom .leftright .right {
    justify-self: right;
    text-align: right
}

#bottom .leftright .left .textButton,#bottom .leftright .right .textButton {
    align-items: baseline;
    display: grid;
    gap: .25rem;
    grid-auto-flow: column;
    width: -moz-available;
    width: -moz-max-content;
    width: max-content
}

#bottom #versionGroup {
    display: flex
}

#bottom #versionGroup #newVersionIndicator {
    background-color: var(--main-color);
    border-radius: calc(var(--roundness)/2);
    color: var(--bg-color);
    cursor: pointer;
    text-align: center;
    transition: .125s
}

#bottom.focus #newVersionIndicator,#bottom.focus .keyTips,#bottom.focus .textButton {
    opacity: 0!important
}

#bottom.focus #commandLineMobileButton {
    opacity: 0!important;
    pointer-events: none!important
}

input,textarea {
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    caret-color: var(--main-color);
    color: var(--text-color);
    font-family: var(--font);
    font-size: 1em;
    line-height: 1.25em;
    outline: none;
    padding: .5em
}

textarea {
    resize: vertical
}

input[type=range] {
    -webkit-appearance: none;
    border-radius: var(--roundness);
    height: 1rem;
    padding: 0;
    width: 100%
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--main-color);
    border: none;
    border-radius: var(--roundness);
    height: 1rem;
    padding: 0;
    width: 25%
}

input[type=range]::-webkit-slider-thumb:hover {
    cursor: grab
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: grabbing
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    background-color: var(--main-color);
    border: none;
    border-radius: var(--roundness);
    height: 1rem;
    padding: 0;
    width: 25%
}

input[type=range]::-moz-range-thumb:hover {
    cursor: grab
}

input[type=range]::-moz-range-thumb:active {
    cursor: grabbing
}

input[type=color] {
    height: 3px;
    margin: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute
}

input:disabled,textarea:disabled {
    opacity: .33
}

::-moz-color-swatch {
    border: none
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text-color);
    border: none;
    -webkit-box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;
    caret-color: var(--text-color);
    font-family: inherit;
    outline: .15em solid var(--main-color)
}

.select2-dropdown {
    background-color: var(--bg-color);
    color: var(--text-color);
    outline: none
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--sub-alt-color)!important;
    cursor: default;
    opacity: .33;
    pointer-events: none
}

.select2-selection {
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    font: var(--font);
    height: fit-content;
    height: -moz-fit-content;
    padding: 5px
}

.select2-container--default .select2-selection--single .select2-selection__rendered,.select2-selection {
    color: var(--text-color);
    outline: none
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--text-color);
    color: var(--bg-color)
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--main-color);
    color: var(--bg-color)
}

.select2-container--open .select2-dropdown--above,.select2-container--open .select2-dropdown--below {
    background: var(--bg-color);
    border-color: var(--sub-alt-color);
    border-radius: var(--roundness);
    color: var(--sub-color)
}

.select2-container--default .select2-selection--single {
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    color: var(--text-color);
    height: auto;
    outline: none
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: #5051517a
}

.select2-selection:active,.select2-selection:focus {
    border: none;
    border-radius: var(--roundness);
    color: var(--text-color);
    font: var(--font);
    height: fit-content;
    height: -moz-fit-content;
    outline: none;
    padding: 5px
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-color) transparent transparent transparent
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-color) transparent
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bg-color);
    border-color: var(--sub-alt-color);
    border-radius: var(--roundness);
    color: var(--text-color)
}

.select2-container--default .select2-results__group {
    color: var(--text-color)
}

.select2-container--default .select2-selection--multiple {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    color: var(--text-color);
    outline: none
}

.select2-selection__choice__display {
    color: var(--bg-color)
}

.select2-selection__choice__remove {
    color: var(--main-color)!important
}

.select2-container .select2-search--inline .select2-search__field {
    border-radius: 0;
    font-family: var(--font);
    line-height: 1rem;
    margin: 0
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none
}

.select2-container--default .select2-selection--multiple {
    border: none;
    font-family: var(--font);
    padding: .5rem
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--main-color);
    border: none;
    border-radius: calc(var(--roundness)/2);
    box-sizing: border-box;
    display: inline-block;
    margin-left: 0;
    margin-right: .5rem;
    margin-top: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0 0 0 1.25rem;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid var(--bg-color);
    color: var(--bg-color)!important;
    line-height: 1.5rem;
    transition: .125s
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: var(--text-color)
}

#keymap {
    display: grid;
    gap: .25rem;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: center;
    margin-top: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

#keymap .row {
    gap: .25rem;
    height: 2rem
}

#keymap .keymapKey {
    align-items: center;
    background-color: transparent;
    border: .05rem solid;
    border-color: var(--sub-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    display: flex;
    height: 2rem;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 2rem
}

#keymap .keymapKey .bump {
    background: var(--sub-color);
    border-radius: var(--roundness);
    bottom: .15rem;
    height: .05rem;
    position: absolute;
    width: .75rem
}

#keymap .keymapKey.activeKey {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--bg-color)
}

#keymap .keymapKey.activeKey .bump {
    background: var(--bg-color)
}

#keymap .keymapKey.keySpace {
    width: 100%
}

#keymap .keymapKey.keySpace:hover {
    color: var(--main-color);
    cursor: pointer
}

#keymap .keymapKey.keySplitSpace {
    opacity: 0;
    width: 100%
}

#keymap .keymapKey.flash {
    animation: flashKey 1s cubic-bezier(.16,1,.3,1) forwards
}

#keymap .hiddenKey,#keymap .hideKey {
    opacity: 0
}

#keymap .keymapMatrixSplitSpacer,#keymap .keymapSplitSpacer,#keymap .keymapStaggerSplitSpacer {
    display: none
}

#keymap .r1 {
    display: grid;
    grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap .r2 {
    display: grid;
    grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1rem
}

#keymap .r3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap .r4 {
    display: grid;
    grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr
}

#keymap .r5 {
    display: grid;
    font-size: .5rem;
    grid-template-columns: 3.5fr 6fr 3.5fr
}

#keymap.matrix .r1,#keymap.matrix .r2,#keymap.matrix .r3,#keymap.matrix .r4 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.matrix .r5 {
    grid-template-columns: 3fr 4fr 3fr
}

#keymap.matrix .r1 :nth-child(13),#keymap.matrix .r1 :nth-child(14),#keymap.matrix .r2 :nth-child(13),#keymap.matrix .r2 :nth-child(14),#keymap.matrix .r3 :nth-child(13),#keymap.matrix .r3 :nth-child(14) {
    opacity: 0
}

#keymap.split .keymapSplitSpacer,#keymap.split .keymapStaggerSplitSpacer {
    display: block
}

#keymap.split .r1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr
}

#keymap.split .r2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.split .r3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr
}

#keymap.split .r4 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr
}

#keymap.split .r5 {
    grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr
}

#keymap.split .keySplitSpace {
    opacity: 1
}

#keymap.split_matrix .keymapSplitSpacer {
    display: block;
    height: 2rem;
    width: 2rem
}

#keymap.split_matrix .keymapStaggerSplitSpacer {
    display: none
}

#keymap.split_matrix .keymapMatrixSplitSpacer {
    display: block;
    height: 2rem;
    width: 2rem
}

#keymap.split_matrix .r1,#keymap.split_matrix .r2,#keymap.split_matrix .r3,#keymap.split_matrix .r4 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.split_matrix .r5 {
    grid-template-columns: 2fr 3fr 1fr 3fr 2fr
}

#keymap.split_matrix .keySplitSpace {
    opacity: 1
}

#keymap.split_matrix .r1 :nth-child(12),#keymap.split_matrix .r1 :nth-child(13),#keymap.split_matrix .r1 :nth-child(14),#keymap.split_matrix .r2 :nth-child(13),#keymap.split_matrix .r2 :nth-child(14),#keymap.split_matrix .r3 :nth-child(13),#keymap.split_matrix .r3 :nth-child(14) {
    opacity: 0
}

#keymap.steno .r2,#keymap.steno .r3,#keymap.steno_matrix .r2,#keymap.steno_matrix .r3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.steno .r4,#keymap.steno_matrix .r4 {
    display: grid;
    grid-template-columns: 3.25fr 1fr 1fr 1fr 1fr 1fr 3.25fr
}

#keymap.steno.steno .r2,#keymap.steno.steno .r3,#keymap.steno_matrix.steno .r2,#keymap.steno_matrix.steno .r3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.steno.steno .r4,#keymap.steno_matrix.steno .r4 {
    display: grid;
    grid-template-columns: 2.6fr 1fr 1fr .1fr 1fr 1fr 3.65fr
}

#keymap.steno.steno .r4 .keymapSplitSpacer,#keymap.steno_matrix.steno .r4 .keymapSplitSpacer {
    display: block
}

#keymap.steno.steno .r2 .keymapKey:first-child,#keymap.steno.steno .r2 .keymapKey:nth-child(5),#keymap.steno_matrix.steno .r2 .keymapKey:first-child,#keymap.steno_matrix.steno .r2 .keymapKey:nth-child(5) {
    height: 4.25rem
}

#keymap.steno.steno .r3 .keymapKey:first-child,#keymap.steno.steno .r3 .keymapKey:nth-child(5),#keymap.steno_matrix.steno .r3 .keymapKey:first-child,#keymap.steno_matrix.steno .r3 .keymapKey:nth-child(5) {
    visibility: hidden
}

#keymap.alice .keymapSplitSpacer,#keymap.steno.steno_matrix .keymapSplitSpacer,#keymap.steno_matrix.steno_matrix .keymapSplitSpacer {
    display: block
}

#keymap.alice .r4 .keymapSplitSpacer {
    display: none
}

#keymap.alice .keymapStaggerSplitSpacer {
    display: block
}

#keymap.alice .r1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr
}

#keymap.alice .r1 .keymapKey:nth-child(2) {
    margin-left: 45%
}

#keymap.alice .r1 .keymapKey:nth-child(3) {
    margin-left: 45%;
    margin-top: -2px
}

#keymap.alice .r1 .keymapKey:nth-child(4),#keymap.alice .r1 .keymapKey:nth-child(5),#keymap.alice .r1 .keymapKey:nth-child(6),#keymap.alice .r1 .keymapKey:nth-child(7) {
    margin-left: 45%;
    transform: rotate(10deg)
}

#keymap.alice .r1 .keymapKey:nth-child(4) {
    margin-top: 3px
}

#keymap.alice .r1 .keymapKey:nth-child(5) {
    margin-top: 10px
}

#keymap.alice .r1 .keymapKey:nth-child(6) {
    margin-top: 17px
}

#keymap.alice .r1 .keymapKey:nth-child(7) {
    margin-top: 24px
}

#keymap.alice .r1 .keymapKey:nth-child(10),#keymap.alice .r1 .keymapKey:nth-child(11),#keymap.alice .r1 .keymapKey:nth-child(12),#keymap.alice .r1 .keymapKey:nth-child(9) {
    margin-left: -48%;
    transform: rotate(-10deg)
}

#keymap.alice .r1 .keymapKey:nth-child(12) {
    margin-top: -1px
}

#keymap.alice .r1 .keymapKey:nth-child(11) {
    margin-top: 6px
}

#keymap.alice .r1 .keymapKey:nth-child(10) {
    margin-top: 13px
}

#keymap.alice .r1 .keymapKey:nth-child(9) {
    margin-top: 20px
}

#keymap.alice .r1 .keymapKey:nth-child(13),#keymap.alice .r1 .keymapKey:nth-child(14) {
    margin-left: -40%
}

#keymap.alice .r2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

#keymap.alice .r2 .keymapKey:nth-child(2) {
    margin-left: 20%
}

#keymap.alice .r2 .keymapKey:nth-child(3),#keymap.alice .r2 .keymapKey:nth-child(4),#keymap.alice .r2 .keymapKey:nth-child(5),#keymap.alice .r2 .keymapKey:nth-child(6) {
    margin-left: 45%;
    transform: rotate(10deg)
}

#keymap.alice .r2 .keymapKey:nth-child(10),#keymap.alice .r2 .keymapKey:nth-child(4) {
    margin-top: 8px
}

#keymap.alice .r2 .keymapKey:nth-child(5),#keymap.alice .r2 .keymapKey:nth-child(9) {
    margin-top: 15px
}

#keymap.alice .r2 .keymapKey:nth-child(6),#keymap.alice .r2 .keymapKey:nth-child(8) {
    margin-top: 22px
}

#keymap.alice .r2 .keymapKey:nth-child(10),#keymap.alice .r2 .keymapKey:nth-child(11),#keymap.alice .r2 .keymapKey:nth-child(8),#keymap.alice .r2 .keymapKey:nth-child(9) {
    margin-left: -12%;
    transform: rotate(-10deg)
}

#keymap.alice .r3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr
}

#keymap.alice .r3 .keymapKey:nth-child(2) {
    margin-left: -5px
}

#keymap.alice .r3 .keymapKey:nth-child(3),#keymap.alice .r3 .keymapKey:nth-child(4),#keymap.alice .r3 .keymapKey:nth-child(5),#keymap.alice .r3 .keymapKey:nth-child(6) {
    margin-left: -1px;
    transform: rotate(10deg)
}

#keymap.alice .r3 .keymapKey:nth-child(10),#keymap.alice .r3 .keymapKey:nth-child(4) {
    margin-top: 8px
}

#keymap.alice .r3 .keymapKey:nth-child(5),#keymap.alice .r3 .keymapKey:nth-child(9) {
    margin-top: 15px
}

#keymap.alice .r3 .keymapKey:nth-child(6),#keymap.alice .r3 .keymapKey:nth-child(8) {
    margin-top: 22px
}

#keymap.alice .r3 .keymapKey:nth-child(10),#keymap.alice .r3 .keymapKey:nth-child(11),#keymap.alice .r3 .keymapKey:nth-child(8),#keymap.alice .r3 .keymapKey:nth-child(9) {
    margin-left: -25%;
    transform: rotate(-10deg)
}

#keymap.alice .r4 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr
}

#keymap.alice .r4 .keymapKey:nth-child(2) {
    margin-left: -18px
}

#keymap.alice .r4 .keymapKey:nth-child(3) {
    margin-left: -15px
}

#keymap.alice .r4 .keymapKey:nth-child(4),#keymap.alice .r4 .keymapKey:nth-child(5),#keymap.alice .r4 .keymapKey:nth-child(6),#keymap.alice .r4 .keymapKey:nth-child(7) {
    margin-left: -11px;
    margin-top: 2px;
    transform: rotate(10deg)
}

#keymap.alice .r4 .keymapKey:nth-child(12) {
    margin-left: -5px;
    margin-top: 4px
}

#keymap.alice .r4 .keymapKey:nth-child(11),#keymap.alice .r4 .keymapKey:nth-child(5) {
    margin-top: 10px
}

#keymap.alice .r4 .keymapKey:nth-child(10),#keymap.alice .r4 .keymapKey:nth-child(6) {
    margin-top: 18px
}

#keymap.alice .r4 .keymapKey:nth-child(7) {
    margin-top: 24px
}

#keymap.alice .r4 .keymapKey:nth-child(10),#keymap.alice .r4 .keymapKey:nth-child(11),#keymap.alice .r4 .keymapKey:nth-child(12) {
    margin-left: -25%;
    transform: rotate(-10deg)
}

#keymap.alice .r5 {
    grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr
}

#keymap.alice .keySplitSpace {
    opacity: 1
}

#keymap.alice div.keySpace {
    margin-left: -5%;
    margin-top: 21%;
    transform: rotate(10deg)
}

#keymap.alice div.keySplitSpace {
    margin-left: -33%;
    margin-top: 20%;
    transform: rotate(-10deg)
}

#keymap.alice div#KeyBackslash.keymapKey {
    visibility: hidden
}

#keymap.alice div.extraKey {
    align-items: center;
    background-color: transparent;
    border: .05rem solid;
    border-color: var(--sub-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    display: flex;
    height: 2rem;
    justify-content: center;
    margin-left: -7px!important;
    margin-top: 25px;
    position: relative;
    text-align: center;
    transform: rotate(-10deg)!important;
    width: 2rem
}

#leaderboardsWrapper #leaderboards {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem 0;
    grid-template-areas: "title buttons" "tables tables";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    min-width: 300px;
    overflow-y: auto;
    padding: 1rem;
    width: 85vw
}

#leaderboardsWrapper #leaderboards .leaderboardsTop {
    align-items: center;
    display: grid;
    grid-template-areas: "title title buttons" "subtitle yesterday buttons";
    grid-template-columns: auto 1fr 20rem;
    min-width: 100%;
    width: 200%
}

#leaderboardsWrapper #leaderboards .leaderboardsTop .buttons {
    grid-area: buttons
}

#leaderboardsWrapper #leaderboards .leaderboardsTop .buttons .timeRange {
    grid-template-columns: 1fr 1fr
}

#leaderboardsWrapper #leaderboards .leaderboardsTop .buttons .timeRange .select2 {
    grid-column: span 2
}

#leaderboardsWrapper #leaderboards .mainTitle {
    font-size: 2.5rem;
    grid-area: title
}

#leaderboardsWrapper #leaderboards .showYesterdayButton {
    grid-area: "yesterday";
    margin-left: 1rem
}

#leaderboardsWrapper #leaderboards .showYesterdayButton .fas {
    margin-right: .3rem
}

#leaderboardsWrapper #leaderboards .subTitle {
    color: var(--sub-color);
    grid-area: subtitle
}

#leaderboardsWrapper #leaderboards .title {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: .5rem
}

#leaderboardsWrapper #leaderboards .tables {
    display: grid;
    font-size: .8rem;
    gap: 1rem;
    grid-area: tables;
    grid-template-columns: 1fr 1fr;
    width: 100%
}

#leaderboardsWrapper #leaderboards .tables .sub {
    opacity: .5
}

#leaderboardsWrapper #leaderboards .tables .alignRight {
    text-align: right
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable {
    display: grid;
    width: 100%
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable .titleAndButtons {
    display: grid;
    grid-template-columns: 1fr auto
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable .titleAndButtons .buttons {
    align-items: center;
    color: var(--sub-color);
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable .titleAndButtons .buttons .button {
    padding-left: 1rem;
    padding-right: 1rem
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable .title {
    grid-area: 1/1;
    line-height: 2rem;
    margin-bottom: 0
}

#leaderboardsWrapper #leaderboards .tables .titleAndTable .subtitle {
    align-self: center;
    color: var(--sub-color);
    grid-area: 1/1;
    justify-self: right
}

#leaderboardsWrapper #leaderboards .tables .leftTableWrapper,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper {
    height: calc(100vh - 14rem);
    overflow-x: auto;
    overflow-y: scroll
}

#leaderboardsWrapper #leaderboards .tables .leftTableWrapper::-webkit-scrollbar,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

#leaderboardsWrapper #leaderboards .tables table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1.25rem max-content auto;
    place-items: center left
}

#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .avatarPlaceholder {
    border-radius: 100%;
    color: var(--sub-color);
    font-size: 1.25rem;
    height: 1.25rem;
    margin-top: -.25rem;
    width: 1.25rem
}

#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .entryName {
    color: var(--text-color);
    cursor: pointer;
    text-decoration: none
}

#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .avatar,#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .avatarPlaceholder {
    grid-column: 1/2;
    grid-row: 1/2
}

#leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .badge {
    font-size: .6rem
}

#leaderboardsWrapper #leaderboards .tables table tr td:first-child {
    text-align: center
}

#leaderboardsWrapper #leaderboards .tables table tr.me td {
    color: var(--main-color)
}

#leaderboardsWrapper #leaderboards .tables table td {
    padding: .5rem
}

#leaderboardsWrapper #leaderboards .tables table thead {
    color: var(--sub-color);
    font-size: .75rem
}

#leaderboardsWrapper #leaderboards .tables table thead td {
    background: var(--bg-color);
    padding: .5rem;
    position: sticky;
    top: 0;
    z-index: 99
}

#leaderboardsWrapper #leaderboards .tables table tbody {
    color: var(--text-color)
}

#leaderboardsWrapper #leaderboards .tables table tbody tr:nth-child(odd) td {
    background: var(--sub-alt-color)
}

#leaderboardsWrapper #leaderboards .tables table tbody td:first-child {
    border-radius: calc(var(--roundness)/2) 0 0 calc(var(--roundness)/2)
}

#leaderboardsWrapper #leaderboards .tables table tbody td:last-child {
    border-radius: 0 calc(var(--roundness)/2) calc(var(--roundness)/2) 0
}

#leaderboardsWrapper #leaderboards .tables table tfoot td {
    background: var(--bg-color);
    bottom: -5px;
    color: var(--main-color);
    padding: 1rem .5rem;
    position: sticky;
    z-index: 4
}

#leaderboardsWrapper #leaderboards .tables table tr td:first-child {
    padding-left: 1rem
}

#leaderboardsWrapper #leaderboards .tables table tr td:last-child {
    padding-right: 1rem
}

#leaderboardsWrapper #leaderboards .buttons .buttonGroup {
    display: grid;
    gap: .5rem;
    grid-area: buttons;
    grid-auto-columns: 1fr;
    grid-auto-flow: row
}

.pageLogin {
    align-items: center;
    display: flex;
    gap: 1rem;
    grid-auto-flow: column;
    height: 100%;
    justify-content: space-around
}

.pageLogin .side {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
    justify-content: center
}

.pageLogin .side input {
    width: 15rem
}

.pageLogin .side.login {
    grid-template-areas: "title forgotButton" "form form"
}

.pageLogin .side.login .title {
    grid-area: title
}

.pageLogin .side.login #forgotPasswordButton {
    font-size: .75rem;
    grid-area: forgotButton;
    line-height: .75rem
}

.pageLogin .side.login form {
    grid-area: form
}

.pageLogin form {
    display: grid;
    gap: .5rem;
    width: 100%
}

.pageLogin .preloader {
    color: var(--main-color);
    font-size: 2rem;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: .25s
}

#monkey {
    animation: shake 0s infinite;
    height: 0;
    margin: 0 auto;
    width: 308px
}

#monkey div {
    height: 200px;
    position: fixed;
    width: 308px
}

#monkey .up {
    background-image: url(../images/monkey/m3.png)
}

#monkey .left {
    background-image: url(../images/monkey/m1.png)
}

#monkey .right {
    background-image: url(../images/monkey/m2.png)
}

#monkey .both {
    background-image: url(../images/monkey/m4.png)
}

#monkey .fast .up {
    background-image: url(../images/monkey/m3_fast.png)
}

#monkey .fast .left {
    background-image: url(../images/monkey/m1_fast.png)
}

#monkey .fast .right {
    background-image: url(../images/monkey/m2_fast.png)
}

#monkey .fast .both {
    background-image: url(../images/monkey/m4_fast.png)
}

#menu {
    color: var(--sub-color);
    display: grid;
    font-size: 1rem;
    gap: .5rem;
    grid-auto-flow: column;
    line-height: 1rem;
    width: -moz-fit-content;
    width: fit-content
}

#menu .textButton .text {
    align-self: center;
    font-size: .65em;
    line-height: 0
}

#menu .textButton .icon,#menu .textButton .loading,#menu .textButton .user {
    display: grid;
    height: 1.25em;
    place-content: center center;
    width: 1.25em
}

#menu .textButton.showAlerts {
    position: relative
}

#menu .textButton.account {
    align-items: center;
    position: relative
}

#menu .textButton.account .avatar,#menu .textButton.account .loading,#menu .textButton.account .user {
    grid-column: 1/2;
    grid-row: 1/2;
    height: 1.25em;
    width: 1.25em
}

#menu .textButton.account .levelAndBar {
    transition: .125s
}

#menu .textButton.account .level {
    align-self: center;
    background: var(--sub-color);
    border-radius: calc(var(--roundness)/2);
    color: var(--bg-color);
    font-size: .65em;
    line-height: .65em;
    padding: .4em;
    transition: .125s;
    width: -moz-max-content;
    width: max-content
}

#menu .textButton.account .xpBar {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    bottom: -.5em;
    height: .25em;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%
}

#menu .textButton.account .xpBar .bar {
    background: var(--main-color);
    border-radius: var(--roundness);
    height: 100%;
    left: 0;
    width: 0
}

#menu .textButton.account .xpBar .xpGain {
    color: var(--main-color);
    font-size: .75em;
    left: 100%;
    margin-left: .5em;
    position: absolute;
    top: .2em;
    transform: translateY(-50%)
}

#menu .textButton.account .xpBar .xpBreakdown {
    color: var(--text-color);
    display: grid;
    justify-items: center;
    margin-top: .75em;
    position: absolute;
    width: 100%
}

#menu .textButton.account .xpBar .xpBreakdown .text {
    font-size: .75em;
    position: absolute;
    width: -moz-max-content;
    width: max-content
}

#menu .textButton.account:hover .level {
    background-color: var(--text-color)
}

#menu .separator {
    background-color: var(--sub-color);
    height: 1rem;
    width: 2px
}

#top.focus #menu .textButton.discord:after {
    background: 0 0
}

#top.focus #menu {
    color: transparent!important
}

#top.focus #menu .notificationBubble {
    opacity: 0!important
}

#top.focus #menu .textButton {
    color: transparent!important
}

#top.focus #menu .levelAndBar,#top.focus #menu .textButton.account .avatar {
    opacity: 0!important
}

#top {
    align-items: center;
    font-size: 2.3rem;
    grid-auto-flow: column;
    grid-template-areas: "logo menu";
    line-height: 2.3rem;
    padding: 0 5px;
    z-index: 2
}

#top,#top .logo {
    display: grid;
    gap: .5rem;
    grid-template-columns: auto 1fr;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#top .logo {
    cursor: pointer;
    white-space: nowrap
}

#top .logo .icon {
    align-items: center;
    background-color: transparent;
    display: grid;
    width: 2.5rem
}

#top .logo .icon svg path {
    fill: var(--main-color);
    transition: .25s
}

#top .logo .text {
    font-family: Lexend Deca;
    font-size: 2rem;
    font-weight: unset;
    line-height: 2rem;
    margin-block-end:unset;margin-block-start:unset;margin-top: -.23em;
    position: relative;
    transition: color .25s
}

#top .logo .text .top {
    color: var(--sub-color);
    font-size: .325em;
    left: .35em;
    line-height: .325em;
    position: absolute;
    transition: color .25s,opacity .25s
}

#top .logo .bottom {
    color: var(--main-color);
    cursor: pointer;
    margin-left: -.15rem;
    transition: .25s
}

#top .config {
    grid-area: config;
    transition: .125s
}

#top .config .mobileConfig {
    display: none
}

#top .config .mobileConfig .textButton {
    font-size: 2rem;
    margin-right: -1rem;
    padding: .5rem 1rem
}

#top .config .desktopConfig {
    grid-gap: .2rem;
    display: grid;
    grid-template-rows: .7rem .7rem .7rem;
    justify-items: self-end;
    justify-self: right
}

#top .config .desktopConfig .group .title {
    color: var(--sub-color);
    font-size: .5rem;
    line-height: .5rem;
    margin-bottom: .15rem
}

#top .config .desktopConfig .group .buttons {
    display: flex
}

#top .config .desktopConfig .group .buttons .textButton {
    font-size: .7rem;
    line-height: .7rem;
    padding: 0 .15rem
}

#top .config .desktopConfig .group.disabled {
    opacity: .25;
    pointer-events: none
}

#top .config .desktopConfig .numbersMode,#top .config .desktopConfig .punctuationMode {
    margin-bottom: -.1rem
}

#top.focus {
    color: var(--sub-color)!important
}

#top.focus .result {
    opacity: 0!important
}

#top.focus .icon svg path {
    fill: var(--sub-color)!important
}

#top.focus .logo .text {
    color: var(--sub-color)!important
}

#top.focus .config,#top.focus .logo .top {
    opacity: 0!important
}

#notificationCenter {
    display: grid;
    gap: 1rem;
    position: fixed;
    right: 1rem;
    top: 1rem;
    transition: opacity .125s;
    width: 350px;
    z-index: 99999999
}

#notificationCenter .clearAll.button {
    font-size: .75em
}

#notificationCenter.focus .clearAll,#notificationCenter.focus .notif {
    visibility: hidden
}

#notificationCenter.focus .notif.important {
    visibility: visible
}

#notificationCenter .history {
    display: grid;
    gap: 1rem
}

#notificationCenter .notif {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    box-shadow: 0 0 0 .2em var(--sub-color);
    color: var(--sub-color);
    display: grid;
    grid-template-columns: min-content auto min-content;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#notificationCenter .notif .icon {
    align-items: center;
    color: var(--sub-color);
    display: grid;
    font-size: 1.25em;
    padding: 1rem
}

#notificationCenter .notif .message {
    color: var(--text-color);
    padding: 1rem 1rem 1rem 0
}

#notificationCenter .notif .message .title {
    color: var(--sub-color);
    font-size: .75em
}

#notificationCenter .notif.bad {
    box-shadow: 0 0 0 .2em var(--error-color);
    color: var(--error-color)
}

#notificationCenter .notif.bad .icon {
    color: var(--error-color)
}

#notificationCenter .notif.good {
    box-shadow: 0 0 0 .2em var(--main-color);
    color: var(--main-color)
}

#notificationCenter .notif.good .icon {
    color: var(--main-color)
}

#notificationCenter .notif:hover {
    cursor: pointer
}

#notificationCenter .notif:hover:after {
    opacity: 1
}

#notificationCenter .notif:after {
    background: rgba(0,0,0,.5);
    border-radius: var(--roundness);
    content: "";
    font-family: Font Awesome\ 5 Free;
    font-size: 2.5rem;
    font-weight: 900;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: .125s
}

#notificationCenter .notif:after,.popupWrapper {
    align-items: center;
    display: grid;
    height: 100%;
    width: 100%
}

.popupWrapper {
    background: rgba(0,0,0,.75);
    justify-content: center;
    left: 0;
    padding: 2rem 0;
    position: fixed;
    top: 0;
    z-index: 1000
}

#customTextPopupWrapper #customTextPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-areas: "topButtons topButtons topButtons" "textArea textArea checkboxes" "ok ok ok";
    grid-template-columns: 1fr 1fr 1fr;
    max-height: 100%;
    max-width: 1200px;
    overflow-y: auto;
    padding: 2rem
}

#customTextPopupWrapper #customTextPopup .buttonsTop {
    grid-area: topButtons
}

#customTextPopupWrapper #customTextPopup .textAreaWrapper {
    grid-area: textArea
}

#customTextPopupWrapper #customTextPopup .inputs {
    grid-area: checkboxes
}

#customTextPopupWrapper #customTextPopup .button.apply {
    grid-area: ok
}

#customTextPopupWrapper #customTextPopup .replaceNewLinesButtons {
    display: grid;
    font-size: .75rem;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 0 1rem;
    width: 100%
}

#customTextPopupWrapper #customTextPopup .replaceNewLinesButtons .buttonGroup {
    display: grid;
    grid-template-columns: 1fr 1fr
}

#customTextPopupWrapper #customTextPopup .replaceNewLinesButtons .buttonGroup .button:first-child {
    border-radius: var(--roundness) 0 0 var(--roundness)
}

#customTextPopupWrapper #customTextPopup .replaceNewLinesButtons .buttonGroup .button:last-child {
    border-radius: 0 var(--roundness) var(--roundness) 0
}

#customTextPopupWrapper #customTextPopup .replaceNewLinesButtons.disabled {
    opacity: .5;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#customTextPopupWrapper #customTextPopup .longCustomTextWarning {
    background: rgba(0,0,0,.9);
    border-radius: var(--roundness);
    bottom: 0;
    display: grid;
    left: 0;
    place-items: center center;
    position: absolute;
    right: 0;
    top: 0
}

#customTextPopupWrapper #customTextPopup .longCustomTextWarning .textAndButton {
    display: grid;
    gap: 1rem;
    max-width: 20rem;
    text-align: center;
    width: 80%
}

#customTextPopupWrapper #customTextPopup .buttonsTop {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

#customTextPopupWrapper #customTextPopup .savedTexts {
    display: grid;
    gap: .5rem
}

#customTextPopupWrapper #customTextPopup .savedTexts .title {
    color: var(--sub-color)
}

#customTextPopupWrapper #customTextPopup .savedTexts .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

#customTextPopupWrapper #customTextPopup textarea {
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    color: var(--main-color);
    color: var(--text-color);
    font-family: var(--font);
    font-size: 1rem;
    height: 450px;
    outline: none;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1rem;
    resize: vertical;
    width: 100%
}

#customTextPopupWrapper #customTextPopup .inputs {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    height: -moz-min-content;
    height: min-content;
    justify-items: left;
    margin: 1rem 0
}

#customTextPopupWrapper #customTextPopup .inputs.disabled {
    opacity: .5;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#customTextPopupWrapper #customTextPopup .randomInputFields {
    align-items: center;
    display: grid;
    font-size: .75rem;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
    width: 100%
}

#customTextPopupWrapper #customTextPopup .randomInputFields.disabled {
    opacity: .5;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#savedTextsPopupWrapper #savedTextsPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    display: grid;
    gap: 1rem;
    max-height: 80vh;
    overflow: auto;
    padding: 2rem;
    width: 400px
}

#savedTextsPopupWrapper #savedTextsPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#savedTextsPopupWrapper #savedTextsPopup .list {
    display: grid;
    gap: 1rem
}

#savedTextsPopupWrapper #savedTextsPopup .list .savedText {
    display: grid;
    gap: .5rem;
    grid-template-columns: 2fr 3rem
}

#savedTextsPopupWrapper #savedTextsPopup .list .savedText .button .fas {
    pointer-events: none
}

#savedTextsPopupWrapper #savedTextsPopup .listLong {
    display: grid;
    gap: 1rem
}

#savedTextsPopupWrapper #savedTextsPopup .listLong .savedText {
    display: grid;
    gap: .5rem;
    grid-template-columns: 2fr 1fr 3rem
}

#savedTextsPopupWrapper #savedTextsPopup .listLong .savedText .button .fas {
    pointer-events: none
}

#saveCustomTextPopupWrapper #saveCustomTextPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    display: grid;
    gap: 1rem;
    max-height: 80vh;
    overflow: auto;
    padding: 2rem;
    width: 400px
}

#saveCustomTextPopupWrapper #saveCustomTextPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#wordFilterPopupWrapper #wordFilterPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    display: grid;
    gap: 2rem;
    grid-template-areas: "top top top" "left divider right" "bottom bottom bottom";
    grid-template-columns: 1fr auto 1fr;
    padding: 2rem;
    width: 800px
}

#wordFilterPopupWrapper #wordFilterPopup .top {
    grid-area: top
}

#wordFilterPopupWrapper #wordFilterPopup .leftSide {
    grid-area: left
}

#wordFilterPopupWrapper #wordFilterPopup .rightSide {
    grid-area: right
}

#wordFilterPopupWrapper #wordFilterPopup .bottom {
    grid-area: bottom
}

#wordFilterPopupWrapper #wordFilterPopup .bottom,#wordFilterPopupWrapper #wordFilterPopup .leftSide,#wordFilterPopupWrapper #wordFilterPopup .rightSide,#wordFilterPopupWrapper #wordFilterPopup .top {
    display: grid;
    gap: 1rem;
    height: -moz-max-content;
    height: max-content
}

#wordFilterPopupWrapper #wordFilterPopup input {
    width: 100%
}

#wordFilterPopupWrapper #wordFilterPopup .wordFilterLanguage {
    grid-column: span 2
}

#wordFilterPopupWrapper #wordFilterPopup .wordFilterLanguage .title {
    width: 100%
}

#wordFilterPopupWrapper #wordFilterPopup .group {
    display: grid;
    gap: .5rem
}

#wordFilterPopupWrapper #wordFilterPopup .lengthgrid {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr
}

#wordFilterPopupWrapper #wordFilterPopup .tip {
    color: var(--sub-color);
    font-size: .8rem
}

#wordFilterPopupWrapper #wordFilterPopup .loadingIndicator {
    justify-self: center
}

#wordFilterPopupWrapper #wordFilterPopup .divider {
    background-color: var(--sub-alt-color);
    border-radius: var(--roundness);
    width: .25rem
}

#quoteRatePopupWrapper #quoteRatePopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    color: var(--sub-color);
    color: var(--text-color);
    display: grid;
    gap: 2rem;
    grid-template-areas: "warning warning warning" "spacer2 spacer2 spacer2" "ratingStats ratingStats submitButton" "spacer spacer spacer" "quote quote quote";
    grid-template-columns: auto 1fr;
    padding: 2rem;
    width: 800px
}

#quoteRatePopupWrapper #quoteRatePopup .warning {
    grid-area: warning
}

#quoteRatePopupWrapper #quoteRatePopup .warning span {
    color: var(--error-color)
}

#quoteRatePopupWrapper #quoteRatePopup .spacer,#quoteRatePopupWrapper #quoteRatePopup .spacer2 {
    background: var(--sub-color);
    border-radius: var(--roundness);
    grid-area: spacer;
    height: .1rem;
    opacity: .25;
    width: 100%
}

#quoteRatePopupWrapper #quoteRatePopup .spacer2 {
    grid-area: spacer2
}

#quoteRatePopupWrapper #quoteRatePopup .submitButton {
    color: var(--sub-color);
    font-size: 2rem;
    grid-area: submitButton
}

#quoteRatePopupWrapper #quoteRatePopup .submitButton:hover {
    color: var(--text-color)
}

#quoteRatePopupWrapper #quoteRatePopup .top {
    color: var(--sub-color);
    font-size: .8rem
}

#quoteRatePopupWrapper #quoteRatePopup .ratingStats {
    display: grid;
    gap: 1rem;
    grid-area: ratingStats;
    grid-template-columns: 1fr 1fr 1fr
}

#quoteRatePopupWrapper #quoteRatePopup .ratingStats .top {
    font-size: 1rem
}

#quoteRatePopupWrapper #quoteRatePopup .ratingStats .val {
    font-size: 2.25rem
}

#quoteRatePopupWrapper #quoteRatePopup .quote {
    display: grid;
    gap: 1rem;
    grid-area: quote;
    grid-template-areas: "text text text" "id length source";
    grid-template-columns: 1fr 1fr 3fr
}

#quoteRatePopupWrapper #quoteRatePopup .quote .text {
    grid-area: text
}

#quoteRatePopupWrapper #quoteRatePopup .quote .id {
    grid-area: id
}

#quoteRatePopupWrapper #quoteRatePopup .quote .length {
    grid-area: length
}

#quoteRatePopupWrapper #quoteRatePopup .quote .source {
    grid-area: source
}

#quoteRatePopupWrapper #quoteRatePopup .stars {
    align-items: center;
    color: var(--sub-color);
    cursor: pointer;
    display: grid;
    font-size: 2rem;
    grid-template-columns: auto auto auto auto auto;
    justify-content: flex-start
}

#quoteRatePopupWrapper #quoteRatePopup .star {
    transition: .125s
}

#quoteRatePopupWrapper #quoteRatePopup i {
    pointer-events: none
}

#quoteRatePopupWrapper #quoteRatePopup .star.active {
    color: var(--text-color)
}

#simplePopupWrapper #simplePopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    padding: 2rem;
    width: 400px
}

#simplePopupWrapper #simplePopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#simplePopupWrapper #simplePopup .inputs {
    display: grid;
    gap: 1rem
}

#simplePopupWrapper #simplePopup .text {
    color: var(--text-color);
    font-size: 1rem
}

#mobileTestConfigPopupWrapper #mobileTestConfigPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    max-width: 400px;
    padding: 1rem;
    width: calc(100vw - 2rem)
}

#mobileTestConfigPopupWrapper #mobileTestConfigPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#mobileTestConfigPopupWrapper #mobileTestConfigPopup .inputs {
    display: grid;
    gap: 1rem
}

#mobileTestConfigPopupWrapper #mobileTestConfigPopup .text {
    color: var(--text-color);
    font-size: 1rem
}

#mobileTestConfigPopupWrapper #mobileTestConfigPopup .group {
    display: grid;
    gap: .5rem
}

#customTestDurationPopupWrapper #customTestDurationPopup,#customTestDurationPopupWrapper #customWordAmountPopup,#customTestDurationPopupWrapper #pbTablesPopup,#customTestDurationPopupWrapper #practiseWordsPopup,#customWordAmountPopupWrapper #customTestDurationPopup,#customWordAmountPopupWrapper #customWordAmountPopup,#customWordAmountPopupWrapper #pbTablesPopup,#customWordAmountPopupWrapper #practiseWordsPopup,#pbTablesPopupWrapper #customTestDurationPopup,#pbTablesPopupWrapper #customWordAmountPopup,#pbTablesPopupWrapper #pbTablesPopup,#pbTablesPopupWrapper #practiseWordsPopup,#practiseWordsPopupWrapper #customTestDurationPopup,#practiseWordsPopupWrapper #customWordAmountPopup,#practiseWordsPopupWrapper #pbTablesPopup,#practiseWordsPopupWrapper #practiseWordsPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    padding: 2rem;
    width: 400px
}

#customTestDurationPopupWrapper #customTestDurationPopup .title,#customTestDurationPopupWrapper #customWordAmountPopup .title,#customTestDurationPopupWrapper #pbTablesPopup .title,#customTestDurationPopupWrapper #practiseWordsPopup .title,#customWordAmountPopupWrapper #customTestDurationPopup .title,#customWordAmountPopupWrapper #customWordAmountPopup .title,#customWordAmountPopupWrapper #pbTablesPopup .title,#customWordAmountPopupWrapper #practiseWordsPopup .title,#pbTablesPopupWrapper #customTestDurationPopup .title,#pbTablesPopupWrapper #customWordAmountPopup .title,#pbTablesPopupWrapper #pbTablesPopup .title,#pbTablesPopupWrapper #practiseWordsPopup .title,#practiseWordsPopupWrapper #customTestDurationPopup .title,#practiseWordsPopupWrapper #customWordAmountPopup .title,#practiseWordsPopupWrapper #pbTablesPopup .title,#practiseWordsPopupWrapper #practiseWordsPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#customTestDurationPopupWrapper #customTestDurationPopup .tip,#customTestDurationPopupWrapper #customWordAmountPopup .tip,#customTestDurationPopupWrapper #pbTablesPopup .tip,#customTestDurationPopupWrapper #practiseWordsPopup .tip,#customWordAmountPopupWrapper #customTestDurationPopup .tip,#customWordAmountPopupWrapper #customWordAmountPopup .tip,#customWordAmountPopupWrapper #pbTablesPopup .tip,#customWordAmountPopupWrapper #practiseWordsPopup .tip,#pbTablesPopupWrapper #customTestDurationPopup .tip,#pbTablesPopupWrapper #customWordAmountPopup .tip,#pbTablesPopupWrapper #pbTablesPopup .tip,#pbTablesPopupWrapper #practiseWordsPopup .tip,#practiseWordsPopupWrapper #customTestDurationPopup .tip,#practiseWordsPopupWrapper #customWordAmountPopup .tip,#practiseWordsPopupWrapper #pbTablesPopup .tip,#practiseWordsPopupWrapper #practiseWordsPopup .tip {
    color: var(--sub-color);
    font-size: .75rem
}

#customTestDurationPopupWrapper #customTestDurationPopup .text,#customTestDurationPopupWrapper #customWordAmountPopup .text,#customTestDurationPopupWrapper #pbTablesPopup .text,#customTestDurationPopupWrapper #practiseWordsPopup .text,#customWordAmountPopupWrapper #customTestDurationPopup .text,#customWordAmountPopupWrapper #customWordAmountPopup .text,#customWordAmountPopupWrapper #pbTablesPopup .text,#customWordAmountPopupWrapper #practiseWordsPopup .text,#pbTablesPopupWrapper #customTestDurationPopup .text,#pbTablesPopupWrapper #customWordAmountPopup .text,#pbTablesPopupWrapper #pbTablesPopup .text,#pbTablesPopupWrapper #practiseWordsPopup .text,#practiseWordsPopupWrapper #customTestDurationPopup .text,#practiseWordsPopupWrapper #customWordAmountPopup .text,#practiseWordsPopupWrapper #pbTablesPopup .text,#practiseWordsPopupWrapper #practiseWordsPopup .text {
    color: var(--text-color);
    font-size: 1rem
}

#customTestDurationPopupWrapper #customTestDurationPopup .preview,#customWordAmountPopupWrapper #customTestDurationPopup .preview,#pbTablesPopupWrapper #customTestDurationPopup .preview,#practiseWordsPopupWrapper #customTestDurationPopup .preview {
    color: var(--sub-color);
    font-size: .75rem
}

#googleSignUpPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    padding: 2rem;
    width: 400px
}

#googleSignUpPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#googleSignUpPopup .inputAndIndicator {
    position: relative
}

#googleSignUpPopup .inputAndIndicator input {
    width: 100%
}

#googleSignUpPopup .inputAndIndicator .checkStatus {
    cursor: pointer;
    display: grid;
    grid-template-columns: 2.25rem;
    grid-template-rows: 2.25rem;
    height: 2.25rem;
    place-items: center center;
    position: absolute;
    right: 0;
    top: 0;
    width: 2.25rem
}

#googleSignUpPopup .inputAndIndicator .checkStatus .available,#googleSignUpPopup .inputAndIndicator .checkStatus .checking,#googleSignUpPopup .inputAndIndicator .checkStatus .taken,#googleSignUpPopup .inputAndIndicator .checkStatus .unavailable {
    grid-column: 1/2;
    grid-row: 1/2
}

#googleSignUpPopup .inputAndIndicator .checkStatus .checking {
    color: var(--sub-color)
}

#googleSignUpPopup .inputAndIndicator .checkStatus .available {
    color: var(--main-color)
}

#googleSignUpPopup .inputAndIndicator .checkStatus .taken,#googleSignUpPopup .inputAndIndicator .checkStatus .unavailable {
    color: var(--error-color)
}

#shareTestSettingsPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    padding: 2rem;
    width: 500px
}

#shareTestSettingsPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#shareTestSettingsPopup .subgroup {
    padding-left: 2rem
}

#shareTestSettingsPopup .tooLongWarning {
    color: var(--error-color);
    font-size: .75rem
}

#cookiePopupWrapper .extensionMessage {
    bottom: 2rem;
    font-size: .75rem;
    padding: 1rem;
    position: fixed;
    right: 2rem;
    width: 465px
}

#cookiePopupWrapper #cookiePopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    bottom: 2rem;
    display: grid;
    gap: 1rem;
    padding: 2rem;
    position: fixed;
    right: 2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 465px;
    z-index: 100000001
}

#cookiePopupWrapper #cookiePopup .main {
    display: grid;
    gap: 1rem
}

#cookiePopupWrapper #cookiePopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#cookiePopupWrapper #cookiePopup .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin-top: .25rem
}

#cookiePopupWrapper #cookiePopup .buttons .openSettings {
    grid-column: span 2
}

#cookiePopupWrapper #cookiePopup .settings {
    display: grid;
    gap: 1rem
}

#cookiePopupWrapper #cookiePopup .settings .customTextCheckbox {
    background: var(--sub-color)
}

#cookiePopupWrapper #cookiePopup .settings .cookie label {
    display: grid;
    gap: 0 1rem;
    grid-template-areas: "title check" "description check";
    grid-template-columns: 1fr min-content
}

#cookiePopupWrapper #cookiePopup .settings .cookie label .title {
    font-size: 1.25rem;
    grid-area: title
}

#cookiePopupWrapper #cookiePopup .settings .cookie label .description {
    grid-area: description
}

#cookiePopupWrapper #cookiePopup .settings .cookie label .customTextCheckbox {
    grid-area: check;
    place-self: center
}

#cookiePopupWrapper #cookiePopup .settings .cookie.ads label {
    grid-template-areas: "title" "description";
    grid-template-columns: 1fr
}

#cookiePopupWrapper #cookiePopup .settings .cookie.ads label a {
    margin-top: .25rem
}

#cookiePopupWrapper #cookiePopup .settings .cookie.ads label .textButton {
    padding: .25em 0 0;
    text-align: unset;
    width: unset
}

#videoAdPopupWrapper {
    display: flex;
    padding: 2rem
}

#videoAdPopupWrapper #videoAdPopup {
    aspect-ratio: 16/9;
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-areas: "middle";
    max-width: 1000px;
    padding: 2rem;
    width: 100%
}

#videoAdPopupWrapper #videoAdPopup .preloader {
    align-self: center;
    color: var(--main-color);
    display: grid;
    font-size: 2rem;
    gap: 1rem;
    grid-area: middle;
    height: -moz-max-content;
    height: max-content;
    place-items: center center
}

#videoAdPopupWrapper #videoAdPopup .video {
    grid-area: middle
}

#pbTablesPopupWrapper #pbTablesPopup {
    max-height: calc(100vh - 10rem);
    min-width: 50rem;
    overflow-y: scroll
}

#pbTablesPopupWrapper #pbTablesPopup .title {
    color: var(--text-color)
}

#pbTablesPopupWrapper #pbTablesPopup table {
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--text-color)
}

#pbTablesPopupWrapper #pbTablesPopup table td {
    padding: .5rem
}

#pbTablesPopupWrapper #pbTablesPopup table thead {
    color: var(--sub-color);
    font-size: .75rem
}

#pbTablesPopupWrapper #pbTablesPopup table tbody tr:nth-child(odd) td {
    background: var(--sub-alt-color)
}

#pbTablesPopupWrapper #pbTablesPopup table td.infoIcons span {
    margin: 0 .1rem
}

#pbTablesPopupWrapper #pbTablesPopup table .miniResultChartButton {
    cursor: pointer;
    opacity: .25;
    transition: .25s
}

#pbTablesPopupWrapper #pbTablesPopup table .miniResultChartButton:hover {
    opacity: 1
}

#pbTablesPopupWrapper #pbTablesPopup table .sub {
    opacity: .5
}

#pbTablesPopupWrapper #pbTablesPopup table td {
    text-align: right
}

#pbTablesPopupWrapper #pbTablesPopup table td:nth-child(6),#pbTablesPopupWrapper #pbTablesPopup table td:nth-child(7) {
    text-align: center
}

#pbTablesPopupWrapper #pbTablesPopup table tbody td:first-child {
    font-size: 1.5rem
}

#customThemeShareWrapper #customThemeShare {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem;
    width: 50vw
}

#quoteSearchPopupWrapper .highlight {
    color: var(--main-color)
}

#quoteSearchPopupWrapper #quoteSearchPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto auto auto 1fr;
    height: 80vh;
    max-width: 1000px;
    padding: 2rem;
    width: 80vw
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchTop {
    display: flex;
    justify-content: space-between
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchTop .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchTop .buttons {
    display: grid;
    gap: .5rem;
    width: 33%
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchTop .buttons .button {
    width: 100%
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.5fr 1fr max-content
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper #searchBox {
    width: 100%
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper #toggleShowFavorites {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: .4rem 1rem
}

#quoteSearchPopupWrapper #quoteSearchPopup #extraResults {
    color: var(--sub-color);
    text-align: center
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults {
    align-content: baseline;
    display: grid;
    gap: .5rem;
    height: auto;
    overflow-y: scroll
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult {
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    gap: .5rem;
    grid-auto-rows: auto;
    grid-template-areas: "text text text text text" "id len source report favorite";
    grid-template-columns: 1fr 1fr 3fr 0fr 0fr;
    height: -moz-min-content;
    height: min-content;
    padding: 1rem;
    transition: .25s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .text {
    color: var(--text-color);
    grid-area: text;
    overflow: visible
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .id {
    color: var(--sub-color);
    font-size: .8rem;
    grid-area: id
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .length {
    color: var(--sub-color);
    font-size: .8rem;
    grid-area: len
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .source {
    color: var(--sub-color);
    font-size: .8rem;
    grid-area: source
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .resultChevron {
    align-items: center;
    color: var(--sub-color);
    display: flex;
    font-size: 2rem;
    grid-area: chevron;
    justify-items: center
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .report {
    color: var(--sub-color);
    grid-area: report;
    transition: .25s
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .report:hover {
    color: var(--text-color)
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .favorite {
    color: var(--sub-color);
    grid-area: favorite;
    transition: .25s
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .favorite:hover {
    color: var(--text-color)
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult .sub {
    opacity: .5
}

#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchResults .searchResult:hover {
    background: var(--sub-alt-color);
    border-radius: 5px
}

#settingsImportWrapper #settingsImport {
    width: 50vw
}

#quoteSubmitPopup,#settingsImportWrapper #settingsImport {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem
}

#quoteSubmitPopup {
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    height: 100%;
    max-height: 40rem;
    width: 1000px
}

#quoteSubmitPopup label {
    color: var(--sub-color);
    margin-bottom: -1rem
}

#quoteSubmitPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#quoteSubmitPopup textarea {
    line-height: 1.2rem;
    min-height: 5rem;
    padding: 10px;
    resize: vertical;
    width: 100%
}

#quoteSubmitPopup .characterCount {
    color: var(--sub-color);
    position: absolute;
    right: .25rem;
    top: -1.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#quoteSubmitPopup .characterCount.red {
    color: var(--error-color)
}

#apeKeysPopup {
    align-items: baseline;
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: max-content auto;
    max-width: calc(100vw - 4rem);
    min-height: 18rem;
    overflow-y: scroll;
    padding: 2rem;
    width: 1000px
}

#apeKeysPopup .top {
    display: grid;
    grid-template-columns: 1fr auto
}

#apeKeysPopup .top .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#apeKeysPopup .top .button {
    padding: .4rem 2rem
}

#apeKeysPopup .textButton {
    justify-content: center
}

#apeKeysPopup .keyButtons {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column
}

#apeKeysPopup .keyButtons .button {
    width: 3rem
}

#apeKeysPopup table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

#apeKeysPopup table tr td:first-child {
    text-align: center
}

#apeKeysPopup table tr.me td {
    color: var(--main-color)
}

#apeKeysPopup table td {
    padding: .5rem
}

#apeKeysPopup table thead {
    color: var(--sub-color);
    font-size: .75rem
}

#apeKeysPopup table thead td {
    background: var(--bg-color);
    padding: .5rem;
    position: sticky;
    top: 0;
    z-index: 99
}

#apeKeysPopup table tbody {
    color: var(--text-color)
}

#apeKeysPopup table tbody tr:nth-child(odd) td {
    background: var(--sub-alt-color)
}

#apeKeysPopup table tfoot td {
    background: var(--bg-color);
    bottom: -5px;
    color: var(--main-color);
    padding: 1rem .5rem;
    position: sticky;
    z-index: 4
}

#apeKeysPopup table tr td:first-child {
    padding-left: 1rem
}

#apeKeysPopup table tr td:last-child {
    padding-right: 1rem
}

#quoteApprovePopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto 1fr;
    height: 80vh;
    padding: 2rem;
    width: 1000px
}

#quoteApprovePopup .top {
    display: flex;
    justify-content: space-between
}

#quoteApprovePopup .top .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#quoteApprovePopup .top .button {
    width: 33%
}

#quoteApprovePopup .quotes {
    align-content: baseline;
    display: grid;
    gap: 1rem;
    height: auto;
    overflow-y: scroll
}

#quoteApprovePopup .quotes .quote {
    box-sizing: border-box;
    display: grid;
    gap: 1rem;
    grid-auto-rows: auto 2rem;
    grid-template-columns: 1fr auto;
    height: -moz-min-content;
    height: min-content;
    margin-bottom: 1rem;
    transition: .25s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

#quoteApprovePopup .quotes .quote .text {
    color: var(--text-color);
    grid-column: 1/2;
    grid-row: 1/2;
    min-height: 4rem;
    overflow: visible;
    resize: vertical
}

#quoteApprovePopup .quotes .quote .source {
    color: var(--text-color);
    grid-column: 1/2;
    grid-row: 2/3
}

#quoteApprovePopup .quotes .quote .buttons {
    color: var(--sub-color);
    display: flex;
    flex-direction: column;
    grid-column: 2/3;
    grid-row: 1/4;
    justify-content: center;
    margin-right: 1rem
}

#quoteApprovePopup .quotes .quote .bottom {
    color: var(--sub-color);
    display: flex;
    justify-content: space-around
}

#quoteApprovePopup .quotes .quote .bottom .length.red {
    color: var(--error-color)
}

#quoteApprovePopup .quotes .quote .sub {
    opacity: .5
}

#quoteApprovePopup .quotes .searchResult:hover {
    background: var(--sub-alt-color);
    border-radius: 5px
}

#quoteReportPopupWrapper #quoteReportPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    height: auto;
    margin-left: 2rem;
    max-height: 40rem;
    max-width: 800px;
    overflow-y: scroll;
    padding: 2rem;
    width: calc(100% - 4rem)
}

#quoteReportPopupWrapper #quoteReportPopup label {
    color: var(--sub-color);
    margin-bottom: -1rem
}

#quoteReportPopupWrapper #quoteReportPopup .quote {
    font-size: 1.5rem
}

#quoteReportPopupWrapper #quoteReportPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#quoteReportPopupWrapper #quoteReportPopup textarea {
    line-height: 1.2rem;
    min-height: 5rem;
    padding: 10px;
    resize: vertical;
    width: 100%
}

#quoteReportPopupWrapper #quoteReportPopup .characterCount {
    color: var(--sub-color);
    position: absolute;
    right: .25rem;
    top: -1.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#quoteReportPopupWrapper #quoteReportPopup .characterCount.red {
    color: var(--error-color)
}

#userReportPopupWrapper #userReportPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    height: auto;
    margin-left: 2rem;
    max-height: 40rem;
    max-width: 800px;
    overflow-y: scroll;
    padding: 2rem;
    width: calc(100% - 4rem)
}

#userReportPopupWrapper #userReportPopup label {
    color: var(--sub-color);
    margin-bottom: -1rem
}

#userReportPopupWrapper #userReportPopup .user {
    font-size: 1.5rem
}

#userReportPopupWrapper #userReportPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#userReportPopupWrapper #userReportPopup textarea {
    line-height: 1.2rem;
    min-height: 5rem;
    padding: 10px;
    resize: vertical;
    width: 100%
}

#userReportPopupWrapper #userReportPopup .characterCount {
    color: var(--sub-color);
    position: absolute;
    right: .25rem;
    top: -1.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#userReportPopupWrapper #userReportPopup .characterCount.red {
    color: var(--error-color)
}

#resultEditTagsPanelWrapper #resultEditTagsPanel {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem;
    width: 500px
}

#resultEditTagsPanelWrapper #resultEditTagsPanel .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

#versionHistoryWrapper {
    align-items: start;
    background: rgba(0,0,0,.75);
    display: grid;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 5rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

#versionHistoryWrapper #versionHistory {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    height: 100%;
    overflow-y: scroll;
    padding: 2rem;
    width: 75vw
}

#versionHistoryWrapper #versionHistory hr {
    background: var(--sub-alt-color);
    border: none;
    border-radius: var(--roundness);
    height: .25rem;
    margin: 1rem 0
}

#versionHistoryWrapper #versionHistory h3 {
    color: var(--sub-color);
    font-size: 1.25rem;
    margin: 0 0 .5rem
}

#versionHistoryWrapper #versionHistory .preloader {
    color: var(--main-color);
    display: grid;
    font-size: 2rem;
    place-content: center center
}

#versionHistoryWrapper #versionHistory .tip {
    color: var(--sub-color);
    text-align: center
}

#versionHistoryWrapper #versionHistory .releases {
    display: grid;
    gap: 4rem
}

#versionHistoryWrapper #versionHistory .releases .release {
    display: grid;
    grid-template-areas: "title date" "body body"
}

#versionHistoryWrapper #versionHistory .releases .release .title {
    color: var(--sub-color);
    font-size: 2rem;
    grid-area: title
}

#versionHistoryWrapper #versionHistory .releases .release .date {
    align-self: center;
    color: var(--sub-color);
    grid-area: date;
    text-align: right
}

#versionHistoryWrapper #versionHistory .releases .release .body {
    color: var(--text-color);
    grid-area: body
}

#versionHistoryWrapper #versionHistory .releases .release:last-child {
    margin-bottom: 2rem
}

#supportMeWrapper #supportMe {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto auto auto;
    max-height: 100%;
    overflow-y: scroll;
    padding: 2rem;
    width: 900px
}

#supportMeWrapper #supportMe .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#supportMeWrapper #supportMe .text {
    color: var(--text-color)
}

#supportMeWrapper #supportMe .subtext {
    color: var(--sub-color);
    font-size: .75rem
}

#supportMeWrapper #supportMe .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

#supportMeWrapper #supportMe .buttons .button {
    display: block;
    display: grid;
    gap: 1rem;
    height: 100%;
    padding: 1rem 0;
    text-decoration: none;
    width: 100%
}

#supportMeWrapper #supportMe .buttons .button .text {
    transition: .25s
}

#supportMeWrapper #supportMe .buttons .button:hover .text {
    color: var(--bg-color)
}

#supportMeWrapper #supportMe .buttons .button .icon {
    font-size: 3rem;
    line-height: 3rem
}

#shareCustomThemeWrapper #shareCustomThemeEdit {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem;
    width: 500px
}

#shareCustomThemeWrapper #shareCustomThemeEdit .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

#shareCustomThemeWrapper #shareCustomThemeEdit .checkbox {
    align-items: center;
    display: flex
}

#shareCustomThemeWrapper #shareCustomThemeEdit .checkbox input[type=checkbox] {
    margin-right: .5em
}

#shareCustomThemeWrapper #shareCustomThemeEdit .title {
    color: var(--sub-color);
    font-size: 1.5rem;
    line-height: 2rem
}

#contactPopupWrapper #contactPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    grid-template-rows: auto auto auto;
    margin: 0 2rem;
    max-height: 100%;
    max-width: 900px;
    overflow-y: scroll;
    padding: 2rem
}

#contactPopupWrapper #contactPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem;
    line-height: 2rem
}

#contactPopupWrapper #contactPopup .text {
    color: var(--text-color)
}

#contactPopupWrapper #contactPopup .text span {
    color: var(--error-color)
}

#contactPopupWrapper #contactPopup .subtext {
    color: var(--sub-color);
    font-size: .75rem;
    grid-area: subtext
}

#contactPopupWrapper #contactPopup .buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr
}

#contactPopupWrapper #contactPopup .buttons .button {
    align-items: center;
    display: block;
    display: grid;
    grid-template-areas: "icon textgroup";
    grid-template-columns: auto 1fr;
    height: 100%;
    padding: 1rem 0;
    text-align: left;
    text-decoration: none;
    width: 100%
}

#contactPopupWrapper #contactPopup .buttons .button .textGroup {
    grid-area: textgroup
}

#contactPopupWrapper #contactPopup .buttons .button .text {
    font-size: 1.5rem;
    line-height: 2rem;
    transition: .25s
}

#contactPopupWrapper #contactPopup .buttons .button:hover .text {
    color: var(--bg-color)
}

#contactPopupWrapper #contactPopup .buttons .button .icon {
    font-size: 2rem;
    grid-area: icon;
    line-height: 2rem;
    padding: 0 1rem
}

#presetWrapper #presetEdit {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem
}

#presetWrapper #presetEdit .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#streakHourOffsetPopupWrapper #streakHourOffsetPopup {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    overflow-y: scroll;
    padding: 2rem;
    width: 400px
}

#streakHourOffsetPopupWrapper #streakHourOffsetPopup .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#streakHourOffsetPopupWrapper #streakHourOffsetPopup .red {
    color: var(--error-color)
}

#editProfilePopupWrapper #editProfilePopup,#editProfilePopupWrapper #newResultFilterPresetPopup,#editProfilePopupWrapper #tagsEdit,#newResultFilterPresetPopupWrapper #editProfilePopup,#newResultFilterPresetPopupWrapper #newResultFilterPresetPopup,#newResultFilterPresetPopupWrapper #tagsEdit,#tagsWrapper #editProfilePopup,#tagsWrapper #newResultFilterPresetPopup,#tagsWrapper #tagsEdit {
    background: var(--bg-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem;
    max-height: 90vh;
    overflow-y: scroll;
    padding: 2rem
}

#editProfilePopupWrapper #editProfilePopup .title,#editProfilePopupWrapper #newResultFilterPresetPopup .title,#editProfilePopupWrapper #tagsEdit .title,#newResultFilterPresetPopupWrapper #editProfilePopup .title,#newResultFilterPresetPopupWrapper #newResultFilterPresetPopup .title,#newResultFilterPresetPopupWrapper #tagsEdit .title,#tagsWrapper #editProfilePopup .title,#tagsWrapper #newResultFilterPresetPopup .title,#tagsWrapper #tagsEdit .title {
    color: var(--sub-color);
    font-size: 1.5rem
}

#editProfilePopup {
    max-width: 600px;
    width: 100%
}

#editProfilePopup label {
    color: var(--sub-color)
}

#editProfilePopup input {
    width: 100%
}

#editProfilePopup textarea {
    line-height: 1.2rem;
    max-height: 10rem;
    min-height: 5rem;
    padding: 10px;
    resize: vertical;
    width: 100%
}

#editProfilePopup .socialURL {
    display: flex
}

#editProfilePopup .socialURL>p {
    margin-block:.5rem;margin-inline-end:.5rem}

#editProfilePopup .badgeSelectionContainer {
    display: flex;
    flex-wrap: wrap
}

#editProfilePopup .badgeSelectionItem {
    cursor: pointer;
    margin-bottom: .5rem;
    margin-right: .5rem;
    opacity: 25%;
    width: -moz-max-content;
    width: max-content
}

#editProfilePopup .badgeSelectionItem.selected,#editProfilePopup .badgeSelectionItem:hover {
    opacity: 100%
}

#alertsPopupWrapper {
    justify-content: end;
    padding: 0;
    z-index: 99999999
}

#alertsPopupWrapper #alertsPopup {
    background: var(--bg-color);
    border-radius: var(--roundness) 0 0 var(--roundness);
    height: 100%;
    margin-right: -10rem;
    overflow: hidden;
    padding: 2rem calc(1rem - 7px) 2rem 1rem;
    right: 0;
    top: 0;
    width: calc(350px + 2rem)
}

#alertsPopupWrapper #alertsPopup .mobileClose {
    display: none;
    margin: 0 1rem 2rem
}

#alertsPopupWrapper #alertsPopup .separator {
    background-color: var(--sub-alt-color);
    border-radius: calc(var(--roundness)/2);
    height: .25rem;
    width: 100%
}

#alertsPopupWrapper #alertsPopup .scrollWrapper {
    align-content: baseline;
    display: grid;
    gap: 2rem;
    height: 100%;
    overflow-y: scroll;
    padding: 0 1rem
}

#alertsPopupWrapper #alertsPopup .accountAlerts>.title,#alertsPopupWrapper #alertsPopup .notificationHistory>.title,#alertsPopupWrapper #alertsPopup .psas>.title {
    color: var(--sub-color);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#alertsPopupWrapper #alertsPopup .accountAlerts>.claimAll,#alertsPopupWrapper #alertsPopup .accountAlerts>.deleteAll {
    font-size: .75em;
    margin-bottom: 1rem
}

#alertsPopupWrapper #alertsPopup .accountAlerts>.claimAll .fas,#alertsPopupWrapper #alertsPopup .accountAlerts>.deleteAll .fas {
    margin-right: .25em
}

#alertsPopupWrapper #alertsPopup .list {
    display: grid;
    gap: 1rem
}

#alertsPopupWrapper #alertsPopup .list .nothing {
    color: var(--text-color);
    font-size: .75rem;
    margin: 2rem 0;
    text-align: center;
    width: 100%
}

#alertsPopupWrapper #alertsPopup .list .preloader {
    color: var(--main-color);
    font-size: 1rem;
    margin: 2rem 0;
    text-align: center;
    width: 100%
}

#alertsPopupWrapper #alertsPopup .list .item {
    display: grid;
    gap: .25rem .5rem;
    grid-template-areas: "indicator title buttons" "indicator body buttons";
    grid-template-columns: .25rem auto 1rem
}

#alertsPopupWrapper #alertsPopup .list .item .indicator {
    background-color: var(--sub-alt-color);
    border-radius: calc(var(--roundness)/2);
    grid-area: indicator;
    height: 100%;
    transition: .125s;
    width: .25rem
}

#alertsPopupWrapper #alertsPopup .list .item .indicator.main {
    background-color: var(--main-color)
}

#alertsPopupWrapper #alertsPopup .list .item .indicator.error {
    background-color: var(--error-color)
}

#alertsPopupWrapper #alertsPopup .list .item .indicator.sub {
    background-color: var(--sub-color)
}

#alertsPopupWrapper #alertsPopup .list .item .title {
    color: var(--sub-color);
    font-size: .75rem;
    grid-area: title
}

#alertsPopupWrapper #alertsPopup .list .item .body {
    color: var(--text-color);
    font-size: .75rem;
    grid-area: body;
    opacity: 1;
    transition: .125s
}

#alertsPopupWrapper #alertsPopup .list .item .buttons {
    align-content: center;
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-area: buttons;
    grid-auto-flow: row;
    opacity: 0;
    transition: .125s;
    width: 100%
}

#alertsPopupWrapper #alertsPopup .list .item .buttons .button {
    display: grid;
    font-size: .75rem;
    height: 100%;
    line-height: 1.25em;
    padding: .5em
}

#alertsPopupWrapper #alertsPopup .list .item:hover .body,#alertsPopupWrapper #alertsPopup .list .item:hover .buttons {
    opacity: 1
}

#alertsPopupWrapper #alertsPopup .psas .list .item {
    grid-template-areas: "indicator body";
    grid-template-columns: .25rem auto
}

#alertsPopupWrapper #alertsPopup .psas .list .item .body {
    opacity: 1
}

#alertsPopupWrapper #alertsPopup .notificationHistory .list .item {
    grid-template-areas: "indicator title" "indicator body";
    grid-template-columns: .25rem auto
}

#alertsPopupWrapper #alertsPopup .notificationHistory .list .item .title {
    color: var(--sub-color);
    font-size: .75rem
}

#alertsPopupWrapper #alertsPopup .notificationHistory .list .item .body {
    opacity: 1
}

#alertsPopupWrapper #alertsPopup .accountAlerts .title {
    display: grid;
    grid-template-columns: 1fr auto
}

#alertsPopupWrapper #alertsPopup .accountAlerts .list .item {
    grid-template-areas: "indicator timestamp buttons" "indicator title buttons" "indicator body buttons"
}

#alertsPopupWrapper #alertsPopup .accountAlerts .list .item .timestamp {
    color: var(--sub-color);
    font-size: .6rem;
    grid-area: timestamp;
    opacity: .5
}

#alertsPopupWrapper #alertsPopup .accountAlerts .list .item .rewards {
    margin-top: .35rem;
    overflow: hidden
}

.pageProfileSearch {
    align-content: center;
    display: grid;
    height: 100%
}

.pageProfileSearch .search {
    display: grid;
    font-size: 1.25rem;
    gap: 1rem;
    grid-template-columns: 1fr auto;
    justify-self: center;
    max-width: 400px;
    width: 100%
}

.pageProfileSearch .search .title {
    color: var(--sub-color);
    font-size: 1.25em;
    grid-column: span 2
}

.pageProfileSearch .search .button {
    height: auto
}

.pageProfile {
    align-content: center;
    display: grid;
    height: 100%
}

.pageProfile .content {
    display: grid
}

.pageProfile .preloader {
    border-radius: 100%;
    color: var(--main-color);
    font-size: 3rem;
    padding: 1rem
}

.pageProfile .error,.pageProfile .preloader {
    background: var(--bg-color);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1
}

.pageProfile .error {
    border-radius: var(--roundness);
    color: var(--error-color);
    font-size: 2rem;
    padding: 2rem
}

.pageProfile .error .message {
    display: inline
}

.profile {
    display: grid;
    gap: 2rem;
    grid-template-areas: "info info" "leaderboards leaderboards" "pbsTime pbsWords";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr
}

.profile .pbsWords {
    display: grid;
    gap: 1rem;
    grid-area: pbsWords
}

.profile .pbsTime {
    display: grid;
    gap: 1rem;
    grid-area: pbsTime
}

.profile .details,.profile .leaderboardsPositions,.profile .pbsTime,.profile .pbsWords {
    align-content: center;
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: baseline;
    padding: 1rem;
    position: relative
}

.profile .details .buttonGroup,.profile .leaderboardsPositions .buttonGroup,.profile .pbsTime .buttonGroup,.profile .pbsWords .buttonGroup {
    display: grid;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem
}

.profile .details .buttonGroup .button:first-child,.profile .leaderboardsPositions .buttonGroup .button:first-child,.profile .pbsTime .buttonGroup .button:first-child,.profile .pbsWords .buttonGroup .button:first-child {
    border-top-right-radius: var(--roundness)
}

.profile .details .buttonGroup .button:last-child,.profile .leaderboardsPositions .buttonGroup .button:last-child,.profile .pbsTime .buttonGroup .button:last-child,.profile .pbsWords .buttonGroup .button:last-child {
    border-bottom-right-radius: var(--roundness)
}

.profile .details .buttonGroup .button,.profile .leaderboardsPositions .buttonGroup .button,.profile .pbsTime .buttonGroup .button,.profile .pbsWords .buttonGroup .button {
    align-content: center;
    align-items: center;
    border-radius: 0;
    color: var(--sub-color);
    display: grid;
    height: 100%
}

.profile .details .buttonGroup .button:hover,.profile .leaderboardsPositions .buttonGroup .button:hover,.profile .pbsTime .buttonGroup .button:hover,.profile .pbsWords .buttonGroup .button:hover {
    color: var(--bg-color)
}

.profile .details .editProfileButton,.profile .leaderboardsPositions .editProfileButton,.profile .pbsTime .editProfileButton,.profile .pbsWords .editProfileButton {
    font-size: .9rem
}

.profile .leaderboardsPositions {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-area: leaderboards;
    grid-template-areas: "title t15 t60";
    grid-template-columns: unset;
    justify-items: center
}

.profile .leaderboardsPositions .title {
    color: var(--sub-color);
    grid-area: title;
    text-align: center
}

.profile .leaderboardsPositions .group {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr
}

.profile .leaderboardsPositions .group .testType {
    color: var(--sub-color)
}

.profile .leaderboardsPositions .group .pos {
    font-size: 2rem
}

.profile .leaderboardsPositions .group.t15 {
    grid-area: t15
}

.profile .leaderboardsPositions .group.t60 {
    grid-area: t60
}

.profile .pbsTime .group,.profile .pbsWords .group {
    display: grid;
    gap: .25rem;
    grid-template-areas: "center";
    justify-self: center
}

.profile .pbsTime .group .fullTest,.profile .pbsTime .group .quick,.profile .pbsWords .group .fullTest,.profile .pbsWords .group .quick {
    grid-area: center
}

.profile .pbsTime .group .quick,.profile .pbsWords .group .quick {
    display: grid;
    gap: .25rem;
    justify-items: center;
    justify-self: center
}

.profile .pbsTime .group .quick .acc,.profile .pbsTime .group .quick .test,.profile .pbsTime .group .quick .wpm,.profile .pbsWords .group .quick .acc,.profile .pbsWords .group .quick .test,.profile .pbsWords .group .quick .wpm {
    display: grid
}

.profile .pbsTime .group .quick .test,.profile .pbsWords .group .quick .test {
    align-content: end;
    color: var(--sub-color);
    font-size: .8em;
    line-height: 100%
}

.profile .pbsTime .group .quick .wpm,.profile .pbsWords .group .quick .wpm {
    align-content: center;
    font-size: 2.5em;
    line-height: 100%
}

.profile .pbsTime .group .quick .acc,.profile .pbsWords .group .quick .acc {
    font-size: 1.5em;
    line-height: 100%;
    opacity: .75
}

.profile .pbsTime .group .fullTest,.profile .pbsWords .group .fullTest {
    background: var(--sub-alt-color);
    display: grid;
    font-size: .8em;
    gap: .25rem;
    grid-template-columns: 1fr;
    justify-items: center;
    opacity: 0;
    transition: .125s;
    z-index: 1
}

.profile .pbsTime .group .fullTest:hover,.profile .pbsWords .group .fullTest:hover {
    opacity: 1
}

.profile .pbsTime .group .fullTest div:first-child,.profile .pbsTime .group .fullTest div:last-child,.profile .pbsWords .group .fullTest div:first-child,.profile .pbsWords .group .fullTest div:last-child {
    color: var(--sub-color);
    text-align: center
}

.profile .details {
    align-content: center;
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    display: grid;
    gap: 1rem 1rem;
    grid-area: info;
    grid-auto-flow: column;
    padding: 1rem 3rem 1rem 1rem
}

.profile .details.none {
    grid-template-areas: "avAndName sep1 typingStats ";
    grid-template-columns: 17.5rem auto 1fr
}

.profile .details.none .typingStats {
    align-items: center;
    align-self: center;
    grid-template-columns: 1fr 1fr 1fr
}

.profile .details.none .typingStats .value {
    font-size: 2rem;
    line-height: 2rem
}

.profile .details.bioAndKey {
    grid-template-areas: "avAndName sep1 typingStats sep2 bioAndKey";
    grid-template-columns: 17.5rem auto 1fr auto 2fr
}

.profile .details.bioAndKey .typingStats .value {
    font-size: 1.5rem;
    line-height: 1.5rem
}

.profile .details.soc {
    grid-template-areas: "avAndName sep1 typingStats sep3 socials";
    grid-template-columns: 17.5rem auto 1fr auto auto
}

.profile .details.soc .typingStats {
    align-items: center;
    align-self: center;
    grid-template-columns: 1fr 1fr 1fr
}

.profile .details.soc .typingStats .value {
    font-size: 2rem;
    line-height: 2rem
}

.profile .details.both {
    grid-template-areas: "avAndName sep1 typingStats sep2 bioAndKey sep3 socials";
    grid-template-columns: 17.5rem auto 1fr auto 2fr auto auto
}

.profile .details.both .typingStats .value {
    font-size: 1.5rem;
    line-height: 1.5rem
}

.profile .details.both .bio,.profile .details.both .keyboard {
    font-size: .75rem
}

.profile .details .avatarAndName {
    grid-area: avAndName
}

.profile .details .sep1 {
    grid-area: sep1
}

.profile .details .typingStats {
    grid-area: typingStats
}

.profile .details .sep2 {
    grid-area: sep2
}

.profile .details .bioAndKeyboard {
    grid-area: bioAndKey;
    word-break: break-word
}

.profile .details .sep3 {
    grid-area: sep3
}

.profile .details .socials {
    grid-area: socials
}

.profile .details .avatarAndName {
    align-items: center;
    align-self: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 5rem 1fr;
    width: 100%
}

.profile .details .avatarAndName .avatars {
    display: grid;
    font-size: 5rem;
    height: 5rem;
    line-height: 5rem
}

.profile .details .avatarAndName .avatars .placeholderAvatar {
    color: var(--sub-color);
    margin-left: .1rem
}

.profile .details .avatarAndName .avatars .avatar {
    aspect-ratio: 1/1;
    height: auto;
    width: 100%
}

.profile .details .avatarAndName .avatars div {
    grid-column: 1/2;
    grid-row: 1/2
}

.profile .details .avatarAndName .name {
    font-size: 1rem;
    line-height: 100%;
    width: -moz-max-content;
    width: max-content
}

.profile .details .avatarAndName .name .bannedIcon {
    color: var(--error-color);
    display: inline-grid;
    font-size: 75%;
    margin-left: .5em
}

.profile .details .avatarAndName .badge {
    font-size: .7em;
    width: -moz-max-content;
    width: max-content
}

.profile .details .avatarAndName .allBadges {
    display: flex;
    flex-wrap: wrap
}

.profile .details .avatarAndName .allBadges .badge {
    margin-right: .35rem
}

.profile .details .avatarAndName .joined,.profile .details .avatarAndName .streak {
    color: var(--sub-color);
    font-size: .7em;
    line-height: .7rem
}

.profile .details .avatarAndName .badge,.profile .details .avatarAndName .joined,.profile .details .avatarAndName .streak {
    margin-top: .35rem
}

.profile .details .avatarAndName .levelAndBar {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-column: span 2;
    grid-template-columns: auto 1fr auto
}

.profile .details .avatarAndName .levelAndBar .xpBar {
    background: var(--bg-color);
    border-radius: var(--roundness);
    bottom: -.25rem;
    height: .5rem;
    left: 0;
    pointer-events: none;
    width: 100%
}

.profile .details .avatarAndName .levelAndBar .xpBar .bar {
    background: var(--main-color);
    border-radius: var(--roundness);
    height: 100%;
    left: 0;
    width: 50%
}

.profile .details .avatarAndName .levelAndBar .xp {
    color: var(--sub-color);
    font-size: .75rem;
    justify-self: end
}

.profile .details .socials {
    display: grid;
    justify-content: end
}

.profile .details .socials .title {
    display: none
}

.profile .details .socials .value {
    align-items: center;
    display: grid;
    gap: .25rem;
    height: 100%;
    width: -moz-max-content;
    width: max-content
}

.profile .details .socials .value a {
    color: var(--text-color)
}

.profile .details .socials .value a:hover {
    color: var(--main-color)
}

.profile .details .typingStats {
    gap: .5rem;
    height: 100%;
    width: 100%
}

.profile .details .bioAndKeyboard,.profile .details .typingStats {
    align-content: space-around;
    align-self: stretch;
    display: grid;
    grid-auto-flow: column
}

.profile .details .bioAndKeyboard {
    gap: 1rem
}

.profile .details .bio .value,.profile .details .keyboard .value {
    white-space: pre-line
}

.profile .details .bioAndKeyboard.vertical,.profile .details .typingStats.vertical {
    grid-auto-flow: row
}

.profile .details .separator {
    background: var(--bg-color);
    border-radius: var(--roundness);
    height: auto;
    width: .5rem
}

.profile .details .big .value {
    font-size: 1.5rem;
    line-height: 1.3rem
}

.profile .details .socials .value {
    margin-top: .05rem
}

.profile .details .title {
    color: var(--sub-color);
    font-size: .8rem
}

.profile .personalBestTables {
    grid-area: pbs
}

::-webkit-scrollbar {
    width: 7px
}

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

::-webkit-scrollbar-thumb {
    background: var(--sub-color);
    border-radius: 2px!important;
    -webkit-transition: .125s;
    transition: .125s
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-color)
}

::-webkit-scrollbar-thumb:active {
    background: var(--main-color)
}

::-webkit-scrollbar-corner {
    background: var(--sub-color)
}

.pageSettings {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.pageSettings .tip {
    color: var(--sub-color)
}

.pageSettings .sectionGroupTitle {
    align-items: baseline;
    color: var(--sub-color);
    cursor: pointer;
    display: flex;
    font-size: 2rem;
    line-height: 2rem;
    transition: .25s
}

.pageSettings .sectionGroupTitle:hover {
    color: var(--text-color)
}

.pageSettings .sectionGroupTitle .fas {
    margin-right: .5em
}

.pageSettings .sectionGroupTitle .fas.rotate {
    transform: rotate(-90deg)
}

.pageSettings .sectionSpacer {
    height: 1.5rem
}

.pageSettings .settingsGroup {
    display: grid;
    gap: 2rem
}

.pageSettings .settingsGroup.quickNav .links {
    display: grid;
    grid-auto-flow: column;
    text-align: center
}

.pageSettings .section {
    align-items: center;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    display: grid;
    grid-template-areas: "title buttons" "text buttons";
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    row-gap: .5rem
}

.pageSettings .section .button.danger {
    box-shadow: 0 0 0 .15em var(--error-color);
    color: var(--text-color)
}

.pageSettings .section .button.danger:hover {
    background: var(--text-color);
    color: var(--bg-color)
}

.pageSettings .section .inputAndButton {
    display: grid;
    gap: .5rem;
    grid-template-columns: 8fr 1fr;
    margin-bottom: .5rem
}

.pageSettings .section .inputAndButton .button {
    height: auto
}

.pageSettings .section .inputAndButton .button .fas {
    margin-right: 0
}

.pageSettings .section.autoSwitchThemeInputs {
    gap: 2rem;
    grid-template-areas: unset;
    grid-template-columns: 1fr 3fr 1fr 3fr
}

.pageSettings .section.autoSwitchThemeInputs select {
    width: 100%
}

.pageSettings .section.themes .tabContainer [tabcontent=custom] label.button:first-child {
    color: var(--text-color)
}

.pageSettings .section.themes .tabContainer [tabcontent=custom] label.button {
    color: var(--bg-color)
}

.pageSettings .section.customBackgroundFilter .groups {
    display: grid;
    gap: 2rem;
    grid-area: buttons;
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem
}

.pageSettings .section.customBackgroundFilter .groups .group {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 2fr
}

.pageSettings .section.customBackgroundFilter .groups .group .title,.pageSettings .section.customBackgroundFilter .groups .group .value {
    color: var(--text-color)
}

.pageSettings .section.customBackgroundFilter .saveContainer {
    display: grid;
    gap: 1rem;
    grid-column: -1/-3;
    grid-template-columns: 1fr 1fr 1fr
}

.pageSettings .section.customBackgroundFilter .fas {
    margin-right: 0
}

.pageSettings .section .allCustomThemes.buttons {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 1rem
}

.pageSettings .section .customThemeEdit {
    display: grid;
    gap: 1rem
}

.pageSettings .section .customThemeEdit .customThemeInputs {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1.5fr 1fr 1.5fr
}

.pageSettings .section .customThemeEdit .customThemeButtons {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr
}

.pageSettings .section .customThemeEdit .inputAndButton {
    grid-template-columns: 1fr auto
}

.pageSettings .section .customThemeEdit input {
    width: 100%
}

.pageSettings .section .customThemeEdit label {
    display: grid;
    place-content: center start
}

.pageSettings .section .customThemeEdit .spacer {
    grid-column: span 4
}

.pageSettings .section .customThemeEdit .buttons {
    display: grid;
    gap: .5rem;
    grid-column: 1/5;
    grid-template-columns: 1fr 1fr 1fr
}

.pageSettings .section .groupTitle {
    align-items: baseline;
    color: var(--sub-color);
    display: flex;
    font-size: 1rem;
    font-weight: 300;
    grid-area: title;
    margin: 0
}

.pageSettings .section .groupTitle .fab,.pageSettings .section .groupTitle .far,.pageSettings .section .groupTitle .fas,.pageSettings .section .groupTitle .textIcon {
    margin-right: .5em
}

.pageSettings .section.themes .groupTitle .fab,.pageSettings .section.themes .groupTitle .far,.pageSettings .section.themes .groupTitle .fas {
    margin-bottom: 0
}

.pageSettings .section p {
    color: var(--sub-color);
    grid-area: text;
    margin: 0
}

.pageSettings .section>.text {
    align-self: normal;
    color: var(--text-color);
    grid-area: text
}

.pageSettings .section>.text .red {
    color: var(--error-color);
    line-height: 2rem
}

.pageSettings .section .inputs {
    grid-area: buttons
}

.pageSettings .section .buttons {
    display: grid;
    gap: .5rem;
    grid-area: buttons;
    grid-auto-columns: 1fr;
    grid-auto-flow: column
}

.pageSettings .section .buttons.vertical {
    grid-auto-flow: unset
}

.pageSettings .section.discordIntegration .info {
    color: var(--main-color);
    grid-area: buttons;
    text-align: center
}

.pageSettings .section.discordIntegration #discordButtonGroup {
    display: grid;
    gap: .5rem;
    grid-auto-flow: column;
    justify-content: center
}

.pageSettings .section.discordIntegration #unlinkDiscordButton,.pageSettings .section.discordIntegration #updateDiscordAvatarButton {
    font-size: .75rem;
    line-height: .7rem;
    margin: .5rem auto 0
}

.pageSettings .section.discordIntegration .howto {
    color: var(--text-color);
    margin-top: 1rem
}

.pageSettings .section.tags .tagsListAndButton {
    grid-area: buttons
}

.pageSettings .section.tags .tag {
    grid-template-columns: 6fr 1fr 1fr 1fr;
    margin-bottom: .5rem
}

.pageSettings .section.presets .presetsListAndButton {
    grid-area: buttons
}

.pageSettings .section.presets .preset {
    grid-template-columns: 7fr 1fr 1fr;
    margin-bottom: .5rem
}

.pageSettings .section.themes .tabContainer {
    grid-area: buttons;
    position: relative
}

.pageSettings .section.themes .tabContainer .tabContent {
    height: auto;
    overflow: revert
}

.pageSettings .section.themes .tabContainer .tabContent.customTheme {
    grid-template-columns: 1fr;
    margin-top: 1rem
}

.pageSettings .section.themes .tabContainer .tabContent.customTheme .colorText {
    color: var(--text-color)
}

.pageSettings .section.themes .tabContainer .tabContent .text {
    align-self: center
}

.pageSettings .section.themes .theme.button .favButton {
    opacity: 0;
    overflow: hidden;
    transition: .25s;
    width: 1.25rem
}

.pageSettings .section.themes .theme.button .favButton .far,.pageSettings .section.themes .theme.button .favButton .fas {
    margin: 0;
    pointer-events: none
}

.pageSettings .section.themes .theme.button .favButton:hover {
    cursor: pointer
}

.pageSettings .section.themes .theme.button .favButton.active,.pageSettings .section.themes .theme.button:hover .favButton {
    opacity: 1;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button .delButton,.pageSettings .section.themes .customTheme.button .editButton {
    opacity: 0;
    overflow: hidden;
    transition: .25s;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button .delButton .far,.pageSettings .section.themes .customTheme.button .delButton .fas,.pageSettings .section.themes .customTheme.button .editButton .far,.pageSettings .section.themes .customTheme.button .editButton .fas {
    margin: 0;
    pointer-events: none
}

.pageSettings .section.themes .customTheme.button .delButton:hover,.pageSettings .section.themes .customTheme.button .editButton:hover {
    cursor: pointer
}

.pageSettings .section.themes .customTheme.button .delButton.active,.pageSettings .section.themes .customTheme.button .editButton.active {
    opacity: 1;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button .delButton {
    justify-self: end
}

.pageSettings .section.themes .customTheme.button:hover {
    transform: scale(1.1)
}

.pageSettings .section.themes .customTheme.button:hover .delButton,.pageSettings .section.themes .customTheme.button:hover .editButton {
    opacity: 1;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button,.pageSettings .section.themes .theme.button {
    display: grid;
    grid-template-columns: 1fr auto 1fr
}

.pageSettings .section.themes .customTheme.button .text,.pageSettings .section.themes .theme.button .text {
    color: inherit
}

.pageSettings .section.themes .customTheme.button .activeIndicator,.pageSettings .section.themes .theme.button .activeIndicator {
    color: inherit;
    opacity: 0;
    overflow: hidden;
    transition: .25s;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button .activeIndicator .far,.pageSettings .section.themes .theme.button .activeIndicator .far {
    margin: 0
}

.pageSettings .section.themes .customTheme.button .activeIndicator.active,.pageSettings .section.themes .theme.button .activeIndicator.active {
    opacity: 1;
    width: 1.25rem
}

.pageSettings .section.themes .customTheme.button.active,.pageSettings .section.themes .theme.button.active {
    box-shadow: 0 0 0 .2em var(--main-color);
    transform: scale(1.1)
}

.pageSettings .section.themes .customTheme.button.active .activeIndicator,.pageSettings .section.themes .customTheme.button.active .themeBubbles,.pageSettings .section.themes .theme.button.active .activeIndicator,.pageSettings .section.themes .theme.button.active .themeBubbles {
    opacity: 1
}

.pageSettings .section.themes {
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    grid-template-areas: "title tabs" "text text" "buttons buttons";
    grid-template-columns: 2fr 1fr
}

.pageSettings .section.themes .tabs {
    display: grid;
    gap: .5rem;
    grid-area: tabs;
    grid-auto-columns: 1fr;
    grid-auto-flow: column
}

.pageSettings .section.themes .buttons {
    display: grid;
    gap: .5rem;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit,minmax(18rem,1fr))!important;
    margin-left: 0;
}

.pageSettings .section.themes .buttons .button {
    transition: transform .125s
}

.pageSettings .section.themes .buttons .button:hover .themeBubbles {
    opacity: 1
}

.pageSettings .section.themes .buttons .button .themeBubbles {
    border-radius: 1.25em;
    display: grid;
    gap: .5em;
    grid-auto-flow: column;
    height: 1em;
    justify-self: end;
    margin-top: .125em;
    opacity: 0;
    transition: .125s;
    width: -moz-max-content;
    width: max-content
}

.pageSettings .section.themes .buttons .button .themeBubbles .themeBubble {
    border-radius: 100%;
    height: 1em;
    width: 1em
}

.pageSettings .section.fullWidth {
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    grid-template-areas: "title tabs" "text text" "buttons buttons";
    grid-template-columns: 2fr 1fr
}

.pageSettings .section.fullWidth .buttons {
    display: grid;
    gap: .5rem;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-left: 0;
}

.pageSettings .section.highlightMode .buttons,.pageSettings .section.randomTheme .buttons {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
}

.buttons div.theme:hover {
    transform: scale(1.1)
}

.highlightContainer {
    overflow: hidden;
    pointer-events: none;
    position: absolute
}

.highlightContainer .highlight {
    background-color: var(--sub-color);
    border-radius: var(--roundness);
    height: 100%;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transition: opacity .125s linear;
    z-index: 1
}

.highlightContainer .highlight.withAnimation {
    transition: left .25s ease,right .25s ease,opacity .125s linear
}

.highlightContainer .highlight.highlight-hidden {
    opacity: 0
}

.highlightContainer .inputWord {
    color: var(--bg-color);
    font-size: 1em;
    font-variant: no-common-ligatures;
    line-height: 1em;
    position: absolute
}

.highlightContainer .inputWordsContainer {
    position: relative
}

.highlightContainer .inputWordsContainer.withAnimation {
    transition: all .25s ease
}

#timerWrapper {
    opacity: 0;
    position: relative;
    transition: .25s;
    z-index: -1;
    z-index: 99
}

#timerWrapper #timer {
    background: #000;
    height: .5rem;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1
}

#timerWrapper #timer.timerMain {
    background: var(--main-color)
}

#timerWrapper #timer.timerSub {
    background: var(--sub-color)
}

#timerWrapper #timer.timerText {
    background: var(--text-color)
}

.pageTest,.pageTest #typingTest {
    position: relative
}

.pageTest .ssWatermark {
    color: var(--sub-color);
    font-size: 1.25rem;
    line-height: 1rem;
    text-align: right
}

.pageTest #timerNumber {
    bottom: clamp(2rem,12vw,6rem);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    transition: none
}

.pageTest #largeLiveWpmAndAcc,.pageTest #timerNumber {
    color: #000;
    display: grid;
    font-size: clamp(1rem,12vw,10rem);
    height: 0;
    justify-content: center;
    left: 0;
    line-height: 0;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%;
    width: 0;
    z-index: -1
}

.pageTest #largeLiveWpmAndAcc {
    gap: clamp(1rem,8vw,5rem);
    grid-auto-flow: column;
    top: clamp(1rem,10vw,5rem)
}

.pageTest #largeLiveWpmAndAcc #liveAcc,.pageTest #largeLiveWpmAndAcc #liveBurst,.pageTest #largeLiveWpmAndAcc #liveWpm {
    opacity: 0
}

.pageTest #largeLiveWpmAndAcc.timerMain,.pageTest #timerNumber.timerMain {
    color: var(--main-color)
}

.pageTest #timer.timerMain {
    background: var(--main-color)
}

.pageTest #largeLiveWpmAndAcc.timerSub,.pageTest #timerNumber.timerSub {
    color: var(--sub-color)
}

.pageTest #timer.timerSub {
    background: var(--sub-color)
}

.pageTest #largeLiveWpmAndAcc.timerText,.pageTest #timerNumber.timerText {
    color: var(--text-color)
}

.pageTest #timer.timerText {
    background: var(--text-color)
}

#words {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    height: -moz-fit-content;
    padding-bottom: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

#words .newline {
    width: inherit
}

#words letter {
    border-bottom: .05em solid transparent
}

#words letter.dead {
    border-bottom-color: var(--sub-color);
    border-bottom-width: .05em
}

#words letter.nlChar,#words letter.tabChar {
    margin: 0 .25rem;
    opacity: .2
}

#words.rightToLeftTest,#words.rightToLeftTest .word {
    direction: rtl
}

#words.withLigatures letter {
    display: inline
}

#words.blurred {
    filter: blur(4px);
    -webkit-filter: blur(4px);
    opacity: .25
}

#words.flipped .word {
    color: var(--text-color)
}

#words.flipped .word letter.dead {
    border-bottom-color: var(--sub-color)!important
}

#words.flipped .word letter.correct {
    color: var(--sub-color)
}

#words.flipped .word letter.corrected {
    border-bottom: 2px dotted var(--main-color);
    color: var(--sub-color)
}

#words.flipped .word letter.extraCorrected {
    border-right: 2px dotted var(--main-color)
}

#words.flipped.highlight-next-three-words .word.active,#words.flipped.highlight-next-three-words .word.active+.word,#words.flipped.highlight-next-three-words .word.active+.word+.word,#words.flipped.highlight-next-three-words .word.active+.word+.word+.word,#words.flipped.highlight-next-two-words .word.active,#words.flipped.highlight-next-two-words .word.active+.word,#words.flipped.highlight-next-two-words .word.active+.word+.word,#words.flipped.highlight-next-word .word.active,#words.flipped.highlight-next-word .word.active+.word {
    color: var(--sub-color)
}

#words.colorfulMode .word letter.dead {
    border-bottom-color: var(--main-color)!important
}

#words.colorfulMode .word letter.correct {
    color: var(--main-color)
}

#words.colorfulMode .word letter.corrected {
    border-bottom: 2px dotted var(--text-color);
    color: var(--main-color)
}

#words.colorfulMode .word letter.extraCorrected {
    border-right: 2px dotted var(--text-color)
}

#words.colorfulMode .word letter.incorrect {
    color: var(--colorful-error-color)
}

#words.colorfulMode .word letter.incorrect.extra {
    color: var(--colorful-error-extra-color)
}

#words.colorfulMode.highlight-next-three-words .word.active,#words.colorfulMode.highlight-next-three-words .word.active+.word,#words.colorfulMode.highlight-next-three-words .word.active+.word+.word,#words.colorfulMode.highlight-next-three-words .word.active+.word+.word+.word,#words.colorfulMode.highlight-next-two-words .word.active,#words.colorfulMode.highlight-next-two-words .word.active+.word,#words.colorfulMode.highlight-next-two-words .word.active+.word+.word,#words.colorfulMode.highlight-next-word .word.active,#words.colorfulMode.highlight-next-word .word.active+.word,#words.flipped.colorfulMode .word {
    color: var(--main-color)
}

#words.flipped.colorfulMode .word letter.dead {
    border-bottom-color: var(--sub-color)!important
}

#words.flipped.colorfulMode .word letter.correct {
    color: var(--sub-color)
}

#words.flipped.colorfulMode .word letter.corrected {
    border-bottom: 2px dotted var(--main-color);
    color: var(--sub-color)
}

#words.flipped.colorfulMode .word letter.extraCorrected {
    border-right: 2px dotted var(--main-color)
}

#words.flipped.colorfulMode .word letter.incorrect {
    color: var(--colorful-error-color)
}

#words.flipped.colorfulMode .word letter.incorrect.extra {
    color: var(--colorful-error-extra-color)
}

#words.flipped.colorfulMode.highlight-next-three-words .word.active,#words.flipped.colorfulMode.highlight-next-three-words .word.active+.word,#words.flipped.colorfulMode.highlight-next-three-words .word.active+.word+.word,#words.flipped.colorfulMode.highlight-next-three-words .word.active+.word+.word+.word,#words.flipped.colorfulMode.highlight-next-two-words .word.active,#words.flipped.colorfulMode.highlight-next-two-words .word.active+.word,#words.flipped.colorfulMode.highlight-next-two-words .word.active+.word+.word,#words.flipped.colorfulMode.highlight-next-word .word.active,#words.flipped.colorfulMode.highlight-next-word .word.active+.word {
    color: var(--sub-color)
}

#words.tape .word {
    margin: .25em .5em .75em 0
}

#words.highlight-next-three-words .word.active,#words.highlight-next-three-words .word.active+.word,#words.highlight-next-three-words .word.active+.word+.word,#words.highlight-next-three-words .word.active+.word+.word+.word,#words.highlight-next-two-words .word.active,#words.highlight-next-two-words .word.active+.word,#words.highlight-next-two-words .word.active+.word+.word,#words.highlight-next-word .word.active,#words.highlight-next-word .word.active+.word {
    color: var(--text-color)
}

.word {
    border-bottom: 2px solid transparent;
    color: var(--sub-color);
    font-size: 1em;
    font-variant: no-common-ligatures;
    line-height: 1em;
    margin: .25em
}

.word letter {
    display: inline-block
}

.word.lastbeforenewline:after {
    content: "";
    font-family: Font Awesome\ 5 Free;
    font-weight: 600;
    margin-left: .5rem;
    opacity: .25
}

.word .wordInputHighlight {
    background: var(--sub-color);
    border-radius: var(--roundness);
    color: var(--bg-color);
    margin-left: -.5rem;
    opacity: 1;
    padding: .5rem;
    pointer-events: none;
    position: absolute;
    text-shadow: none;
    top: -.5rem;
    transition: .25s;
    white-space: nowrap;
    z-index: 10
}

.word .wordInputHighlight.withSpeed .speed {
    color: var(--sub-alt-color);
    font-size: .75rem
}

.word.nocursor {
    cursor: none
}

.word.error {
    border-bottom: 2px solid var(--error-color);
    text-shadow: 1px 0 0 var(--bg-color),-1px 0 0 var(--bg-color),0 1px 0 var(--bg-color),1px 1px 0 var(--bg-color),-1px 1px 0 var(--bg-color)
}

#resultWordsHistory {
    position: relative
}

#resultWordsHistory.noErrorBorder .word.error,#words.noErrorBorder .word.error {
    text-shadow: none
}

.word letter.correct,.word letter.corrected {
    color: var(--text-color)
}

.word letter.corrected {
    border-bottom: 2px dotted var(--main-color)
}

.word letter.extraCorrected {
    border-right: 2px dotted var(--main-color)
}

.word letter.incorrect {
    color: var(--error-color);
    position: relative
}

.word letter.incorrect hint {
    bottom: -1em;
    color: var(--text-color);
    display: grid;
    font-size: .75em;
    justify-content: center;
    left: 0;
    line-height: normal;
    opacity: .5;
    padding: 1px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    width: 100%
}

.word letter.incorrect.extra {
    color: var(--error-extra-color)
}

.word letter.missing {
    opacity: .5
}

#words.colorfulMode .word.error,#words.flipped.colorfulMode .word.error {
    border-bottom: 2px solid var(--colorful-error-color)
}

#wordsInput {
    border: none;
    cursor: default;
    display: block;
    margin: 0 auto;
    opacity: 0;
    outline: none;
    padding: 0;
    resize: none;
    z-index: -1
}

#capsWarning,#wordsInput {
    pointer-events: none;
    position: absolute
}

#capsWarning {
    background: var(--main-color);
    border-radius: var(--roundness);
    color: var(--bg-color);
    display: table;
    left: 50%;
    padding: 1rem;
    top: -2.5rem;
    transform: translateX(-50%) translateY(-50%);
    transition: .125s;
    z-index: 999
}

#capsWarning i {
    margin-right: .5rem
}

#result {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-areas: "stats chart" "morestats morestats";
    grid-template-columns: auto 1fr
}

#result .editTagsButton {
    display: inline-block;
    font-size: .75rem;
    padding-bottom: 0
}

#result.noBalloons [aria-label][data-balloon-pos]:after,#result.noBalloons [aria-label][data-balloon-pos]:before {
    display: none
}

#result:focus {
    outline: none
}

#result .buttons {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-column: 1/3;
    justify-content: center
}

#result .ssWatermark {
    grid-column: 1/3
}

#result #resultReplay,#result #resultWordsHistory {
    color: var(--sub-color);
    margin-bottom: 1rem
}

#result #resultReplay .textButton,#result #resultWordsHistory .textButton {
    margin-left: .5rem;
    padding: 0
}

#result #resultReplay .heatmapLegend,#result #resultWordsHistory .heatmapLegend {
    color: var(--sub-color);
    display: inline-grid;
    font-size: .75rem;
    gap: 1rem;
    grid-template-columns: auto auto auto;
    margin-left: .5rem;
    width: -moz-min-content;
    width: min-content
}

#result #resultReplay .heatmapLegend .boxes,#result #resultWordsHistory .heatmapLegend .boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

#result #resultReplay .heatmapLegend .boxes .box,#result #resultWordsHistory .heatmapLegend .boxes .box {
    color: var(--bg-color);
    display: grid;
    height: 1rem;
    line-height: .75rem;
    padding: .1rem .5rem;
    place-content: center center;
    white-space: nowrap
}

#result #resultReplay .heatmapLegend .boxes .box:first-child,#result #resultWordsHistory .heatmapLegend .boxes .box:first-child {
    border-radius: var(--roundness) 0 0 var(--roundness)
}

#result #resultReplay .heatmapLegend .boxes .box:nth-child(5),#result #resultWordsHistory .heatmapLegend .boxes .box:nth-child(5) {
    border-radius: 0 var(--roundness) var(--roundness) 0
}

#result #resultReplay .title,#result #resultWordsHistory .title {
    margin-bottom: .25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#result #resultReplay .words,#result #resultWordsHistory .words {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

#result #resultReplay .words .word,#result #resultWordsHistory .words .word {
    margin: .18rem .6rem .15rem 0;
    position: relative
}

#result #resultReplay .words .word letter.correct,#result #resultWordsHistory .words .word letter.correct {
    color: var(--text-color)
}

#result #resultReplay .words .word letter.incorrect,#result #resultWordsHistory .words .word letter.incorrect {
    color: var(--error-color)
}

#result #resultReplay .words .word letter.incorrect.extra,#result #resultWordsHistory .words .word letter.incorrect.extra {
    color: var(--error-extra-color)
}

#result #resultReplay .words .word.heatmapInherit letter,#result #resultWordsHistory .words .word.heatmapInherit letter {
    color: inherit
}

#result #resultReplay .words.rightToLeftTest,#result #resultReplay .words.rightToLeftTest .word,#result #resultWordsHistory .words.rightToLeftTest,#result #resultWordsHistory .words.rightToLeftTest .word {
    direction: rtl
}

#result #resultReplay .words.withLigatures letter,#result #resultWordsHistory .words.withLigatures letter {
    display: inline
}

#result #resultReplay .words {
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

#result .chart {
    grid-area: chart;
    height: 200px;
    max-height: 200px;
    width: 100%
}

#result .chart canvas {
    height: 100%;
    width: 100%!important
}

#result .chart .title {
    color: var(--sub-color);
    margin-bottom: 1rem
}

#result .loginTip {
    color: var(--sub-color);
    grid-column: 1/3;
    text-align: center
}

#result .loginTip .link {
    cursor: pointer;
    display: inline-block;
    text-decoration: underline
}

#result .stats {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-area: stats;
    grid-template-areas: "wpm" "acc";
    justify-content: center
}

#result .stats.morestats {
    align-items: flex-start;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    display: grid;
    grid-area: morestats;
    grid-auto-flow: column;
    grid-template-areas: none;
    justify-content: space-between
}

#result .stats.morestats .subgroup {
    display: grid;
    gap: .5rem
}

#result .stats .group .top {
    color: var(--sub-color);
    font-size: 1rem;
    line-height: 1rem;
    margin-bottom: .25rem
}

#result .stats .group .bottom {
    color: var(--main-color);
    font-size: 2rem;
    line-height: 2rem
}

#result .stats .group.time .afk,#result .stats .group.time .timeToday {
    color: var(--sub-color);
    font-size: .75rem;
    line-height: .75rem;
    margin-left: .2rem
}

#result .stats .group.dailyLeaderboard {
    max-width: 13rem;
    overflow: hidden;
    white-space: nowrap
}

#result .stats .group.source #favoriteQuoteButton,#result .stats .group.source #rateQuoteButton,#result .stats .group.source #reportQuoteButton {
    padding: 0 .25rem
}

#result .stats .group.source #rateQuoteButton {
    display: inline-grid;
    gap: .25rem
}

#result .stats .info .bottom,#result .stats .info .top,#result .stats .source .bottom,#result .stats .source .top,#result .stats .tags .bottom,#result .stats .tags .top {
    font-size: 1rem;
    line-height: 1rem
}

#result .stats .source {
    max-width: 30rem
}

#result .stats .tags .bottom .fas {
    margin-left: .5rem
}

#result .stats .wpm {
    grid-area: wpm
}

#result .stats .wpm .top {
    display: flex;
    font-size: 2rem;
    line-height: 1.5rem
}

#result .stats .wpm .top .crown {
    align-self: center;
    background: var(--main-color);
    border-radius: .6rem;
    color: var(--bg-color);
    font-size: .7rem;
    height: 1.7rem;
    line-height: 1.7rem;
    margin-left: .5rem;
    margin-top: -.2rem;
    text-align: center;
    width: 1.7rem
}

#result .stats .wpm .bottom {
    font-size: 4rem;
    line-height: 4rem
}

#result .stats .leaderboards .bottom,#result .stats .testType .bottom {
    font-size: 1rem;
    line-height: 1rem
}

#result .stats .leaderboards .bottom .lbChange .fas,#result .stats .testType .bottom .lbChange .fas {
    margin-right: .15rem
}

#result .stats .acc {
    grid-area: acc
}

#result .stats .acc .top {
    font-size: 2rem;
    line-height: 1.5rem
}

#result .stats .acc .bottom {
    font-size: 4rem;
    line-height: 4rem
}

#result .stats .burst {
    grid-area: burst
}

#result .stats .burst .top {
    font-size: 2rem;
    line-height: 1.5rem
}

#result .stats .burst .bottom {
    font-size: 4rem;
    line-height: 4rem
}

#nextTestButton,#practiseWordsButton,#restartTestButton,#restartTestButtonWithSameWordset,#saveScreenshotButton,#showWordHistoryButton,#watchReplayButton,#watchVideoAdButton {
    border-radius: var(--roundness);
    color: var(--sub-color);
    cursor: pointer;
    padding: 1rem 2rem;
    position: relative;
    transition: .125s;
    width: min-content;
    width: -moz-min-content
}

#nextTestButton:focus,#nextTestButton:hover,#practiseWordsButton:focus,#practiseWordsButton:hover,#restartTestButton:focus,#restartTestButton:hover,#restartTestButtonWithSameWordset:focus,#restartTestButtonWithSameWordset:hover,#saveScreenshotButton:focus,#saveScreenshotButton:hover,#showWordHistoryButton:focus,#showWordHistoryButton:hover,#watchReplayButton:focus,#watchReplayButton:hover,#watchVideoAdButton:focus,#watchVideoAdButton:hover {
    color: var(--text-color);
    outline: none
}

#nextTestButton:focus,#practiseWordsButton:focus,#restartTestButton:focus,#restartTestButtonWithSameWordset:focus,#saveScreenshotButton:focus,#showWordHistoryButton:focus,#watchReplayButton:focus,#watchVideoAdButton:focus {
    background: var(--text-color);
    color: var(--bg-color)
}

#retrySavingResultButton {
    background: var(--colorful-error-color);
    border-radius: var(--roundness);
    color: var(--error-color);
    color: var(--bg-color);
    cursor: pointer;
    justify-content: center;
    justify-self: center;
    margin: 0 auto 1rem;
    padding: 1rem 2rem;
    position: relative;
    transition: .25s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-max-content;
    width: max-content
}

#retrySavingResultButton:focus,#retrySavingResultButton:hover {
    background: var(--text-color);
    outline: none
}

#retrySavingResultButton:focus {
    background: var(--text-color)
}

#showWordHistoryButton {
    opacity: 1
}

#replayWords {
    cursor: pointer
}

#replayStopwatch {
    color: var(--main-color);
    display: inline-block;
    margin: 0 0 0 .5em
}

#restartTestButton {
    margin: 1rem auto 0
}

#koInputVisualContainer {
    color: var(--sub-color);
    cursor: default;
    font-size: 1.5rem;
    font-weight: 700;
    height: 3rem;
    margin: 0 auto;
    padding-top: 1rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-min-content;
    width: min-content
}

#koInputVisualContainer.blurred {
    filter: blur(4px);
    opacity: .25
}

#mobileTestConfig {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    display: none;
    font-size: .75rem;
    height: -moz-max-content;
    height: max-content;
    justify-self: center;
    margin-bottom: 1rem;
    padding: .25rem 1rem;
    transition: .125s;
    width: -moz-max-content;
    width: max-content
}

#mobileTestConfig.focus {
    opacity: 0
}

#testConfig {
    display: grid;
    font-size: .75rem;
    gap: .5rem;
    grid-auto-flow: column;
    height: -moz-max-content;
    height: max-content;
    justify-content: space-around;
    margin-bottom: 1rem;
    transition: opacity .125s;
    width: 100%
}

#testConfig .textButton {
    transition: none
}

#testConfig .puncAndNum {
    max-width: 15rem;
    opacity: 1;
    overflow: hidden
}

#testConfig .row {
    background: var(--sub-alt-color);
    border-radius: var(--roundness);
    display: flex
}

#testConfig .spacer {
    background: var(--bg-color);
    border-radius: calc(var(--roundness)/2);
    height: auto;
    margin: .5rem 0;
    width: .25rem
}

#testConfig .spacer.scrolled {
    margin: auto 0;
    width: 0
}

#testConfig .time .textButton,#testConfig .wordCount .textButton {
    line-height: 1rem
}

#testConfig .time .textButton span,#testConfig .wordCount .textButton span {
    height: 1.1em
}

#testConfig .customText,#testConfig .mode,#testConfig .puncAndNum,#testConfig .quoteLength,#testConfig .time,#testConfig .wordCount,#testConfig .zen {
    display: grid;
    grid-auto-flow: column
}

#testConfig .customText .textButton,#testConfig .mode .textButton,#testConfig .puncAndNum .textButton,#testConfig .quoteLength .textButton,#testConfig .time .textButton,#testConfig .wordCount .textButton,#testConfig .zen .textButton {
    padding: .75rem .5rem .7rem
}

#testConfig .customText .textButton:first-child,#testConfig .mode .textButton:first-child,#testConfig .puncAndNum .textButton:first-child,#testConfig .quoteLength .textButton:first-child,#testConfig .time .textButton:first-child,#testConfig .wordCount .textButton:first-child,#testConfig .zen .textButton:first-child {
    padding: .75rem .5rem .7rem 1rem
}

#testConfig .customText .textButton:last-child,#testConfig .mode .textButton:last-child,#testConfig .puncAndNum .textButton:last-child,#testConfig .quoteLength .textButton:last-child,#testConfig .time .textButton:last-child,#testConfig .wordCount .textButton:last-child,#testConfig .zen .textButton:last-child {
    padding: .75rem 1rem .7rem .5rem
}

#testConfig .customText .textButton:only-child,#testConfig .mode .textButton:only-child,#testConfig .puncAndNum .textButton:only-child,#testConfig .quoteLength .textButton:only-child,#testConfig .time .textButton:only-child,#testConfig .wordCount .textButton:only-child,#testConfig .zen .textButton:only-child {
    padding: .75rem 1rem .7rem
}

#testConfig .customText,#testConfig .puncAndNum,#testConfig .quoteLength,#testConfig .time,#testConfig .wordCount,#testConfig .zen {
    justify-content: center;
    overflow: hidden
}

#testConfig .customText {
    display: grid
}

#testConfig.focus {
    opacity: 0
}

.pageTest {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    height: 100%
}

#menu {
    grid-template-columns: auto auto auto 1fr auto;
    width: 100%
}

.pageTest #wordsWrapper {
    position: relative
}

.pageTest #wordsWrapper.tape {
    -webkit-mask-image: linear-gradient(90deg,transparent 1%,#000 10%,#000 90%,transparent 99%);
    mask-image: linear-gradient(90deg,transparent 1%,#000 10%,#000 90%,transparent 99%)
}

.pageTest #layoutfluidTimer,.pageTest #memoryTimer {
    background: var(--main-color);
    border-radius: var(--roundness);
    color: var(--bg-color);
    left: 50%;
    opacity: 0;
    padding: 1rem;
    position: absolute;
    top: -6rem;
    transform: translateX(-50%);
    width: -moz-max-content;
    width: max-content
}

.pageTest #layoutfluidTimer,.pageTest #memoryTimer,.pageTest .outOfFocusWarning {
    pointer-events: none;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pageTest .outOfFocusWarning {
    height: 0;
    line-height: 150px;
    position: relative;
    z-index: 999
}

.pageTest #testModesNotice {
    color: var(--sub-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: .5rem;
    text-align: center;
    transition: opacity .125s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pageTest #testModesNotice .textButton {
    margin: 0 .5rem
}

.pageTest #testModesNotice .textButton.noInteraction {
    pointer-events: none
}

.pageTest #testModesNotice .fas {
    margin-right: .5rem
}

.pageTest #miniTimerAndLiveWpm {
    color: #000;
    display: flex;
    height: 0;
    margin-left: .25em;
    position: absolute
}

.pageTest #miniTimerAndLiveWpm div {
    font-size: 1em;
    line-height: 1em;
    margin-top: -1.25em
}

.pageTest #miniTimerAndLiveWpm .acc,.pageTest #miniTimerAndLiveWpm .time,.pageTest #miniTimerAndLiveWpm .wpm {
    margin-right: 2rem
}

.pageTest #miniTimerAndLiveWpm .acc,.pageTest #miniTimerAndLiveWpm .burst,.pageTest #miniTimerAndLiveWpm .time,.pageTest #miniTimerAndLiveWpm .wpm {
    opacity: 0
}

.pageTest #miniTimerAndLiveWpm.timerMain {
    color: var(--main-color)
}

.pageTest #miniTimerAndLiveWpm.timerSub {
    color: var(--sub-color)
}

.pageTest #miniTimerAndLiveWpm.timerText {
    color: var(--text-color)
}

.pageTest #miniTimerAndLiveWpm.size125 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    margin-top: -1.75rem
}

.pageTest #miniTimerAndLiveWpm.size15 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-top: -2rem
}

.pageTest #miniTimerAndLiveWpm.size2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-top: -2.5rem
}

.pageTest #miniTimerAndLiveWpm.size3 {
    font-size: 3rem;
    line-height: 3rem;
    margin-top: -3.5rem
}

.pageTest #miniTimerAndLiveWpm.size4 {
    font-size: 4rem;
    line-height: 4rem;
    margin-top: -4.5rem
}

#middle.focus .pageTest #testModesNotice {
    opacity: 0!important
}

body.fb-arrows #words .word,body.fb-nospace #words .word {
    margin: .5em 0
}

body.fb-arrows #words .word letter {
    margin: 0 .25em
}

@media only screen and (max-width: 90.625rem) {
    #leaderboardsWrapper #leaderboards .mainTitle {
        font-size:2rem
    }

    #leaderboardsWrapper #leaderboards .title {
        font-size: 1rem
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop {
        grid-template-columns: auto 1fr max-content
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup {
        gap: .5rem;
        grid-auto-flow: row
    }

    #leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .badge .text {
        display: none
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:first-child {
        padding-left: .25rem
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:last-child {
        padding-right: .25rem
    }

    #leaderboardsWrapper #leaderboards .tables table td {
        padding: .25rem .5rem
    }
}

@media only screen and (max-width: 83.125rem) {
    .ad.ad-v {
        display:none
    }

    #app {
        grid-template-columns: auto
    }

    #customTextPopupWrapper {
        padding: 2rem
    }

    #customTextPopupWrapper #customTextPopup {
        grid-template-columns: 1fr 1fr 2fr;
        width: 100%
    }
}

@media only screen and (max-width: 78.125rem) {
    #leaderboardsWrapper #leaderboards .tables table tr td:nth-child(5) {
        display:none
    }

    #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
        grid-template-columns: 1fr 1fr max-content
    }
}

@media only screen and (max-width: 65.625rem) {
    .profile .pbsTime,.profile .pbsWords {
        font-size:.8rem
    }

    .profile .details.bioAndKey .bioAndKeyboard .value {
        font-size: .75rem
    }

    .pageSettings .section.fullWidth .buttons {
        grid-template-columns: 1fr 1fr 1fr
    }

    #quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
        grid-template-columns: 1fr
    }

    #result .morestats {
        gap: 1rem;
        grid-template-rows: 1fr 1fr
    }

    #supportMe {
        width: 90vw!important
    }

    #supportMe .buttons .button .icon {
        font-size: 3rem!important;
        line-height: 3rem!important
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop {
        align-items: baseline;
        flex-direction: column;
        grid-template-areas: "title title" "subtitle subtitle" "yesterday yesterday" "buttons buttons";
        grid-template-columns: 1fr
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop .buttons {
        margin-top: .5rem
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup {
        grid-auto-flow: column
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop .showYesterdayButton {
        margin-left: 0
    }

    #leaderboardsWrapper #leaderboards .tables {
        grid-template-columns: unset
    }

    #leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .badge .text {
        display: block
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:last-child {
        width: 30%
    }

    #leaderboardsWrapper #leaderboards .tables .leftTableWrapper,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper {
        height: calc(50vh - 10rem)
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:nth-child(5) {
        display: table-cell;
        width: auto
    }
}

@media only screen and (max-width: 62.5rem) {
    #quoteRatePopup {
        width:90vw!important
    }

    #bottom .leftright .left {
        grid-auto-flow: row;
        grid-template-columns: auto auto auto auto
    }

    #bottom .leftright .left,#bottom .leftright .right {
        display: grid;
        gap: .25rem 1rem;
        grid-template-rows: 1fr 1fr
    }

    .pageSettings .settingsGroup.quickNav .links {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center
    }
}

@media only screen and (max-width: 56.25rem) {
    #customTextPopupWrapper #customTextPopup {
        grid-template-areas:"topButtons topButtons topButtons" "textArea textArea textArea" "checkboxes checkboxes checkboxes" "ok ok ok"
    }

    #testConfig .customText .textButton,#testConfig .mode .textButton,#testConfig .puncAndNum .textButton,#testConfig .quoteLength .textButton,#testConfig .time .textButton,#testConfig .wordCount .textButton,#testConfig .zen .textButton {
        padding: .75rem .3rem .7rem
    }

    #testConfig .customText .textButton:first-child,#testConfig .mode .textButton:first-child,#testConfig .puncAndNum .textButton:first-child,#testConfig .quoteLength .textButton:first-child,#testConfig .time .textButton:first-child,#testConfig .wordCount .textButton:first-child,#testConfig .zen .textButton:first-child {
        padding: .75rem .3rem .7rem .6rem
    }

    #testConfig .customText .textButton:last-child,#testConfig .mode .textButton:last-child,#testConfig .puncAndNum .textButton:last-child,#testConfig .quoteLength .textButton:last-child,#testConfig .time .textButton:last-child,#testConfig .wordCount .textButton:last-child,#testConfig .zen .textButton:last-child {
        padding: .75rem .6rem .7rem .3rem
    }

    #testConfig .customText .textButton:only-child,#testConfig .mode .textButton:only-child,#testConfig .puncAndNum .textButton:only-child,#testConfig .quoteLength .textButton:only-child,#testConfig .time .textButton:only-child,#testConfig .wordCount .textButton:only-child,#testConfig .zen .textButton:only-child {
        padding: .75rem .6rem .7rem
    }

    .ad.ad-h {
        display: none
    }

    .ad.ad-h-s {
        display: grid
    }

    .profile .pbsTime,.profile .pbsWords {
        font-size: 1rem
    }

    .profile {
        grid-template-areas: "info" "leaderboards" "pbsTime" "pbsWords";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto
    }

    .profile .details .bioAndKeyboard {
        height: 100%
    }

    .profile .details.soc {
        grid-template-columns: 1.25fr auto 1fr auto auto
    }

    .profile .details.soc .typingStats {
        grid-template-columns: 1fr
    }

    .profile .details.bioAndKey {
        grid-template-columns: 1.25fr auto auto auto 1fr
    }

    .profile .details.bioAndKey .typingStats {
        grid-template-columns: 1fr
    }

    .profile .details.both {
        grid-template-areas: "avAndName sep2 bioAndKey bioAndKey" "typingStats typingStats typingStats socials";
        grid-template-columns: 1.25fr auto 1.25fr auto
    }

    .profile .details.both .sep1,.profile .details.both .sep3 {
        display: none
    }

    .profile .details.both .typingStats {
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%
    }

    .profile .details.both .socials {
        justify-content: start
    }

    .profile .details.both .socials .title {
        display: block
    }

    .profile .details.both .socials .value {
        grid-auto-flow: column
    }

    .profile .details.none {
        grid-template-columns: 1fr auto 1fr
    }

    .profile .details.none .typingStats {
        grid-template-columns: 1fr
    }

    .profile .leaderboardsPositions {
        grid-template-areas: "title title" "t15 t60"
    }

    #leaderboards .mainTitle {
        font-size: 1.5rem!important
    }

    #bannerCenter .banner .container {
        grid-template-columns: 1fr auto
    }

    #bannerCenter .banner .container .image,#bannerCenter .banner .container .lefticon,#bannerCenter .banner .container .righticon {
        display: none
    }

    #bannerCenter .banner .container .text {
        justify-self: start;
        margin-left: 1.5rem;
        text-align: left
    }

    .merchBanner img {
        display: none
    }

    .merchBanner .text {
        padding: .25rem 0
    }

    .pageSettings .section {
        grid-template-columns: 1.5fr 1fr
    }

    .pageSettings .section.autoSwitchThemeInputs {
        grid-template-columns: 1fr 3fr
    }

    .pageAccount .group.personalBestTables .tables {
        grid-template-columns: 1fr
    }

    .pageAccount .group.history table tbody td:first-child,.pageAccount .group.history table tbody td:nth-child(8),.pageAccount .group.history table tbody td:nth-child(9),.pageAccount .group.history table thead td:first-child,.pageAccount .group.history table thead td:nth-child(8),.pageAccount .group.history table thead td:nth-child(9) {
        display: none
    }

    .pageSettings .settingsGroup.quickNav .links {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr;
        justify-items: center
    }
}

@media only screen and (max-width: 50rem) {
    #top .logo .text {
        font-size:1.5rem;
        line-height: 1.5rem;
        margin-top: -.1em
    }

    #menu {
        gap: 0
    }

    #testConfig .spacer {
        display: none
    }

    #testConfig .row {
        display: grid;
        justify-items: center;
        padding: .25rem 1rem
    }

    #testConfig .customText .textButton,#testConfig .customText .textButton:first-child,#testConfig .customText .textButton:last-child,#testConfig .customText .textButton:only-child,#testConfig .mode .textButton,#testConfig .mode .textButton:first-child,#testConfig .mode .textButton:last-child,#testConfig .mode .textButton:only-child,#testConfig .puncAndNum .textButton,#testConfig .puncAndNum .textButton:first-child,#testConfig .puncAndNum .textButton:last-child,#testConfig .puncAndNum .textButton:only-child,#testConfig .quoteLength .textButton,#testConfig .quoteLength .textButton:first-child,#testConfig .quoteLength .textButton:last-child,#testConfig .quoteLength .textButton:only-child,#testConfig .time .textButton,#testConfig .time .textButton:first-child,#testConfig .time .textButton:last-child,#testConfig .time .textButton:only-child,#testConfig .wordCount .textButton,#testConfig .wordCount .textButton:first-child,#testConfig .wordCount .textButton:last-child,#testConfig .wordCount .textButton:only-child,#testConfig .zen .textButton,#testConfig .zen .textButton:first-child,#testConfig .zen .textButton:last-child,#testConfig .zen .textButton:only-child {
        padding: .5rem .75rem .45rem
    }

    #testModesNotice {
        font-size: .75rem
    }

    #contactPopupWrapper #contactPopup .buttons {
        grid-template-columns: 1fr
    }

    .page404 .content {
        gap: 1rem;
        grid-auto-flow: row;
        grid-template-columns: 300px
    }

    .pageAbout .section .contributors,.pageAbout .section .supporters {
        grid-template-columns: 1fr 1fr 1fr
    }

    .pageAbout .section .contactButtons,.pageAbout .section .supportButtons {
        grid-template-columns: 1fr 1fr
    }

    .pageSettings .section.customBackgroundFilter .groups {
        grid-template-columns: 1fr
    }

    .pageSettings .section.customBackgroundFilter .saveContainer {
        grid-column: -1/-2
    }

    .pageAccount .group.chart .below {
        gap: .5rem;
        grid-template-columns: 1fr
    }

    #customTextPopupWrapper #customTextPopup .buttonsTop {
        grid-template-columns: 1fr
    }
}

@media only screen and (max-width: 46.875rem) {
    #leaderboardsWrapper #leaderboards .tables table tr td:nth-child(5) {
        display:none
    }

    .pageAbout .triplegroup {
        grid-template-columns: 1fr
    }

    .pageAbout .triplegroup .group {
        align-items: center;
        display: grid;
        gap: 0 1rem;
        grid-template-columns: 1fr 1fr
    }

    .pageAbout .triplegroup .group .label {
        grid-column: span 2
    }
}

@media only screen and (max-width: 43.75rem) {
    .pageAccount .presetFilterButtons .buttons {
        grid-template-columns:1fr
    }

    .pageAccount .triplegroup {
        grid-template-columns: 1fr 1fr
    }

    .pageAccount .triplegroup .emptygroup {
        display: none
    }

    .pageAccount .group.topFilters .buttonsAndTitle .buttons {
        display: grid;
        justify-content: unset
    }

    .pageAccount .group.history table tbody td:nth-child(6),.pageAccount .group.history table thead td:nth-child(6) {
        display: none
    }

    .pageAccount .group.estimatedWordsTyped {
        flex-direction: column
    }

    .pageAccount .group.estimatedWordsTyped .title {
        margin-right: unset
    }

    .badge:after,.badge:before {
        display: none
    }
}

@media only screen and (max-width: 40.625rem) {
    #top #menu .textButton.account .levelAndBar,#top #menu .textButton.account .text {
        display:none
    }

    #leaderboardsWrapper #leaderboards {
        width: 85vw
    }

    #leaderboardsWrapper #leaderboards .tables .leftTableWrapper,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper {
        height: calc(50vh - 10rem)
    }

    #leaderboardsWrapper #leaderboards .tables {
        grid-template-columns: unset
    }

    #leaderboardsWrapper #leaderboards .tables table .avatarNameBadge .badge .text {
        display: block
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:nth-child(4) {
        display: none
    }

    .profile {
        grid-template-areas: "info" "leaderboards" "pbsTime" "pbsWords";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto
    }

    .profile .details.none {
        grid-template-areas: "avAndName" "typingStats";
        grid-template-columns: 1fr
    }

    .profile .details.none .separator {
        display: none
    }

    .profile .details.none .typingStats {
        grid-template-columns: 1fr 1fr 1fr
    }

    .profile .details.bioAndKey {
        grid-template-areas: "avAndName bioAndKey" "typingStats typingStats";
        grid-template-columns: 1fr 1fr
    }

    .profile .details.bioAndKey .separator {
        display: none
    }

    .profile .details.bioAndKey .typingStats {
        grid-template-columns: 1fr 1fr 1fr
    }

    .profile .details.soc {
        grid-template-areas: "avAndName" "typingStats" "socials";
        grid-template-columns: 1fr
    }

    .profile .details.soc .separator {
        display: none
    }

    .profile .details.soc .typingStats {
        grid-template-columns: 1fr 1fr 1fr
    }

    .profile .details.soc .socials {
        justify-content: start
    }

    .profile .details.soc .socials .title {
        display: block
    }

    .profile .details.soc .socials .value {
        grid-auto-flow: column
    }

    .profile .details.both {
        grid-template-areas: "avAndName bioAndKey" "typingStats typingStats" "socials socials";
        grid-template-columns: 1fr 1fr
    }

    .profile .details.both .separator {
        display: none
    }

    .profile .details.both .typingStats {
        grid-template-columns: 1fr 1fr 1fr
    }

    .profile .details.both .socials {
        height: 100%;
        justify-content: start
    }

    .profile .details.both .socials .title {
        display: block
    }

    .profile .details.both .socials .value {
        grid-auto-flow: column
    }

    #quoteRatePopup .ratingStats {
        grid-template-columns: 1fr 1fr!important
    }

    #quoteRatePopup .quote {
        grid-template-areas: "text text text" "source source source" "id length length"!important
    }

    .pageSettings .section {
        grid-template-areas: "title" "text" "buttons";
        grid-template-columns: 1fr
    }

    .pageSettings .section>.text {
        margin-bottom: 1rem
    }

    .pageSettings .section .customThemeEdit .customThemeInputs {
        grid-template-columns: 1fr 1.5fr
    }

    .pageSettings .section .customThemeEdit .spacer {
        grid-column: span 2
    }

    .pageSettings .section .customThemeEdit .customThemeButtons {
        grid-template-columns: 1fr
    }

    #result .buttons {
        grid-template-rows: 1fr 1fr 1fr
    }

    #result .buttons #nextTestButton {
        grid-column: 1/5;
        text-align: center;
        width: 100%
    }

    #supportMe {
        width: 80vw!important
    }

    #supportMe .buttons {
        grid-template-columns: none!important
    }

    #supportMe .buttons .button {
        align-items: center;
        grid-template-columns: auto 1fr
    }

    #supportMe .buttons .button .icon {
        font-size: 2rem!important;
        line-height: 2rem!important;
        margin-left: 2rem
    }

    .pageSettings .section.fullWidth .buttons {
        grid-template-columns: 1fr 1fr
    }
}

@media only screen and (max-width: 37.5rem) {
    .pageAbout .section .contributors,.pageAbout .section .supporters {
        grid-template-columns:1fr 1fr
    }

    #top .logo .bottom {
        margin-top: 0
    }

    .pageLogin {
        display: grid;
        gap: 5rem;
        grid-auto-flow: unset
    }

    #middle #result {
        grid-template-areas: "stats stats" "chart chart" "morestats morestats"
    }

    #middle #result .stats {
        gap: 2rem;
        grid-template-areas: "wpm acc"
    }

    #middle #result .stats.morestats {
        gap: 1rem;
        grid-template-rows: 1fr 1fr 1fr
    }

    #leaderboardsWrapper #leaderboards .leaderboardsTop .buttonGroup {
        grid-auto-flow: row
    }

    .pageAccount .group.history table tbody td:nth-child(5),.pageAccount .group.history table tbody td:nth-child(7),.pageAccount .group.history table thead td:nth-child(5),.pageAccount .group.history table thead td:nth-child(7) {
        display: none
    }
}

@media only screen and (max-width: 34.375rem) {
    #top .logo {
        grid-template-columns:auto
    }

    #top .logo .text {
        display: none
    }

    #commandLineWrapper {
        padding: 5rem 1rem
    }

    .pageSettings .section.themes .buttons div.theme:hover,.pageSettings .section.themes .customTheme.button.active,.pageSettings .section.themes .theme.button.active {
        transform: scale(1.025)
    }

    .profile .pbsTime,.profile .pbsWords {
        font-size: .9rem;
        grid-template-columns: 1fr 1fr
    }

    .profile .details.none .typingStats {
        grid-template-columns: 1fr
    }

    .profile .details.bioAndKey {
        grid-template-areas: "avAndName" "bioAndKey" "typingStats";
        grid-template-columns: 1fr
    }

    .profile .details.bioAndKey .typingStats,.profile .details.both {
        grid-template-columns: 1fr
    }

    .profile .details.both {
        grid-template-areas: "avAndName" "bioAndKey" "typingStats" "socials"
    }

    .profile .details.both .typingStats {
        grid-template-columns: 1fr
    }

    .profile .leaderboardsPositions {
        grid-template-areas: "title" "t15" "t60"
    }

    #cookiePopupWrapper #cookiePopup,#cookiePopupWrapper .extensionMessage {
        bottom: 1rem;
        right: 1rem;
        width: calc(100vw - 2rem)
    }

    #keymap .row {
        height: 1.25rem
    }

    #keymap .keymapKey {
        border-radius: .3rem;
        font-size: .6rem;
        height: 1.25rem;
        width: 1.25rem
    }

    #contactPopupWrapper #contactPopup .buttons .button .text {
        font-size: 1rem
    }

    #contactPopupWrapper #contactPopup .buttons .button .icon {
        font-size: 1.5rem;
        line-height: 1.5rem
    }

    #contactPopupWrapper #contactPopup {
        padding: 1rem
    }

    .pageAbout .section .contributors,.pageAbout .section .supporters {
        grid-template-columns: 1fr
    }

    #simplePopupWrapper #simplePopup {
        width: 90vw
    }

    #quoteReportPopup {
        margin-left: 1rem;
        max-width: 800px;
        padding: 1rem;
        width: calc(100% - 2rem)
    }

    .pageSettings .section.fullWidth .buttons {
        grid-template-columns: 1fr
    }

    .pageSettings .section .buttons {
        grid-auto-flow: row
    }

    .pageSettings .section.customBackgroundFilter .groups .group {
        grid-template-columns: auto 1fr
    }

    .pageSettings .section.customBackgroundFilter .groups .group .title {
        grid-column: 1/3
    }

    .pageAbout .section .contactButtons,.pageAbout .section .supportButtons,.pageAccount .triplegroup {
        grid-template-columns: 1fr
    }

    .pageAccount .group.history table tbody td:nth-child(3),.pageAccount .group.history table thead td:nth-child(3) {
        display: none
    }

    #top #menu {
        font-size: 1rem
    }

    #bottom .leftright .left {
        grid-auto-flow: row;
        grid-template-columns: auto auto auto
    }

    #bottom .leftright .left,#bottom .leftright .right {
        display: grid;
        gap: .25rem 1rem;
        grid-template-rows: 1fr 1fr 1fr
    }

    #centerContent {
        gap: 1rem;
        padding: 1rem
    }

    #centerContent #top .desktopConfig {
        display: none
    }

    #centerContent #top .mobileConfig {
        display: block
    }

    #middle #result .stats {
        gap: 1rem;
        grid-template-areas: "wpm" "acc"
    }

    #result .buttons {
        grid-template-rows: 1fr 1fr 1fr 1fr
    }

    #result .buttons #nextTestButton {
        grid-column: 1/3;
        text-align: center;
        width: 100%
    }
}

@media only screen and (max-width: 28.125rem) {
    #testConfig {
        display:none
    }

    #mobileTestConfig {
        display: block
    }

    #alertsPopupWrapper #alertsPopup {
        border-radius: 0;
        width: 100%
    }

    #alertsPopupWrapper #alertsPopup .mobileClose {
        display: block
    }
}

@media only screen and (max-width: 25rem) {
    #top .config {
        grid-gap:.25rem
    }

    #top .config .group .buttons {
        font-size: .65rem;
        line-height: .65rem
    }

    #top #menu {
        font-size: .75rem
    }

    #bottom {
        font-size: .65rem
    }

    #bottom .leftright,#bottom .leftright .left {
        grid-template-columns: 1fr 1fr
    }

    #bottom .leftright .left {
        grid-auto-flow: row;
        grid-template-rows: 1fr 1fr 1fr 1fr
    }

    #bottom .leftright .right {
        gap: .25rem 1rem;
        grid-template-rows: 1fr 1fr 1fr 1fr
    }

    #leaderboardsWrapper #leaderboards .tables .titleAndTable .titleAndButtons {
        grid-template-columns: unset
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:first-child {
        padding-left: .25rem
    }

    #leaderboardsWrapper #leaderboards .tables table tr td:last-child {
        padding-right: .25rem
    }

    #leaderboardsWrapper #leaderboards .tables table td {
        padding: .25rem
    }

    #leaderboardsWrapper #leaderboards .tables .leftTableWrapper,#leaderboardsWrapper #leaderboards .tables .rightTableWrapper {
        height: calc(50vh - 9rem)
    }

    .page404 .content {
        grid-template-columns: 1fr
    }
}

@media only screen and (max-width: 21.875rem) {
    .pageSettings .settingsGroup.quickNav .links {
        grid-template-columns:1fr
    }

    .ad.ad-h-s {
        display: none
    }

    #keymap {
        display: none!important
    }

    .pageLogin .side input {
        width: 90vw
    }

    .page404 .content,.page404 .content .image {
        width: 100%
    }

    .page404 .content .big {
        font-size: 7rem;
        line-height: 7rem
    }
}

@media(pointer: coarse)and (max-width:50rem) {
    #testConfig {
        display:none
    }

    #mobileTestConfig {
        display: block
    }

    #restartTestButton {
        display: block!important
    }
}

@media(hover: none)and (pointer:coarse) {
    #commandLineMobileButton {
        display:block!important
    }
}