@charset "UTF-8";
/*! mmenu.js mmenujs.com Copyright (c) Fred Heusschen frebsite.nl License: CC-BY-NC-4.0 http://creativecommons.org/licenses/by-nc/4.0/ */
:root { --mm-lineheight:22px; }

.mm-hidden { display: none !important; }

.mm-wrapper { overflow-x: hidden; position: relative; }

.mm-menu, .mm-menu *, .mm-menu :after, .mm-menu :before { -webkit-transition-property: none; -o-transition-property: none; transition-property: none; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; }

:root { --mm-blocker-visibility-delay:0.4s; --mm-blocker-opacity-delay:0s; }

.mm-blocker { display: block; position: absolute; bottom: 100%; top: 0; right: 0; left: 0; z-index: 3; opacity: 0; background: var(--mm-color-background); -webkit-transition: bottom 0s ease var(--mm-blocker-visibility-delay), width 0.4s ease, opacity 0.4s ease var(--mm-blocker-opacity-delay), -webkit-transform 0.4s ease; transition: bottom 0s ease var(--mm-blocker-visibility-delay), width 0.4s ease, opacity 0.4s ease var(--mm-blocker-opacity-delay), -webkit-transform 0.4s ease; -o-transition: bottom 0s ease var(--mm-blocker-visibility-delay), width 0.4s ease, opacity 0.4s ease var(--mm-blocker-opacity-delay), transform 0.4s ease; transition: bottom 0s ease var(--mm-blocker-visibility-delay), width 0.4s ease, opacity 0.4s ease var(--mm-blocker-opacity-delay), transform 0.4s ease; transition: bottom 0s ease var(--mm-blocker-visibility-delay), width 0.4s ease, opacity 0.4s ease var(--mm-blocker-opacity-delay), transform 0.4s ease, -webkit-transform 0.4s ease; }

.mm-blocker:focus-visible { opacity: .75; }

.mm-btn { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 50px; padding: 0; }

.mm-btn--next, [dir=rtl] .mm-btn--prev { --mm-btn-rotate:135deg; }

.mm-btn--prev, [dir=rtl] .mm-btn--next { --mm-btn-rotate:-45deg; }

.mm-btn--next:after, .mm-btn--prev:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; width: 8px; height: 8px; margin: auto; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid var(--mm-color-icon); border-bottom: none; border-right: none; -webkit-transform: rotate(var(--mm-btn-rotate)); -ms-transform: rotate(var(--mm-btn-rotate)); transform: rotate(var(--mm-btn-rotate)); }

.mm-btn--prev:before { inset-inline-start: 23px; }

.mm-btn--next:after { inset-inline-end: 23px; }

.mm-btn--close:before { content: "×"; font-size: 150%; }

.mm-btnreset { padding: 0; background: 0 0; border: none; cursor: pointer; }

.mm-divider { -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: -webkit-sticky; position: sticky; z-index: 2; top: 0; min-height: var(--mm-lineheight); padding: calc((var(--mm-listitem-size) * .65 - var(--mm-lineheight)) * .5) 20px; font-size: 75%; text-transform: uppercase; background: var(--mm-color-background); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--mm-color-background-highlight)), to(var(--mm-color-background-highlight))); background-image: -o-linear-gradient(var(--mm-color-background-highlight), var(--mm-color-background-highlight)); background-image: linear-gradient(var(--mm-color-background-highlight), var(--mm-color-background-highlight)); opacity: 1; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; }

.mm-navbar:not(.mm-hidden) ~ .mm-listview .mm-divider { top: var(--mm-navbar-size); }

:root { --mm-listitem-size:50px; }

.mm-listitem { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 0; margin: 0; color: var(--mm-color-text); border-color: var(--mm-color-border); }

.mm-listitem:after { content: ""; border-color: inherit; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: absolute; inset-inline-start: 20px; inset-inline-end: 0; bottom: 0; }

.mm-listitem__btn, .mm-listitem__text { padding: calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 0; }

.mm-listitem__text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 10%; flex-basis: 10%; display: block; padding-left: 20px; padding-right: 20px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.mm-listitem__btn { display: block; position: relative; width: auto; -webkit-padding-end: 50px; padding-inline-end: 50px; border-color: inherit; background: rgba(3, 2, 1, 0); }

.mm-listitem__btn:not(.mm-listitem__text) { border-left-width: 1px; border-left-style: solid; }

.mm-listitem--selected > .mm-listitem__text { background: var(--mm-color-background-emphasis); }

.mm-listitem--opened > .mm-listitem__btn, .mm-listitem--opened > .mm-panel { background: var(--mm-color-background-highlight); }

.mm-listview { list-style: none; display: block; padding: 0; margin: 0; }

.mm-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; -ms-scroll-chaining: none; overscroll-behavior: none; background: var(--mm-color-background); border-color: var(--mm-color-border); color: var(--mm-color-text); line-height: var(--mm-lineheight); -webkit-tap-highlight-color: var(--mm-color-background-emphasis); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.mm-menu ::-webkit-input-placeholder { color: var(--mm-color-text-dimmed); }

.mm-menu ::-moz-placeholder { color: var(--mm-color-text-dimmed); }

.mm-menu :-ms-input-placeholder { color: var(--mm-color-text-dimmed); }

.mm-menu ::-ms-input-placeholder { color: var(--mm-color-text-dimmed); }

.mm-menu ::placeholder { color: var(--mm-color-text-dimmed); }

.mm-menu, .mm-menu * { -webkit-box-sizing: border-box; box-sizing: border-box; }

.mm-menu :focus, .mm-menu :focus-visible, .mm-menu:focus, .mm-menu:focus-visible { outline: 0; }

.mm-menu a, .mm-menu button, .mm-menu label { color: inherit; }

.mm-menu a:focus, .mm-menu button:focus, .mm-menu label:focus { outline: 0; }

.mm-menu a:focus-visible, .mm-menu button:focus-visible, .mm-menu label:focus-visible { outline: 2px solid var(--mm-color-focusring); outline-offset: -5px; }

.mm-menu input:focus, .mm-menu input:focus-visible, .mm-menu select:focus, .mm-menu select:focus-visible, .mm-menu textarea:focus, .mm-menu textarea:focus-visible { outline: 2px solid var(--mm-color-focusring); outline-offset: 2px; }

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited { text-decoration: none; color: inherit; }

:root { --mm-navbar-size:50px; }

.mm-navbar { display: -webkit-box; display: -ms-flexbox; display: flex; position: -webkit-sticky; position: sticky; top: 0; z-index: 2; min-height: var(--mm-navbar-size); padding-top: env(safe-area-inset-top); color: var(--mm-color-text-dimmed); text-align: center; opacity: 1; background: var(--mm-color-background); border-bottom: 1px solid var(--mm-color-border); -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; }

.mm-navbar > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; }

.mm-navbar__btn { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }

.mm-navbar__title { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 20px; overflow: hidden; }

.mm-navbar__title[href="#"] { pointer-events: none; }

.mm-navbar__title > span { -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.mm-btn.mm-hidden + .mm-navbar__title:not(:last-child) { -webkit-padding-start: 60px; padding-inline-start: 60px; -webkit-padding-end: 10px; padding-inline-end: 10px; }

.mm-btn:not(.mm-hidden) + .mm-navbar__title:last-child { -webkit-padding-start: 10px; padding-inline-start: 10px; -webkit-padding-end: 60px; padding-inline-end: 60px; }

.mm-panel { --mm-panel-child-offset:100%; --mm-panel-parent-offset:-30%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; -webkit-overflow-scrolling: touch; overflow: hidden; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; color: var(--mm-color-text); border-color: var(--mm-color-border); background: var(--mm-color-background); -webkit-transform: translate3d(var(--mm-panel-child-offset), 0, 0); transform: translate3d(var(--mm-panel-child-offset), 0, 0); -webkit-transition-property: inset-inline-start,-webkit-transform; transition-property: inset-inline-start,-webkit-transform; -o-transition-property: transform,inset-inline-start; transition-property: transform,inset-inline-start; transition-property: transform,inset-inline-start,-webkit-transform; }

[dir=rtl] .mm-panel { --mm-panel-child-offset:-100%; --mm-panel-parent-offset:30%; }

.mm-panel:after { content: ""; display: block; height: var(--mm-listitem-size); }

.mm-panel:focus { outline: 0; }

.mm-panel--opened { z-index: 2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }

.mm-panel--parent { -webkit-transform: translate3d(var(--mm-panel-parent-offset), 0, 0); transform: translate3d(var(--mm-panel-parent-offset), 0, 0); z-index: 0; }

.mm-panel--highest { z-index: 3; }

.mm-menu--opened .mm-panel--noanimation { -webkit-transition: none !important; -o-transition: none !important; transition: none !important; -webkit-transition-duration: 0s !important; -o-transition-duration: 0s !important; transition-duration: 0s !important; }

.mm-panel__content { padding: 20px; }

.mm-panels { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; height: 100%; overflow: hidden; background: var(--mm-color-background); border-color: var(--mm-color-border); color: var(--mm-color-text); }

.mm-panels:focus { outline: 0; }

:root { --mm-toggle-size:34px; }

.mm-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; -webkit-box-flex: calc(var(--mm-toggle-size) * 1.75); -ms-flex: calc(var(--mm-toggle-size) * 1.75) 0 0px; flex: calc(var(--mm-toggle-size) * 1.75) 0 0; height: var(--mm-toggle-size); -webkit-margin-end: 10px; margin-inline-end: 10px; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border: none !important; border-radius: var(--mm-toggle-size); border: var(--mm-color-border); background: var(--mm-color-border); cursor: pointer; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; }

.mm-toggle:before { content: ""; aspect-ratio: 1; margin: 2px; border-radius: 100%; background: var(--mm-color-background); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform,-webkit-transform; }

.mm-toggle:checked { background: #4bd963; }

.mm-toggle:checked:before { -webkit-transform: translateX(calc(var(--mm-toggle-size) * .75)); -ms-transform: translateX(calc(var(--mm-toggle-size) * .75)); transform: translateX(calc(var(--mm-toggle-size) * .75)); }

[dir=rtl] .mm-toggle:checked:before { -webkit-transform: translateX(calc(var(--mm-toggle-size) * -.75)); -ms-transform: translateX(calc(var(--mm-toggle-size) * -.75)); transform: translateX(calc(var(--mm-toggle-size) * -.75)); }

.mm-listitem--vertical > .mm-panel { position: static; width: 100%; padding: 10px 0 10px 20px; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; -webkit-transition: none !important; -o-transition: none !important; transition: none !important; }

.mm-listitem--vertical > .mm-panel:after { content: none; display: none; }

.mm-listitem--vertical:not(.mm-listitem--opened) > .mm-panel { display: none; }

.mm-listitem--vertical > .mm-listitem__btn { height: var(--mm-listitem-size); bottom: auto; }

.mm-listitem--vertical .mm-listitem:last-child:after { border-color: transparent; }

.mm-listitem--opened > .mm-listitem__btn:after { -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); right: 19px; }

:root { --mm-size:80%; --mm-min-size:240px; --mm-max-size:440px; }

.mm-menu--offcanvas { position: fixed; z-index: 0; }

.mm-page { -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 100vh; background: inherit; }

:where(.mm-slideout) { position: relative; z-index: 1; width: 100%; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-property: width,-webkit-transform; transition-property: width,-webkit-transform; -o-transition-property: width,transform; transition-property: width,transform; transition-property: width,transform,-webkit-transform; }

.mm-wrapper--opened, .mm-wrapper--opened body { overflow: hidden; }

.mm-wrapper__blocker { background: rgba(0, 0, 0, 0.4); }

.mm-wrapper--opened .mm-wrapper__blocker { --mm-blocker-visibility-delay:0s; --mm-blocker-opacity-delay:0.4s; bottom: 0; opacity: .5; }

.mm-menu { --mm-translate-horizontal:0; --mm-translate-vertical:0; }

.mm-menu--position-left, .mm-menu--position-left-front { right: auto; }

.mm-menu--position-right, .mm-menu--position-right-front { left: auto; }

.mm-menu--position-left, .mm-menu--position-left-front, .mm-menu--position-right, .mm-menu--position-right-front { width: clamp(var(--mm-min-size), var(--mm-size), var(--mm-max-size)); }

.mm-menu--position-left-front { --mm-translate-horizontal:-100%; }

.mm-menu--position-right-front { --mm-translate-horizontal:100%; }

.mm-menu--position-top { bottom: auto; }

.mm-menu--position-bottom { top: auto; }

.mm-menu--position-bottom, .mm-menu--position-top { width: 100%; height: clamp(var(--mm-min-size), var(--mm-size), var(--mm-max-size)); }

.mm-menu--position-top { --mm-translate-vertical:-100%; }

.mm-menu--position-bottom { --mm-translate-vertical:100%; }

.mm-menu--position-bottom, .mm-menu--position-left-front, .mm-menu--position-right-front, .mm-menu--position-top { z-index: 2; -webkit-transform: translate3d(var(--mm-translate-horizontal), var(--mm-translate-vertical), 0); transform: translate3d(var(--mm-translate-horizontal), var(--mm-translate-vertical), 0); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform,-webkit-transform; }

.mm-menu--position-bottom.mm-menu--opened, .mm-menu--position-left-front.mm-menu--opened, .mm-menu--position-right-front.mm-menu--opened, .mm-menu--position-top.mm-menu--opened { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.mm-wrapper--position-left { --mm-translate-horizontal:clamp(
      var(--mm-min-size),
      var(--mm-size),
      var(--mm-max-size)
  ); }

.mm-wrapper--position-right { --mm-translate-horizontal:clamp(
      calc(-1 * var(--mm-max-size)),
      calc(-1 * var(--mm-size)),
      calc(-1 * var(--mm-min-size))
  ); }

.mm-wrapper--position-left .mm-slideout, .mm-wrapper--position-right .mm-slideout { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.mm-wrapper--position-left.mm-wrapper--opened .mm-slideout, .mm-wrapper--position-right.mm-wrapper--opened .mm-slideout { -webkit-transform: translate3d(var(--mm-translate-horizontal), 0, 0); transform: translate3d(var(--mm-translate-horizontal), 0, 0); }

.mm-wrapper--position-bottom .mm-wrapper__blocker, .mm-wrapper--position-left-front .mm-wrapper__blocker, .mm-wrapper--position-right-front .mm-wrapper__blocker, .mm-wrapper--position-top .mm-wrapper__blocker { z-index: 1; }

.mm-menu--theme-light { --mm-color-background:#f3f3f3; --mm-color-border:rgb(0 0 0 / 0.15); --mm-color-icon:rgb(0 0 0 / 0.4); --mm-color-text:rgb(0 0 0 / 0.8); --mm-color-text-dimmed:rgb(0 0 0 / 0.4); --mm-color-background-highlight:rgb(0 0 0 / 0.05); --mm-color-background-emphasis:rgb(255 255 255 / 0.75); --mm-color-focusring:#06c; }

.mm-menu--theme-light-contrast { --mm-color-background:#f3f3f3; --mm-color-border:rgb(0 0 0 / 0.5); --mm-color-icon:rgb(0 0 0 / 0.5); --mm-color-text:#000; --mm-color-text-dimmed:rgb(0 0 0 / 0.7); --mm-color-background-highlight:rgb(0 0 0 / 0.05); --mm-color-background-emphasis:rgb(255 255 255 / 0.9); --mm-color-focusring:#06c; }

.mm-menu--theme-dark { --mm-color-background:#333; --mm-color-border:rgb(0, 0, 0, 0.4); --mm-color-icon:rgb(255, 255, 255, 0.4); --mm-color-text:rgb(255, 255, 255, 0.8); --mm-color-text-dimmed:rgb(255, 255, 255, 0.4); --mm-color-background-highlight:rgb(255, 255, 255, 0.08); --mm-color-background-emphasis:rgb(0, 0, 0, 0.1); --mm-color-focusring:#06c; }

.mm-menu--theme-dark-contrast { --mm-color-background:#333; --mm-color-border:rgb(255 255 255 / 0.5); --mm-color-icon:rgb(255 255 255 / 0.5); --mm-color-text:#fff; --mm-color-text-dimmed:rgb(255 255 255 / 0.7); --mm-color-background-highlight:rgb(255 255 255 / 0.1); --mm-color-background-emphasis:rgb(0 0 0 / 0.3); --mm-color-focusring:#06c; }

.mm-menu--theme-white { --mm-color-background:#fff; --mm-color-border:rgb(0 0 0 / 0.15); --mm-color-icon:rgb(0 0 0 / 0.3); --mm-color-text:rgb(0 0 0 / 0.8); --mm-color-text-dimmed:rgb(0 0 0 / 0.3); --mm-color-background-highlight:rgb(0 0 0 / 0.06); --mm-color-background-emphasis:rgb(0 0 0 / 0.03); --mm-color-focusring:#06c; }

.mm-menu--theme-white-contrast { --mm-color-background:#fff; --mm-color-border:rgb(0 0 0 / 0.5); --mm-color-icon:rgb(0 0 0 / 0.5); --mm-color-text:#000; --mm-color-text-dimmed:rgb(0 0 0 / 0.7); --mm-color-background-highlight:rgb(0 0 0 / 0.07); --mm-color-background-emphasis:rgb(0 0 0 / 0.035); --mm-color-focusring:#06c; }

.mm-menu--theme-black { --mm-color-background:#000; --mm-color-border:rgb(255 255 255 / 0.2); --mm-color-icon:rgb(255 255 255 / 0.4); --mm-color-text:rgb(255 255 255 / 0.7); --mm-color-text-dimmed:rgb(255 255 255 / 0.4); --mm-color-background-highlight:rgb(255 255 255 / 0.1); --mm-color-background-emphasis:rgb(255 255 255 / 0.06); --mm-color-focusring:#06c; }

.mm-menu--theme-black-contrast { --mm-color-background:#000; --mm-color-border:rgb(255 255 255 / 0.5); --mm-color-icon:rgb(255 255 255 / 0.5); --mm-color-text:#fff; --mm-color-text-dimmed:rgb(255 255 255 / 0.6); --mm-color-background-highlight:rgb(255 255 255 / 0.125); --mm-color-background-emphasis:rgb(255 255 255 / 0.1); --mm-color-focusring:#06c; }

.mm-counter { display: block; -webkit-padding-start: 20px; padding-inline-start: 20px; float: right; color: var(--mm-color-text-dimmed); }

[dir=rtl] .mm-counter { float: left; }

:root { --mm-iconbar-size:50px; }

.mm-menu--iconbar-left .mm-navbars, .mm-menu--iconbar-left .mm-panels { margin-left: var(--mm-iconbar-size); }

.mm-menu--iconbar-right .mm-navbars, .mm-menu--iconbar-right .mm-panels { margin-right: var(--mm-iconbar-size); }

.mm-iconbar { display: none; position: absolute; top: 0; bottom: 0; z-index: 2; width: var(--mm-iconbar-size); overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0 solid; border-color: var(--mm-color-border); background: var(--mm-color-background); color: var(--mm-color-text-dimmed); text-align: center; }

.mm-menu--iconbar-left .mm-iconbar, .mm-menu--iconbar-right .mm-iconbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.mm-menu--iconbar-left .mm-iconbar { border-right-width: 1px; left: 0; }

.mm-menu--iconbar-right .mm-iconbar { border-left-width: 1px; right: 0; }

.mm-iconbar__bottom, .mm-iconbar__top { width: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; }

.mm-iconbar__bottom > *, .mm-iconbar__top > * { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: calc((var(--mm-iconbar-size) - var(--mm-lineheight))/ 2) 0; }

.mm-iconbar__bottom a, .mm-iconbar__bottom a:hover, .mm-iconbar__top a, .mm-iconbar__top a:hover { text-decoration: none; }

.mm-iconbar__tab--selected { background: var(--mm-color-background-emphasis); }

:root { --mm-iconpanel-size:50px; }

.mm-panel--iconpanel-0 { inset-inline-start: calc(0 * var(--mm-iconpanel-size)); }

.mm-panel--iconpanel-1 { inset-inline-start: calc(1 * var(--mm-iconpanel-size)); }

.mm-panel--iconpanel-2 { inset-inline-start: calc(2 * var(--mm-iconpanel-size)); }

.mm-panel--iconpanel-3 { inset-inline-start: calc(3 * var(--mm-iconpanel-size)); }

.mm-panel--iconpanel-4 { inset-inline-start: calc(4 * var(--mm-iconpanel-size)); }

.mm-panel--iconpanel-first ~ .mm-panel { inset-inline-start: var(--mm-iconpanel-size); }

.mm-menu--iconpanel .mm-panel--parent .mm-divider, .mm-menu--iconpanel .mm-panel--parent .mm-navbar { opacity: 0; }

.mm-menu--iconpanel .mm-panels > .mm-panel--parent { overflow-y: hidden; -webkit-transform: unset; -ms-transform: unset; transform: unset; }

.mm-menu--iconpanel .mm-panels > .mm-panel:not(.mm-panel--iconpanel-first):not(.mm-panel--iconpanel-0) { border-inline-start-width: 1px; border-inline-start-style: solid; }

.mm-navbars { -ms-flex-negative: 0; flex-shrink: 0; }

.mm-navbars .mm-navbar { position: relative; padding-top: 0; border-bottom: none; }

.mm-navbars--top { border-bottom: 1px solid var(--mm-color-border); }

.mm-navbars--top .mm-navbar:first-child { padding-top: env(safe-area-inset-top); }

.mm-navbars--bottom { border-top: 1px solid var(--mm-color-border); }

.mm-navbars--bottom .mm-navbar:last-child { padding-bottom: env(safe-area-inset-bottom); }

.mm-navbar__breadcrumbs { -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mm-navbar__breadcrumbs > * { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-padding-end: 6px; padding-inline-end: 6px; }

.mm-navbar__breadcrumbs > a { text-decoration: underline; }

.mm-navbar__breadcrumbs:not(:last-child) { -webkit-padding-end: 0; padding-inline-end: 0; }

.mm-btn:not(.mm-hidden) + .mm-navbar__breadcrumbs { -webkit-padding-start: 0; padding-inline-start: 0; }

.mm-navbar__tab { padding: 0 10px; border: 1px solid transparent; }

.mm-navbar__tab--selected { background: var(--mm-color-background); }

.mm-navbar__tab--selected:not(:first-child) { border-inline-start-color: var(--mm-color-border); }

.mm-navbar__tab--selected:not(:last-child) { border-inline-end-color: var(--mm-color-border); }

.mm-navbars--top.mm-navbars--has-tabs { border-bottom: none; }

.mm-navbars--top.mm-navbars--has-tabs .mm-navbar { background: var(--mm-color-background-emphasis); }

.mm-navbars--top.mm-navbars--has-tabs .mm-navbar--tabs ~ .mm-navbar { background: var(--mm-color-background); }

.mm-navbars--top.mm-navbars--has-tabs .mm-navbar:not(.mm-navbar--tabs):last-child { border-bottom: 1px solid var(--mm-color-border); }

.mm-navbars--top .mm-navbar__tab { border-bottom-color: var(--mm-color-border); }

.mm-navbars--top .mm-navbar__tab--selected { border-top-color: var(--mm-color-border); border-bottom-color: transparent; }

.mm-navbars--bottom.mm-navbar--has-tabs { border-top: none; }

.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar { background: var(--mm-color-background); }

.mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs, .mm-navbars--bottom.mm-navbar--has-tabs .mm-navbar--tabs ~ .mm-navbar { background: var(--mm-color-background-emphasis); }

.mm-navbars--bottom .mm-navbar__tab { border-top-color: var(--mm-color-border); }

.mm-navbars--bottom .mm-navbar__tab--selected { border-bottom-color: var(--mm-color-border); border-top-color: transparent; }

.mm-searchfield { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: var(--mm-navbar-size); padding: 0; overflow: hidden; }

.mm-searchfield__input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; max-width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.mm-searchfield__input input { display: block; width: 100%; max-width: 100%; height: calc(var(--mm-navbar-size) * .7); min-height: auto; max-height: auto; margin: 0; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-radius: 4px; line-height: calc(var(--mm-navbar-size) * .7); font: inherit; font-size: inherit; }

.mm-searchfield__input input, .mm-searchfield__input input:focus, .mm-searchfield__input input:hover { background: var(--mm-color-background-highlight); color: var(--mm-color-text); }

.mm-menu[class*=-contrast] .mm-searchfield__input input { border: 1px solid var(--mm-color-border); }

.mm-searchfield__input input::-ms-clear { display: none; }

.mm-searchfield__btn { display: none; position: absolute; inset-inline-end: 0; top: 0; bottom: 0; }

.mm-searchfield--searching .mm-searchfield__btn { display: block; }

.mm-searchfield__cancel { display: block; position: relative; -webkit-margin-end: -100px; margin-inline-end: -100px; -webkit-padding-start: 5px; padding-inline-start: 5px; -webkit-padding-end: 20px; padding-inline-end: 20px; visibility: hidden; line-height: var(--mm-navbar-size); text-decoration: none; -webkit-transition-property: visibility,margin; -o-transition-property: visibility,margin; transition-property: visibility,margin; }

.mm-searchfield--cancelable .mm-searchfield__cancel { visibility: visible; -webkit-margin-end: 0; margin-inline-end: 0; }

.mm-panel--search { left: 0 !important; right: 0 !important; width: 100% !important; border: none !important; }

.mm-panel__splash { padding: 20px; }

.mm-panel--searching .mm-panel__splash { display: none; }

.mm-panel__noresults { display: none; padding: 40px 20px; color: var(--mm-color-text-dimmed); text-align: center; font-size: 150%; line-height: 1.4; }

.mm-panel--noresults .mm-panel__noresults { display: block; }

:root { --mm-sectionindexer-size:20px; }

.mm-sectionindexer { background: inherit; text-align: center; font-size: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; width: var(--mm-sectionindexer-size); position: absolute; top: 0; bottom: 0; inset-inline-end: calc(-1 * var(--mm-sectionindexer-size)); z-index: 5; -webkit-transition-property: inset-inline-end; -o-transition-property: inset-inline-end; transition-property: inset-inline-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }

.mm-sectionindexer a { color: var(--mm-color-text-dimmed); line-height: 1; text-decoration: none; display: block; }

.mm-sectionindexer ~ .mm-panel { -webkit-padding-end: 0; padding-inline-end: 0; }

.mm-sectionindexer--active { right: 0; }

.mm-sectionindexer--active ~ .mm-panel { -webkit-padding-end: var(--mm-sectionindexer-size); padding-inline-end: var(--mm-sectionindexer-size); }

.mm-menu--selected-hover .mm-listitem__btn, .mm-menu--selected-hover .mm-listitem__text, .mm-menu--selected-parent .mm-listitem__btn, .mm-menu--selected-parent .mm-listitem__text { -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; }

@media (hover: hover) { .mm-menu--selected-hover .mm-listview:hover > .mm-listitem--selected:not(:hover) > .mm-listitem__text { background: 0 0; } .mm-menu--selected-hover .mm-listitem__btn:hover, .mm-menu--selected-hover .mm-listitem__text:hover { background: var(--mm-color-background-emphasis); } }

.mm-menu--selected-parent .mm-listitem__btn, .mm-menu--selected-parent .mm-listitem__text { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; }

@media (hover: hover) { .mm-menu--selected-parent .mm-listitem__btn:hover, .mm-menu--selected-parent .mm-listitem__text:hover { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } }

.mm-menu--selected-parent .mm-panel--parent .mm-listitem:not(.mm-listitem--selected-parent) > .mm-listitem__text { background: 0 0; }

.mm-menu--selected-parent .mm-listitem--selected-parent > .mm-listitem__btn, .mm-menu--selected-parent .mm-listitem--selected-parent > .mm-listitem__text { background: var(--mm-color-background-emphasis); }

:root { --mm-sidebar-collapsed-size:50px; --mm-sidebar-expanded-size:var(--mm-max-size); }

.mm-wrapper--sidebar-collapsed .mm-slideout { width: calc(100% - var(--mm-sidebar-collapsed-size)); -webkit-transform: translate3d(var(--mm-sidebar-collapsed-size), 0, 0); transform: translate3d(var(--mm-sidebar-collapsed-size), 0, 0); }

[dir=rtl] .mm-wrapper--sidebar-collapsed .mm-slideout { -webkit-transform: none; -ms-transform: none; transform: none; }

.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-divider, .mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-navbar { opacity: 0; }

.mm-wrapper--sidebar-expanded .mm-menu--sidebar-expanded { width: var(--mm-sidebar-expanded-size); border-right-width: 1px; border-right-style: solid; }

.mm-wrapper--sidebar-expanded.mm-wrapper--opened { overflow: auto; }

.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-wrapper__blocker { display: none; }

.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout { width: calc(100% - var(--mm-sidebar-expanded-size)); -webkit-transform: translate3d(var(--mm-sidebar-expanded-size), 0, 0); transform: translate3d(var(--mm-sidebar-expanded-size), 0, 0); }

[dir=rtl] .mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-slideout { -webkit-transform: none; -ms-transform: none; transform: none; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #333; text-decoration: none; }

a:visited { color: #0d0d0d; }

a:hover { color: #111; text-decoration: underline; }

.social-media-list a:hover { text-decoration: none; }

.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }

@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.footer-col-wrapper:after, .wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }

.social-media-list li + li { padding-top: 5px; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }

table tr:nth-child(even) { background-color: #f7f7f7; }

table th, table td { padding: 10px 15px; }

table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }

table td { border: 1px solid #e8e8e8; }

/** Site header */
.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }

.site-title { font-size: 26px; font-weight: 300; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; }

.site-title, .site-title:visited { color: #424242; }

.site-nav { float: right; line-height: 54px; }

.site-nav .nav-trigger { display: none; }

.site-nav .menu-icon { display: none; }

.site-nav .page-link { color: #111; line-height: 1.5; }

.site-nav .page-link:not(:last-child) { margin-right: 20px; }

@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; } .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon > svg { fill: #424242; } .site-nav input ~ .trigger { clear: both; display: none; } .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; } .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; } .site-nav .page-link:not(:last-child) { margin-right: 0; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; background: #222; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper { font-size: 15px; color: #ddd; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(60% - (30px / 2)); width: calc(60% - (30px / 2)); width: calc(65% - (30px / 2)); padding-left: 30px !important; }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

/** Page content */
.page-content { padding: 30px 0; flex: 1; }

.page-heading { font-size: 32px; }

.post-list-heading { font-size: 28px; }

.post-list { margin-left: 0; list-style: none; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }

@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }

.post-content h2 { font-size: 32px; }

@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }

.post-content h3 { font-size: 26px; }

@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }

.post-content h4 { font-size: 20px; }

@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlighter-rouge .highlight { background: #eef; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

.piano-logo { font-size: 36px !important; }

body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

h1 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(60deg, #E21143, #FFB03A); background-clip: text; color: transparent; display: inline-block; text-align: center; }

h1, h2, h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

#keyboard { overflow: visible; padding: 2px; box-sizing: border-box; }

#keyboard rect { cursor: pointer; transition: fill; transition-duration: 0.3s; }

.instant-active { fill: pink !important; }

#keyboard rect.active, #keyboard rect:active, #keyboard .chosen-note { fill: #FFB03A; transition-duration: 0s; transform: scaleY(1.05); filter: drop-shadow(0px 0px 5px #FFB03A); z-index: 10; }

#keyboard rect.active, #keyboard rect:active { animation: 0.4s multicolor; }

@keyframes multicolor { 0% { fill: #E21143; }
  100% { fill: #FFB03A; } }

.keyboard-wrapper-outer { position: relative; }

.keyboard-wrapper-inner { width: 930px; margin: 0 auto; }

.keyboard-wrapper-outer { background: #eee; padding: 120px 80px; margin-bottom: 40px; overflow-x: auto; }

.main-wrapper { max-width: 720px; margin: 0 auto; width: 90%; }

.loading-indicator-wrapper { background: #eee; padding: 10px 10px 0; overflow: visible; text-align: center; }

#loading-indicator { color: #666; transition: all 0.3s; }

.loader { display: inline-block; border: 2px solid #fff; /* Light grey */ border-top: 2px solid #FFB03A; /* Orange */ border-radius: 50%; width: 15px; height: 15px; animation: spin 2s linear infinite; vertical-align: middle; margin-right: 5px; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.vf-notehead:hover path { fill: #E21143; cursor: pointer; }

.vf-modifiers path.active { fill: #E21143; }

/* line 5, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-list, .notes-table { border-spacing: 0; /* Removes the cell spacing via CSS */ border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */ -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; margin: 40px auto; }

/* line 16, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-list td, .notes-table td { border: solid 1px rgba(0, 0, 0, 0.15); font-size: 13px; padding: 6px 15px; cursor: pointer; width: 50px; }

/* line 27, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-table td:hover { background: linear-gradient(60deg, #E21143, #FFB03A); color: white; }

/* line 30, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-list .td-white, .notes-table .td-white { background: white; }

/* line 35, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-list .td-black, .notes-table .td-black { background: rgba(0, 0, 0, 0.8); }

/* line 40, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
.notes-table .td-black { color: white; }

/* line 45, /Users/edwardball/Projects/Personal/musical-manual/app/assets/stylesheets/notes.scss */
tr.active td, td.active { background-color: #79B99D !important; }

.keyboard-wrapper-inner.zoomed-in { transform: scale(2.4); transform-origin: 0 center; }

.keyboard-wrapper-inner.zoomed-in rect { stroke-width: 0.5; }

.site-title { font-weight: bold; }

.zoom-in { cursor: pointer; color: #666; }

.zoom-in:hover { color: black; }

.page-content--home { padding-top: 0; }

.site-header h1 > * { font-size: 32px !important; line-height: 32px !important; vertical-align: middle !important; }

.footer-heading, .footer-col p, .footer-col p a { color: #BBB; }

.footer-heading { font-weight: 700 !important; }

.footer-col p a:hover { color: white; }

.footer-col p a:hover svg { fill: white; }

.footer-col { padding-left: 0; }

.bmc-logo:hover img, .bsky-logo:hover img { filter: brightness(10); }

/* Chord database page */
.chord-keys, .chord-types { display: flex; text-align: center; flex-wrap: wrap; }

.chord-keys { margin-bottom: 20px; }

.chord-keys a, .chord-types a { text-align: center; background: #eee; border-radius: 1px; padding: 4px; margin: 2px; /* flex-grow: 1; */ /* flex-shrink: 1; */ /* flex-basis: 0; */ min-width: 30px; }

.chord-keys a.selected, .chord-types a.selected { background: #ccc; font-weight: bold; }

/* Button */
/* CSS -HT https://getcssscan.com/css-buttons-examples */
.button-1 { background: linear-gradient(60deg, #E21143, #FFB03A); border-radius: 8px; border-style: none; box-sizing: border-box; color: #FFFFFF !important; font-weight: bold; cursor: pointer; display: inline-block; font-size: 14px; height: 40px; line-height: 20px; list-style: none; margin: 0; outline: none; padding: 10px 16px; position: relative; text-align: center; text-decoration: none; transition: color 100ms; vertical-align: baseline; user-select: none; -webkit-user-select: none; touch-action: manipulation; margin-bottom: 20px; }

.button-1:hover { filter: brightness(1.2); }

.section { padding: 40px 0; background: #eee; }

.section-light { background: #f8f8f8; }

.section--lighter { background: #fff; }

.section-inner { width: 90%; max-width: 720px; margin: 0 auto; }

.main-wrapper p a { border-image: linear-gradient(60deg, #E21143, #FFB03A) 1; border-bottom: solid 1px; }

.main-wrapper p a:hover { text-decoration: none; color: #555; }

kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; line-height: 1; padding: 2px 4px; white-space: nowrap; }

.magic-duet-indicator { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: #6c69e4; background-color: #c594e7; background-color: #17b046; opacity: 0.9; z-index: 10; pointer-events: none; }

.animate-bounce { transition: all 0.3s; animation-iteration-count: 1; animation-name: bounce; animation-duration: 0.3s; animation-timing-function: ease-in-out; }

@keyframes bounce { 0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); } }

text { fill: #DFDFDF; font-size: 8px; font-weight: semibold; text-anchor: middle; pointer-events: none; transition: opacity .5s, transform .5s; transform-box: fill-box; }

text.accidental-text { font-size: 5px; fill: #BBB; }

text { opacity: 0; transform: translateY(0px); }

.show-note-names .semi-permanent-text { opacity: 1; transform: translateY(0px); transform: scale(1); }

.show-note-names--sharps .accidental-text--sharps { opacity: 1; transform: translateY(0px); transform: scale(1); }

.show-note-names--flats .accidental-text--flats { opacity: 1; transform: translateY(0px); transform: scale(1); }

.dual-layout .keyboard-wrapper-outer:first-of-type { margin-bottom: 0; }

.zoom-in, .js-note-names, .js-echo-settings { display: inline-block; padding: 10px 12px; border: 1px solid #e8e8e8; color: #828282; cursor: pointer; }

.zoom-in:hover, .js-note-names:hover, .js-echo-settings:hover { color: #111; border-color: #111; }

.middle-c-label { writing-mode: tb; }

.thumbnail { background: #eee; border-radius: 3px; aspect-ratio: 3/2; width: calc(33.3% - 64px); float: left; margin: 16px; padding: 16px; }

.thumbnail h3 { font-size: 130%; }

.thumbnail:hover { background: #F2F2F2; }

.page-title { font-size: 42px; color: #2A2A2A; }

.instrument-thumbnails { overflow: hidden; margin-left: -5px; margin-right: -5px; }

.instrument-thumbnail { list-style: none; width: 20%; float: left; margin: 10px; }

.instrument-thumbnail:nth-child(4n + 1) { clear: both; }

.instrument-thumbnail img { width: 100%; border-radius: 4px; margin-bottom: 8px; aspect-ratio: 1.5; object-fit: cover; }

@media screen and (max-width: 600px) { .instrument-thumbnail { width: calc(33% - 20px); } .instrument-thumbnail:nth-child(4n + 1) { clear: none; } .instrument-thumbnail:nth-child(3n + 1) { clear: both; } }

/**************************\ Basic Modal Styles \**************************/
.modal { font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; }

.modal__overlay { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; }

.modal__container { background-color: #fff; padding: 30px; max-width: 500px; max-height: 100vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box; }

.modal__header { display: flex; justify-content: space-between; align-items: center; }

.modal__title { margin-top: 0; margin-bottom: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #00449e; box-sizing: border-box; }

.modal__close { background: transparent; border: 0; }

.modal__header .modal__close:before { content: "\2715"; }

.modal__content { margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.8); }

.modal__btn { font-size: .875rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; background-color: #e6e6e6; color: rgba(0, 0, 0, 0.8); border-radius: .25rem; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; margin: 0; will-change: transform; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out,-webkit-transform .25s ease-out; }

.modal__btn:focus, .modal__btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }

.modal__btn-primary { background-color: #00449e; color: #fff; }

/**************************\ Demo Animation Style \**************************/
@keyframes mmfadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes mmfadeOut { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes mmslideIn { from { transform: translateY(15%); }
  to { transform: translateY(0); } }

@keyframes mmslideOut { from { transform: translateY(0); }
  to { transform: translateY(-10%); } }

.micromodal-slide { display: none; }

.micromodal-slide.is-open { display: block; }

.micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; }

/*# sourceMappingURL=main.css.map */