body.disable-scrolling {
    overflow: hidden
}

body.preload * {
    transition: none !important
}

.viewbox-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, .85);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease;
    pointer-events: none
}

.viewbox-overlay:focus-visible {
    box-shadow: none
}

.viewbox {
    position: relative;
    z-index: 101;
    transition: all .2s ease;
    pointer-events: none;
    transform: scale(.9)
}

.viewbox .vb-image {
    display: block;
    height: auto;
    max-width: 90vw;
    max-height: 75vh;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all .2s ease;
    pointer-events: none
}

.vb-outerContainer {
    position: relative;
    margin: 0 auto;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--radius-large)
}

.vb-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 103;
    overflow: hidden;
    pointer-events: none !important
}

.vb-prev,
.vb-next {
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    z-index: 104;
    width: 80px;
    height: 100%;
    opacity: 0;
    transition: all .3s ease;
    cursor: pointer;
    pointer-events: none
}

.vb-prev {
    left: 0;
    transform: translateX(-20px)
}

.vb-next {
    right: 0;
    transform: translateX(20px)
}

.vb-prev:hover,
.vb-next:hover {
    transform: translateX(0px);
    opacity: 1
}

.vb-icon {
    position: absolute;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    transform: rotate(-45deg) scale(.8)
}

.vb-prev .vb-icon {
    border-left: 4px solid #fff;
    border-top: 4px solid #fff;
    left: 30px
}

.vb-next .vb-icon {
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    right: 30px
}

.vb-caption {
    position: relative;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    display: block
}

.vb-data .vb-caption.visible {
    opacity: 1
}

@media screen and (max-width:400px) {

    .vb-prev,
    .vb-next {
        max-width: 100px
    }

    .vb-icon {
        width: 20px;
        height: 20px
    }

    .vb-prev .vb-icon {
        border-left: 2px solid #fff;
        border-top: 2px solid #fff
    }

    .vb-next .vb-icon {
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff
    }
}

.visible {
    opacity: 1 !important;
    pointer-events: all !important
}

.viewbox.visible .available {
    pointer-events: all !important
}

.vb-caption.visible {
    pointer-events: none !important
}

.viewbox.visible {
    transform: scale(1) !important
}

.vb-image.visible,
.vb-dataContainer.visible {
    pointer-events: none !important
}

html,
body {
    background: rgba(var(--color-base), 1);
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: rgba(var(--color-font), 1)
}

html,
body,
button,
a,
input,
textarea,
select,
pre::before {
    font-family: var(--font-family) !important
}

* {
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

*:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--color-accent), 1)
}

input,
select,
textarea {
    -webkit-user-select: text
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--color-font), .2);
    border: 3px solid rgba(var(--color-base), 1);
    transition: all .12s ease;
    border-radius: var(--radius-large)
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-font), .4)
}

card ::-webkit-scrollbar {
    height: 12px
}

card ::-webkit-scrollbar-thumb,
aside ::-webkit-scrollbar-thumb {
    border: 3px solid rgba(var(--color-card), 1)
}

pre::-webkit-scrollbar-thumb {
    border: 3px solid rgba(var(--color-card), .9)
}

pre.accent::-webkit-scrollbar-thumb {
    border: 3px solid rgba(var(--color-card), .8)
}

info ::-webkit-scrollbar-thumb {
    border: 3px solid rgba(var(--color-card), 1)
}

::selection {
    background-color: rgba(var(--color-accent-alt), 1);
    color: rgba(var(--color-font-alt), 1)
}

[type]:-webkit-autofill::first-line {
    font-family: var(--font-family) !important;
    font-size: 16px
}

[type]:-webkit-autofill,
[type]:-internal-autofill-previewed,
[type]:-internal-autofill-selected {
    -webkit-text-fill-color: rgba(var(--color-autofill), 1)
}

.icon {
    width: 26px;
    height: 26px
}

toast {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    line-height: 21px;
    z-index: 14;
    background: rgba(var(--color-accent), 1);
    color: rgba(var(--color-font-alt), 1);
    padding: 14px 25px;
    text-align: center;
    transition: all .3s ease;
    opacity: 0;
    transform: translateY(-60px)
}

toast.visible {
    transform: translateY(0px);
    opacity: 1
}

error {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
    padding: 8px 15px;
    border-radius: var(--radius-medium);
    border: 1px solid rgba(var(--color-accent), .1);
    background: rgba(var(--color-accent), .1);
    color: rgba(var(--color-font), 1);
    align-items: center
}

error svg {
    color: rgba(var(--color-accent), 1);
    flex: 0 0 26px
}

error content {
    line-height: 26px
}

.colored[class*=accent-] {
    color: rgba(var(--color-accent), 1)
}

form {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5 {
    margin: 1.6em 0 1em;
    font-weight: 400
}

h1,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
    margin-top: 0
}

h1 {
    font-weight: 700;
    font-size: 32px
}

h2 {
    font-weight: 600;
    font-size: 24px
}

h3 {
    font-weight: 550;
    font-size: 19px
}

h4 {
    font-weight: 550;
    font-size: 16px
}

h5 {
    font-weight: 550;
    font-size: 14px
}

h1>span,
h2>span,
h3>span,
h4>span,
h5>span {
    color: rgba(var(--color-accent), 1)
}

hr {
    margin: 20px 0;
    border: none;
    height: 1px;
    background: rgba(var(--color-font), .1)
}

p {
    line-height: 1.55;
    vertical-align: baseline;
    margin: 1.2em 0 0
}

ul,
ol {
    margin: 1.2em 0 0;
    line-height: 1.65;
    padding-inline-start: 20px
}

ul>ul,
ul>ol,
ol>ol,
ol>ul {
    margin: .5em 0 0
}

ul>li,
ol>li {
    margin: .3em 0 0
}

ul+li,
ol+li {
    margin-top: .5em
}

a {
    color: rgba(var(--color-accent), 1);
    text-decoration: underline;
    cursor: pointer;
    transition: all .12s ease
}

b,
strong {
    font-weight: 600
}

cite,
em {
    color: rgba(var(--color-font), 1);
    font-variation-settings: 'wght' 250, 'ital' 100;
    font-weight: 250
}

q::before,
q::after {
    content: '"'
}

address {
    font-style: normal
}

sub {
    font-size: .7em;
    position: relative;
    top: 0
}

sup {
    font-size: .7em;
    position: relative;
    top: -.1em
}

kbd {
    background: rgba(var(--color-font), var(--opacity-font));
    color: rgba(var(--color-font-alt), 1);
    font-family: monospace;
    font-weight: 600;
    border-radius: var(--radius-small);
    padding: 1px 6px;
    font-size: 14px;
    margin: 0 1px
}

mark {
    font-size: .9em;
    padding: 2px 8px;
    background: rgba(var(--color-accent), .1);
    color: rgba(var(--color-accent), 1);
    border-radius: var(--radius-small)
}

blockquote {
    border-left: solid 2px rgba(var(--color-accent), 1);
    color: rgba(var(--color-font), var(--opacity-font));
    padding: .2em 0 .2em 1.6em;
    margin: 1.2em 0 0;
    font-weight: 400;
    line-height: 1.5
}

blockquote::before {
    content: attr(cite);
    display: block;
    color: rgba(var(--color-accent), 1);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px
}

blockquote:not([cite])::before {
    display: none
}

label,
dl dt {
    display: block;
    margin-bottom: 5px;
    position: relative;
    font-size: 15px;
    color: rgba(var(--color-font), 1);
    font-weight: 500
}

dl {
    padding: 0;
    display: block;
    width: 100%;
    margin: 1.2em 0 0
}

dl dd {
    color: rgba(var(--color-font), var(--opacity-font));
    margin-inline-start: 0;
    line-height: 1.55
}

accordion {
    border: 2px solid rgba(var(--color-font), .1);
    border-radius: var(--radius-medium);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 1.2em 0 0
}

accordion>details:not(:last-child) {
    border-bottom: 1px solid rgba(var(--color-font), .1)
}

accordion>details>summary {
    padding: 12px 14px;
    font-size: 16px;
    cursor: pointer;
    transition: all .12s ease
}

accordion>details>summary:hover {
    color: rgba(var(--color-accent), 1)
}

accordion>details[open]>summary {
    background: rgba(var(--color-font), .035)
}

accordion>details:first-child>summary {
    border-radius: var(--radius-medium) var(--radius-medium) 0 0
}

accordion>details:last-child>summary {
    border-radius: 0 0 var(--radius-medium) var(--radius-medium)
}

accordion>details:last-child[open]>summary {
    border-radius: 0
}

accordion>details>details-content {
    padding: 16px 20px;
    display: block
}

accordion>details>details-content :first-child {
    margin-top: 0
}

info {
    display: block;
    margin: 1.2em 0 0;
    background: rgba(var(--color-font), 0.05);
    color: rgba(var(--color-font), var(--opacity-font));
    padding: 14px 20px;
    border-radius: var(--radius-medium);
    border-left: 2px solid rgba(var(--color-font), 1)
}

info::before {
    content: attr(caption);
    display: block;
    color: rgba(var(--color-font), 1);
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    margin-bottom: 10px
}

info:not([caption])::before {
    display: none
}

info[class*=accent-] {
    background: rgba(var(--color-accent), .1);
    border-left: 2px solid rgba(var(--color-accent), 1)
}

info[class*=accent-]::before {
    color: rgba(var(--color-accent), 1)
}

pre {
    padding: 15px;
    line-height: 1.4;
    overflow: auto;
    margin: 1.2em 0 0;
    border: 2px solid rgba(var(--color-font), .1)
}

pre::before {
    content: attr(language);
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: rgba(var(--color-font), var(--opacity-font))
}

pre:not([language])::before {
    display: none
}

code,
pre {
    font-family: monospace;
    font-size: 16px;
    background: rgba(var(--color-font), .025);
    color: rgba(var(--color-font), 1);
    -webkit-user-select: text;
    border-radius: var(--radius-medium)
}

:not(pre)>code {
    border: 2px solid rgba(var(--color-font), .1);
    padding: 0 5px 1px;
    border-radius: var(--radius-small)
}

code[class*=accent-],
pre[class*=accent-] {
    background: rgba(var(--color-accent), .05)
}

code[class*=accent-]::before,
pre[class*=accent-]::before {
    color: rgba(var(--color-accent), 1)
}

code::selection,
pre::selection {
    background-color: rgba(var(--color-font), .15);
    color: rgba(var(--color-font), .8)
}

pre>.code-comment,
code>.code-comment {
    opacity: var(--opacity-font)
}

pre>code {
    background: 0 0
}

info[class*=accent-] pre,
pre[class*=accent-] {
    border-color: rgba(var(--color-accent), .35)
}

info code,
info pre {
    background: rgba(var(--color-card), 1)
}

img {
    margin: 0;
    padding: 0;
    max-width: 100%
}

table {
    width: 100%;
    border-collapse: separate;
    border: none;
    border-spacing: 0;
    margin: 1.2em 0 0
}

table.bordered {
    border: 1px solid rgba(var(--color-font), .1);
    border-radius: var(--radius-medium)
}

table-scroller {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    margin: 1.2em 0 0
}

table-scroller.bordered {
    border: 1px solid rgba(var(--color-font), .1);
    border-radius: var(--radius-medium)
}

table-scroller>table {
    margin: 0
}

table tbody tr {
    background: rgba(var(--color-font), .025);
    transition: all .12s ease
}

table tbody tr:nth-child(2n+2) {
    background: 0 0
}

table tbody tr[data-href] {
    cursor: pointer
}

table tbody tr[data-href]:hover {
    background: rgba(var(--color-font), .05)
}

table th {
    padding: 12px;
    text-align: left;
    color: rgba(var(--color-font), var(--opacity-font));
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap
}

table th[data-sortable] {
    color: rgba(var(--color-font), var(--opacity-font));
    cursor: pointer
}

table th[data-sortable]:hover {
    text-decoration: underline
}

table th[data-sortable].sorted {
    color: rgba(var(--color-font), 1)
}

table th[data-sortable].sorted::after {
    content: ' •'
}

table td {
    padding: 12px;
    text-align: left;
    color: rgba(var(--color-font), 1)
}

table tr th:first-child,
table tr td:first-child {
    padding-left: 20px
}

table tr th:last-child,
table tr td:last-child {
    padding-right: 20px
}

table tfoot tr td {
    border-top: 1px solid rgba(var(--color-font), .05)
}

table tfoot td {
    font-size: 15px;
    background: 0 0;
    border: none;
    box-shadow: none;
    color: rgba(var(--color-font), var(--opacity-font))
}

table td .td-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0 0 0 10px;
    vertical-align: bottom
}

table td .td-icon svg {
    color: rgba(var(--color-font), 1);
    transition: all .12s ease
}

table td .td-icon:hover svg {
    color: rgba(var(--color-accent), 1)
}

table th.th-actions,
table td.td-actions {
    text-align: right
}

table td.td-actions a {
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
    vertical-align: bottom
}

table td.td-actions a:hover {
    text-decoration: underline
}

table td.td-avatar {
    width: 70px
}

table td.td-avatar img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: var(--radius-infinite);
    object-fit: cover;
    margin-bottom: -5px
}

table td.td-image img {
    width: 60px;
    border-radius: var(--radius-small);
    margin-bottom: -5px;
    max-width: 70px;
    object-fit: cover
}

table td small {
    color: rgba(var(--color-font), var(--opacity-font))
}

table.datalist {
    max-width: 100%
}

table.datalist tr {
    background: 0 0
}

table.datalist tr td {
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: 1px solid rgba(var(--color-font), .05)
}

table.datalist tr:first-child td {
    border-top: none
}

table.datalist tr td:first-child,
table.datalist tr td:nth-child(3) {
    color: rgba(var(--color-font), var(--opacity-font));
    white-space: nowrap;
    padding-right: 40px
}

table.datalist tr td:last-child {
    width: 100%
}

table.datalist tr td>:first-child {
    margin-top: 0
}

table input,
table select,
table textarea {
    background: rgba(var(--color-font), 0);
    color: rgba(var(--color-font), 1);
    border-radius: var(--radius-small);
    transition: all .12s ease;
    height: 30px;
    padding: 0;
    font-size: 16px;
    border: none;
    outline: none
}

table input:hover,
table select:hover,
table textarea:hover {
    background: rgba(var(--color-font), .05)
}

table input:focus,
table select:focus,
table textarea:focus {
    background: rgba(var(--color-card), 1);
    padding: 0 10px
}

pagination {
    display: flex;
    flex-direction: row;
    column-gap: 6px;
    margin: 4px 0
}

pagination a {
    border-radius: var(--radius-small);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    float: left;
    color: rgba(var(--color-font), var(--opacity-font));
    font-size: 14px;
    text-decoration: none
}

pagination a:not([tabindex='-1']) {
    background: rgba(var(--color-font), .05);
    padding: 0 10px;
    transition: all .12s ease;
    box-shadow: inset 0 0 0 2px rgba(var(--color-accent), 0)
}

pagination a:not([tabindex='-1']):focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--color-accent), 1)
}

pagination a:not([tabindex='-1']):hover {
    color: rgba(var(--color-font), 1)
}

pagination a:not([tabindex='-1']).active {
    background: rgba(var(--color-accent), 1);
    color: rgba(var(--color-font-alt), 1)
}

pagination a[tabindex='-1'] {
    pointer-events: none;
    opacity: var(--opacity-font)
}

gallery,
grid,
layout,
split {
    display: grid;
    grid-gap: 20px;
    clear: both;
    width: 100%
}

gallery,
grid {
    margin: 1.2em 0 0
}

grid {
    grid-gap: 20px
}

split {
    grid-template-columns: repeat(2, calc(50% - 10px))
}

gallery.grid-2,
grid.grid-2,
layout.grid-2 {
    grid-template-columns: repeat(2, calc(50% - 10px))
}

gallery.grid-3,
grid.grid-3,
layout.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

gallery.grid-4,
grid.grid-4,
layout.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

gallery.grid-5,
grid.grid-5,
layout.grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

gallery.grid-6,
grid.grid-6,
layout.grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

gallery.grid-auto,
grid.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
}

.image {
    display: inline-block;
    position: relative;
    box-shadow: 0 0 0 2px rgba(var(--color-card), 1), 0 0 0 4px rgba(var(--color-card), 1);
    border-radius: var(--radius-medium);
    overflow: hidden;
    transition: all .12s ease
}

.image img {
    display: block;
    margin-bottom: 0
}

.image:hover,
.image:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--color-card), 1), 0 0 0 4px rgba(var(--color-accent), 1)
}

.image-left,
.image-right {
    max-width: 35%
}

.image-left {
    float: left;
    margin: 0 1.5em 1em 0
}

.image-right {
    float: right;
    margin: 0 0 1em 1.5em
}

.image-full {
    width: 100%;
    margin: 1.2em 0 0
}

.image-full img {
    width: 100%
}

gallery a {
    display: block;
    position: relative;
    padding-bottom: 66%;
    width: 100%;
    background: rgba(var(--color-base), 1);
    transition: all .2s ease;
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 2px rgba(var(--color-card), 1), 0 0 0 4px rgba(var(--color-card), 1);
    overflow: hidden
}

gallery a:hover,
gallery a:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--color-card), 1), 0 0 0 4px rgba(var(--color-accent), 1)
}

gallery a img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s ease
}

gallery a[caption]::after,
.image[caption]::after {
    content: attr(caption);
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(var(--color-overlay), 1);
    color: rgba(var(--color-font-alt), 1);
    padding: 0 15px;
    transition: .2s ease;
    font-size: 14px;
    transform: translateY(100%);
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box
}

gallery a[caption]:hover::after,
.image[caption]:hover::after {
    transform: translateY(0)
}

.attachment {
    display: flex;
    padding: 12px 15px;
    border: 1px solid rgba(var(--color-font), .1);
    color: rgba(var(--color-font), 1);
    column-gap: 15px;
    flex-direction: row;
    border-top: none;
    transition: all .12s ease;
    width: 100%;
    text-decoration: none
}

.attachment svg {
    flex: 0 0 26px;
    opacity: var(--opacity-font)
}

.attachment span {
    flex-grow: 1;
    font-weight: 600;
    color: rgba(var(--color-font), 1);
    overflow: hidden;
    word-wrap: break-word;
    line-height: 26px;
    width: 100%
}

.attachment:hover {
    background: rgba(var(--color-font), .025)
}

.attachment:hover svg {
    color: rgba(var(--color-accent), 1)
}

.attachment:first-child {
    border-top: 1px solid rgba(var(--color-font), .1);
    border-top-left-radius: var(--radius-medium);
    border-top-right-radius: var(--radius-medium)
}

.attachment:last-child {
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium)
}

split .attachment {
    border: 1px solid rgba(var(--color-font), .1);
    border-radius: var(--radius-medium)
}

badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(var(--color-font), .05);
    color: rgba(var(--color-font), .7);
    border-radius: var(--radius-small);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    position: relative;
    white-space: nowrap
}

badge[class*=accent-] {
    background: rgba(var(--color-accent), 1);
    color: rgba(var(--color-font-alt), 1)
}

badge.subtle {
    background: 0 0;
    padding: 0;
    color: rgba(var(--color-font), var(--opacity-font));
    line-height: 1;
    font-weight: 600;
    margin-left: 18px
}

badge.subtle::before {
    content: '';
    height: 10px;
    width: 10px;
    background: rgba(var(--color-font), .3);
    border-radius: var(--radius-infinite);
    margin-right: 10px;
    position: absolute;
    top: 2px;
    left: -18px
}

dot {
    display: inline-block;
    border-radius: var(--radius-infinite);
    background: rgba(var(--color-font), .3);
    height: 10px;
    width: 10px
}

badge.subtle[class*=accent-] {
    color: rgba(var(--color-accent), 1)
}

badge.subtle[class*=accent-]::before,
dot[class*=accent-] {
    background: rgba(var(--color-accent), 1)
}

progressgroup {
    display: block
}

progressgroup+progressgroup {
    margin-top: 20px
}

progressgroup label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    align-items: flex-end
}

progress {
    appearance: none;
    border: none;
    width: 100%;
    height: 6px;
    vertical-align: baseline;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-small);
    background: rgba(var(--color-font), .1)
}

progress::-webkit-progress-bar {
    background: 0 0
}

progress:not([value]) {
    background: linear-gradient(to right, rgba(var(--color-font), var(--opacity-font)) 15%, rgba(var(--color-font), .1) 15%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: scanner 2.5s cubic-bezier(.56, 0, .56, 1) infinite
}

progress[value]::-webkit-progress-value {
    background: rgba(var(--color-font), var(--opacity-font))
}

progress[class*=accent-]:not([value]) {
    background: linear-gradient(to right, rgba(var(--color-accent), 1) 15%, rgba(var(--color-font), .1) 15%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: scanner 2.5s cubic-bezier(.56, 0, .56, 1) infinite
}

progress[value][class*=accent-]::-webkit-progress-value {
    background: rgba(var(--color-accent), 1)
}

input-group {
    position: relative;
    display: inline-block
}

input-group+input-group,
input-group+split,
split+input-group {
    margin-top: 20px
}

input-group>label>small {
    color: rgba(var(--color-danger), 1);
    margin-left: 4px
}

input-group>input-box {
    display: flex;
    flex-direction: row;
    background: rgba(var(--color-input), 1);
    border-radius: var(--radius-medium);
    transition: all .12s ease;
    border: 2px solid rgba(var(--color-font), .1);
    color: rgba(var(--color-font), 1);
    overflow: hidden
}

input-box.has-error {
    border: 2px solid rgba(var(--color-danger), 1)
}

input-box:hover {
    border: 2px solid rgba(var(--color-font), .3)
}

input-box.has-disabled>* {
    color: rgba(var(--color-font), var(--opacity-font));
    cursor: not-allowed
}

input-box.has-disabled:hover {
    border: 2px solid rgba(var(--color-font), .1)
}

input-box:focus-within {
    border: 2px solid rgba(var(--color-accent), 1);
    box-shadow: 0 3px 6px 0 rgba(var(--color-accent), .2);
    background: rgba(var(--color-card), 1);
    color: rgba(var(--color-accent), 1);
    --color-input: var(--color-card)
}

input-box>input,
input-box>textarea,
input-box>select {
    background: rgba(var(--color-input), 1);
    flex-grow: 1;
    height: 44px;
    padding: 0 15px;
    outline: none;
    color: rgba(var(--color-font), 1);
    line-height: 24px;
    font-size: 16px;
    border: none;
    display: block;
    margin: 0;
    width: 100%;
    transition: all .12s ease
}

input-box>:invalid:not(:focus) {
    color: rgba(var(--color-danger), 1)
}

input-box>textarea {
    resize: vertical;
    min-height: 100px;
    height: auto;
    padding: 10px 15px;
    line-height: normal
}

input-box>select {
    width: auto
}

input-box>select:not(:only-child) {
    width: auto
}

input-box>select:not(:only-child):first-child {
    border-right: 1px solid rgba(var(--color-font), .1)
}

input-box>select:not(:only-child):last-child {
    border-left: 1px solid rgba(var(--color-font), .1)
}

input-box>select option:disabled {
    color: rgba(var(--color-font), var(--opacity-font))
}

input-box>:focus-visible {
    box-shadow: none
}

input-box>::placeholder {
    color: rgba(var(--color-font), var(--opacity-font))
}

input-box>input-icon {
    display: flex;
    align-items: center;
    padding-left: 13px;
    opacity: var(--opacity-font);
    transition: all .12s ease
}

input-box>input+input-icon {
    padding-right: 13px
}

input-box:focus-within>input-icon {
    color: rgba(var(--color-accent), 1);
    opacity: 1
}

input-box>input-icon.capslock:not(.visible) {
    display: none
}

input-box>input-prefix,
input-box>input-suffix {
    color: rgba(var(--color-font), var(--opacity-font));
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 15px;
    transition: all .12s ease
}

input-box>input-prefix {
    border-right: 1px solid rgba(var(--color-font), .1)
}

input-box>input-suffix {
    border-left: 1px solid rgba(var(--color-font), .1)
}

input-box>input-prefix.subtle {
    border: none;
    padding-right: 0
}

input-box>input-prefix.subtle+* {
    padding-left: 0
}

input-note {
    color: rgba(var(--color-font), var(--opacity-font));
    display: block;
    margin-top: 5px;
    font-size: 14px
}

input-note>span {
    color: rgba(var(--color-accent), 1)
}

input-errors {
    color: rgba(var(--color-danger), 1);
    margin-top: 5px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    row-gap: 5px
}

input-errors>span::before {
    content: '• '
}

input[type=file] {
    width: 5px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    display: block;
    opacity: 0
}

input[type=file]+label {
    flex-grow: 1;
    display: block;
    cursor: pointer;
    height: 44px;
    padding: 0 15px;
    line-height: 44px;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
    color: rgba(var(--color-font), 1)
}

label.input-masked>input {
    display: none
}

label.input-masked {
    margin: 0
}

.input-swatches {
    display: grid;
    grid-gap: 12px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, 40px)
}

.input-swatches .swatch {
    background: rgba(var(--color-accent), 1);
    width: 40px;
    height: 40px;
    display: block;
    border-radius: var(--radius-medium);
    transition: all .12s ease;
    position: relative
}

.input-swatches .swatch::after {
    content: '';
    position: absolute;
    opacity: 0;
    left: 14px;
    top: 8.5px;
    width: 9px;
    height: 16px;
    border-bottom: 2px solid rgba(var(--color-font-alt), 1);
    border-right: 2px solid rgba(var(--color-font-alt), 1);
    transition: all .12s ease;
    transform: rotate(45deg) scale(.5)
}

.input-swatches .swatch:hover {
    box-shadow: 0 3px 6px 0 rgba(var(--color-accent), .2);
    background: rgba(var(--color-accent-alt), 1);
    cursor: pointer
}

.input-swatches :checked+.swatch {
    pointer-events: none
}

.input-swatches :disabled+.swatch {
    cursor: not-allowed;
    opacity: var(--opacity-disabled)
}

.input-swatches :checked+.swatch::after {
    transform: rotate(45deg) scale(1);
    opacity: 1
}

.input-panels {
    display: flex;
    row-gap: 10px;
    width: 100%;
    flex-direction: column
}

.input-panels .panel {
    border: 2px solid rgba(var(--color-font), .1);
    padding: 15px 15px 15px 45px;
    display: block;
    border-radius: var(--radius-medium);
    position: relative;
    transition: all .2s ease;
    cursor: pointer
}

.input-panels .panel::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 15px;
    width: 18px;
    height: 18px;
    box-shadow: inset 0 0 0 1px rgba(var(--color-font), .2);
    border-radius: 100%;
    transition: all .2s ease
}

.input-panels .panel::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 17px;
    width: 4px;
    height: 9px;
    border-bottom: 2px solid rgba(var(--color-card), 1);
    border-right: 2px solid rgba(var(--color-card), 1);
    transition: all .2s ease;
    transform: rotate(45deg) scale(.5)
}

.input-panels [type=radio]+.panel::after {
    display: none
}

.input-panels [type=checkbox]+.panel::before {
    border-radius: max(var(--radius-checkbox), 4px)
}

.input-panels .panel:hover {
    border: 2px solid rgba(var(--color-font), .5)
}

.input-panels .panel:hover::before {
    box-shadow: inset 0 0 0 1px rgba(var(--color-font), .3)
}

.input-panels :disabled+.panel {
    cursor: not-allowed;
    opacity: var(--opacity-disabled)
}

.input-panels :checked+.panel {
    box-shadow: 0 3px 6px 0 rgba(var(--color-accent), .2);
    border: 2px solid rgba(var(--color-accent), 1);
    color: rgba(var(--color-accent), 1)
}

.input-panels [type=checkbox]:checked+.panel::before {
    box-shadow: inset 0 0 0 20px rgba(var(--color-accent), 1)
}

.input-panels [type=radio]:checked+.panel::before {
    box-shadow: inset 0 0 0 5px rgba(var(--color-accent), 1)
}

.input-panels :checked+.panel::after {
    transform: rotate(45deg) scale(1)
}

.input-panels .panel>span {
    line-height: 18px;
    height: 18px;
    font-weight: 500;
    display: inline-block
}

.input-panels .panel>span>small {
    color: rgba(var(--color-accent), 1);
    margin-left: 5px
}

.input-panels .panel>span+p {
    color: rgba(var(--color-font), var(--opacity-font));
    margin-top: 10px;
    font-weight: 400;
    font-size: 16px
}

.input-choices>.input-masked {
    position: relative;
    line-height: 20px;
    display: block
}

.input-choices>label+label,
.input-choices>label+input-note {
    margin-top: 12px
}

.input-choices>.input-masked>.content {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: block
}

.input-choices>.input-masked>.content::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    width: 18px;
    height: 18px;
    box-shadow: inset 0 0 0 1px rgba(var(--color-font), .2);
    border-radius: 100%;
    transition: all .2s ease;
    transform: translateY(-50%)
}

.input-choices>.input-masked>.content::after {
    content: '';
    position: absolute;
    left: 6px;
    top: calc(50% + 3px);
    width: 4px;
    height: 9px;
    border-bottom: 2px solid rgba(var(--color-card), 1);
    border-right: 2px solid rgba(var(--color-card), 1);
    transition: all .2s ease;
    transform: rotate(45deg) scale(.5) translate(-235%, -115%)
}

.input-choices [type=radio]+.content::after {
    display: none
}

.input-choices [type=checkbox]+.content::before {
    border-radius: var(--radius-checkbox)
}

.input-choices :disabled+.content {
    cursor: not-allowed;
    opacity: var(--opacity-disabled)
}

.input-choices .content:hover::before {
    box-shadow: inset 0 0 0 1px rgba(var(--color-font), .5)
}

.input-choices [type=checkbox]:checked+.content::before {
    box-shadow: inset 0 0 0 20px rgba(var(--color-accent), 1)
}

.input-choices [type=radio]:checked+.content::before {
    box-shadow: inset 0 0 0 5px rgba(var(--color-accent), 1)
}

.input-choices :checked+.content::after {
    transform: rotate(45deg) scale(1) translate(-125%, -70%)
}

.input-toggle+.input-toggle {
    margin-top: 20px
}

.input-toggle>label {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center
}

.input-toggle>label+input-box {
    margin-top: 10px
}

.input-toggle>label>content {
    flex-grow: 1;
    display: block;
    padding-right: 20px
}

.input-toggle>label>content>span {
    display: block
}

.input-toggle>label>content>p {
    margin: 5px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: rgba(var(--color-font), var(--opacity-font))
}

.input-toggle>label>toggle {
    background: rgba(var(--color-font), .1);
    height: 18px;
    width: 38px;
    display: block;
    position: relative;
    border-radius: var(--radius-toggle);
    transition: all .12s ease;
    flex: 0 0 38px
}

.input-toggle>label>toggle::after {
    background: #fff;
    height: 14px;
    width: 14px;
    display: block;
    position: absolute;
    border-radius: var(--radius-toggle);
    content: '';
    left: 2px;
    top: 2px;
    transform: translateX(0px);
    transition: all .3s ease
}

.input-toggle>label:active>toggle {
    background: rgba(var(--color-accent), .3)
}

.input-toggle>label:active>toggle::after {
    width: 20px;
    top: 3px;
    left: 3px;
    height: 12px
}

.input-toggle>label>:disabled+content,
.input-toggle>label>:disabled+content+toggle {
    opacity: var(--opacity-disabled);
    cursor: not-allowed
}

.input-toggle>label>:checked+content+toggle {
    background: rgba(var(--color-accent), 1)
}

.input-toggle>label>:checked+content+toggle::after {
    transform: translateX(20px)
}

.input-toggle>label:active>:checked+content+toggle {
    background: rgba(var(--color-accent), .7)
}

.input-toggle>label:active>:checked+content+toggle::after {
    transform: translateX(12px)
}

input-slider {
    display: flex;
    flex-direction: row;
    height: 44px;
    align-items: center
}

input-slider>input-prefix {
    width: 40px;
    font-weight: 400;
    color: rgba(var(--color-font), var(--opacity-font))
}

input-slider>input {
    appearance: none;
    flex-grow: 1;
    background: rgba(var(--color-font), .1);
    transition: all .12s ease;
    outline: none;
    height: 6px;
    border-radius: var(--radius-small)
}

input-slider>input:hover {
    background: rgba(var(--color-font), .3)
}

input-slider>input::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: rgba(var(--color-accent), 1);
    transition: all .12s ease;
    border-radius: var(--radius-infinite)
}

input-slider>input::-webkit-slider-thumb:hover {
    transform: scale(1.2)
}

input-slider>input:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed
}

button,
.btn {
    background: 0 0;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 2px 5px 2px 0;
    padding: 0 20px;
    display: inline-block;
    border-radius: var(--radius-medium);
    transition: all .12s ease;
    line-height: 34px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none
}

button.ghost,
.btn.ghost {
    background: rgba(var(--color-card), 0);
    border: 2px solid rgba(var(--color-font), 0);
    color: rgba(var(--color-font), 1);
    padding: 0
}

button.regular,
.btn.regular {
    background: rgba(var(--color-font), .05);
    border: 2px solid rgba(var(--color-font), 0);
    color: rgba(var(--color-font), 1)
}

button.outline,
.btn.outline {
    background: rgba(var(--color-card), 1);
    border: 2px solid rgba(var(--color-font), .1);
    color: rgba(var(--color-font), 1)
}

button.ghost:hover,
.btn.ghost:hover {
    color: rgba(var(--color-accent), 1);
    text-decoration: underline
}

button.regular:hover,
.btn.regular:hover {
    background: rgba(var(--color-font), .1);
    box-shadow: 0 3px 6px 0 rgba(var(--color-shadow), .05)
}

button.outline:hover,
.btn.outline:hover {
    background: rgba(var(--color-card), 1);
    border: 2px solid rgba(var(--color-font), .2);
    box-shadow: 0 3px 6px 0 rgba(var(--color-shadow), .1)
}

button.ghost[class*=accent-],
.btn.ghost[class*=accent-] {
    color: rgba(var(--color-accent), 1)
}

button.regular[class*=accent-],
.btn.regular[class*=accent-] {
    background: rgba(var(--color-accent), 1);
    color: rgba(var(--color-font-alt), 1)
}

button.outline[class*=accent-],
.btn.outline[class*=accent-] {
    border: 2px solid rgba(var(--color-accent), 1);
    color: rgba(var(--color-accent), 1)
}

button.ghost[class*=accent-]:hover,
.btn.ghost[class*=accent-]:hover {
    color: rgba(var(--color-accent-alt), 1)
}

button.regular[class*=accent-]:hover,
.btn.regular[class*=accent-]:hover {
    background: rgba(var(--color-accent-alt), 1);
    box-shadow: 0 3px 6px 0 rgba(var(--color-accent), .2)
}

button.outline[class*=accent-]:hover,
.btn.outline[class*=accent-]:hover {
    border: 2px solid rgba(var(--color-accent-alt), 1);
    color: rgba(var(--color-accent-alt), 1);
    box-shadow: 0 3px 6px 0 rgba(var(--color-accent), .2)
}

button:disabled,
.btn[disabled] {
    pointer-events: none;
    opacity: var(--opacity-disabled)
}

button:focus-visible,
.btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--color-card), 1), 0 0 0 4px rgba(var(--color-accent), 1)
}

button[class*=outline]>.icon,
button[class*=regular]>.icon,
.btn>.icon {
    height: 24px;
    width: 24px;
    margin: 5px 10px 5px -6px;
    opacity: 1;
    float: left
}

table-filters {
    background: rgba(var(--color-font), .025);
    display: block;
    padding: 15px 20px;
    overflow-x: auto
}

table-filters>form,
table-filters {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    row-gap: 10px;
    align-items: flex-end
}

table-filters input-group {
    width: auto;
    min-width: 150px;
    margin-top: 0
}

table-filters input-group input-icon {
    padding-left: 10px
}

table-filters input,
table-filters select {
    height: 34px;
    padding: 0 10px
}

table-filters button,
table-filters .btn {
    height: 38px;
    margin: 0 5px 0 0
}

table-filters+table {
    border-top: 1px solid rgba(var(--color-font), 0.05)
}

table-filters .icon {
    height: 24px;
    width: 24px
}

spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--color-font), .1);
    border-top: 3px solid rgba(var(--color-accent), 1);
    border-radius: 50%;
    animation: spinner .8s linear infinite
}

grid>*,
split>* {
    margin: 0 !important
}

split+split {
    margin-top: 20px
}

span.diff,
small.diff {
    color: rgba(var(--color-font), var(--opacity-font));
    font-weight: 500
}

span.diff[class*=accent-],
small.diff[class*=accent-] {
    color: rgba(var(--color-accent), 1)
}

span.diff[class*=-success]::before,
small.diff[class*=-success]::before {
    content: '+ '
}

span.diff[class*=-danger]::before,
small.diff[class*=-danger]::before {
    content: '- '
}

input.hidden,
select.hidden,
textarea.hidden {
    display: none
}

.color {
    color: rgba(var(--color-accent), 1)
}

.clear {
    clear: both
}

.resize-both {
    resize: both
}

.resize-none {
    resize: none
}

.resize-x {
    resize: horizontal
}

.resize-y {
    resize: vertical
}

.no-wrap {
    white-space: nowrap
}

.full-width {
    width: 100%
}

.select-none {
    -webkit-user-select: none
}

.select-all {
    -webkit-user-select: all
}

.select-text {
    -webkit-user-select: text
}

.select-auto {
    -webkit-user-select: auto
}

.select-contain {
    -webkit-user-select: contain
}

.mb-0 {
    margin-bottom: 0
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-40 {
    margin-bottom: 40px
}

.mt-0 {
    margin-top: 0
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-30 {
    margin-top: 30px
}

.mt-40 {
    margin-top: 40px
}

.pb-0 {
    padding-bottom: 0
}

.pb-10 {
    padding-bottom: 10px
}

.pb-15 {
    padding-bottom: 15px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-30 {
    padding-bottom: 30px
}

.pb-40 {
    padding-bottom: 40px
}

.pt-0 {
    padding-top: 0
}

.pt-10 {
    padding-top: 10px
}

.pt-15 {
    padding-top: 15px
}

.pt-20 {
    padding-top: 20px
}

.pt-30 {
    padding-top: 30px
}

.pt-40 {
    padding-top: 40px
}

table td.td-image.medium-wide img {
    width: 70px;
    height: 40px
}

table td.td-image.medium-regular img {
    width: 54px;
    height: 40px
}

table td.td-image.medium-square img {
    width: 40px;
    height: 40px
}

table td.td-image.small-wide img {
    width: 54px;
    height: 30px
}

table td.td-image.small-regular img {
    width: 40px;
    height: 30px
}

table td.td-image.small-square img {
    width: 30px;
    height: 30px
}

@keyframes scanner {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: calc(-100% + 30%) 0
    }

    100% {
        background-position: 0 0
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    100% {
        opacity: 1
    }
}

@keyframes pulse-background {
    0% {
        background: rgba(var(--color-font), var(--opacity-font))
    }

    50% {
        background: rgba(var(--color-font), .3)
    }

    100% {
        background: rgba(var(--color-font), var(--opacity-font))
    }
}

@keyframes pulse-background-accent {
    0% {
        background: rgba(var(--color-accent), 1)
    }

    50% {
        background: rgba(var(--color-accent), .3)
    }

    100% {
        background: rgba(var(--color-accent), 1)
    }
}

@media screen and (max-width:1440px) {}

@media screen and (max-width:1100px) {
    layout.grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    gallery.grid-5,
    grid.grid-5,
    layout.grid-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    gallery.grid-6,
    grid.grid-6,
    layout.grid-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media screen and (max-width:800px) {

    .vb-prev,
    .vb-next {
        height: 30%;
        top: 35%;
        width: 50px
    }

    .vb-icon {
        transform: rotate(-45deg) scale(.6)
    }

    .vb-prev .vb-icon {
        left: 15px
    }

    .vb-next .vb-icon {
        right: 15px
    }

    layout.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    gallery.grid-4,
    grid.grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    gallery.grid-5,
    grid.grid-5,
    layout.grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    @media screen and (max-width:1100px) {
        layout.grid-4 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        gallery.grid-5,
        grid.grid-5,
        layout.grid-5 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        gallery.grid-6,
        grid.grid-6,
        layout.grid-6 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }
}

@media screen and (max-width:650px) {
    card ::-webkit-scrollbar {
        height: 0
    }

    split {
        grid-template-columns: minmax(0, 1fr)
    }

    gallery.grid-2,
    grid.grid-2,
    layout.grid-2 {
        grid-template-columns: minmax(0, 1fr)
    }

    gallery.grid-3,
    grid.grid-3,
    layout.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    gallery.grid-4,
    grid.grid-4,
    layout.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    gallery.grid-5,
    grid.grid-5,
    layout.grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    gallery.grid-6,
    grid.grid-6,
    layout.grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    gallery {
        gap: 15px
    }

    error {
        padding: 10px
    }

    button,
    .btn {
        padding: 0 18px
    }
}

@media screen and (max-width:400px) {}

@media(prefers-reduced-motion) {
    toast {
        transition: transform 0s linear
    }

    progress:not([value]) {
        animation: pulse-background 2s linear infinite
    }

    progress[class*=accent-]:not([value]) {
        animation: pulse-background-accent 2s linear infinite
    }

    spinner {
        border: 4px solid rgba(var(--color-accent), 1);
        animation: pulse 2s linear infinite
    }
}