@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');

:root {
    --base-1: #EEEEFA;
    --base-2: #CCD;
    --base-3: #557;
    --base-4: #334;
    --overlay: #334A;
    --snack: #334E;
    --sup-11: #FCD;
    --sup-12: #E68;
    --sup-21: #DCF;
    --sup-22: #86E;
    --shadow: #3346;
    --hover: #3341;
    --hover-2: #779A;
    --hover-3: #779;
    --inset: #FFF;
    --no-color: transparent;
    --bg: #FFF;
    --inverted-text: #FFF;
    --border: #CCD;
    --placeholder: #CCD;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--base-4);
    background-color: var(--no-color);
    transition: all 200ms ease-in-out 0ms;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    opacity: 0;
}

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

header {
    background-color: var(--bg);
    padding: 0.5rem 0;
    position: fixed;
    width: 100%;
    height: 4rem;
    box-shadow: 0 0.5rem 1rem -0.5rem var(--shadow);
    display: inline-flex;
    user-select: none;
    line-height: 3rem;
    z-index: 102;
}

button, label {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

b {
    font-weight: bold;
}

img.fa {
    height: 1rem;
    margin-bottom: -0.1rem;
}

header img.logo {
    height: 2.5rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

header i.menu {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.7rem;
    background: linear-gradient(to bottom, var(--base-4) 0%, var(--base-4) 20%, var(--no-color) 20%, var(--no-color) 40%, var(--base-4) 40%, var(--base-4) 60%, var(--no-color) 60%, var(--no-color) 80%, var(--base-4) 80%, var(--base-4) 100%);
}

header i.menu.active {
    background: -webkit-linear-gradient(-45deg, var(--no-color) 0%, var(--no-color) 46%, var(--base-4) 46%, var(--base-4) 56%, var(--no-color) 56%, var(--no-color) 100%), -webkit-linear-gradient(45deg, var(--no-color) 0%, var(--no-color) 46%, var(--base-4) 46%, var(--base-4) 56%, var(--no-color) 56%, var(--no-color) 100%);
}

header > .icons {
    list-style: none;
    display: flex;
    position: absolute;
    right: 0.5rem;
    top: 0.3rem;
}

header > .icons > li {
    text-align: center;
    width: 3rem;
    height: 3rem;
    padding: 0.3rem;
    border-radius: 50%;
    line-height: 2.5rem;
    cursor: pointer;
    margin-top: 0.3rem;
}

header > .icons > li:hover {
    background-color: var(--hover);
}

header > .icons > li i {
    font-size: 1.4rem;
}

a {
    text-decoration: none;
}

a.link {
    border-radius: 0.2rem;
    padding: 0 0.2rem;
    margin: 0 -0.3rem;
    color: #E68;
}

a.link:hover {
    background-color: #CCD4;
    color: #F25;
}

footer {
    padding: 1rem 0 3rem 0;
    background-color: var(--base-1);
    margin-top: 2rem;
}

nav:not(.rail) {
    position: fixed;
    top: 4rem;
    height: 100%;
    width: 15rem;
    left: -15rem;
    border-right: 1px solid var(--border);
    z-index: 101;
    background-color: var(--bg);
}

nav:not(.rail).active {
    left: 0;
    box-shadow: 0 0 0 99999px var(--shadow);
}

nav:not(.rail) > img.logo {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

nav:not(.rail) > a {
    width: 100%;
    padding: 1rem;
    display: block;
    box-sizing: border-box;
}

nav:not(.rail) > a:hover {
    background-color: var(--hover);
}

nav:not(.rail) > a.active {
    border-right: 3px solid var(--base-4);
}

nav:not(.rail) > a > i {
    font-size: 1rem;
    width: 2rem;
}

.rail {
    position: fixed;
    margin-top: 4rem;
    background-color: var(--base-4);
    height: 100%;
    width: 3.2rem;
}

.rail > a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 3.2rem;
    display: block;
}

.rail > a > i {
    font-size: 1.2rem;
    height: 3.2rem;
    width: 3.2rem;
    text-align: center;
    line-height: 3.2rem;
    pointer-events: none;
    border-right: 0.2rem solid var(--base-4);
    color: var(--inverted-text);
}

.rail > a.active > i {
    border-right: 0.2rem solid var(--base-1);
}

p {
    font-size: 1rem;
    color: var(--base-3);
}

.title {
    margin-top: -2rem;
    margin-bottom: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
    padding: 4rem 0 2rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

h1.sub, h2.sub, h3.sub, h4.sub, h5.sub, h6.sub {
    padding-top: 2rem;
}

h6 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.5rem;
}

h4 {
    font-size: 2rem;
}

h3 {
    font-size: 2.7rem;
}

h2 {
    font-size: 3.7rem;
}

h1 {
    font-size: 5rem;
}

hr {
    border: none;
    border-bottom: 1px solid var(--border);
    margin: 1rem 0;
}

label {
    margin-bottom: -1.36rem;
    width: 100%;
    display: block;
    position: relative;
}

label > i {
    position: absolute;
    left: 0.4rem;
    top: 2.15rem;
    z-index: 1;
}

label.trailing > i {
    right: 0.6rem;
    left: unset;
}

select,
input,
textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    outline: none;
    border: 1px solid var(--border);
    margin: 1.5rem 0 1rem;
    height: 2.5rem;
    background-color: var(--bg);
    position: relative;
}

select {
    background-image: linear-gradient(45deg, var(--no-color) 50%, var(--base-2) 50%), linear-gradient(135deg, var(--base-2) 50%, var(--no-color) 50%);
    background-position: calc(100% - 1rem) 1rem, calc(100% - 0.5rem) 1rem;
    background-size: 0.5rem 0.5rem;
    background-repeat: no-repeat;
}

select:focus,
select:active,
input:focus,
input:active,
textarea:focus,
textarea:active {
    border-color: var(--base-4);
}

select.leading,
input.leading {
    padding-left: 1.8rem;
}

input:not(.leading).trailing {
    padding-right: 2rem;
}

span.input {
    font-size: 0.8rem;
    margin-top: -1rem;
    display: block;
    color: var(--base-3);
    width: 100%;
    padding-left: 0.3rem;
}

select.error,
input.error,
textarea.error {
    border-color: var(--sup-12);
}

input.error::-webkit-input-placeholder,
input.error::placeholder {
    color: var(--sup-11);
}

label.error,
span.input.error {
    color: var(--sup-12);
}

::-webkit-input-placeholder,
::placeholder {
    color: var(--placeholder);
}

select:disabled,
input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only{
    background-color: var(--base-1);
    border-color: var(--base-1);
    color: var(--border);
}

button,
a.button,
input[type='submit'] {
    border: 1px solid var(--border);
    color: var(--base-4);
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    border-radius: 0.3rem;
    outline: none;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.5rem 0 1rem;
    display: inline-block;
}

button > i,
a.button > i {
    margin-right: 0.5rem;
    color: inherit;
}

button.fill,
a.button.fill,
input[type='submit'].fill {
    background-color: var(--base-4);
    color: var(--border);
}

button.text,
a.button.text,
input[type='submit'].text {
    border-color: var(--no-color);
    color: var(--base-3);
    font-weight: bold;
}

button.text > i,
a.button.text > i {
    color: var(--base-3);
}

button:hover,
a.button:hover,
input[type='submit']:hover {
    background-color: var(--hover);
}

button.fill:hover,
a.button.fill:hover,
input[type='submit'].fill:hover {
    background-color: var(--hover-3);
    border-color: var(--hover-3);
}

button:disabled,
a.button:disabled,
input[type='submit']:disabled {
    border: 1px solid var(--base-1);
    color: var(--border);
    background-color: var(--base-1);
    cursor: default;
}

button.round,
a.button.round,
input[type='submit'].round {
    border-radius: 2rem;
}

button.square,
a.button.square,
input[type='submit'].square {
    border-radius: 0;
}

button.fab,
a.button.fab,
input[type='submit'].fab {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    line-height: 2rem;
    padding: 0;
    text-align: center;
    box-shadow: 0 0.5rem 0.5rem -0.3rem var(--shadow);
}

button.fab > i,
a.button.fab > i {
    margin: 0;
    font-size: 1.2rem;
    line-height: 3.3rem;
}

.pulse {
    box-shadow: 0 0 0 0 var(--base-4);
    transform: scale(1);
    animation: sonar 1.3s infinite;
}

@keyframes sonar {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--overlay);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px var(--no-color);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--no-color);
    }
}

table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

table th {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-weight: bold;
    vertical-align: middle;
}

table tr:hover > td {
    background-color: var(--hover);
}

table td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.overflow {
    overflow-x: auto;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay);
    z-index: 201;
}

.overlay > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card {
    background-color: var(--bg);
    border: 1px solid var(--base-1);
    padding: 1rem;
    margin: 0.3rem;
    border-radius: 0.3rem;
    overflow: hidden;
    position: relative;
}

.card.elevated {
    border: 1px solid var(--base-1);
    box-shadow: 0 0.5rem 2.5rem -1rem var(--shadow);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    padding: 0 0 1rem 0;
}

.card > .title {
    margin-top: -1rem;
    margin-bottom: 1rem;
}

.card > img {
    width: 120%;
    height: auto;
    margin: -1rem -1rem 1rem -1rem;
}

.card.title > img {
    margin: 0 -1rem 1rem -1rem;
}

.card > .buttons {
    margin: 1rem -0.5rem 0 -0.5rem;
}

.card > .buttons > button,
.card > .buttons > a.button,
.card > .buttons > input[type='submit'] {
    padding: 0.5rem;
    width: auto;
}

input[type='checkbox'],
input[type='radio'] {
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 2rem 0.2rem 1.5rem;
    outline: none;
    border: 0.2rem solid var(--border);
    border-radius: 0;
    box-shadow: inset 0 0 0 0.2rem var(--inset);
    cursor: pointer;
}

input[type='radio'] {
    border-radius: 50%;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
    background-color: var(--base-4);
    border: 0.2rem solid var(--base-4);
}

label.checkbox,
label.radio {
    position: absolute;
    top: 2.1rem;
    left: 0;
    padding-left: 2.4rem;
}

input[type='checkbox'].switch {
    border-radius: 1rem;
    width: 3rem;
    background: var(--base-1) radial-gradient(circle closest-side at 23% 50%, var(--base-3) 0.45rem, var(--no-color) 0.45rem);
    box-shadow: inset 0 0 0 0.1rem var(--inset);
}

input[type='checkbox'].switch:checked {
    background: radial-gradient(circle closest-side at 75% 50%, var(--base-4) 0.45rem, var(--no-color) 0.45rem);
    border: 0.2rem solid var(--base-4);
}

label.switch {
    position: absolute;
    top: 2.1rem;
    left: 0;
    padding-left: 3.8rem;
}

input[type=range] {
    -webkit-appearance: none;
    padding: 0 4rem 0 0;
    border: none;
    background-color: var(--no-color);
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.15rem;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--base-3);
    border-radius: 0.15rem;
    border: none;
}

input[type=range]:disabled::-webkit-slider-runnable-track {
    background-color: var(--base-1);
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: none;
    border: 0.1rem solid var(--base-4);
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 50%;
    background-color: var(--border);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -0.7rem;
}

input[type=range]:disabled::-webkit-slider-thumb {
    border: 0.1rem solid var(--border);
    background-color: var(--base-2);
    cursor: default;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background-color: var(--base-4);
}


input[type=range]::-moz-range-track {
    width: 100%;
    height: 0.15rem;
    cursor: pointer;
    box-shadow: none;
    background-color: var(--base-3);
    border-radius: 0.15rem;
    border: none;
}

input[type=range]:disabled::-moz-range-track {
    background-color: var(--base-1);
}

input[type=range]::-moz-range-thumb {
    box-shadow: none;
    border: 0.1rem solid var(--base-4);
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 50%;
    background-color: var(--base-1);
    cursor: pointer;
}

input[type=range]:disabled::-moz-range-thumb {
    border: 0.1rem solid var(--base-1);
    background-color: var(--base-2);
    cursor: default;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}

label > .range {
    position: absolute;
    top: 2rem;
    z-index: 1;
    right: 0;
    background-color: var(--base-4);
    color: var(--inverted-text);
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.2rem;
    width: 3.5rem;
    text-align: center;
}

label > .range:after {
    right: 100%;
    top: 50%;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 5px solid var(--no-color);
    border-right-color: var(--base-4);
    margin-top: -5px;
}

.card > .buttons > button.icon,
.card > .buttons > a.button.icon {
    float: right;
    text-align: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    line-height: 1rem;
}

.card > .buttons > button.icon > i,
.card > .buttons > a.button.icon > i {
    margin: 0;
    color: var(--base-3);
}

.tabs {
    overflow-x: auto;
    display: inline-flex;
    width: 100%;
}

.tabs > button.tab {
    width: auto;
    min-width: 7rem;
    border: none;
    border-bottom: 0.1rem solid var(--border);
    border-radius: 0.1rem 0.1rem 0 0;
    float: left;
    text-transform: none;
    position: relative;
}

.tabs > button.tab > i {
    position: absolute;
    top: 0.3rem;
    left: 50%;
    margin: 0 0 0 -0.7rem;
    font-size: 1.4rem;
}

.tabs.wide > button.tab {
    flex: 1;
    padding: 2rem 0 0.2rem;
    min-width: unset;
}

.tabs > button.tab.active {
    border-color: var(--base-4);
    border-width: 0.1rem;
}

.overlay > .card {
    max-height: 80%;
    max-width: 90%;
    width: fit-content;
    overflow: auto;
    box-shadow: 0 1rem 3rem -0.5rem var(--shadow);
}

.overlay.sheet-bottom > .card {
    width: 100%;
    max-width: 100%;
    bottom: 0;
    left: 0;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    top: unset;
    margin: 0;
    max-height: 70%;
}

.overlay.sheet-side > .card {
    height: 100%;
    max-height: 100%;
    top: 0;
    right: 0;
    left: unset;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    min-width: 30%;
    max-width: 80%;
}

.chip {
    float: left;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 2rem;
    cursor: pointer;
    margin: 0 0.2rem 0.2rem 0;
    height: 2.5rem;
}

.chip.fill {
    background-color: var(--base-1);
    border: none;
}

.chip > i {
    width: 1rem;
    height: 1rem;
    margin: 0 1rem 0 0;
}

.chip.dismiss > .close {
    background-color: var(--base-2);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    line-height: 1.4rem;
    margin-right: -0.5rem;
    color: var(--base-3);
}

.chip.dismiss > .close:hover {
    background-color: var(--base-3);
    color: var(--base-2);
}

.chip > img {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    margin: -0.3rem 0.5rem -0.6rem -0.7rem;
}

.grid {
    width: 90%;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.row {
    position: relative;
    width: 100%;
}

[class^='col-'] {
    float: left;
    min-height: 1rem;
    margin: 0.5% 0.166%;
    color: var(--base-3);
    position: relative;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    width: 100%;
}

.col-1-sm {
    width: 8.002%;
}

.col-2-sm {
    width: 16.333%;
}

.col-3-sm {
    width: 24.666%;
}

.col-4-sm {
    width: 33%;
}

.col-5-sm {
    width: 41.333%;
}

.col-6-sm {
    width: 49.666%;
}

.col-7-sm {
    width: 58%;
}

.col-8-sm {
    width: 66.333%;
}

.col-9-sm {
    width: 74.666%;
}

.col-10-sm {
    width: 83%;
}

.col-11-sm {
    width: 91.333%;
}

.col-12-sm {
    width: 99.7%;
}

.row::after {
    content: '';
    display: table;
    clear: both;
}

.gallery {
    width: 100%;
    display: inline-block;
}

.gallery > .item {
    overflow: hidden;
    border: 2px solid var(--no-color);
    float: left;
    cursor: pointer;
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
    position: relative;
}

.gallery.gap-1 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.gap-2 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.gap-3 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.two > .item,
.gallery.two.gap-1 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.two.gap-2 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.two.gap-3 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.six > .item,
.gallery.six.gap-1 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.six.gap-2 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery.six.gap-3 > .item {
    margin: 0.1rem;
    width: calc(50% - 0.2rem);
}

.gallery > .item:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.gallery > .item:hover {
    border: 2px solid var(--hover);
}

.gallery > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    margin: auto;
    object-fit: cover;
}

.gallery > .item > img.narrower {
    width: auto;
    height: 100%;
}

.gallery > .item > p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--overlay);
    color: var(--inverted-text);
    padding: 0.5rem 2rem 0.5rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery > .item > p > i {
    position: absolute;
    right: 0.4rem;
    bottom: 0.6rem;
    color: var(--inverted-text);
}

img.galleryFullImage {
    max-width: 100%;
    max-height: 100%;
    padding: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul {
    list-style: none;
}

ul > li {
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
}

ul > li:hover {
    background-color: var(--hover);
}

.icon > li {
    padding-left: 2rem;
    position: relative;
}

.icon > li > i {
    position: absolute;
    left: 0.4rem;
    top: 1rem;
}

.image > li {
    position: relative;
    padding-left: 3rem;
}

.image > li > img {
    position: absolute;
    height: 2.6rem;
    width: 2.6rem;
    top: 0.2rem;
    left: 0.3rem;
    border-radius: 50%;
}

.icon.image > li {
    padding-left: 5rem;
}

.icon.image > li > img {
    left: 2rem;
}

.two > li {
    height: 3.6rem;
    line-height: 1.5rem;
}

.two > li > p {
    color: var(--base-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.three > li {
    height: 4.5rem;
    line-height: 1.4rem;
}

.three > li > p {
    color: var(--base-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.asyncProgressIndicator {
    background-color: var(--base-1);
    position: fixed;
    top: 3.8rem;
    left: 0;
    width: 100%;
    height: 0.2rem;
    z-index: 200;
}

.linearIndicator > .bar,
.asyncProgressIndicator > .bar {
    position: absolute;
    background-color: var(--base-3);
    width: 0;
    height: 0.2rem;
    animation: loadingBar 2.5s ease-in infinite;
}

@keyframes loadingBar {
    0% { left: 0; width: 0; }
    35% { left: 40%; width: 65%; }
    59.9% { left: 100%; width: 0; }
    60% { left: -25%; width: 25%; }
    100% { left: 125%; width: 25%; }
}

.linearIndicator {
    position: relative;
    background-color: var(--base-1);
    width: 100%;
    height: 0.2rem;
    margin: 1.4rem 0;
    border-radius: 0.2rem;
    overflow: hidden;
}

.linearIndicator > .fixed {
    position: absolute;
    background: var(--base-3);
    height: 0.2rem;
    border-radius: 0.2rem;
}

.syncProgressIndicator {
    width: 100px;
    height: 100px;
}

.syncProgressIndicator > svg {
    position: relative;
    animation: loadingRotation 2.5s linear infinite;
    width: 100px;
    height: 100px;
}

.syncProgressIndicator > svg > circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: var(--base-1);
    animation: loadingDash 1.5s ease-in-out infinite;
    stroke-linecap: square;
}

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

@keyframes loadingDash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

svg.circleIndicator {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
}

svg.circleIndicator > circle {
    stroke-width: 3;
    stroke: var(--base-3);
    fill: var(--no-color);
    transition: stroke-dashoffset 350ms;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

svg.circleIndicator > circle:first-child {
    stroke: var(--base-1);
}

svg.circleIndicatorIndeterminate {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    animation: loadingRotation 2.5s linear infinite;
}

svg.circleIndicatorIndeterminate > circle {
    stroke-width: 3;
    stroke: var(--base-3);
    fill: var(--no-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: loadingDash 1.5s ease-in-out infinite;
    stroke-linecap: square;
}

.snackbarContainer {
    position: fixed;
    bottom: 1rem;
    width: 100%;
    text-align: center;
    z-index: 300;
}

.snackbarContainer > div {
    background-color: var(--snack);
    width: fit-content;
    max-width: 90%;
    display: block;
    margin: 0.5rem auto;
    border-radius: 0.5rem;
    color: var(--base-2);
    padding: 1rem;
    font-size: 0.9em;
    box-shadow: 0 0.8rem 0.6rem -0.6rem var(--shadow);
}

.snackbarContainer > div > span {
    color: var(--sup-21);
    font-size: 1em;
    cursor: pointer;
    padding-left: 1rem;
    text-transform: uppercase;
}

.tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: var(--snack);
    color: var(--base-2);
    padding: 0.3rem 0.8rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    text-align: center;
}

.tooltip:after {
    bottom: 100%;
    left: 50%;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 0.5rem solid var(--no-color);
    border-bottom-color: var(--snack);
    margin-left: -0.5rem;
}

.tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.round {
    border-radius: 0.5rem;
}

.pv-1 {
    padding-top: 1rem;
}

.pv-2 {
    padding-top: 2rem;
}

.pv-3 {
    padding-top: 3rem;
}

.pv-4 {
    padding-top: 5rem;
}

.pv-5 {
    padding-top: 8rem;
}

.pv-6 {
    padding-top: 13rem;
}

.hideOnSmall {
    display: none;
}

.hasNav {
    margin-left: 0;
}

.border {
    border: 1px solid var(--border);
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.fadeOut {
    opacity: 0;
}

.slim {
    font-weight: normal !important;
}

.bold {
    font-weight: bold !important;
}

.m0 {
    margin: 0 !important;
}

.p0 {
    padding: 0 !important;
}

.base-text {
    color: var(--base-4);
}

.base-text-1 {
    color: var(--base-3);
}

.base-text-2 {
    color: var(--base-2);
}

.base-text-inv {
    color: var(--base-1);
}

.base-text-2-inv {
    color: var(--base-2);
}

.base-bg {
    background-color: var(--bg);
}

.base-bg-1 {
    background-color: var(--base-1);
}

.base-bg-2 {
    background-color: var(--base-2);
}

.base-bg-inv {
    background-color: var(--base-4);
}

.base-bg-2-inv {
    background-color: var(--base-3);
}

.base-border {
    border-color: var(--base-4);
}

.base-border-2 {
    border-color: var(--base-3);
}

.base-border-inv {
    border-color: var(--base-1);
}

.base-border-2-inv {
    border-color: var(--base-2);
}

.highlight-text {
    color: var(--sup-12);
}

.highlight-text-2 {
    color: var(--sup-22);
}

.highlight-text-inv {
    color: var(--sup-11);
}

.highlight-text-2-inv {
    color: var(--sup-21);
}

.highlight-bg {
    background-color: var(--sup-12);
}

.highlight-bg-2 {
    background-color: var(--sup-22);
}

.highlight-bg-inv {
    background-color: var(--sup-11);
}

.highlight-bg-2-inv {
    background-color: var(--sup-21);
}

.highlight-border {
    border-color: var(--sup-12);
}

.highlight-border-2 {
    border-color: var(--sup-22);
}

.highlight-border-inv {
    border-color: var(--sup-11);
}

.highlight-border-2-inv {
    border-color: var(--sup-21);
}

img.footerIsotype {
    height: 2rem;
    margin: 0 1rem -0.5rem 0;
}

.darkmode * {
    --base-1: #EEEEFA22;
    --base-2: #334;
    --base-3: #CCD;
    --base-4: #EEEEFA;
    --overlay: #779A;
    --snack: #EEEEFAEE;
    --sup-11: #E68;
    --sup-12: #FCD;
    --sup-21: #86E;
    --sup-22: #DCF;
    --shadow: #0006;
    --hover: #EEEEFA11;
    --hover-2: #CCDA;
    --hover-3: #CCD;
    --inset: #334;
    --no-color: transparent;
    --bg: #334;
    --inverted-text: #CCD;
    --border: #779;
    --placeholder: #EEEEFA22;
}

.darkmode {
    background-color: #334;
}

.darkmode label > .range {
    color: var(--base-2);
}

.darkmode header img.logo,
.darkmode img.footerIsotype {
    filter: brightness(0.5);
}

.darkmode .rail {
    background-color: var(--base-2);
}

.darkmode .rail > a > i {
    border-right: 0.2rem solid var(--base-2);
    color: var(--base-3);
}

.darkmode .rail > a.active > i {
    border-right: 0.2rem solid var(--base-3);
}

.darkmode .hideOnDarkMode {
    display: none;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (min-width: 33.75rem) {
    /* 540px */
}

@media only screen and (min-width: 45rem) {
    /* 720px */
    .col-1 {
        width: 8.002%;
    }

    .col-2 {
        width: 16.333%;
    }

    .col-3 {
        width: 24.666%;
    }

    .col-4 {
        width: 33%;
    }

    .col-5 {
        width: 41.333%;
    }

    .col-6 {
        width: 49.666%;
    }

    .col-7 {
        width: 58%;
    }

    .col-8 {
        width: 66.333%;
    }

    .col-9 {
        width: 74.666%;
    }

    .col-10 {
        width: 83%;
    }

    .col-11 {
        width: 91.333%;
    }

    .col-12 {
        width: 99.7%;
    }

    .row.form > [class^='col-'] {
        padding: 0 0.2rem;
    }

    .hideOnSmall {
        display: inherit;
    }

    table.hideOnSmall {
        display: table;
    }

    tr.hideOnSmall {
        display: table-row;
    }

    td.hideOnSmall {
        display: table-cell;
    }

    .hideOnLarge,
    body:not(.menuAlwaysHidden) nav:not(.rail) > img.logo,
    body:not(.menuAlwaysHidden) header i.menu {
        display: none;
    }

    body:not(.menuAlwaysHidden) nav:not(.rail),
    body:not(.menuAlwaysHidden) nav:not(.rail).active {
        left: 0;
        box-shadow: none;
    }

    body:not(.menuAlwaysHidden) .hasNav {
        margin-left: 15rem;
    }

    body .hasRail {
        margin-left: 3.2rem;
    }

    button,
    a.button,
    input[type='submit']{
        width: auto;
    }

    .gallery > .item {
        margin: 0.1rem;
        width: calc(25% - 0.2rem);
    }

    .gallery.gap-1 > .item {
        margin: 0.3rem;
        width: calc(25% - 0.6rem);
    }

    .gallery.gap-2 > .item {
        margin: 0.5rem;
        width: calc(25% - 1rem);
    }

    .gallery.gap-3 > .item {
        margin: 1rem;
        width: calc(25% - 2rem);
    }

    .gallery.two > .item {
        margin: 0.1rem;
        width: calc(50% - 0.2rem);
    }

    .gallery.two.gap-1 > .item {
        margin: 0.3rem;
        width: calc(50% - 0.6rem);
    }

    .gallery.two.gap-2 > .item {
        margin: 0.5rem;
        width: calc(50% - 1rem);
    }

    .gallery.two.gap-3 > .item {
        margin: 1rem;
        width: calc(50% - 2rem);
    }

    .gallery.six > .item {
        margin: 0.1rem;
        width: calc(16.666% - 0.2rem);
    }

    .gallery.six.gap-1 > .item {
        margin: 0.3rem;
        width: calc(16.666% - 0.6rem);
    }

    .gallery.six.gap-2 > .item {
        margin: 0.5rem;
        width: calc(16.666% - 1rem);
    }

    .gallery.six.gap-3 > .item {
        margin: 1rem;
        width: calc(16.666% - 2rem);
    }

    .overlay.sheet-bottom > .card {
        max-height: 50%;
    }

    .overlay.sheet-side > .card {
        max-width: 50%;
    }

    .snackbarContainer > div {
        max-width: 30%;
    }
}

@media only screen and (min-width: 60rem) {
    /* 960px */
}