@media(max-width: 49.99em) {
    .FretboardSettings[data-v-617f2727] {
        display:flex;
        align-items: stretch;
        flex-direction: column
    }
}

@media(min-width: 50em) {
    .FretboardSettings[data-v-617f2727] {
        display:flex
    }

    .FretboardSettings [data-v-617f2727] {
        margin-right: 10px
    }
}

.settings-menu[data-v-617f2727] {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    min-width: 250px
}

.settings-menu__separator[data-v-617f2727] {
    display: none;
    height: 1px;
    background-color: var(--color--bg--highlight)
}

@media(min-width: 50em) {
    .settings-menu__separator[data-v-617f2727] {
        display:block
    }
}

.fret-range[data-v-617f2727] {
    padding: 28px 20px
}

.fret-range [data-v-617f2727] {
    margin-bottom: 20px
}

@media(min-width: 50em) {
    .fret-range[data-v-617f2727] {
        padding:14px
    }

    .fret-range [data-v-617f2727] {
        margin-bottom: 8px
    }
}

.fret-range__slider[data-v-617f2727] {
    min-width: 250px
}

.fret-range__text[data-v-617f2727] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color--text)
}

.fret-range__text [data-v-617f2727] {
    margin-right: 6px
}

.fret-range__text__separator[data-v-617f2727] {
    color: var(--color--text--secondary)
}

.export-menu[data-v-617f2727] {
    padding: 10px
}

.export-menu [data-v-617f2727] {
    margin-bottom: 20px
}

.export-menu__text[data-v-617f2727] {
    max-width: 300px;
    text-align: justify;
    font-size: 1.6rem;
    color: var(--color--text)
}

.export-menu__text [data-v-617f2727] {
    margin-bottom: 10px
}

.export-menu__buttons[data-v-617f2727] {
    display: flex;
    justify-content: center
}

.export-menu__buttons [data-v-617f2727] {
    margin-right: 10px
}

.fret.is-open-string .fret__note[data-v-5832d12d] {
    cursor: pointer
}

.fret[data-v-5832d12d] {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-width: 0;
    border-style: solid;
    border-color: var(--color--border)
}

.fret.is-fretboard-vertical.is-fretboard-flipped-vert[data-v-5832d12d]:not(.is-open-string) {
    border-top-width: 3px
}

.fret.is-fretboard-vertical.is-fretboard-flipped-vert.is-starting-fret[data-v-5832d12d] {
    border-bottom-width: 3px
}

.fret.is-fretboard-vertical.is-fretboard-flipped-vert.is-first-fret[data-v-5832d12d] {
    border-bottom-width: 6px
}

.fret.is-fretboard-vertical[data-v-5832d12d]:not(.is-fretboard-flipped-vert):not(.is-open-string) {
    border-bottom-width: 3px
}

.fret.is-fretboard-vertical:not(.is-fretboard-flipped-vert).is-starting-fret[data-v-5832d12d] {
    border-top-width: 3px
}

.fret.is-fretboard-vertical:not(.is-fretboard-flipped-vert).is-first-fret[data-v-5832d12d] {
    border-top-width: 6px
}

.fret[data-v-5832d12d]:not(.is-fretboard-vertical):not(.is-on-last-string) {
    height: 42px
}

.fret__note[data-v-5832d12d] {
    pointer-events: all;
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    font-weight: 700;
    color: transparent;
    opacity: 0;
    transition: opacity .2s,filter .2s,border-radius .2s
}

.fret__note.is-active[data-v-5832d12d] {
    opacity: 1
}

.fret__note.is-active[data-v-5832d12d]:hover {
    filter: drop-shadow(0 0 4px rgba(0,0,0,.4))
}

.fret__note.is-active.is-highlighted[data-v-5832d12d] {
    border-radius: 0
}

.fret__note.is-active.is-showing-note-infos[data-v-5832d12d] {
    color: var(--color--text--inverted)
}

.fret__note[data-v-5832d12d]:not(.is-active) {
    border: 2px dashed var(--color--border)
}

.fret__note:not(.is-active).is-open-string[data-v-5832d12d],.fret__note[data-v-5832d12d]:not(.is-active):hover {
    color: var(--color--text);
    opacity: 1
}

.fret__note.is-fretboard-vertical.is-fretboard-flipped-vert[data-v-5832d12d] {
    right: 0
}

.fret__note.is-fretboard-vertical.is-fretboard-flipped-vert.is-open-string[data-v-5832d12d] {
    bottom: 0;
    transform: translateX(50%)
}

.fret__note.is-fretboard-vertical.is-fretboard-flipped-vert[data-v-5832d12d]:not(.is-open-string) {
    top: 50%;
    transform: translate(50%,-50%)
}

.fret__note.is-fretboard-vertical[data-v-5832d12d]:not(.is-fretboard-flipped-vert) {
    left: 0
}

.fret__note.is-fretboard-vertical:not(.is-fretboard-flipped-vert).is-open-string[data-v-5832d12d] {
    top: 0;
    transform: translateX(-50%)
}

.fret__note.is-fretboard-vertical[data-v-5832d12d]:not(.is-fretboard-flipped-vert):not(.is-open-string) {
    top: 50%;
    transform: translate(-50%,-50%)
}

.fret__note:not(.is-fretboard-vertical).is-open-string[data-v-5832d12d] {
    transform: translateY(-50%)
}

.fret__note:not(.is-fretboard-vertical).is-open-string.is-fretboard-flipped-hor[data-v-5832d12d] {
    right: 0
}

.fret__note:not(.is-fretboard-vertical).is-open-string[data-v-5832d12d]:not(.is-fretboard-flipped-hor) {
    left: 0
}

.fret__note[data-v-5832d12d]:not(.is-fretboard-vertical):not(.is-open-string) {
    transform: translate(-50%,-50%)
}

.fret__note:not(.is-fretboard-vertical):not(.is-open-string).is-fretboard-vertical[data-v-5832d12d] {
    top: 50%
}

.fret__note[data-v-5832d12d]:not(.is-fretboard-vertical):not(.is-open-string):not(.is-fretboard-vertical) {
    left: 50%
}

.fret.use-note-image[data-v-5832d12d] {
    background-color: transparent
}

.tooltip[data-v-5832d12d] {
    padding: 8px;
    color: var(--color--bg--tooltip);
    background-color: var(--color--bg--tooltip)
}

.intervals[data-v-5832d12d] {
    display: flex
}

.intervals [data-v-5832d12d] {
    margin-right: 10px
}

.intervals__item[data-v-5832d12d] {
    display: flex;
    align-items: center
}

.intervals__item [data-v-5832d12d] {
    margin-right: 5px
}

.intervals__item__dot[data-v-5832d12d] {
    width: 10px;
    height: 10px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    flex: 0 0 auto
}

.intervals__item__text[data-v-5832d12d] {
    color: #fff
}

.in_fret_note[data-v-5832d12d] {
    position: relative;
    color: #fff;
    text-shadow: -2px -2px 0 #000,0 -2px 0 #000,2px -2px 0 #000,2px 0 0 #000,2px 2px 0 #000,0 2px 0 #000,-2px 2px 0 #000,-2px 0 0 #000;
    -webkit-text-stroke: 1px
}

.string-visible-icon[data-v-5832d12d] {
    position: absolute;
    top: -20px;
    left: 0;
    background-color: var(--color-bg)
}

.is-crossed[data-v-5832d12d] {
    background: linear-gradient(to top left,transparent,transparent calc(50% - .8px),red 50%,transparent calc(50% + .8px),transparent),linear-gradient(to top right,transparent,transparent calc(50% - .8px),red 50%,transparent calc(50% + .8px),transparent)
}

.note-img[data-v-5832d12d] {
    width: 2em
}

.PositionBracket[data-v-29345f2e] {
    position: absolute;
    z-index: 2;
    border-width: 2px;
    border-color: #444
}

.PositionBracket .label[data-v-29345f2e] {
    font-size: 3rem;
    text-shadow: -1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;
    text-align: center
}

.FretboardViewer[data-v-5bd3cb40] {
    display: grid
}

.string[data-v-5bd3cb40] {
    position: absolute;
    background-color: var(--color--string)
}

.fret-number[data-v-5bd3cb40] {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2em
}

.fret-number.is-vertical[data-v-5bd3cb40] {
    align-items: center;
    justify-content: flex-start
}

.fret-number[data-v-5bd3cb40]:not(.is-vertical) {
    align-items: flex-end;
    justify-content: center
}

.fret-number__text[data-v-5bd3cb40] {
    z-index: 1;
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    text-shadow: -1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000
}

@media(max-width: 49.99em)and (orientation:portrait) {
    .FretboardViewer[data-v-5bd3cb40] {
        margin:auto
    }

    .FretboardViewer.is-large-instrument[data-v-5bd3cb40] {
        margin-bottom: 20px
    }
}

@media(max-width: 49.99em)and (orientation:landscape) {
    .FretboardViewer[data-v-5bd3cb40] {
        padding-right:20px
    }

    .string[data-v-5bd3cb40] {
        margin-right: 20px
    }
}

.string[data-v-5bd3cb40] {
    visibility: hidden
}

.fret[data-v-5bd3cb40] {
    border-right-width: 0
}

.capo[data-v-5bd3cb40] {
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    transform: translate(-50%,-50px);
    z-index: 1
}

.FretboardSequencesItemInterval[data-v-e0b7e01c] {
    display: flex
}

@media(max-width: 49.99em) {
    .FretboardSequencesItemInterval[data-v-e0b7e01c] {
        box-shadow:0 0 0 1px var(--color--border)
    }
}

.button[data-v-e0b7e01c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 100%;
    padding: 14px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    transition: color .2s,border-color .2s,background-color .2s;
    cursor: pointer
}

.button.is-selected[data-v-e0b7e01c] {
    background-color: var(--color--bg--highlight)
}

.button[data-v-e0b7e01c]:focus {
    border-color: var(--color--hover)
}

@media(min-width: 50em) {
    .button[data-v-e0b7e01c] {
        margin-right:8px;
        border-radius: 1000px;
        border-width: 1px;
        padding-left: 8px;
        padding-right: 8px;
        padding: 2px 8px;
        border: 1px solid var(--color--border)
    }

    .button[data-v-e0b7e01c]:hover {
        background-color: var(--color--bg--highlight)
    }
}

.button__note[data-v-e0b7e01c] {
    cursor: pointer;
    margin-right: 8px
}

.button.is-selected .button__note[data-v-e0b7e01c] {
    color: var(--color--highlight)
}

.button:not(.is-selected):hover .button__note[data-v-e0b7e01c] {
    color: var(--color--hover)
}

.button__interval[data-v-e0b7e01c] {
    font-size: 1.35rem;
    color: var(--color--text--secondary);
    cursor: pointer
}

.button.is-selected .button__interval[data-v-e0b7e01c],.button:not(.is-selected):hover .button__interval[data-v-e0b7e01c] {
    color: var(--color--text)
}

.tooltip[data-v-e0b7e01c] {
    padding: 8px;
    color: var(--color--bg--tooltip);
    background-color: var(--color--bg--tooltip)
}

.tooltip__text[data-v-e0b7e01c] {
    color: #fff
}

.CustomScaleNotes[data-v-839d57e4] {
    color: var(--color--text)
}

.customScaleNotesHeader[data-v-839d57e4] {
    font-size: 2rem
}

.scale-notes[data-v-839d57e4] {
    display: flex;
    flex-direction: row
}

.scale-notes [data-v-839d57e4] {
    margin-right: 8px
}

.scale-note-label[data-v-839d57e4] {
    font-size: 1.5rem;
    text-align: center
}

.CustomFretRange[data-v-13e93ec2] {
    font-size: 2rem;
    color: var(--color--text)
}

.fretBounds[data-v-13e93ec2] {
    display: flex;
    text-align: center
}

.fretBounds [data-v-13e93ec2] {
    margin-right: 32px
}

.dot[data-v-a9b854a2] {
    width: 10px;
    height: 10px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    flex: 0 0 auto
}

.dot.dot.dot[data-v-a9b854a2] {
    margin-right: 20px
}

.mobile-info-bar[data-v-a9b854a2] {
    display: flex;
    justify-content: space-between;
    font-size: medium;
    padding: 16px 16px 16px 14px;
    color: var(--color--text)
}

.mobile-info-bar__chevron[data-v-a9b854a2] {
    font-size: 1.4rem
}

@media(min-width: 50em) {
    .settings[data-v-a9b854a2] {
        display:flex;
        align-items: flex-start;
        border-radius: 10px
    }

    .settings [data-v-a9b854a2] {
        margin-right: 40px
    }

    .properties[data-v-a9b854a2] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto
    }

    .properties [data-v-a9b854a2] {
        margin-right: 10px
    }
}

.intervals[data-v-a9b854a2] {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
    gap: 1px
}

@media(max-width: 49.99em) {
    .intervals[data-v-a9b854a2] {
        margin-bottom:1px
    }
}

@media(min-width: 50em) {
    .intervals[data-v-a9b854a2] {
        grid-template-columns:repeat(auto-fill,60px);
        align-content: center;
        gap: 10px;
        flex: 1 1 100%;
        align-self: stretch
    }
}

.custom-scale-notes[data-v-a9b854a2] {
    font-size: 3rem
}

.tools[data-v-a9b854a2] {
    --color--text: var(--color-text-inverted);
    --color--bg--highlight: #fff
}

@media(max-width: 49.99em) {
    .tools[data-v-a9b854a2] {
        display:grid;
        grid-auto-rows: auto;
        grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
        gap: 1px
    }
}

@media(min-width: 50em) {
    .tools[data-v-a9b854a2] {
        display:flex;
        margin-bottom: 8px
    }

    .tools [data-v-a9b854a2] {
        margin-right: 10px
    }
}

.tools.is-mobile-device[data-v-a9b854a2] {
    --color--text: #fff
}

.tools__extra [data-v-a9b854a2] {
    margin-bottom: 10px
}

.click[data-v-a9b854a2] {
    cursor: pointer
}

@media(min-width: 50em) {
    .FretboardSequences[data-v-3fc7bbd2] {
        max-width:1400px;
        margin: auto;
        padding: 0 10px
    }

    .sequences [data-v-3fc7bbd2] {
        margin-bottom: 40px
    }
}

@media(max-width: 49.99em) {
    .tools[data-v-3fc7bbd2] {
        display:grid;
        grid-template: auto/1fr 1fr;
        gap: 1px;
        margin: 1px
    }
}

@media(min-width: 50em) {
    .tools[data-v-3fc7bbd2] {
        display:flex;
        justify-content: center;
        margin-bottom: 8px
    }

    .tools [data-v-3fc7bbd2] {
        margin-right: 10px
    }
}

@media(max-width: 49.99em) {
    .tools__add-sequence[data-v-3fc7bbd2] {
        grid-column:1/span 2
    }
}

.text-no-scales[data-v-3fc7bbd2] {
    text-align: center;
    color: var(--color--text)
}

@media(max-width: 49.99em) {
    .text-no-scales[data-v-3fc7bbd2] {
        line-height:1.8;
        padding: 20px;
        color: var(--color--text--secondary)
    }
}

.CustomTuning[data-v-9b06b43e] {
    color: var(--color--text)
}

.customTuningHeader[data-v-9b06b43e] {
    font-weight: 400;
    margin-bottom: 4px;
    text-align: center
}

.tuningStrings[data-v-9b06b43e] {
    display: grid;
    font-size: 24px;
    grid-template-columns: 1fr repeat(6,auto) 1fr
}

.tuningStrings.is-mobile-device[data-v-9b06b43e] {
    grid-template-columns: repeat(3,auto)
}

.tuningString[data-v-9b06b43e] {
    margin-right: 8px;
    margin-bottom: 8px
}

.PositionNudgers[data-v-6a9734bc] {
    color: var(--color--text);
    position: absolute;
    top: 550px;
    left: 0;
    right: 0;
    font-size: 36px;
    display: flex;
    justify-content: center
}

.nudger[data-v-6a9734bc] {
    cursor: pointer;
    margin: 16px;
    background-color: var(--color--bg--accent);
    border-radius: 1000px;
    width: 2em;
    height: 2em;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.root.is-mobile-device.is-layout-landscape[data-v-6fff524f] {
    overflow-y: hidden;
    height: 100vh
}

.App[data-v-6fff524f] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    background-color: var(--color--bg);
    min-height: 100vh
}

@media(max-width: 49.99em)and (orientation:portrait) {
    .fretboard-wrapper[data-v-6fff524f] {
        margin:20px 0
    }

    .fretboard-wrapper.is-large-instrument[data-v-6fff524f] {
        margin: 0;
        padding: 20px
    }
}

@media(max-width: 49.99em)and (orientation:landscape) {
    .fretboard-wrapper[data-v-6fff524f] {
        padding:40px 20px
    }
}

@media(min-width: 50em) {
    .fretboard-wrapper[data-v-6fff524f] {
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 33vh;
        margin-bottom: 60px;
        padding: 70px 0 40px
    }
}

.header[data-v-6fff524f] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 49.99em) {
    .header[data-v-6fff524f] {
        background-color:var(--color--bg--tooltip)
    }
}

@media(min-width: 50em) {
    .header[data-v-6fff524f] {
        margin-bottom:40px
    }
}

.header.is-mobile-device[data-v-6fff524f] {
    position: static
}

.header__logo[data-v-6fff524f] {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    color: #fff
}

.header__logo [data-v-6fff524f] {
    margin-right: 8px
}

@media(min-width: 50em) {
    .header__logo[data-v-6fff524f] {
        padding:4px 6px;
        background-color: #171e29
    }

    .header__logo [data-v-6fff524f] {
        margin-right: 5px
    }

    .header__logo[data-v-6fff524f]:hover {
        background-color: var(--color--hover)
    }
}

.logo__icon[data-v-6fff524f] {
    font-size: 20px
}

.logo__icon.is-ukulele[data-v-6fff524f] {
    font-size: 14px
}

.logo__text[data-v-6fff524f] {
    font-size: 20px;
    font-weight: 700;
    transition: color .2s
}

@media(min-width: 50em) {
    .logo__text[data-v-6fff524f] {
        font-size:24px
    }
}

.header__sublinks[data-v-6fff524f] {
    display: flex;
    justify-content: flex-end;
    padding: 10px
}

.sublinks__item[data-v-6fff524f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    font-size: 18px;
    border: 1px solid var(--color--text);
    color: var(--color--text);
    cursor: pointer
}

.sublinks__item[data-v-6fff524f]:first-child {
    margin-right: 10px
}

.header__subpage-header[data-v-6fff524f] {
    flex: 1 1 100%;
    font-size: 18px;
    font-weight: 700;
    color: var(--color--text)
}

.footer[data-v-6fff524f] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 100%;
    margin-top: 40px
}

.dot[data-v-6fff524f] {
    width: 14px;
    height: 14px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    display: inline-block;
    margin-right: 10px
}

.header[data-v-6fff524f] {
    z-index: 100
}

.nav[data-v-6fff524f] {
    display: flex;
    justify-content: flex-end
}

.nav [data-v-6fff524f] {
    margin-right: 20px
}

.nav__link[data-v-6fff524f] {
    display: flex;
    align-items: center;
    font-size: 1.35rem;
    color: var(--color--text--secondary);
    cursor: pointer
}

.nav__link [data-v-6fff524f] {
    margin-right: 6px
}

.nav__link[data-v-6fff524f]:hover {
    color: var(--color--hover)
}

.nav__link__text[data-v-6fff524f] {
    cursor: pointer
}

.link-support[data-v-6fff524f] {
    color: var(--color--red)
}

.link-tgld[data-v-6fff524f]:hover {
    color: var(--color--orange)
}

.instrument-background[data-v-6fff524f] {
    z-index: 1;
    position: relative;
    width: 100%
}

@media(min-width: 50em) {
    .instrument-background[data-v-6fff524f] {
        width:1846px
    }
}

.background-background[data-v-6fff524f] {
    width: 100%;
    position: absolute
}

@media(min-width: 50em) {
    .background-background[data-v-6fff524f] {
        width:1846px
    }
}

.instrument-background.is-layout-landscape[data-v-6fff524f] {
    width: 1846px
}

.instrument-background-scroll[data-v-6fff524f] {
    overflow-x: hidden;
    overflow-y: hidden
}

@media(min-width: 50em) {
    .instrument-background-scroll[data-v-6fff524f] {
        overflow-x:auto
    }
}

.instrument-background-scroll.is-mobile-device[data-v-6fff524f] {
    font-size: .5em
}

.instrument-background-scroll.is-mobile-device.is-layout-landscape[data-v-6fff524f] {
    font-size: 1em;
    overflow-x: auto
}

.bg-and-frets[data-v-6fff524f] {
    position: relative
}

.bg-and-frets.is-layout-landscape.is-short-screen[data-v-6fff524f] {
    transform: scale(.5) translateY(-50%) translateX(-50%)
}

.scale-titles[data-v-6fff524f] {
    position: absolute;
    top: 30px;
    left: 300px;
    font-size: 5em;
    color: #fff;
    font-weight: 700;
    text-shadow: -1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000
}

.scale-texts[data-v-6fff524f] {
    display: flex;
    flex-direction: row
}

.strings-text[data-v-6fff524f] {
    text-align: center
}

.scale-text[data-v-6fff524f] {
    padding-left: 1em;
    padding-right: 1em
}

body,html {
    display: flex;
    flex-direction: column
}

@font-face {
    font-family: hw-andy-bold;
    src: url(/fonts/hw-andy-bold.25e4ef69.woff) format("woff")
}

html {
    min-height: 100%;
    font-size: 10px;
    overflow-x: hidden
}

body {
    flex: 1 1 auto
}

a,h1,h2,li,p {
    font-family: IBM Plex Sans,Fira Sans,-apple-system,BlinkMacSystemFont,San Francisco,Apple Color Emoji,Roboto Regular,Roboto,Droid Sans,Noto Sans Symbols,Segoe UI,Segoe UI Emoji,Segoe UI Symbol,Oxygen-Sans,Ubuntu,Cantarell,Arimo,DejaVu Sans,Helvetica Neue,Helvetica,ui-sans-serif,sans-serif;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

a {
    text-decoration: none
}

sup {
    vertical-align: .25rem
}

div {
    transition: border-color .2s,background-color .2s
}

.svg-inline--fa,a,p {
    transition: color .2s
}

.fade-enter,.fade-leave-to {
    opacity: 0
}

.fade-enter-to,.fade-leave {
    opacity: 1
}

.fade-enter-active {
    transition: opacity .2s
}

.fade-leave-active {
    transition: opacity .1s
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0
}

.hand-drawn {
    font-family: hw-andy-bold;
    font-size: 1.5em
}

.VButton[data-v-8ccaa480] {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    border: none;
    box-shadow: 0 0 0 1px var(--color--border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color--text);
    background-color: transparent;
    transition: border-color .2s,background-color .2s;
    cursor: pointer
}

.VButton.is-disabled[data-v-8ccaa480] {
    border-color: var(--color--border);
    background-color: var(--color--border);
    cursor: not-allowed
}

.VButton.is-active[data-v-8ccaa480] {
    border-color: var(--color--highlight);
    color: var(--color--highlight)
}

.VButton.is-active[data-v-8ccaa480]:hover,.VButton.is-active[data-v-8ccaa480]:not(.is-dark-mode-on) {
    color: var(--color--text--inverted);
    background-color: var(--color--highlight)
}

.VButton[data-v-8ccaa480]:not(.is-disabled):focus {
    border-color: var(--color--hover)
}

@media(max-width: 49.99em) {
    .VButton[data-v-8ccaa480] {
        justify-content:center
    }

    .VButton [data-v-8ccaa480] {
        margin-right: 12px
    }
}

@media(min-width: 50em) {
    .VButton[data-v-8ccaa480] {
        margin-right:8px;
        border-radius: 1000px;
        border-width: 1px;
        padding-left: 8px;
        padding-right: 8px;
        padding: 4px 8px;
        font-size: 1.4rem;
        border: 1px solid var(--color--bg--highlight);
        box-shadow: none;
        background-color: var(--color--bg--highlight)
    }

    .VButton [data-v-8ccaa480] {
        margin-right: 8px
    }

    .VButton[data-v-8ccaa480]:not(.is-disabled):hover {
        border-color: var(--color--hover);
        color: var(--color--text--inverted);
        background-color: var(--color--hover)
    }
}

.icon[data-v-8ccaa480],.text[data-v-8ccaa480] {
    cursor: pointer
}

.VButton.is-disabled .icon[data-v-8ccaa480],.VButton.is-disabled .text[data-v-8ccaa480] {
    cursor: not-allowed
}

.VMultiRange[data-v-1ceb3d74] {
    display: grid;
    position: relative;
    cursor: pointer
}

.VMultiRange[data-v-1ceb3d74]:after,.VMultiRange[data-v-1ceb3d74]:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px
}

.VMultiRange[data-v-1ceb3d74]:before {
    right: 0;
    left: 0;
    background-color: var(--color--border)
}

.VMultiRange[data-v-1ceb3d74]:after {
    right: calc(100% - var(--fill--stop));
    left: var(--fill--start);
    background-color: var(--color--hover)
}

.VMultiRange.is-flipped[data-v-1ceb3d74] {
    transform: scaleX(-1)
}

.slider[data-v-1ceb3d74] {
    z-index: 1;
    grid-area: 1/1;
    color: var(--color--text--secondary);
    pointer-events: none;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none
}

.slider[data-v-1ceb3d74]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    border: none;
    -moz-appearance: none;
    appearance: none;
    background-color: currentColor;
    -moz-transition: color .2s;
    transition: color .2s;
    pointer-events: auto;
    cursor: grab
}

@media(min-width: 50em) {
    .slider[data-v-1ceb3d74]::-moz-range-thumb {
        width:14px;
        height: 14px;
        border-radius: 40%;
        border: 1px solid #000;
        font-size: 1.8em
    }
}

.slider[data-v-1ceb3d74]::-moz-range-track {
    border: none;
    -moz-appearance: none;
    appearance: none;
    background: none
}

.slider[data-v-1ceb3d74]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: currentColor;
    -webkit-transition: color .2s;
    transition: color .2s;
    pointer-events: auto;
    cursor: grab
}

@media(min-width: 50em) {
    .slider[data-v-1ceb3d74]::-webkit-slider-thumb {
        width:14px;
        height: 14px;
        border-radius: 40%;
        border: 1px solid #000;
        font-size: 1.8em
    }
}

.slider[data-v-1ceb3d74]::-webkit-slider-runnable-track {
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background: none
}

.slider[data-v-1ceb3d74]:focus {
    z-index: 2;
    color: var(--color--hover);
    outline: none
}

.slider[data-v-1ceb3d74]:focus::-moz-focus-outer {
    border-style: none
}

.slider[data-v-1ceb3d74]:focus::-moz-range-thumb {
    cursor: grabbing
}

.slider[data-v-1ceb3d74]:focus::-webkit-slider-thumb {
    cursor: grabbing
}

@media(min-width: 50em) {
    .slider[data-v-1ceb3d74]:hover {
        color:var(--color--hover)
    }
}

.VPopup[data-v-92fbdd94] {
    position: absolute;
    z-index: 1000;
    font-size: 1.4rem;
    border-radius: 4px;
    filter: drop-shadow(0 0 2px var(--color--drop-shadow))
}

.arrow[data-v-92fbdd94],.arrow[data-v-92fbdd94]:before {
    position: absolute;
    z-index: -1
}

.arrow[data-v-92fbdd94]:before {
    content: "";
    transform: rotate(45deg);
    background-color: currentColor
}

.VPopup[data-popper-placement^=top]>.arrow[data-v-92fbdd94] {
    bottom: -4px
}

.VPopup[data-popper-placement^=left]>.arrow[data-v-92fbdd94] {
    right: -4px
}

.VPopup[data-popper-placement^=bottom]>.arrow[data-v-92fbdd94] {
    top: -4px
}

.VPopup[data-popper-placement^=right]>.arrow[data-v-92fbdd94] {
    left: -4px
}

.popup[data-v-180eb9a8] {
    z-index: 2000;
    color: var(--color--bg);
    background-color: var(--color--bg)
}

.VSelect[data-v-360cd65c] {
    display: grid
}

.select[data-v-360cd65c] {
    grid-area: 1/1;
    padding-right: 20px;
    opacity: .0001
}

.select[data-v-360cd65c]:disabled {
    cursor: not-allowed
}

.bar[data-v-360cd65c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-area: 1/1;
    padding: 16px 16px 16px 14px;
    color: var(--color--text)
}

.bar.is-contained[data-v-360cd65c] {
    border-bottom: 1px solid var(--color--bg--highlight)
}

.bar[data-v-360cd65c]:not(.is-contained) {
    border: 1px solid var(--color--border);
    border-radius: 4px;
    background-color: var(--color--bg)
}

.select:disabled+.bar[data-v-360cd65c] {
    opacity: .5;
    cursor: not-allowed
}

@media(min-width: 50em) {
    .bar[data-v-360cd65c] {
        padding:8px 10px
    }

    .select:not(:disabled):hover+.bar[data-v-360cd65c] {
        border-color: var(--color--hover);
        background-color: var(--color--bg--highlight)
    }

    .select:not(:disabled):focus+.bar[data-v-360cd65c] {
        border-color: var(--color--hover)
    }

    .bar.is-contained[data-v-360cd65c] {
        border: none
    }

    .bar.is-first-item[data-v-360cd65c] {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px
    }

    .bar.is-last-item[data-v-360cd65c] {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px
    }
}

.bar__label[data-v-360cd65c] {
    display: flex;
    font-size: 1.6rem
}

.bar__label [data-v-360cd65c] {
    margin-right: 20px
}

.select:focus+.bar.is-contained .bar__label[data-v-360cd65c] {
    color: var(--color--hover)
}

@media(min-width: 50em) {
    .bar__label [data-v-360cd65c] {
        margin-right:10px
    }
}

.label__icon[data-v-360cd65c] {
    width: 1.6rem;
    color: var(--color--text--secondary)
}

.select:disabled+.bar .label__text[data-v-360cd65c] {
    cursor: not-allowed
}

.bar__chevron[data-v-360cd65c] {
    font-size: 1.4rem;
    color: var(--color--text--secondary)
}

.select:focus+.bar.is-contained .bar__chevron[data-v-360cd65c] {
    color: var(--color--hover)
}

@media(min-width: 50em) {
    .bar__chevron[data-v-360cd65c] {
        font-size:1.2rem
    }

    .select:not(:focus):not(:disabled):hover+.bar .bar__chevron[data-v-360cd65c] {
        color: var(--color--hover)
    }
}

.VToggleButton[data-v-6906823b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 16px 14px;
    border: none;
    border-bottom: 1px solid var(--color--bg--highlight);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer
}

.VToggleButton [data-v-6906823b] {
    margin-right: 20px
}

.VToggleButton[data-v-6906823b]:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.VToggleButton[data-v-6906823b]:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

@media(min-width: 50em) {
    .VToggleButton[data-v-6906823b] {
        padding:8px 14px 8px 10px;
        border-bottom: none
    }

    .VToggleButton[data-v-6906823b]:hover {
        background-color: var(--color--bg--highlight)
    }
}

.label[data-v-6906823b] {
    display: flex;
    font-size: 1.6rem
}

.label [data-v-6906823b] {
    margin-right: 20px
}

@media(min-width: 50em) {
    .label [data-v-6906823b] {
        margin-right:10px
    }
}

.label__icon[data-v-6906823b] {
    width: 1.6rem;
    color: var(--color--text--secondary)
}

.label__text[data-v-6906823b] {
    color: var(--color--text);
    cursor: pointer
}

.VToggleButton:focus .label__text[data-v-6906823b] {
    color: var(--color--hover)
}

.toggle[data-v-6906823b] {
    position: relative;
    width: 22px;
    height: 10px;
    margin-right: 8px;
    border-radius: 1000px;
    border-width: 1px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--color--border);
    cursor: pointer
}

@media(min-width: 50em) {
    .toggle[data-v-6906823b] {
        width:20px;
        height: 8px
    }
}

.toggle__handle[data-v-6906823b] {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 40%;
    border: 1px solid #000;
    font-size: 1.8em;
    transform: translate(-50%,-50%);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,.3));
    transition: left .2s ease-in-out
}

.toggle__handle[data-v-6906823b]:not(.is-active) {
    left: 0;
    background-color: var(--color--text--secondary)
}

.toggle__handle.is-active[data-v-6906823b] {
    left: 100%;
    background-color: var(--color--hover)
}

@media(min-width: 50em) {
    .toggle__handle[data-v-6906823b] {
        width:14px;
        height: 14px;
        border-radius: 40%;
        border: 1px solid #000;
        font-size: 1.8em
    }
}