@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');

/*
@font-face {
    font-family: 'servconnectIcons';
    src: url('/assets/css/fonts/icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

@font-face {
    font-family: 'servconnectIcons';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v83/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWHSSmlN.woff2) format('woff2');
}

icon {
    font-family: 'servconnectIcons';
    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 24;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
    text-align: center;
}

*,
h1,
h2,
h3,
h4,
h5,
h6,
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

*,
::after,
::before {
    box-sizing: border-box
}

:root {
    --accent-color: #483be2;
    --accent-color-dark: #0d0a29;
    --accent-color-light: #685de3;
}



body {
    margin: 0;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background-color: #000000;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.sc-dark {
    background-color: #000000;
}

opac {
    opacity: .6;
}

html {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

input,
textarea {
    position: relative;
    display: block;
    width: 100%;
    padding: 4px 8px;
    outline: unset;
    border-radius: 0px;
    border: 1px solid #292929;
    font-size: 17px;
    line-height: 1.25;
    font-family: "Noto Sans", sans-serif;
    background: #ffffffbb;
    color: #000000;
    border: 3px solid transparent;
    cursor: text;
}

input.f-code {
    font-family: "Source Code Pro", monospace;
}

input:focus,
textarea:focus {
    background: #ffffff;
    border: 3px solid var(--accent-color);
}

input::placeholder {
    color: #666666;
}

norm {
    text-transform: none;
}

textarea {
    resize: none;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
}

a,
lnk {
    margin: 0;
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

a:active,
lnk:active {
    opacity: .6;
    text-decoration: none;
}

select,
selectview {
    display: block;
    width: 100%;
    padding: 6px 8px;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    color: #f0f0f0;
    background-color: transparent;
    border: 3px solid #ffffff;
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: "Noto Sans", sans-serif;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select:active,
body selectview:active {
    background: var(--accent-color);
}

body selectview {
    display: flex;
    align-items: center;
}

body selectview > p {
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    color: #f0f0f0;
    font-family: "Noto Sans", sans-serif;
}

body selectview > p:not(:first-child) {
    margin: 0 0 0 8px;
}



body.sc-dark select {
    background-color: #0a0a0a;
    background-color: #111111;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
eh1,
eh2,
eh3,
eh4,
eh5,
eh6 {
    font-family: "Noto Sans", sans-serif;
    margin: 0;
    letter-spacing: 0.25px;
    line-height: 1.25;
    cursor: default;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h6 {
    font-size: 24px;
    font-weight: 300;
}

h5 {
    font-size: 18px;
    font-weight: 400;
}

h4 {
    font-size: 26px;
    font-weight: 300;
}


h3 {
    font-size: 32px;
    font-weight: 500;
}

h2 {
    font-size: 55px;
    font-weight: 200;
}

h1 {
    font-size: 62px;
    font-weight: 200;
}


@media(max-width: 700px) {
    h6 {
        font-size: 20px;
        font-weight: 400;
    }

    h5 {
        font-size: 24px;
    }

    h4 {
        font-size: 28px;
    }


    h3 {
        font-size: 32px;
        font-weight: 300;
    }

    h2 {
        font-size: 58px;
    }

    h1 {
        font-size: 80px;
    }
}

p,
slink {
    position: relative;
    margin-top: 0;
    font-size: 16px;
    cursor: default;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #ffffff;
}


body.sc-dark h1,
body.sc-dark h2,
body.sc-dark h3,
body.sc-dark h4,
body.sc-dark h5,
body.sc-dark h6,
body.sc-dark .h1,
body.sc-dark .h2,
body.sc-dark .h3,
body.sc-dark .h4,
body.sc-dark .h5,
body.sc-dark .h6 {
    color: #f0f0f0;
}

body p {
    color: #aaaaaa;
}



slink {
    color: var(--accent-color);
    cursor: pointer;
    display: inline-block;
}

slink:hover {
    text-decoration: underline;
}

slink:active {
    opacity: .5;
}

slink.more::after {
    position: relative;
    color: var(--accent-color);
    content: 'arrow_forward_ios';
    font-family: "Material Symbols Sharp";
    font-size: 14px;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 2px;
}

code {
    position: relative;
    font-family: 'Source Code Pro', monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    color: #0a0a0a;
    font-size: 14px;
    max-width: 100%;
    -moz-user-select: unset;
    -webkit-user-select: unset;
    user-select: unset;
    -webkit-tap-highlight-color: unset;
}

code::-moz-selection {
    color: var(--accent-color);
    background: rgba(0, 0, 0, .1);
}

code::selection {
    color: var(--accent-color);
    background: rgba(0, 0, 0, .1);
}

@media(prefers-color-scheme:dark) {
    code {
        position: relative;
        font-family: 'Source Code Pro', monospace;
        white-space: normal;
        color: #f0f0f0;
    }

    code::-moz-selection {
        background: rgba(255, 255, 255, .1);
    }

    code::selection {
        background: rgba(255, 255, 255, .1);
    }
}


button {
    position: relative;
    display: inline-block;
    outline: unset;
    box-shadow: unset;
    border: unset;
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    font-weight: 400;
    background: transparent;
    text-transform: lowercase;
    border-radius: 0;
    padding: 2px 16px 4px;
    color: #ffffff;
    cursor: pointer;
    border: 3px solid #ffffff;
}


button:active {
    background: #ffffff;
    color: #000000;
}

@media(max-width: 700px) {
    button:active {
        background: var(--accent-color);
        color: #ffffff;
    }
}

@media(min-width: 701px) {
    button.desktop-highlight:not(:active) {
        background: var(--accent-color);
    }
}

button.grey {
    background: #222222;
    border: 1px solid #333333;
    color: var(--accent-color);
}

button.grey:hover {
    background: #252525;
    border: 1px solid #333333;
}

button.grey:active {
    background: #202020;
    border: 1px solid #333333;
}

body.sc-dark button.grey {
    background: #333333;
    border: 1px solid #555555;
    color: var(--accent-color);
}

body.sc-dark button.grey:hover {
    background: #353535;
    border: 1px solid #555555;
}

body.sc-dark button.grey:active {
    background: #252525;
    border: 1px solid #353535;
}

button.grey.delete,
slink.delete,
finput.b.delete p,
finput.b.delete icon,
actions entry.delete icon,
actions entry.delete p,
imagegrid multisel entry.delete icon,
imagegrid multisel entry.delete p,
sbutton.delete > content > h4 {
    color: #cc3434;
}




button.delete:not(.grey) {
    background: #cc3434;
    border: 1px solid #e61e1e;
    color: #111111;
}

button.delete:not(.grey):hover {
    background: #e61e1e;
    border: 1px solid #e61e1e;
}

button.delete:not(.grey):active {
    background: #e61e1e;
    border: 1px solid #e61e1e;
}

p.delete {
    color: #e34343;
}

p.warning {
    color: #e38043;
}




actions > content > entry.disabled,
imagegrid > multisel > content > entry.disabled {
    pointer-events: none;
    background: unset !important;
}

actions > content > entry.disabled > p,
actions > content > entry.disabled > icon,
actions > content > entry.disabled:hover > p,
actions > content > entry.disabled:hover > icon,
imagegrid > multisel > content > entry.disabled > p,
imagegrid > multisel > content > entry.disabled > icon,
imagegrid > multisel > content > entry.disabled:hover > p,
imagegrid > multisel > content > entry.disabled:hover > icon {
    color: #353535;
}



entry.actions-search {
    display: flex;
    align-items: center;
    transition: flex .2s cubic-bezier(0.215, 0.610, 0.355, 1), width .2s cubic-bezier(0.215, 0.610, 0.355, 1), padding .2s cubic-bezier(0.215, 0.610, 0.355, 1), background .2s linear;
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    justify-content: flex-start;
}

entry.actions-search.ex {
    background: #111111;
    border: 1px solid #292929;
    cursor: text;
    padding: 8px 10px;
    height: 40px;
}

entry.actions-search.ex:focus-within {
    border: 1px solid rgba(var(--accent-color), 1);
}

entry.actions-search.ex:hover,
entry.actions-search.ex:active {
    opacity: 1;
}

entry.actions-search > icon {
    transition: color .2s linear, transform .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

entry.actions-search > icon:first-of-type {
    flex: 0 0 24px;
}

entry.actions-search.ex > icon {
    color: #cccccc;
    transform: scale(.8);
    cursor: text;
}

entry.actions-search > icon:last-of-type {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    height: 26px;
    color: #ffffff;
    border-radius: 50%;
    background: rgba(155, 155, 155, .25);
    cursor: pointer;
    font-size: 18px;
}

entry.actions-search:not(.ex) > icon:last-of-type {
    display: none;
}

entry.actions-search > input {
    position: relative;
    display: inline-block;
    width: unset;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0 0 0 8px;
    height: 100%;
    flex: 1 1;
    transition: opacity .05s linear;
    opacity: 0;
    pointer-events: none;
}

entry.actions-search.ex > input {
    transition: opacity .2s linear .1s;
    opacity: 1;
    pointer-events: all;
}

entry.actions-search > input:focus {
    outline: 0;
    border: 0;
}






/* ---- Section ---- */

section {
    position: relative;
    width: 100%;
    display: block;
    padding: 0 32px 0;
    -webkit-overflow-scrolling: touch;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media(min-width: 701px) {
    section.bg-1 {
        background: rgba(155, 155, 155, .05);
    }

    section.bg-2 {
        background: rgba(155, 155, 155, .1);
    }

    section.bg-3 {
        background: rgba(155, 155, 155, .15);
    }

    section.bg-4 {
        background: rgba(155, 155, 155, .2);
    }

    section.bg-5 {
        background: rgba(155, 155, 155, .25);
    }

    section.bg-6 {
        background: rgba(155, 155, 155, .3);
    }

    section.bg-6 {
        background: rgba(155, 155, 155, .35);
    }

    section {
        transition: background .1s linear;
    }
}

section.duplicate {
    display: none;
}

@media(max-width: 700px) {

    view.panorama > contentwrap > content > section,
    view.pivot > contentwrap > content > section,
    view.form > contentwrap > content > section,
    view.subform > contentwrap > content > section,
    view.wizard > contentwrap > content > section {
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    view.panorama > contentwrap > content > section > contentwrap,
    view.pivot > contentwrap > content > section > contentwrap,
    view.form > contentwrap > content > section > contentwrap,
    view.subform > contentwrap > content > section > contentwrap,
    view.wizard > contentwrap > content > section > contentwrap {
        padding-bottom: 0;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior: none;
    }

    section.duplicate {
        display: block;
        pointer-events: none;
    }

    .mobileHide {
        display: none;
    }
}

@media(min-width: 701px) {
    .desktopHide {
        display: none;
    }
}


section > contentwrap {
    position: relative;
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 1;
}

@media(min-width: 1500px) {
    section > contentwrap {
        max-width: 1400px;
    }
}

section > contentwrap > content {
    position: relative;
    width: 100%;
    flex: 1 1 100%;
    display: block;
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: flat;
    transform-style: flat;
}

section > contentwrap > titlewrap {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 300px;
    flex: 0 0 300px;
    display: inline-block;
    padding: 42px 0 0 0;
}

view.sidebar section > contentwrap > titlewrap {
    height: unset;
}

@media(min-width: 1000px) {
    section > contentwrap {
        overflow: visible;
    }


    section > contentwrap > titlewrap {
        flex: 0 0 350px;
        width: 350px;
    }
}

@media(min-width: 1200px) {
    section > contentwrap > titlewrap {
        flex: 0 0 400px;
        width: 400px;
    }
}

@media(min-width: 1500px) {
    section > contentwrap > titlewrap {
        flex: 0 0 500px;
        width: 500px;
    }
}

section > contentwrap > titlewrap > actions {
    position: relative;
    display: block;
    width: 100%;
    padding: 22px 50% 0 0;
}

@media(min-width: 1500px) {
    section > contentwrap > titlewrap > actions {
        padding: 32px 50% 0 0;
    }
}

section > contentwrap > titlewrap > moreactions {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0;
}

section > contentwrap > titlewrap > moreactions > p {
    position: relative;
    display: inline-block;
    color: #ffffff;
    margin: 8px 0 0 0;
    padding: 4px 12px 4px 0;
    text-transform: lowercase;
    cursor: pointer;
}

section > contentwrap > titlewrap > moreactions > p:active {
    opacity: .5;
}



section > contentwrap > titlewrap > actions > entry {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    cursor: pointer;
}

section > contentwrap > titlewrap > actions > entry > p {
    position: relative;
    display: block;
    color: #ffffff;
    margin: 0;
    cursor: pointer;
}

section > contentwrap > titlewrap > actions > entry:active > p {
    opacity: .5;
}

section > contentwrap > titlewrap > actions > entry > inner {
    position: relative;
    display: flex;
    flex: 0 0 32px;
    height: 32px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50000px;
    border: 3px solid #ffffff;
    padding: 2px 1px 2px 2px;
    margin: 0 8px 0 0;
}

section > contentwrap > titlewrap > actions.temp > entry > inner {
    border-color: var(--accent-color);
}

section > contentwrap > titlewrap > actions > entry > inner > icon {
    position: relative;
    display: block;
    margin: 0;
    font-size: 18px;
}

section > contentwrap > titlewrap > actions > entry:active > inner > icon {
    color: #ffffff;
}

section > contentwrap > titlewrap > actions > entry:active > inner {
    border-color: var(--accent-color);
    background: var(--accent-color);
}

@media(max-width: 700px) {
    section > contentwrap > titlewrap > actions {
        display: none;
    }


    section > contentwrap {
        display: block;
    }

    section > contentwrap > titlewrap {
        position: relative;
        top: unset;
        left: unset;
        padding: 0 0 8px 0;
        height: unset;
    }

    section > contentwrap > titlewrap > moreactions {
        display: none;
    }
}

section > contentwrap > titlewrap > h6 {
    position: relative;
    display: block;
    font-weight: 200;
    font-size: 42px;
    text-transform: lowercase;
    padding: 0 24px 0 0;
}

@media(max-width: 700px) {
    section > contentwrap > titlewrap > h6 {
        font-size: 18px;
        width: 100%;
        min-height: 21px;
        display: block;
        text-transform: uppercase;
        font-weight: 600;
    }
}

@media(min-width: 701px) {
    section {
        pointer-events: all !important;
        overflow: visible;
    }

    section > contentwrap > content {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

@media(min-width: 1500px) {
    section > contentwrap > titlewrap > h6 {
        font-size: 52px;
    }
}



/* --- Mobile actions --- */

body > actions {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: block;
    height: 0px;
    background: #202020;
    overflow: hidden;
    transform: translate3d(0, 0, 100px);
    transition: transform .2s cubic-bezier(.2, .4, 0, 1), height .2s cubic-bezier(.2, .4, 0, 1), background .05s linear;
    visibility: hidden;
    display: none;
    z-index: 20;
}

@media(max-width: 700px) {
    body > actions {
        display: block;
    }
}


body > actionsbg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 9;
}

body > actions.grey {
    background: #202020;
}

body > actions.translucent {
    background: #000000dd;
}

body > actions.grey.translucent {
    background: #202020dd;
}

body > actions > content {
    height: 50px;
}


body > actions > content {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
    padding: 80px 0 10px;
}

body > actions > content > entry {
    position: relative;
    width: 100%;
    display: block;
    padding: 8px 20px;
}

body > actions > content > entry:last-of-type {
    padding-bottom: 20px;
}

body > actions > content > entry > p {
    position: relative;
    font-size: 24px;
    font-weight: 300;
    color: #ffffff;
}

body > actions > content > top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 0, 0);
    transition: transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity .2s linear;
}

body > actions > content > more {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 60px;
    height: 60px;
    display: block;
    overflow: hidden;
}

body > actions > content > more > svg {
    position: absolute;
    right: 8px;
    top: 0;
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}


body > actions > content > top > entry {
    position: relative;
    height: 60px;
    width: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
}

body > actions > content > top > entry > p {
    position: absolute;
    top: 100%;
    left: -12px;
    width: calc(100% + 24px);
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    visibility: hidden;
    padding: 0;
    margin: -3px 0 0 0;
    text-transform: lowercase;
}

body > actions > content > top > entry.sh-title > p {
    visibility: visible;
}


body > actions > content > top > entry > inner {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 50%;
    border: 3px solid #fff;
}

body > actions > content > top.temp > entry > inner {
    border: 3px solid var(--accent-color);
}

body > actions > content > top > entry > inner > icon {
    position: relative;
    margin: 0;
    fill: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-size: 24px;
}

body > actions > content > top > entry:active > inner {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: translate3d(0, -2px, 0);
}


body > actions > content > top > entry > icon::after {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    content: '';
}


/* ---- View ---- */



view {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto 0;
    opacity: 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: left center;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

view > backgroundpic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
    transform: translate3d(0, 0, 0);
}

view > backgroundpic > content {
    position: relative;
    height: 100%;
    display: flex;
    overflow: visible;
    margin: 0;
    opacity: 0;
    transition: opacity .2s linear;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
    transform: translate3d(0, 0, 0);
}

view > backgroundpic > content > picture {
    position: relative;
    width: calc(200vw + 1px);
    height: 100%;
    flex: 0 0 calc(200vw + 1px);
    display: block;
    margin: 0;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
    transform: translate3d(0, 0, 0);
}

view > backgroundpic > content > picture > img {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
    transform: translate3d(0, 0, 0);
}


view > scspinner {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 40px;
    pointer-events: none;
}

view.subform {
    background: #202020;
}

view > contentwrap {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

view > contentwrap > content {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 10000px;
    perspective: 10000px;
    z-index: 2;
    overflow: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

view.panorama > contentwrap > content,
view.pivot > contentwrap > content,
view.wizard > contentwrap > content {
    position: relative;
    width: 100%;
    display: block;
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@media(min-width: 701px) {
    view {
        overflow: hidden;
    }

    view > backgroundpic {
        display: none;
    }

    view > contentwrap {
        height: 100%;
        overflow: visible;
        display: flex;
    }

    view > contentwrap > content {
        height: 100%;
        padding: 0 !important;
    }

    view:not(.form):not(.subform) > contentwrap > content {
        transform: translate3d(0, 0, 0) !important;
    }

    view > contentwrap > sidebar {
        position: relative;
        height: 100%;
        flex: 0 0 350px;
        display: block;
        margin: 0;
        background: #111111;
    }

    view > contentwrap > sidebar > content > titlewrap {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 42px;
    }

    view > contentwrap > sidebar > content > titlewrap > h3 {
        position: relative;
        display: block;
        font-weight: 200;
        font-size: 42px;
        padding: 0 24px 0 0;
    }
}

@media(max-width: 700px) {
    view > contentwrap > sidebar {
        display: none;
    }
}

@media(max-width: 700px) {
    view > contentwrap > content {
        overflow: hidden;
    }

    view > contentwrap {
        width: 100%;
        height: 100%;
        overflow: visible;
    }
}



view.animate-in > contentwrap > content,
view.animate-in > backgroundpic > content,
view.animate-in {
    transition: transform .8s cubic-bezier(.2, .4, 0, 1);
}

view.animate-in > backgroundpic {
    width: 200vw;
}

view.animate-in.animation-flip {
    transition: transform .15s cubic-bezier(.2, .4, 0, 1);
}

view.animate-in.animation-flipX {
    transition: transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity .05s cubic-bezier(.2, .4, 0, 1);
}

view.animate-in.animation-desktop-slide section,
view.animate-in.animation-desktop-slide section > contentwrap > content {
    transition: transform .4s cubic-bezier(.2, .4, 0, 1), opacity .1s linear;
}

view.animate-in.animation-desktop-form section,
view.animate-in.animation-desktop-form section > contentwrap > content,
view.animate-in.animation-desktop-form section > contentwrap > titlewrap,
view.animate-in.animation-desktop-form > contentwrap > header,
view.animate-in.animation-desktop-form > contentwrap,
view.animate-in.animation-desktop-form > contentwrap > content {
    transition: transform .4s cubic-bezier(0.23, 1, 0.320, 1), opacity .2s cubic-bezier(0.23, 1, 0.320, 1);
}

view.animate-in.animation-desktop-form > contentwrap {
    transition: height .4s cubic-bezier(0.23, 1, 0.320, 1), opacity .2s cubic-bezier(0.23, 1, 0.320, 1);
}

view.animate-in.animation-desktop-form {
    transition: background .1s linear;
}

view.animate-in.animation-slide {
    transition: transform .4s cubic-bezier(.2, .4, 0, 1), opacity .1s cubic-bezier(.2, .4, 0, 1);
}

view.panorama.animate-panorama > contentwrap > content,
view.pivot.animate-panorama > contentwrap > content,
view.panorama.animate-panorama > backgroundpic > content {
    transition: transform .6s cubic-bezier(.2, .4, 0, 1);
}

view.animate-out {
    transition: transform .15s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

view.animate-out.animation-slide {
    transition: transform .15s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity .05s linear .1s;
}

view.animate-out.animation-flip {
    transition: transform .12s cubic-bezier(0.55, 0.085, 0.68, 0.53)
}

view.animate-out.animation-flipX {
    transition: transform .1s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity .05s linear .05s;
}

view.animate-out.animation-desktop-slide section,
view.animate-out.animation-desktop-slide section > contentwrap > content,
view.animate-out.animation-desktop-form section,
view.animate-out.animation-desktop-form section > contentwrap > content,
view.animate-out.animation-desktop-form section > contentwrap > titlewrap,
view.animate-out.animation-desktop-form > contentwrap > header {
    transition: transform .15s cubic-bezier(0.895, 0.03, 0.685, 0.22), opacity .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

view.animate-out.animation-desktop-form section,
view.animate-out.animation-desktop-form section > contentwrap > content,
view.animate-out.animation-desktop-form section > contentwrap > titlewrap,
view.animate-out.animation-desktop-form > contentwrap > header,
view.animate-out.animation-desktop-form > contentwrap,
view.animate-out.animation-desktop-form > contentwrap > content {
    transition: transform .15s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity .2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

view.animate-out.animation-desktop-form > contentwrap {
    transition: transform .15s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity .05s linear .1s, height .15s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

view.animate-out.animation-desktop-form {
    transition: background .25s linear;
}







view > contentwrap > header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 80px;
    display: block;
    z-index: 5;
    border-bottom: 1px solid transparent;
    transform: translate3d(0, 0, 0);
    -webkit-touch-callout: none;
    display: none;
}

@media(max-width: 700px) {
    view {
        display: block;
        padding: 0 20px 20px 20px;
    }

    view > contentwrap > header {
        display: block;
        width: 200%;
    }
}

view.animate-in > contentwrap > header {
    transition: transform .8s cubic-bezier(.2, .4, 0, 1);
}

view > contentwrap > header > bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 0;
    opacity: 0;
    transition: opacity .1s linear;
    background: linear-gradient(to top, rgba(5, 5, 5, .8) 0%, #000000 100%);
    background: -webkit-linear-gradient(to top, rgba(5, 5, 5, .8) 0%, #000000 100%);
}


view > contentwrap > header.bg {
    border-bottom: 1px solid #292929;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

view > contentwrap > header.bg > bg {
    opacity: 1;
}

view > contentwrap > header > content {
    position: relative;
    width: 100%;
    display: block;
    min-height: 80px;
    padding: 32px 0 0 0;
}

view > contentwrap > header > content > top {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1;
    flex-wrap: nowrap;
    transform: translate3d(0, 0, 0);
    transition: transform .4s cubic-bezier(.2, .4, 0, 1);
}


view > contentwrap > header > content > top > info {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1 1;
    height: 100%;
    flex-wrap: nowrap;
    min-height: 38px;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .2s cubic-bezier(.2, .4, 0, 1);
    overflow: hidden;
}

view > contentwrap > header > content > pivotbuttons {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0;
    transform: translate3d(0, 0, 0);
}

view.animate-panorama > contentwrap > header > content > pivotbuttons {
    transition: transform .6s cubic-bezier(.2, .4, 0, 1), opacity .2s cubic-bezier(.2, .4, 0, 1);
}

view > contentwrap > header > content > pivotbuttons > h2 {
    position: relative;
    white-space: nowrap;
    line-height: 1.15;
    font-weight: 300;
    padding-left: 16px;
    letter-spacing: -1px;
    text-transform: lowercase;
    transition: opacity .1s cubic-bezier(.2, .4, 0, 1);
}




view > contentwrap > header.back > content > top > info {
    transform: translate3d(32px, 0, 0);
}

view > contentwrap > header > content > top:not(:last-of-type) > info {
    padding: 18px 0;
}

view > contentwrap > header > content > top > info > textwrap {
    position: relative;
    display: block;
    margin: 0;
}

view.panorama > contentwrap > header > content > top > info > textwrap > h1,
view.panorama > contentwrap > header > content > top > info > textwrap > h2 {
    letter-spacing: -4px;
    text-transform: lowercase;
}

view > contentwrap > header > content > top > info > textwrap > h1,
view > contentwrap > header > content > top > info > textwrap > h2,
view > contentwrap > header > content > top > info > textwrap > h3,
view > contentwrap > header > content > top > info > textwrap > h4,
view > contentwrap > header > content > top > info > textwrap > h5,
view > contentwrap > header > content > top > info > textwrap > h6 {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    text-overflow: ellipsis;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
}

view.pivot > contentwrap > header > content > top > info > textwrap > h1,
view.form > contentwrap > header > content > top > info > textwrap > h1,
view.subform > contentwrap > header > content > top > info > textwrap > h1,
view.wizard > contentwrap > header > content > top > info > textwrap > h1 {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    text-overflow: ellipsis;
    line-height: 1.12;
    white-space: nowrap;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
}

view > contentwrap > header > content > top > info > textwrap > p {
    position: relative;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 0;
    overflow: hidden;
}



@media(max-width: 700px) {
    view.panorama {
        margin: 0;
        padding: 0 42px 0 0;
    }

    view.pivot,
    view.wizard {
        margin: 0;
        padding: 0 0 0 0;
    }

    view > sidebar {
        display: none;
    }

    view > contentwrap > content {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        padding-bottom: 0;
        overflow: visible;
    }

    view > contentwrap > content::-webkit-scrollbar {
        width: 0;
        /* Remove scrollbar space */
        background: transparent;
        /* Optional: just make scrollbar invisible */
    }

    view.panorama > contentwrap > content,
    view.pivot > contentwrap > content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        max-height: 100vh;
    }

    view.form > contentwrap > content,
    view.subform > contentwrap > content {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        height: 100%;
        padding: 0;
    }

    view.subform.sscroller > contentwrap > content {
        padding-top: 0 !important;
    }

    view.form,
    view.subform {
        padding-left: 0;
        padding-right: 0;
    }

    view.form > contentwrap > header,
    view.subform > contentwrap > header {
        padding-right: 20px;
        padding-left: 18px;
    }

    view.subform.sscroller > contentwrap > header {
        background: #202020;
    }

    view.form > contentwrap > actions,
    view.subform > contentwrap > actions {
        display: none;
    }

    view.form > contentwrap > header > content,
    view.subform > contentwrap > header > content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    view.panorama > contentwrap > content > section,
    view.pivot > contentwrap > content > section,
    view.form > contentwrap > content > section,
    view.subform > contentwrap > content > section {
        position: relative;
        display: block;
        width: 100%;
        flex: 0 0 100%;
        height: 100%;
        padding: 0 8px 0 22px;
    }

    view.form > contentwrap > content > section,
    view.subform > contentwrap > content > section {
        padding-left: 0;
        padding-right: 0;
    }

    view.pivot > contentwrap > content > section {
        padding: 0;
        opacity: 0;
        transition: opacity .1s linear;
    }

    view.pivot > contentwrap > content > section > contentwrap > content,
    view.wizard > contentwrap > content > section > contentwrap > content,
    view.form > contentwrap > content > section > contentwrap > content,
    view.subform > contentwrap > content > section > contentwrap > content {
        padding: 0 20px 78px;
    }

    view.panorama > contentwrap > content > section > contentwrap > content {
        padding-bottom: 78px;
    }


    view.pivot > contentwrap > content > section > contentwrap > titlewrap {
        display: none;
        padding: 0 0 32px 0;
    }

    view.wizard > contentwrap > content > section > contentwrap > titlewrap {
        padding: 0 20px 20px;
    }

    view.wizard > contentwrap > content > section > contentwrap > titlewrap > h6 {
        white-space: nowrap;
        line-height: 1.15;
        font-weight: 300;
        font-size: 38px;
        text-transform: unset;
        white-space: pre-wrap;
    }

    view.wizard > contentwrap > content > section > contentwrap > titlewrap > actions,
    view.wizard > contentwrap > content > section > contentwrap > titlewrap > moreactions {
        display: none;
    }

    view,
    view.panorama,
    view.pivot,
    view.wizard {
        padding-bottom: 0;
    }

    view > contentwrap > header > content > top {
        padding: 0 19px 0 18px;
    }

    view.form > contentwrap > header > content > top,
    view.subform > contentwrap > header > content > top {
        padding: 0 19px 0 0;
    }
}


@media(min-width: 701px) {

    view.form,
    view.subform {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
    }

    view.form > contentwrap,
    view.subform > contentwrap {
        width: 100%;
        max-height: 700px;
        flex: 0 0 100%;
        padding: 0;
        margin: 0 0 68px 0;
        height: auto;
        background: var(--accent-color-dark);
        display: flex;
        flex-direction: column;
    }


    view.form > contentwrap list separator,
    view.subform > contentwrap list separator {
        background: var(--accent-color-dark);
    }


    view.form > contentwrap > content,
    view.subform > contentwrap > content {
        padding-top: 0 !important;
    }

    view.form > contentwrap > content > section > contentwrap,
    view.subform > contentwrap > content > section > contentwrap {
        max-width: 800px;
    }

    view.form > contentwrap > content > section > contentwrap > content,
    view.subform > contentwrap > content > section > contentwrap > content {
        padding-top: 0 !important;
    }


    view.form > contentwrap > actions,
    view.subform > contentwrap > actions {
        position: relative;
        width: 100%;
        display: block;
        padding: 32px;
        background: rgba(0, 0, 0, .25);
    }

    view.form > contentwrap > actions > content,
    view.subform > contentwrap > actions > content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: 800px;
        margin: 0 auto;
    }

    view.form > contentwrap > actions > content > button:not(:last-child),
    view.subform > contentwrap > actions > content > button:not(:last-child) {
        margin: 0 8px 0 0;
    }


    view.form > contentwrap > header,
    view.subform > contentwrap > header {
        position: relative;
        flex: 0 0;
        margin: 22px 0 12px 0;
        padding: 0;
        display: block;
    }

    view.subform.sscroller > contentwrap > header {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    view.subform.sscroller > contentwrap > header > content {
        min-height: 20px;
    }

    view.form > contentwrap > header > content,
    view.subform > contentwrap > header > content {
        position: relative;
        display: flex;
        width: 100%;
        padding: 0 32px 8px;
    }

    view.form > contentwrap > header > content > top,
    view.subform > contentwrap > header > content > top {
        max-width: 800px;
        margin: 0 auto;
    }

    view.form > contentwrap > header > content > top > info > textwrap > h1 {
        font-weight: 200;
        font-size: 40px;
        line-height: 1.25;
        text-transform: unset;
    }

    view.sidebar section > contentwrap {
        display: block;
    }
}




bigtile {
    position: relative;
    width: 100%;
    display: block;
    padding: 10px 0;
    -webkit-transform-style: flat;
    transform-style: flat;
}

bigtile:first-child {
    padding-top: 0;
}

bigtile > content {
    position: relative;
    width: 100%;
    display: flex;
    -webkit-transform-style: flat;
    transform-style: flat;
}






tilegrid {
    position: relative;
    display: grid;
    width: 100%;
    padding: 10px 0;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

tilegrid.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

tilegrid.col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media(min-width: 1000px) {
    tilegrid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    tilegrid.col-3 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    tilegrid.col-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

view tilegrid:first-child {
    padding-top: 0;
}








tile {
    position: relative;
    display: block;
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    margin: 0 12px 0 0;
    background: var(--accent-color);
    overflow: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
    opacity: 1;
    transition: oapcity .1s linear;
}

tilegrid > tile {
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}

section > contentwrap > content > tile {
    margin: 10px 0;
}

section > contentwrap > content > tile:first-child {
    margin-top: 0;
}

tile.grey {
    background: #202020;
}

view.subform tile.grey {
    background: #353535;
}

@media(min-width: 701px) {

    tile.grey,
    view.subform tile.grey {
        background: var(--accent-color-light);
    }

    tile {
        width: 158px;
        height: 158px;
        flex: 0 0 158px;
    }
}

tile.photo-select {
    cursor: pointer;
}

tile > tilecontent {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 1s cubic-bezier(.56, 0, 0, 1);
    -webkit-transform-style: flat;
    transform-style: flat;
}

tile > tilecontent > entry {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    padding: 0;
    margin: 0;
    -webkit-transform-style: flat;
    transform-style: flat;
}

tile > tilecontent > entry > content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-transform-style: flat;
    transform-style: flat;
}

tile > tilecontent > textwrap,
tile > tilecontent > entry.title > content {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    padding: 5px 4px;
    -webkit-transform-style: flat;
    transform-style: flat;
}

tile > tilecontent > textwrap > h4,
tile > tilecontent > entry.title > content > h4 {
    position: relative;
    flex: 0 0 100%;
    display: block;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1.10;
    cursor: pointer;
    text-transform: lowercase;
    -webkit-transform-style: flat;
    transform-style: flat;
}

@media(min-width: 701px) {
    tile.photo-select:active > tilecontent > textwrap > h4 {
        opacity: .75;
    }
}

@media(max-width: 700px) {

    tile > tilecontent > textwrap > h4,
    tile > tilecontent > entry.title > content > h4 {
        font-size: 24px;
        font-weight: 300;
        cursor: pointer;
    }
}

tile > tilecontent > img {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% + 1px);
    flex: 0 0 calc(100% + 1px);
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
    -webkit-transform-style: flat;
    transform-style: flat;
    pointer-events: none;
    background: rgba(255, 255, 255, .25);
}

tile > tilecontent > entry.image > content > picture {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% + 1px);
    margin: 0;
    padding: 0;
    -webkit-transform-style: flat;
    transform-style: flat;
    pointer-events: none;
}

tile > tilecontent > entry.image > content > picture > img {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% + 1px);
    object-fit: cover;
    object-position: center center;
    margin: 0;
    padding: 0;
    -webkit-transform-style: flat;
    transform-style: flat;
    pointer-events: none;
}

sbutton {
    position: relative;
    width: 100%;
    display: flex;
    padding: 10px 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 400px;
    perspective: 400px;
    opacity: 1;
    transition: opacity .1s linear;
}

sbutton.a {
    cursor: pointer;
}

@media(min-width: 701px) {
    sbutton.a:active {
        opacity: .5;
    }
}

section.animate-section-to-left sbutton:nth-child(-n+7) p {
    animation: animSectionToLeft .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes animSectionToLeft {
    from {
        transform: translate3d(-250px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

section.animate-section-to-right sbutton p:nth-child(-n+7) {
    animation: animSectionToRight .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes animSectionToRight {
    from {
        transform: translate3d(250px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

section > contentwrap > content > sbutton:first-child {
    padding-top: 0;
}

sbutton > content {
    position: relative;
    display: block;
    flex: 1 1 100%;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

sbutton > content > h4 {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    color: #666666;
}

sbutton.a > content > h4 {
    color: #ffffff;
    cursor: pointer;
}

sbutton > content > p {
    position: relative;
    width: 100%;
    display: block;
    color: #666666;
    padding: 0;
}

sbutton.a > content > p {
    cursor: pointer;
}

sbutton.a:not(.a-white):not(.delete):not(.a-grey) > content > p {
    color: var(--accent-color);
}

@media(max-width: 700px) {
    view.subform sbutton.a:not(.a-white):not(.delete):not(.a-grey) > content > p {
        color: var(--accent-color-light);
    }
}

sbutton.a.a-white > content > p {
    color: #ffffff;
}

sbutton.a.a-grey > content > p {
    color: #aaaaaa;
}


sbutton > img {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    margin: 0 14px 0 0;
    overflow: hidden;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity .05 linear;
}

sbutton > img.sh {
    opacity: 1;
}








view.f {
    background: #f7f7f7;
    transition: transform .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform-style: preserve-3d;
    padding: 10%;
    display: flex;
    align-items: center;
}

body.sc-dark view.f {
    background: #151515;
    transition: transform .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform-style: preserve-3d;
    padding: 10%;
}

view.f > content {
    position: relative;
    display: block;
    background: #fff;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, .12);
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    border: 1px solid #292929;
    height: unset;
    padding: 0;
}


body.sc-dark view.f > content {
    background: #000000;
    border: 1px solid #333333;
}

view.f > content > question {
    position: relative;
    display: block;
    padding: 42px;
    width: 100%;
}

view.f > content > question > iconwrap {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 12px 0;
}

view.f > content > question > iconwrap > icon {
    position: relative;
    width: 100%;
    font-size: 70px;
    color: var(--accent-color);
    text-align: center;
}

view.f > content > question > textwrap {
    position: relative;
    display: block;
}

view.f > content > question h1,
view.f > content > question h2,
view.f > content > question h3,
view.f > content > question h4,
view.f > content > question h5,
view.f > content > question h6 {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 0 8px 0;
}

view.f > content > question p {
    position: relative;
    width: 100%;
    margin: 0;
    text-align: center;
}

view.f > content > question buttonwrap {
    position: relative;
    width: 100%;
    display: block;
    margin: 32px 0 0 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f7;
}

body.sc-dark view.f > content > question buttonwrap {
    background: #111111;
}

view.f > content > question buttonwrap > slink {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 22px;
}

view.f > content > question buttonwrap > slink:hover {
    background: rgba(155, 155, 155, .1);
    text-decoration: unset;
}

view.f > content > question buttonwrap > slink:active {
    background: rgba(155, 155, 155, .2);
    text-decoration: unset;
    opacity: 1;
}

view.f > content > question buttonwrap > slink:not(:last-child) {
    border-bottom: 1px solid #292929;
}

body.sc-dark view.f > content > question buttonwrap > slink:not(:last-child) {
    border-bottom: 1px solid #252525;
}


view.f > content > question > page {
    position: relative;
    width: 100%;
    display: block;
    opacity: 1;
    transition: opacity .16s linear;
}




view.center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

view.center > content {
    height: auto;
}





section > contentwrap > content > separator {
    position: relative;
    display: block;
    width: 100%;
    height: 42px;
}

@media(min-width: 701px) {
    section > contentwrap > content > separator {
        margin: 64px 0 24px;
        height: 1px;
        background: rgba(255, 255, 255, .12);
    }
}



/* ---- List ---- */

list {
    position: relative;
    width: 100%;
    display: block;
    height: auto;
    z-index: 1;
    overflow: visible;
    transition: background .12s linear;
    padding: 4px 0;
}

section list:first-child,
section list:first-child > entry:first-child {
    padding-top: 0;
}

list > infinitedesktop {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px 0 0;
    opacity: 1;
    transition: opacity .1s linear;
    cursor: pointer;
    display: none;
}

list > infinitedesktop > h4 {
    position: relative;
    display: block;
    cursor: pointer;
}

@media(min-width: 701px) {
    list > infinitedesktop {
        display: block;
    }
}

list > entry {
    position: relative;
    width: 100%;
    display: block;
    padding: 4px 0;
    z-index: 0;
    cursor: pointer;
}

view:not(.animate-in):not(.animate-out) list > entry {
    -webkit-perspective: 10000px;
    perspective: 10000px;
    transform: translate3d(0, 0, 0);
}

@media(min-width: 701px) {
    list > entry {
        visibility: visible !important;
    }

    list > entry:active {
        opacity: .5;
    }
}



list.buttons > entry {
    padding: 10px 0;
}

list.buttons > entry > content > left > picture {
    background: transparent;
}


list > header {
    position: relative;
    width: 100%;
    display: block;
    padding: 0 0 6px 0;
}

list > header > h6 {
    position: relative;
    width: 100%;
    display: block;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
}



list > separator {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding: 8px 0;
    margin: -4px 0;
    display: block;
    z-index: 1;
    background: #000000;
    transform: translate3d(0, 0, 100px);
}

@media(max-width: 700px) {
    list > separator {
        position: sticky;
    }
}

list > separator > inner {
    position: relative;
    width: 55px;
    flex: 0 0 55px;
    height: 55px;
    display: block;
    background: var(--accent-color);
    cursor: pointer;
}



list > separator > inner h6 {
    position: absolute;
    display: block;
    left: 5px;
    bottom: 4px;
    padding: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 300;
    cursor: pointer;
}

@media(min-width: 701px) {
    list > separator > inner h6 {
        font-size: 28px;
    }
}


list > entry > content {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

view:not(.animate-in):not(.animate-out) list > entry > content {
    transform: translate3d(0, 0, 0) rotateY(-0.00000000000000000000000000000000000000001deg);
}

list > entry:active > content {
    transition: unset;
}

list > entry > content > left {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 100%;
}

list > entry > content > right {
    position: relative;
    flex: 1 1;
    display: flex;
    align-items: center;
}


list > entry > content > left > picture {
    position: relative;
    display: block;
    flex: 0 0 55px;
    height: 55px;
    margin: 0 12px 0 0;
    background: #202020;
    overflow: hidden;
}

@media(min-width: 701px) {

    view.form list > entry > content > left > picture,
    view.subform list > entry > content > left > picture {
        background: var(--accent-color-light);
    }
}


list.large > entry > content > left > picture {
    flex: 0 0 70px;
    height: 70px;
}


list > entry > content > left > picture > img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity .1s linear;
}

list > entry > content > left > icon,
sbutton > icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 2px;
    border-radius: 50%;
    margin: 0 14px 0 0;
    border: 3px solid #fff;
}

list > entry > content > left > icon > svg,
sbutton > icon > svg {
    position: relative;
    margin: 0;
    stroke-linejoin: bevel;
    stroke-linecap: square;
    stroke-width: 3px;
    stroke: #ffffff;
    fill: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


list > entry > content > left > titlewrap {
    position: relative;
    display: block;
    width: 100%;
}

list > entry > content > left > titlewrap > h6 {
    position: relative;
    font-weight: 300;
    font-size: 19px;
    white-space: nowrap;
    cursor: pointer;
}

list > entry > content > left > titlewrap > h4 {
    position: relative;
    white-space: nowrap;
    cursor: pointer;
}

list > entry > content > left > titlewrap > p {
    cursor: pointer;
    margin: -2px 0 0 0;
}

list.buttons > entry > content > left > titlewrap > h6 {
    font-size: 26px;
}

list > entry.text-accent > content > left > titlewrap > p {
    color: var(--accent-color);
}

@media(max-width: 700px) {
    view.subform list > entry.text-accent > content > left > titlewrap > p {
        color: var(--accent-color-light);
    }

    view.subform list > entry > content > left > picture {
        background: #353535;
    }
}

@media(max-width: 700px) {
    list > entry > content > left > titlewrap > h6 {
        font-size: 24px;
        font-weight: 300;
    }
}

list.buttons > entry.a-white > content > left > titlewrap > p {
    color: #ffffff;
}

list.buttons > entry.a-grey > content > left > titlewrap > p {
    color: #aaaaaa;
}


list > entry.feed {
    position: relative;
    width: 100%;
    display: block;
    padding: 8px 0;
    z-index: 0;
    cursor: pointer;
}

@media(min-width: 900px) {
    list > entry.feed {
        padding: 12px 0;
    }
}

list > entry.feed:first-child {
    padding-top: 0;
}

list > entry.feed > content {
    position: relative;
    display: block;
}

list > entry.feed > content > titlewrap {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
}

list > entry.feed > content > titlewrap > h4 {
    font-size: 32px;
    cursor: pointer;
}

list > entry.feed > content > p {
    position: relative;
    display: block;
    width: 100%;
    margin: 2px 0 0 0;
    cursor: pointer;
}

list > entry.feed > content > contentwrap {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0;
    margin: -2px 0 0 0;
}

list > entry.feed > content > contentwrap > img {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    flex: 0 0 100%;
    margin: 0 4px 0 0;
    padding: 0;
}

list > entry.feed > content > contentwrap > textwrap {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1;
    margin: 0;
}

list > entry.feed > content > contentwrap > textwrap > p {
    position: relative;
    width: 100%;
    display: block;
    color: #ffffff;
    cursor: pointer;
}

list > entry.feed > content > contentwrap > textwrap > p:first-child:not(:last-child) {
    color: var(--accent-color);
    margin: 0 0 2px 0;
}



/* ---- Searchbar ---- */

searchbar {
    position: relative;
    height: 58px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #292929;
    padding: 2px 15px;
    background: #111111;
    overflow: hidden;
    opacity: 1;
}

searchbar.oe {
    transition: margin-bottom .2s cubic-bezier(0.215, 0.610, 0.355, 1), margin-top .2s cubic-bezier(0.215, 0.610, 0.355, 1), height .2s cubic-bezier(0.215, 0.610, 0.355, 1), opacity .2s cubic-bezier(0.215, 0.610, 0.355, 1);
    pointer-events: all;
}

searchbar.oe:not(.e) {
    opacity: 0;
    height: 0px;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

searchbar:focus-within {
    border: 1px solid var(--accent-color);
}

searchbar > icon {
    position: relative;
    font-size: 22px;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #b1b1b1;
}

searchbar > input {
    position: relative;
    flex: 1 1 1px;
    border: unset;
    display: inline-block;
    background: unset;
}

searchbar > input:focus,
searchbar > content > input:focus {
    border: unset;
}

searchbar > content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

searchbar > content > person {
    position: relative;
    display: inline-block;
    flex: 1 1 auto;
    padding: 2px 4px;
    background: var(--accent-color);
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    color: #111111;
    font-weight: 500;
}

searchbar > content > input {
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 100%;
    border: unset;
}




searchresults {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid #292929;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, .12);
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

searchresults > content {
    position: relative;
    width: 100%;
    height: 250px;
    display: block;
    padding: 12px;
    overflow: auto;
    transition: height .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

searchresults.t > content {
    height: 148px;
}

searchresults > content > h5 {
    position: relative;
    width: 100%;
    display: block;
    margin: 0 0 22px 8px;
}

searchresults > content > h5:not(:first-child) {
    margin: 22px 0 12px 8px;
}


searchresults > content > text {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

searchresults > content > text > textwrap {
    position: relative;
    display: block;
    width: 100%;
}

searchresults > content > text > textwrap > p,
searchresults > content > text > textwrap > h4 {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 0 8px 0;
}

searchresults > content > text > textwrap > p {
    margin: 0;
}

searchresults > content > list {
    padding: 0;
}

searchresults > content > list > entry,
searchresults > content > list.compact > entry {
    border-radius: 6px;
}




/* ---- Tabbar ---- */

tabbar {
    position: relative;
    width: calc(100% + 104px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 0 8px 0;
    margin: 0 0 0 -55px;
}

tabbar > content {
    position: relative;
    display: flex;
    padding: 0;
    z-index: 0;
    overflow: hidden;
    padding: 4px;
    border-radius: 12px;
    background: #111111;
    border: 1px solid #292929;
}

tabbar.c {
    padding-bottom: 0;
}

tabbar.c > content {
    background: #111111;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0 22px;
}



tabbar > bottomline {
    position: absolute;
    left: 0;
    top: calc(50% - 2px);
    height: 1px;
    width: 100%;
    background: #292929;
    z-index: 0;
}

tabbar.oe:not(.e) > content > line {
    opacity: 0;
}

@media(min-width:1550px) {
    tabbar > bottomline {
        background: linear-gradient(to right, #29292000 0%, #292929 5%, #292929 95%, #29292000 100%);
    }
}




tabbar > content > entry {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
}

tabbar > content > entry:not(:last-child) {
    margin: 0 2px 0 0;
}

tabbar.oe:not(.e) > content > entry {
    pointer-events: none;
    cursor: default;
}


tabbar.oe:not(.e) > content > entry:not(.a) {
    display: none;
}


tabbar > content > entry > p {
    position: relative;
    margin: 0;
    font-weight: 500;
    color: #aaaaaa;
    cursor: pointer;
    white-space: nowrap;
}

tabbar > content > entry:hover:not(.a) {
    background: rgba(255, 255, 255, .03);
}

tabbar > content > entry:active:not(.a) {
    background: rgba(255, 255, 255, .02);
}

tabbar > content > entry.a {
    background: rgba(255, 255, 255, .06);
}

tabbar > content > entry.a::after {
    position: absolute;
    left: 13px;
    bottom: 1px;
    width: calc(100% - 26px);
    height: 4px;
    background: rgba(var(--accent-color), 1);
    content: '';
    border-radius: 10000px;
}

tabbar > content > entry.a > p {
    color: #ffffff;
}


body > dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 80;
    pointer-events: none;
}

body > dialog.sh {
    pointer-events: all;
}

body > dialog > bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .12s linear;
}

body > dialog.sh > bg {
    background: rgba(0, 0, 0, .4);
}

body > dialog > content {
    position: relative;
    display: inline-flex;
    background: #111111;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, .12);
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(.2, .4, 0, 1);
    opacity: 0;
    transform: scale(1.15) translate3d(0, 0, 0);
    padding: 32px 42px;
    border-radius: 10px;
    align-items: center;
    border: 1px solid #292929;
}

body > dialog > content > spinner {
    position: relative;
    margin: 0 12px 0 0;
}

body > dialog > content > p {
    position: relative;
    margin: 0;
    white-space: nowrap;
    font-size: 17px;
    line-height: 1.2;
}

body > dialog.sh > content {
    transition-delay: .05s;
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
}



/* ----- Box Grid ----- */
boxgrid {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

boxgrid:not(:last-of-type) {
    padding: 0 0 42px;
}


boxgrid > content {
    position: relative;
    width: 100%;
    display: grid;
    gap: 32px;
    row-gap: 55px;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0;
}

@media(max-width: 1250px) {
    boxgrid > content {
        grid-template-columns: 1fr 1fr;
    }
}


boxgrid > h4 {
    position: relative;
    padding: 0 0 24px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* ----- Box ----- */

box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    height: 100%;
    opacity: 1;
    transition: opacity .1s linear;
}

view > contentwrap > content > box {
    background: #111111;
    border-radius: 10px;
    display: block;
    height: unset;
    padding: 22px;
}

box > h5 {
    position: relative;
    width: 100%;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 0 8px 0;
    color: #888888;
    font-size: 16px;
}

box.c > h5 {
    margin: 0 0 12px 0;
}


box > content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    flex: 1 1 auto;
}



box > content > p {
    position: relative;
    font-size: 17px;
    display: block;
    color: #dddddd;
}

box > content > slink {
    position: relative;
    display: block;
    margin-top: 8px;
}

box > content > slink:first-child {
    margin: 0;
}




box > content > collection {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 0 4px 0;
}

box > content > collection > img,
box > content > collection > more {
    position: relative;
    flex: 0 0 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    transition: margin .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

box > content > collection.app > img {
    border-radius: 16px;
}

box > content > collection > img:not(:first-child) {
    margin: 0 0 0 -32px;
}

box > content > collection > more {
    background: #222222;
    font-size: 18px;
    font-weight: 500;
    font-family: "Noto Sans", sans-serif;
    padding: 24px 0;
    text-align: center;
    margin: 0 0 0 -32px;
    color: #888888;
    transition: margin .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

box > content > collection:hover > img:not(:first-child),
box > content > collection:hover > more {
    margin: 0 0 0 -28px;
}


box > content:hover > collection > more {
    color: var(--accent-color);
}



/* --- Image --- */

scimage {
    position: relative;
    width: 100%;
    display: block;
    max-width: 500px;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

scimage:not(:last-child) {
    margin: 0 0 22px;
}

scimage > sel {
    display: none;
}

scimage > content {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
}

scimage > content > img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

scimage > prog {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}

scimage > prog > content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 12px;
}

scimage > prog > content::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color-dark);
    opacity: .8;
    display: block;
    content: '';
}

scimage > prog > content > progressbar {
    position: relative;
    background: rgba(200, 200, 200, .9);
}

scimage > prog > content > icon {
    position: relative;
    font-size: 28px;
}


/* --- Images Grid ---- */

imagegrid {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0;
}

imagegrid > content {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    grid-auto-rows: 1fr;
}

@media(max-width: 700px) {
    imagegrid > content {
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    }
}


imagegrid > editmodehint {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    display: block;
    transform: translate3d(0, 0, 0);
    transition: opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1), transform .2s cubic-bezier(.2, .4, 0, 1);
    opacity: 1;
}

imagegrid.oe.e > editmodehint {
    transform: translate3d(0, 25px, 0);
    transition: unset;
    opacity: 0;
}

imagegrid > editmodehint > slink {
    color: var(--accent-color);
    cursor: pointer;
    display: inline-block;
    align-items: center;
}

imagegrid > editmodehint > slink::before {
    position: relative;
    color: var(--accent-color);
    content: 'add';
    font-family: "Material Symbols Sharp";
    font-size: 16px;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 2px 0 0;
}


imagegrid > content > scimage,
body > imagedrag {
    position: relative;
    overflow: visible;
    z-index: 2;
    opacity: 1;
    transition: opacity .1s linear;
    margin: 0 !important;
    aspect-ratio: 1/1;
}

imagegrid.e > content > scimage {
    border: 1px solid var(--accent-color);
}

body > imagedrag,
body > listentrydrag {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    z-index: 15;
    transform-origin: top left;
    background: transparent;
    box-shadow: 0px 12px 32px 8px rgba(0, 0, 0, 1);
    border: 1px solid rgba(var(--accent-color), 1);
    background: #111111;
    transition: opacity .1s linear;
    animation: dragShadowIn .12s linear;
}


body > listentrydrag {
    border-radius: 10px;
    overflow: hidden;
}

@keyframes dragShadowIn {
    from {
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    }

    to {
        box-shadow: 0px 12px 32px 8px rgba(0, 0, 0, 1);
    }
}

imagegrid > content > dummy {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #000000;
}

imagegrid > content > *:first-child:not(editmodehint) {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

imagegrid > content > scimage {
    border: 3px solid transparent;
}

imagegrid > content > scimage.a {
    border: 3px solid var(--accent-color);
}

imagegrid > content > scimage > sel {
    position: absolute;
    right: -3px;
    top: -3px;
    height: 54px;
    width: 54px;
    display: block;
    overflow: hidden;
    transition: opacity .12s linear, transform .05s linear;
    fill: transparent;
    pointer-events: none;
}


imagegrid > content > scimage.a > sel {
    fill: var(--accent-color);
}

imagegrid > content > scimage.a > sel::after {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'servconnectIcons' !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    text-decoration: inherit;
    line-height: 1;
    content: "\e08a";
    text-align: center;
    color: #ffffff;
    font-size: 20px;
}

imagegrid > content > scimage > uplprog {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
    padding: 32px;
    z-index: 1;
}

imagegrid > content > scimage > uplprog > content {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    background: rgba(230, 230, 230, .6);
    border-radius: 10000px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

imagegrid > content > scimage > uplprog > content > inner {
    position: relative;
    display: block;
    width: 25%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    background: var(--accent-color);
    transition: transform .2s cubic-bezier(0.215, 0.610, 0.355, 1), width .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

imagegrid > content > scimage > uplprog.prepare > content > inner {
    transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1), width 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

imagegrid > content > scimage > content,
body > imagedrag > content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: #111111;
}

imagegrid:not(.oe) > content > entry > content:active,
imagegrid.oe.e > content > entry > content:active {
    opacity: .75;
}

imagegrid > content > scimage.add {
    cursor: pointer;
}

imagegrid > content > scimage.add:active {
    background: rgba(200, 200, 200, .25);
}

imagegrid > content > scimage.add > content {
    display: flex;
    align-items: center;
    justify-content: center;
}

imagegrid > content > scimage > content > img,
body > imagedrag > content > img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
    object-position: center center;
    border: none !important;
    outline: none !important;
    pointer-events: none;
}

imagegrid > content > scimage > content > img {
    transition: opacity .1s linear;
    opacity: 1;
}

imagegrid > content > scimage.add > content > icon {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 32px;
    color: rgba(var(--accent-color), 1);
    cursor: pointer;
}




body > inlinecontextmenubg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
}


inlinecontextmenu {
    position: absolute;
    left: 0;
    top: 0;
    height: 0px;
    overflow: hidden;
    display: block;
    background: #ffffff;
    transform: translate3d(0, 0, 0);
    transition: height .2s cubic-bezier(0.215, 0.610, 0.355, 1);
    z-index: 4;
    outline: 3px solid #000000;
}

@media(max-width: 700px) {
    inlinecontextmenu {
        border: unset;
        left: 0 !important;
        width: 100%;
        transition: height .3s cubic-bezier(0.215, 0.610, 0.355, 1);
    }
}

inlinecontextmenu > content {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    padding: 4px 0;
}

@media(max-width: 700px) {
    inlinecontextmenu > content {
        padding: 10px 28px;
    }
}



inlinecontextmenu > content > entry {
    position: relative;
    display: block;
    font-family: "Noto Sans", sans-serif;
    width: 100%;
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    padding: 8px 12px;
    text-transform: lowercase;
    cursor: pointer;
}

@media(max-width: 700px) {
    inlinecontextmenu > content > entry {
        width: 100%;
        margin-top: 0;
        font-size: 22px;
        font-weight: 350;
        color: #000000;
        padding: 10px 0;
    }
}


@media(min-width: 701px) {
    inlinecontextmenu > content > entry:hover {
        background: #f0f0f0;
    }
}


/* ---- Context Menu ---- */

contextmenubg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    transform: translate3d(0, 0, 105px);
}

@media(max-width: 700px) {
    contextmenubg {
        background: rgba(0, 0, 0, .75);
    }
}

contextmenu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 71;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    transform: translate3d(0, 0, 150px);
}

contextmenu > content {
    position: relative;
    display: block;
    width: 100%;
    padding: 22px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0;
    background: #202020;
}


@media(min-width: 701px) {
    contextmenu {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: height .2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .1s linear;
    }

    contextmenu:not(.q) {
        bottom: unset;
        opacity: 0;
        width: unset;
        height: 0px;
    }

    contextmenu > content {
        position: relative;
        width: auto;
        height: auto;
        background: #ffffff;
        padding: 6px 0;
        border: 3px solid #000000;
    }

    contextmenu.q > content {
        border: unset;
    }
}

contextmenu.sh > content {
    pointer-events: all;
    opacity: 1;
}

@media(max-width: 700px) {
    contextmenu.sh > content {
        animation: contextIn .3s cubic-bezier(.28, .07, .1, 2);
    }
}

@keyframes contextIn {
    from {
        transform: rotateX(90deg) translate3d(0, 0, 0);
    }

    to {
        transform: rotateX(0deg) translate3d(0, 0, 0);
    }
}

contextmenu.hi > content {
    pointer-events: none;
    opacity: 1;
    animation: contextOut .1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes contextOut {
    from {
        transform: rotateX(0deg) translate3d(0, 0, 0);
    }

    to {
        transform: rotateX(-90deg) translate3d(0, 0, 0);
    }
}


contextmenu > content > entry {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    transition: opacity .05s linear;
    opacity: 0;
}


contextmenu > content > group {
    position: relative;
    display: block;
    width: 100%;
    padding: 24px 0;
}

contextmenu > content > group:first-child {
    padding-top: 0;
}

contextmenu > content > group > p {
    position: relative;
    margin: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    padding: 4px 0;
}

contextmenu.sh > content entry {
    transition: opacity .1s linear;
    opacity: 1;
}

contextmenu > content entry > content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

contextmenu > content entry > content > h5 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
    color: #000000;
}

@media(min-width: 701px) {
    contextmenu > content > entry {
        padding: 10px 18px;
    }

    contextmenu > content entry > content {
        padding: 0;
    }

    contextmenu > content > entry:hover {
        background: #e5e5e5;
    }

    contextmenu > content > entry:active {
        background: #c0c0c0;
    }

    contextmenu > content entry > content > h5 {
        font-size: 16px;
    }
}

@media(max-width: 700px) {
    contextmenu > content entry > content > h5 {
        color: #ffffff;
    }
}

contextmenu > content entry > content > icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #eeeeee;
    font-size: 17px;
    padding: 0 0 0 12px;
}


contextmenu.q > content > textwrap > h5 {
    font-weight: 400;
    margin: 0 0 8px 0;
}

contextmenu.q > content > buttons {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    padding: 32px 0 0 0;
    gap: 12px;
    direction: rtl;
}

@media(min-width: 701px) {
    contextmenu.q {
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0);
        transition: background .1s linear;
    }

    contextmenu.q.sh {
        background: rgba(0, 0, 0, .7);
    }

    contextmenu.q.sh.hi {
        background: rgba(0, 0, 0, 0);
    }

    contextmenu.q.sh.hi > content {
        pointer-events: none;
    }

    contextmenu.q > content {
        position: relative;
        width: 100%;
        flex: 0 0 100%;
        padding: 55px;
        margin: 0 0 68px 0;
        height: auto;
        display: block;
        background: var(--accent-color-dark);
    }

    contextmenu.q > content > textwrap {
        position: relative;
        width: 100%;
        max-width: 700px;
        display: block;
        margin: 0 auto 55px;
    }

    contextmenu.q > content > textwrap > h5 {
        font-weight: 200;
        font-size: 40px;
        margin: 0 0 12px 0;
        transform: translate3d(600px, 0, 0);
        opacity: 0;
        transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1);
    }

    contextmenu.q > content > textwrap > p {
        color: #ffffff;
        transform: translate3d(800px, 0, 0);
        opacity: 0;
        transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1);
    }

    contextmenu.q > content > buttons {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 0;
        transform: translate3d(950px, 0, 0);
        opacity: 0;
        transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1);
    }

    contextmenu.q.sh > content > textwrap > h5,
    contextmenu.q.sh > content > textwrap > p,
    contextmenu.q.sh > content > buttons {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}



alert {
    position: relative;
    width: 100%;
    display: block;
    padding: 0 0 22px;
}

alert > content {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    background: #29292911;
    border: 1px solid #292929;
    padding: 22px;
}

alert > content > icon {
    position: relative;
    display: inline-block;
    margin: 0 12px 0 0;
}

alert > content > icon,
alert > content > icon::after {
    font-size: 32px !important;
}

alert.info > content {
    background: #007aff11;
    border-color: #007aff;
}

alert.error > content {
    background: #cc343411;
    border-color: #cc3434;
}

alert.warning > content {
    background: #ff950011;
    border-color: #ff9500;
}

alert > content > textwrap > h1,
alert > content > textwrap > h2,
alert > content > textwrap > h3,
alert > content > textwrap > h4,
alert > content > textwrap > h5,
alert > content > textwrap > h6 {
    position: relative;
    margin: 0 0 4px 0;
}

alert > content > textwrap > p {
    position: relative;
    margin: 0;
    padding-bottom: 0;
}




/* ----- Spinner ------ */

scspinner {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    pointer-events: none;
    z-index: 2;
    transform: translate3d(0, 0, 0);
}

view > scspinner {
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    z-index: 3;
}

@media(min-width: 701px) {
    view > scspinner {
        background: #000000;
    }
}

view > contentwrap > scspinner.fs {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 6;
    transform: translate3d(0, 0, 0);
}

view.panorama > contentwrap > scspinner.fs {
    width: calc(100% + 42px);
}


scspinner > p {
    position: absolute;
    left: 16px;
    top: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    padding: 6px 0 0 0;
    transform: translate3d(0, -110px, 0);
}

view > contentwrap > scspinner.fs > p {
    position: relative;
    left: 0;
    top: 0;
    text-align: center;
}


scspinner.a > p {
    transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

view > scspinner.fs > p {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    transition: unset;
    transform: unset;
    transition: unset;
}

@media(min-width: 701px) {

    view.form > contentwrap > scspinner.fs,
    view.subform > contentwrap > scspinner.fs {
        background: var(--accent-color-dark);
    }

    view > scspinner > p {
        text-align: center;
    }
}



scspinner > spinner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    opacity: 0;
}

scspinner.a > spinner {
    opacity: 1;
    animation: spinnerOuter 4s linear forwards;
}

@keyframes spinnerOuter {
    from {
        transform: translate3d(-15%, 0, 0);
    }

    to {
        transform: translate3d(15%, 0, 0);
    }
}

scspinner > spinner > span {
    position: relative;
    display: inline-block;
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    background: var(--accent-color);
    margin: 0px 4px;
    opacity: 0;
}

scspinner.a > spinner > span {
    animation: spinnerInner 4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

scspinner > spinner > span:nth-child(1) {
    animation-delay: .60s;
}

scspinner > spinner > span:nth-child(2) {
    animation-delay: .45s;
}

scspinner > spinner > span:nth-child(3) {
    animation-delay: .30s;
}

scspinner > spinner > span:nth-child(4) {
    animation-delay: .15s;
}

scspinner > spinner > span:nth-child(5) {
    animation-delay: 0s;
}

@keyframes spinnerInner {
    0% {
        opacity: 1;
        transform: translate3d(-90vw, 0, 0);
    }

    25% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    75% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    95% {
        opacity: 1;
        transform: translate3d(90vw, 0, 0);
    }
}



/* ----- SCEditor ---- */

sceditorwrap {
    position: relative;
    display: block;
    width: 100%;
    padding: 22px 0;
}

sceditorwrap:first-child {
    padding-top: 0;
}



/* ----- Form ---- */

scform {
    position: relative;
    display: block;
    width: 100%;
    opacity: 1;
    transition: opacity .1s linear;
    padding: 6px 0;
}



scform > content {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 10px;
}

scform > content > finput {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    transition: height .2s cubic-bezier(.2, .4, 0, 1);
}

scform > content > finput > errorwrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    transition: height .12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

scform > content > finput > errorwrap > p {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


scform > content > finput > content {
    position: relative;
    width: 100%;
    padding: 8px 0;
    display: block;
}

scform > content > finput > content > textwrap {
    position: relative;
    display: block;
    margin: 0 0 4px;
    padding: 0 12px 0 0;
}

scform > content > finput.c > content > textwrap {
    padding-top: 4px;
}

scform > content > finput.t > content > textwrap {
    margin: 0;
}

scform > content > finput > content > textwrap > p {
    position: relative;
    display: block;
    white-space: pre-wrap;
    margin: 0 0 2px;
}

scform > content > finput.c > content > textwrap > p,
scform > content > finput.t > content > textwrap > p {
    margin: 0;
}

scform > content > finput.t > content > textwrap > h4 {
    padding: 0;
    line-height: 1;
}

scform > content > finput > content > inputwrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 6px;
    outline: unset;
    border-radius: 0px;
    border: 1px solid #292929;
    font-size: 17px;
    line-height: 1.25;
    font-family: "Noto Sans", sans-serif;
    background: #ffffffbb;
    color: #000000;
    border: 3px solid transparent;
    transition: height .2s cubic-bezier(.2, .4, 0, 1);
    cursor: text;
}

scform > content > finput > content > inputwrap > input,
scform > content > finput > content > inputwrap > input:focus {
    position: relative;
    display: block;
    padding: 0 2px;
    flex: 1 0;
    background: transparent;
    border: unset;
}

scform > content > finput.error:focus-within > content > inputwrap {
    border: 3px solid #cc3434;
}

scform > content > finput:focus-within > content > inputwrap {
    background: #ffffff;
    border: 3px solid var(--accent-color);
}


scform > content > finput > content > inputwrap > p {
    position: relative;
    display: inline-block;
    font-size: 17px;
    line-height: 1.25;
    color: #404040;
}




scform > content > finput.b,
scform > content > finput.b > content,
scform > content > finput.m,
scform > content > finput.m > content {
    cursor: pointer;
}

scform > content > finput.b > content > icon,
scform > content > finput.m > content > icon {
    position: relative;
    margin: 0 10px 0 0;
    cursor: pointer;
}

scform > content > finput.b > content > icon,
scform > content > finput.b > content > icon::after {
    color: var(--accent-color);
}


scform > content > finput.m > content > icon,
scform > content > finput.m > content > icon::after {
    color: #999999;
    transition: opacity .12s linear;
    opacity: 1;
}

scform > content > finput.b > content > textwrap > p {
    color: var(--accent-color);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    cursor: pointer;
}


scform > content > finput.m > content > textwrap > p:last-of-type {
    padding: 10px 12px;
    color: #ffffff;
    flex: 1 1 100%;
    text-align: left;
}



scform > content > finput.c > content {
    position: relative;
    width: 100%;
    padding: 6px 0;
    display: flex;
}

scform > content > finput.c > content > p {
    position: relative;
    display: block;
    white-space: pre-wrap;
    margin: 0;
    padding: 4px 0 0 0;
    font-size: 17px;
    color: #ffffff;
}

checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0 8px 0 0;
    cursor: pointer;
    border: 3px solid #ffffff;
    padding: 2px 0 0 0;
}

checkbox > icon {
    visibility: hidden;
}

scform > content > finput.c:active > content > checkbox,
checkbox:active,
list > entry:active checkbox {
    background: var(--accent-color);
}

scform > content > finput.c > content > checkbox.a > icon,
checkbox.a > icon {
    visibility: visible;
}

scform > content > finput.s > content > button {
    position: relative;
    display: block;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    padding: 2px 6px 4px;
}


scform > content > finput.t > content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

scform > content > finput.r > content > h4 {
    position: relative;
    display: inline-block;
    border-bottom: 3px solid var(--accent-color);
    cursor: pointer;
}

scform > content > finput.r > content > h4:active {
    opacity: .5;
}


scform > content > finput.r > content > p {
    position: relative;
    display: inline-block;
    padding: 0 8px;
}

scform > content > finput > content > textwrap {
    margin: 0;
}


selectview.selectview-color entry {
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

view.selectview-color colorgrid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

view.selectview-color colorgrid > entry {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}



sscrollerwrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

@media(min-width: 701px) {
    sscrollerwrap {
        height: 400px;
    }

    view.selectview-color colorgrid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

sscrollerwrap > sscroller {
    position: relative;
    display: block;
    flex: 0 0 100px;
    height: 100%;
    overflow: hidden;
}

sscrollerwrap > sscroller > content {
    position: relative;
    display: block;
    width: 100%;
    -webkit-transform-style: flat;
    transform-style: flat;
}

sscrollerwrap > sscroller > content > sscrollertile {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    padding: 4px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 10000px;
    perspective: 10000px;
}

sscrollerwrap > sscroller > content > sscrollertile > content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff;
    padding: 0 4px;
    opacity: .25;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

@media(min-width: 701px) {
    sscrollerwrap > sscroller > content > sscrollertile > content:active {
        opacity: .1;
    }
}


sscrollerwrap > sscroller > content > sscrollertile > content > h3 {
    position: relative;
    display: block;
    width: 100%;
    white-space: nowrap;
    font-weight: 400;
    font-size: 32px;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}



toggle {
    position: relative;
    display: block;
    height: 30px;
    width: 62px;
    flex: 0 0 62px;
    padding: 2px 0;
}

toggle > content {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border: 3px solid #ffffff;
}

toggle > content > bg {
    position: relative;
    width: 0px;
    height: 100%;
    background: var(--accent-color);
    display: block;
    transition: width .15s cubic-bezier(0.215, 0.610, 0.355, 1);
    border: 3px solid #000000;
}

toggle > handle {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 15px;
    height: 100%;
    outline: 3px solid #000000;
    background: #ffffff;
    transform: translate3d(0, 0, 0);
    transition: transform .15s cubic-bezier(0.215, 0.610, 0.355, 1);
}


/* ----- Timeline ----- */

timeline {
    position: relative;
    width: 100%;
    padding: 0 0;
    display: block;
}


timeline > bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 68px;
    display: block;
    z-index: 0;
}


timeline > bg > line {
    position: relative;
    display: block;
    height: 100%;
    width: 1px;
    border-right: 2.5px dashed #333333;
    margin: 0 auto;
    z-index: 0;
}

timeline > bg > grad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 22px;
    display: block;
    background: linear-gradient(to bottom, #000000 0%, #00000000 100%);
    z-index: 1;
}

timeline > bg > grad:last-of-type {
    position: absolute;
    left: 0;
    top: unset;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, #000000 0%, #00000000 100%);
}


timeline > entry {
    position: relative;
    width: 100%;
    display: flex;
    padding: 32px 0;
    z-index: 2;
}

timeline > entry:first-of-type {
    padding-top: 0;
}

timeline > entry:last-of-type {
    padding-bottom: 0;
}

timeline > entry > tdateblock {
    position: relative;
    display: block;
    padding: 0 22px 0 0;
    width: 90px;
    flex: 0 0 90px;
    height: 68px;
    margin: 22px 0 0 0;
    box-shadow: 0px 0px 42px 12px rgba(0, 0, 0, 1);
}

timeline > entry > tdateblock > binder {
    position: absolute;
    left: 12px;
    top: -3px;
    height: 9px;
    width: 3px;
    background: linear-gradient(to bottom, #333333 0%, #bbbbbb 50%, #666666 100%);
    z-index: 2;
    border-radius: 10000px;
}

timeline > entry > tdateblock > binder:last-of-type {
    left: 53px;
}

timeline > entry > tdateblock > content {
    position: relative;
    background: #fefefe;
    border-radius: 10px;
    border: 1px solid #292929;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

timeline > entry > tdateblock > content > mon {
    position: relative;
    display: block;
    width: 100%;
    padding: 2px 0;
    text-align: center;
    color: #f0f0f0;
    background: #f13e32;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

timeline > entry > tdateblock > content > dat {
    position: relative;
    display: block;
    height: auto;
    padding: 6px;
}

timeline > entry > tdateblock > content > dat h3 {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 450;
    color: #000000;
}




timeline > entry > content {
    position: relative;
    flex: 1 1 100%;
    padding: 0 0 0 8px;
    display: block;
}

timeline > entry > content > entry {
    position: relative;
    display: flex;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #292929;
    background: #111111;
    width: 100%;
}

timeline > entry > content > entry:not(:last-of-type) {
    margin-bottom: 8px;
}

timeline > entry > content > entry > content {
    position: relative;
    display: flex;
    width: 100%;
}

timeline > entry > content > entry > content > icon {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 1px solid #292929;
    background: rgba(255, 255, 255, .05);
    border-radius: 6px;
    font-size: 32px;
    text-align: center;
    padding: 12px 0;
}

timeline > entry > content > entry > content > textwrap {
    position: relative;
    width: 100%;
    flex: 1 1 100%;
}

timeline > entry > content > entry > content > textwrap:not(:first-child) {
    padding-left: 22px;
}


timeline > entry > content > entry > content > textwrap > p:first-of-type {
    position: relative;
    margin: 0 0 6px;
    display: inline-block;
    padding: 0;
}

timeline > entry > content > entry > content > textwrap > h1,
timeline > entry > content > entry > content > textwrap > h2,
timeline > entry > content > entry > content > textwrap > h3,
timeline > entry > content > entry > content > textwrap > h4,
timeline > entry > content > entry > content > textwrap > h5,
timeline > entry > content > entry > content > textwrap > h6 {
    position: relative;
    margin: 0 0 4px;
}


timeline > entry > content > entry > content > textwrap > p:last-of-type {
    position: relative;
    padding-bottom: 0;
}



/* ---- Title ---- */

stitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 42px 0 10px;
}

stitle:first-child {
    padding-top: 0;
}

section.animate-section-to-left stitle p {
    animation: animSectionToLeft .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.animate-section-to-right stitle p {
    animation: animSectionToRight .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


stitle > textwrap {
    position: relative;
    display: block;
    flex: 1 1 100%;
}

stitle > textwrap > h5,
stitle > textwrap > h4,
stitle > textwrap > h3,
stitle > textwrap > h2,
stitle > textwrap > h1 {
    position: relative;
    margin: 0;
}

stitle.ticenter > textwrap > h5,
stitle.ticenter > textwrap > h4,
stitle.ticenter > textwrap > h3,
stitle.ticenter > textwrap > h2,
stitle.ticenter > textwrap > h1,
stitle.tecenter > textwrap > p {
    text-align: center;
    width: 100%;
}

stitle > textwrap > h5:not(:last-child),
stitle > textwrap > h4:not(:last-child),
stitle > textwrap > h3:not(:last-child),
stitle > textwrap > h2:not(:last-child),
stitle > textwrap > h1:not(:last-child) {
    margin: 0 0 8px;
}


stitle > textwrap > p {
    position: relative;
    margin: 0;
}


/* ---- DatePicker && SublistPicker ---- */

datepicker,
sublistpicker {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0;
    overflow: hidden;
    transition: height .2s cubic-bezier(.2, .4, 0, 1);
}

datepicker > picker,
sublistpicker > picker {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
}


datepicker.oe,
sublistpicker.oe {
    display: flex;
    align-items: center;
}

datepicker.oe > picker,
sublistpicker.oe > picker {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    padding: 0 0;
    transition: opacity .1s linear;
    pointer-events: none;
}

datepicker.oe.e > picker,
sublistpicker.oe.e > picker {
    transition: opacity .1s linear .1s;
    opacity: 1;
    pointer-events: all;
}

datepicker > picker > textwrap,
sublistpicker > picker > textwrap {
    position: relative;
    width: 100%;
    display: flex;
    margin: 0 0 14px 0;
    align-items: center;
}

datepicker > picker > textwrap > icon {
    position: relative;
    height: 32px;
    padding: 4px;
}

datepicker > picker > textwrap > icon:not(.s):hover {
    background: #f0f0f0;
    border-radius: 50%;
}

datepicker > picker > textwrap > icon:not(.s):active {
    background: #292929;
    border-radius: 50%;
}

datepicker > picker > textwrap h4 {
    position: relative;
    padding: 0 8px;
}

datepicker > picker > days {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

datepicker > picker > days > h6 {
    position: relative;
    display: block;
    flex: 1 1 100%;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}


datepicker > picker > content {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

datepicker > picker > content > dates {
    position: relative;
    width: 100%;
    display: block;
    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94), height .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

datepicker > picker > content > dates > month {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    opacity: 1;
    transition: opacity .2s linear;
}

datepicker > picker > content > dates > month > * {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14.2857142857%;
    height: 50px;
}

datepicker > picker > content > dates > month > entry {
    cursor: pointer;
}


datepicker > picker > content > dates > month > * > h6 {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    flex: 0 0 42px;
}

datepicker > picker > content > dates > month > * > h6 {
    position: relative;
    padding: 12px;
}

datepicker > picker > content > dates > month > entry.t > h6 {
    padding: 12px 12px 5px 12px;
}

datepicker > picker > content > dates > month > entry.t > h6::after {
    position: relative;
    display: block;
    width: 4px;
    margin: 3px auto 0;
    height: 4px;
    border-radius: 25%;
    background: #e61e1e;
    content: "";
}

datepicker > picker > content > dates > month > entry.t.s > h6::after {
    background: #111111;
}

datepicker > picker > content > dates > month > *:not(.s):hover > h6 {
    background: #f0f0f0;
    border-radius: 50%;
}

datepicker > picker > content > dates > month > *:not(.s):active > h6 {
    background: #292929;
    border-radius: 50%;
}

datepicker > picker > content > dates > month > *.s > h6 {
    background: var(--accent-color);
    border-radius: 50%;
    color: #111111;
}


datepicker > eoi,
sublistpicker > eoi {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 1;
    transition: opacity .1s linear .1s;
}

datepicker.oe.e > eoi,
sublistpicker.oe.e > eoi {
    transition: opacity .1s linear;
    opacity: 0;
    pointer-events: none;
}

datepicker > eoi > cal {
    position: relative;
    display: block;
    padding: 0 22px 0 0;
    width: 90px;
    flex: 0 0 90px;
    height: 68px;
}



datepicker > eoi > cal > binder {
    position: absolute;
    left: 12px;
    top: -3px;
    height: 9px;
    width: 3px;
    background: linear-gradient(to bottom, #bebebe 0%, #eeeeee 50%, #cccccc 100%);
    z-index: 2;
    border-radius: 10000px;
}

datepicker > eoi > cal > binder:last-of-type {
    left: 53px;
}

datepicker > eoi > cal > content {
    position: relative;
    background: #fefefe;
    border-radius: 10px;
    border: 1px solid #292929;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

datepicker > eoi > cal > content > mon {
    position: relative;
    display: block;
    width: 100%;
    padding: 2px 0;
    text-align: center;
    color: #111111;
    background: #f13e32;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

datepicker > eoi > cal > content > dat {
    position: relative;
    display: block;
    height: auto;
    padding: 6px;
}

datepicker > eoi > cal > content > dat h3 {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 400;
}



/* ---- SublistPicker ---- */

sublistpicker > eoi > textwrap {
    position: relative;
    width: 100%;
    display: block;
}

sublistpicker > eoi > textwrap > p {
    position: relative;
    margin: 0 0 2px 0;
}

sublistpicker > eoi > textwrap > h5 {
    position: relative;
}


sublistpicker > picker > content {
    position: relative;
    display: block;
    width: 100%;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #292929;
    padding: 0;
    z-index: 3;
}


sublistpicker > picker > content > actions {
    position: relative;
    width: 100%;
    background: rgba(30, 30, 30, .8);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid #292929;
    height: 50px;
    z-index: 2;
    padding: 0 12px;
}

sublistpicker > picker > content > actions > content {
    padding-left: 0;
    padding-right: 0;
}

sublistpicker > picker > content > info {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    background: rgba(30, 30, 30, .8);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid #292929;
    height: 44px;
    z-index: 2;
}

sublistpicker > picker > content > info > entry {
    position: relative;
    display: flex;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}


sublistpicker > picker > content > info > entry:not(:last-child) {
    border-right: 1px solid #292929;
}

sublistpicker > picker > content > info > entry > icon {
    position: relative;
    display: block;
    margin: 0 0 0 8px;
    color: #999999;
    cursor: pointer;
    opacity: 0;
}

sublistpicker > picker > content > info > entry.sa > icon {
    opacity: 1;
    transform: rotate(180deg);
}


sublistpicker > picker > content > info > entry > p {
    position: relative;
    display: block;
    color: #999999;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}


sublistpicker > picker > content > info > entry:active {
    background: rgba(0, 0, 0, .2);
}


sublistpicker > picker > content > content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 44px 0 0 0;
    z-index: 0;
}


sublistpicker > picker > content > content entry {
    position: relative;
    width: 100%;
    display: block;
}

sublistpicker > picker > content > content entry.link {
    height: 44px;
}



sublistpicker > picker > content > content entry {
    border-bottom: 1px solid #292929;
}

sublistpicker > picker > content > content entry > header {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
}

sublistpicker.sl > picker > content > content entry > header,
sublistpicker.sl > picker > content > content entry.link > header {
    height: 58px;
}

sublistpicker > picker > content > content entry.link > header {
    height: 100%;
    padding-left: 32px;
}

sublistpicker > picker > content > content entry > header.a {
    background: var(--accent-color);
}

sublistpicker > picker > content > content entry > header > input {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    padding: 3px 11px;
    font-size: 16px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 0;
}


sublistpicker > picker > content > content entry > header > icon {
    position: relative;
    width: 28px;
    display: block;
    flex: 0 0 28px;
    color: #ffffff;
    text-align: right;
    font-family: "Material Symbols Sharp";
    cursor: pointer;
    padding: 0;
    transition: opacity .12s linear;
}

sublistpicker > picker > content > content entry.link > header > icon,
sublistpicker > picker > content > content entry.link > header > p {
    color: var(--accent-color);
}

sublistpicker > picker > content > content entry > header > imgpicker {
    position: relative;
    display: block;
    border: 1px solid #292929;
    background: #111111;
    overflow: hidden;
    flex: 0 0 30px;
    height: 30px;
    cursor: pointer;
}

sublistpicker > picker > content > content entry > header > imgpicker > icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    cursor: pointer;
}

sublistpicker > picker > content > content entry > header > imgpicker > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    transition: opacity .1s linear;
    object-fit: cover;
    object-position: center center;
}

sublistpicker > picker > content > content entry > header.e > icon {
    opacity: .2;
}

sublistpicker > picker > content > content entry > header.e > icon.arrow {
    opacity: 0;
    pointer-events: none;
}


sublistpicker > picker > content > content entry > header > icon.arrow {
    position: relative;
    width: 30px;
    display: block;
    flex: 0 0 30px;
    color: #666666;
    padding: 4px;
    transform: rotate(-90deg);
    margin: 0 0 0 2px;
}

sublistpicker > picker > content > content entry > header.a > icon.arrow {
    color: #cccccc;
}


sublistpicker > picker > content > content entry > header > content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

sublistpicker > picker > content > content entry > header > p {
    position: relative;
    padding: 4px 12px;
    color: #f0f0f0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity .12s linear, transform .05s linear;
    opacity: 1;
}

sublistpicker > picker > content > content entry > header.e > p {
    opacity: .2;
}

sublistpicker > picker > content > content entry > header > p icon {
    position: relative;
    flex: 0 0 16px;
    font-family: "Material Symbols Sharp";
    content: 'edit';
    display: block;
    line-height: 1;
    height: 16px;
    width: 16px;
    font-size: 16px;
    color: var(--accent-color);
    margin: 0 0 0 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s linear;
}

sublistpicker > picker > content > content entry > header.a > p icon {
    color: #cccccc;
}

sublistpicker > picker > content > content entry > header:not(.e) > p:hover icon {
    opacity: 1;
}


sublistpicker > picker > content > content entry > children {
    position: relative;
    display: block;
    width: calc(100% - 32px);
    height: 0px;
    overflow: hidden;
    transition: height .2s cubic-bezier(0.215, 0.610, 0.355, 1);
    margin: 0 0 0 32px;
    border-left: 1px solid #292929;
}

sublistpicker > picker > content > content entry > children > content {
    position: relative;
    display: block;
    width: 100%;
}


/* ---- DatePicker ---- */

filepicker {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0;
    overflow: hidden;
    transition: height .2s cubic-bezier(.2, .4, 0, 1);
}

filepicker > picker {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
}


filepicker.oe {
    display: flex;
    align-items: center;
}

filepicker.oe > picker {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    padding: 0 0;
    transition: opacity .1s linear;
    pointer-events: none;
}

filepicker.oe.e > picker {
    transition: opacity .1s linear .1s;
    opacity: 1;
    pointer-events: all;
}




filepicker > eoi {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 1;
    transition: opacity .1s linear .1s;
}

filepicker.oe.e > eoi {
    transition: opacity .1s linear;
    opacity: 0;
    pointer-events: none;
}





/* ---- Stack ---- */

stack {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    background: #f7f7f7;
}

stack > content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 100px;
}

stack > content > actionswrap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 0 20% 32px;
    overflow: hidden;
    z-index: 10;
}

stack > content > actionswrap > content {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, .1);
    background: #111111;
    border: 1px solid #292929;
}

stack > content > actionswrap > content > p {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #292929;
    text-align: center;
    margin: 0;
    color: #a1a1a1;
}

stack > content > actionswrap > content > actions {
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
    background: transparent;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    justify-content: center;
}

stack > content > actionswrap > content > actions > entry {
    height: unset;
}

stack > content > actionswrap > content > actions > entry.h {
    background: #f0f0f0;
    border-radius: 10px;
}


stack > content > selected {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    z-index: 5;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, .1));
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, .1));
    transition: -webkit-filter .12s cubic-bezier(0.215, 0.610, 0.355, 1), filter .12s cubic-bezier(0.215, 0.610, 0.355, 1), transform .12s cubic-bezier(0.215, 0.610, 0.355, 1);
    pointer-events: none;
}

stack > content > selected:not(.d):hover {
    -webkit-filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, .07));
    filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, .07));
    transform: translate3d(0, 0, 0) scale(1.01);
}

stack > content > selected.d {
    -webkit-filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, .05));
    filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, .05));
}

stack > content > selected:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

stack > content > selected > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0) rotate(2deg);
    background: #111111;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    transition: unset;
}

stack:not(.sp) > content > selected > * {
    border-radius: 10px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}

stack.sp > content > selected > * {
    outline: 5px solid #111111;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, .6);
}

stack > content > selected > *:nth-child(1) {
    transform: translate3d(0, 0, 0) rotate(1deg) scale(.8);
    z-index: 8;
}

stack > content > selected > *:nth-child(2) {
    transform: translate3d(0, 0, 0) rotate(-1deg) scale(.8);
    z-index: 7;
}

stack > content > selected > *:nth-child(3) {
    transform: translate3d(0, 0, 0) rotate(3deg) scale(.8);
    z-index: 6;
}

stack > content > selected > *:nth-child(4) {
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(.8);
    z-index: 5;
}

stack > content > selected > *:nth-child(5) {
    transform: translate3d(0, 0, 0) rotate(-1.5deg) scale(.8);
    z-index: 4;
}

stack > content > selected > *:nth-child(6) {
    transform: translate3d(0, 0, 0) rotate(3.5deg) scale(.8);
    z-index: 3;
}

stack > content > selected > *:nth-child(7) {
    transform: translate3d(0, 0, 0) rotate(4deg) scale(.8);
    z-index: 2;
}

stack > content > selected > *:nth-child(n+7) {
    display: none;
}







/* ---- Drop Zone ---- */

dropzone {
    position: relative;
    width: 140px;
    flex: 0 0 140px;
    height: 100px;
    background: #f9f9f9;
    border: 1px solid #292929;
    overflow: hidden;
    padding: 8px;
    border-radius: 10px;
    transition: border-color .12s linear;
}

dropzone.o {
    border-color: var(--accent-color);
    cursor: copy;
}

dropzone > content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

dropzone > content > load {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

dropzone > content > load > svg {
    position: relative;
    flex: 0 0 50px;
    height: 50px;
    width: 50px;
    transform: rotate(-90deg);
}

dropzone > content > load > svg > circle {
    stroke-width: 6;
    fill: transparent;
    stroke-linecap: round;
    transition: stroke-dashoffset .2s cubic-bezier(0.215, 0.610, 0.355, 1);
}

dropzone > content > load > svg > circle:first-of-type {
    stroke: #e0e0e0;
}

dropzone > content > load > svg > circle:last-of-type {
    stroke: var(--accent-color);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}




/* ---- Progressbar ---- */



progressbar {
    position: relative;
    display: block;
    width: 100%;
    height: 5px;
    background: rgba(155, 155, 155, .15);
    overflow: hidden;
    margin: 22px 0;
}

progressbar > scspinner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
}

progressbar > div {
    position: relative;
    width: 0px;
    height: 5px;
    background: var(--accent-color);
    transition: width .05s ease-out;
}

progressbar > div.undef {
    width: 100%;
    animation: slideProgBar 2s infinite;
}

@keyframes slideProgBar {
    from {
        transform: translate3d(-100%, 0, 0) scaleX(.5);
    }

    to {
        transform: translate3d(100%, 0, 0) scaleX(.5);
    }
}




/* ---- popover ----- */

popover-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 15;
}

popover {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #292929;
    background: #111111;
    z-index: 16;
    transform: scale(1);
    opacity: 0;
    transition: transform .12s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity .12s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-filter: drop-shadow(0px 8px 18px #000000);
    filter: drop-shadow(0px 8px 18px #000000);
    max-width: 450px;
    pointer-events: none;
}

popover.sh {
    transition: opacity .16s cubic-bezier(0.215, 0.610, 0.355, 1);
    animation: showPopoverTrans .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

@keyframes showPopoverTrans {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

popover scform {
    padding: 0;
}

popover stitle {
    padding: 22px 22px;
}

arrow {
    position: absolute;
    height: 16px;
    width: 16px;
    background: #111111;
}

popover.tl > arrow {
    left: 32px;
    top: 0px;
    border-left: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(50%, -50%) rotate(45deg);
}

popover.tc > arrow {
    left: 50%;
    top: 0px;
    border-left: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}

popover.tr > arrow {
    right: 32px;
    top: 0px;
    border-left: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}

popover.rt > arrow {
    right: 0;
    top: 32px;
    border-right: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(50%, 50%) rotate(45deg);
}

popover.rc > arrow {
    right: 0;
    top: 50%;
    border-right: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(50%, -50%) rotate(45deg);
}

popover.rb > arrow {
    bottom: 32px;
    right: 0;
    border-right: 1px solid #292929;
    border-top: 1px solid #292929;
    transform: translate(50%, -50%) rotate(45deg);
}

popover.bl > arrow {
    bottom: -16px;
    left: 32px;
    border-bottom: 1px solid #292929;
    border-right: 1px solid #292929;
    transform: translate(50%, -50%) rotate(45deg);
}

popover.bc > arrow {
    bottom: -16px;
    left: 50%;
    border-bottom: 1px solid #292929;
    border-right: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}

popover.br > arrow {
    bottom: -16px;
    right: 32px;
    border-bottom: 1px solid #292929;
    border-right: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}

popover.lt > arrow {
    left: 0;
    top: 32px;
    border-bottom: 1px solid #292929;
    border-left: 1px solid #292929;
    transform: translate(-50%, 50%) rotate(45deg);
}

popover.lc > arrow {
    left: 0;
    top: 50%;
    border-bottom: 1px solid #292929;
    border-left: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}

popover.lb > arrow {
    bottom: 32px;
    left: 0;
    border-bottom: 1px solid #292929;
    border-left: 1px solid #292929;
    transform: translate(-50%, -50%) rotate(45deg);
}



popover.tl {
    transform-origin: 0% 0%;
}

popover.tc {
    transform-origin: 50% -16px;
}

popover.tr {
    transform-origin: 16px -16px;
}

popover.rt {
    transform-origin: calc(100% - 16px) -16px;
}

popover.rc {
    transform-origin: calc(100% - 16px) 50%;
}

popover.rb {
    transform-origin: calc(100% - 16px) calc(100% - 16px);
}

popover.bl {
    transform-origin: 0% 0%;
}

popover.bc {
    transform-origin: 0% 0%;
}

popover.br {
    transform-origin: 0% 0%;
}

popover.lt {
    transform-origin: 0 16px;
}

popover.lc {
    transform-origin: 0 50%;
}

popover.lb {
    transform-origin: 0 calc(100% - 16px);
}


popover > content {
    position: relative;
    display: block;
}







/* ------ icons ------- */

/*
icon:before {
    position: relative;
    font-family: 'servconnectIcons' !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    text-decoration: inherit;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-size: inherit;
    color: #ffffff;
    text-align: center;
    width: 100%;
}


.icon-newspaper:before {
    content: "\e001";
}

.icon-pencil:before,
.icon-edit:before {
    content: "\e002";
}

.icon-droplet:before {
    content: "\e003";
}

.icon-pictures:before {
    content: "\e004";
}

.icon-camera:before {
    content: "\e005";
}

.icon-music:before {
    content: "\e006";
}

.icon-film:before {
    content: "\e007";
}

.icon-camera-2:before {
    content: "\e008";
}

.icon-spades:before {
    content: "\e009";
}

.icon-clubs:before {
    content: "\e00a";
}

.icon-diamonds:before {
    content: "\e00b";
}

.icon-broadcast:before {
    content: "\e00c";
}

.icon-mic:before {
    content: "\e00d";
}

.icon-book:before {
    content: "\e00e";
}

.icon-file:before {
    content: "\e00f";
}

.icon-new:before {
    content: "\e010";
}

.icon-copy:before {
    content: "\e011";
}

.icon-folder:before {
    content: "\e012";
}

.icon-folder-2:before {
    content: "\e013";
}

.icon-tag:before {
    content: "\e014";
}

.icon-cart:before {
    content: "\e015";
}

.icon-basket:before {
    content: "\e016";
}

.icon-calculate:before {
    content: "\e017";
}

.icon-support:before {
    content: "\e018";
}

.icon-phone:before {
    content: "\e019";
}

.icon-mail:before {
    content: "\e01a";
}

.icon-location:before {
    content: "\e01b";
}

.icon-compass:before {
    content: "\e01c";
}

.icon-history:before {
    content: "\e01d";
}

.icon-clock:before {
    content: "\e01e";
}

.icon-bell:before {
    content: "\e01f";
}

.icon-calendar:before {
    content: "\e020";
}

.icon-printer:before {
    content: "\e021";
}

.icon-mouse:before {
    content: "\e022";
}

.icon-screen:before {
    content: "\e023";
}

.icon-laptop:before {
    content: "\e024";
}

.icon-mobile:before {
    content: "\e025";
}

.icon-cabinet:before {
    content: "\e026";
}

.icon-drawer:before {
    content: "\e027";
}

.icon-drawer-2:before {
    content: "\e028";
}

.icon-box:before {
    content: "\e029";
}

.icon-box-add:before {
    content: "\e02a";
}

.icon-box-remove:before {
    content: "\e02b";
}

.icon-download:before {
    content: "\e02c";
}

.icon-upload:before {
    content: "\e02d";
}

.icon-database:before {
    content: "\e02e";
}

.icon-flip:before {
    content: "\e02f";
}

.icon-flip-2:before {
    content: "\e030";
}

.icon-undo:before {
    content: "\e031";
}

.icon-redo:before {
    content: "\e032";
}

.icon-forward:before {
    content: "\e033";
}

.icon-reply:before {
    content: "\e034";
}

.icon-reply-2:before {
    content: "\e035";
}

.icon-comments:before {
    content: "\e036";
}

.icon-comments-2:before {
    content: "\e037";
}

.icon-comments-3:before {
    content: "\e038";
}

.icon-comments-4:before {
    content: "\e039";
}

.icon-comments-5:before {
    content: "\e03a";
}

.icon-user:before {
    content: "\e03b";
}

.icon-user-2:before {
    content: "\e03c";
}

.icon-user-3:before {
    content: "\e03d";
}

.icon-busy:before {
    content: "\e03e";
}

.icon-loading:before {
    content: "\e03f";
}

.icon-loading-2:before {
    content: "\e040";
}

.icon-search:before {
    content: "\e041";
}

.icon-zoom-in:before {
    content: "\e042";
}

.icon-zoom-out:before {
    content: "\e043";
}

.icon-key:before {
    content: "\e044";
}

.icon-key-2:before {
    content: "\e045";
}

.icon-locked:before {
    content: "\e046";
}

.icon-unlocked:before {
    content: "\e047";
}

.icon-wrench:before {
    content: "\e048";
}

.icon-equalizer:before {
    content: "\e049";
}

.icon-cog:before {
    content: "\e04a";
}

.icon-pie:before {
    content: "\e04b";
}

.icon-bars:before {
    content: "\e04c";
}

.icon-stats-up:before {
    content: "\e04d";
}

.icon-gift:before {
    content: "\e04e";
}

.icon-trophy:before {
    content: "\e04f";
}

.icon-diamond:before {
    content: "\e050";
}

.icon-coffee:before {
    content: "\e051";
}

.icon-rocket:before {
    content: "\e052";
}

.icon-meter-slow:before {
    content: "\e053";
}

.icon-meter-medium:before {
    content: "\e054";
}

.icon-meter-fast:before {
    content: "\e055";
}

.icon-dashboard:before {
    content: "\e056";
}

.icon-fire:before {
    content: "\e057";
}

.icon-lab:before {
    content: "\e058";
}

.icon-remove:before {
    content: "\e059";
}

.icon-briefcase:before {
    content: "\e05a";
}

.icon-briefcase-2:before {
    content: "\e05b";
}

.icon-cars:before {
    content: "\e05c";
}

.icon-bus:before {
    content: "\e05d";
}

.icon-cube:before {
    content: "\e05e";
}

.icon-cube-2:before {
    content: "\e05f";
}

.icon-puzzle:before {
    content: "\e060";
}

.icon-glasses:before {
    content: "\e061";
}

.icon-glasses-2:before {
    content: "\e062";
}

.icon-accessibility:before {
    content: "\e063";
}

.icon-accessibility-2:before {
    content: "\e064";
}

.icon-target:before {
    content: "\e065";
}

.icon-target-2:before {
    content: "\e066";
}

.icon-lightning:before {
    content: "\e067";
}

.icon-power:before {
    content: "\e068";
}

.icon-power-2:before {
    content: "\e069";
}

.icon-clipboard:before {
    content: "\e06a";
}

.icon-clipboard-2:before {
    content: "\e06b";
}

.icon-playlist:before {
    content: "\e06c";
}

.icon-grid-view:before {
    content: "\e06d";
}

.icon-tree-view:before {
    content: "\e06e";
}

.icon-cloud:before {
    content: "\e06f";
}

.icon-cloud-2:before {
    content: "\e070";
}

.icon-download-2:before {
    content: "\e071";
}

.icon-upload-2:before {
    content: "\e072";
}

.icon-upload-3:before {
    content: "\e073";
}

.icon-link:before {
    content: "\e074";
}

.icon-link-2:before {
    content: "\e075";
}

.icon-flag:before {
    content: "\e076";
}

.icon-flag-2:before {
    content: "\e077";
}

.icon-attachment:before {
    content: "\e078";
}

.icon-eye:before {
    content: "\e079";
}

.icon-bookmark:before {
    content: "\e07a";
}

.icon-bookmark-2:before {
    content: "\e07b";
}

.icon-star:before {
    content: "\e07c";
}

.icon-star-2:before {
    content: "\e07d";
}

.icon-star-3:before {
    content: "\e07e";
}

.icon-heart:before {
    content: "\e07f";
}

.icon-heart-2:before {
    content: "\e080";
}

.icon-thumbs-up:before {
    content: "\e081";
}

.icon-thumbs-down:before {
    content: "\e082";
}

.icon-minus:before {
    content: "\e084";
}

.icon-help:before {
    content: "\e085";
}

.icon-help-2:before {
    content: "\e086";
}

.icon-blocked:before {
    content: "\e087";
}

.icon-cancel:before,
.icon-x:before {
    content: "\e089";
}

.icon-check:before {
    content: "\e08a";
}

.icon-minus-2:before {
    content: "\e08b";
}

.icon-plus:before {
    content: "\e08c";
}

.icon-enter:before {
    content: "\e08d";
}

.icon-exit:before {
    content: "\e08e";
}

.icon-loop:before,
.icon-refresh:before {
    content: "\e08f";
}

.icon-arrow-up-left:before {
    content: "\e090";
}

.icon-arrow-up:before {
    content: "\e091";
}

.icon-arrow-up-right:before {
    content: "\e092";
}

.icon-arrow-right:before {
    content: "\e093";
}

.icon-arrow-down-right:before {
    content: "\e094";
}

.icon-arrow-down:before {
    content: "\e095";
}

.icon-arrow-down-left:before {
    content: "\e096";
}

.icon-arrow-left:before {
    content: "\e097";
}

.icon-arrow-up-2:before {
    content: "\e098";
}

.icon-arrow-right-2:before {
    content: "\e099";
}

.icon-arrow-down-2:before {
    content: "\e09a";
}

.icon-arrow-left-2:before {
    content: "\e09b";
}

.icon-arrow-up-3:before {
    content: "\e09c";
}

.icon-arrow-right-3:before {
    content: "\e09d";
}

.icon-arrow-down-3:before {
    content: "\e09e";
}

.icon-arrow-left-3:before {
    content: "\e09f";
}

.icon-menu:before {
    content: "\e0a0";
}

.icon-enter-2:before {
    content: "\e0a1";
}

.icon-backspace:before {
    content: "\e0a2";
}

.icon-backspace-2:before {
    content: "\e0a3";
}

.icon-tab:before {
    content: "\e0a4";
}

.icon-tab-2:before {
    content: "\e0a5";
}

.icon-checkbox:before {
    content: "\e0a6";
}

.icon-checkbox-unchecked:before {
    content: "\e0a7";
}

.icon-checkbox-partial:before {
    content: "\e0a8";
}

.icon-radio-checked:before {
    content: "\e0a9";
}

.icon-radio-unchecked:before {
    content: "\e0aa";
}

.icon-font:before {
    content: "\e0ab";
}

.icon-paragraph-left:before {
    content: "\e0ac";
}

.icon-paragraph-center:before {
    content: "\e0ad";
}

.icon-paragraph-right:before {
    content: "\e0ae";
}

.icon-paragraph-justify:before {
    content: "\e0af";
}

.icon-left-to-right:before {
    content: "\e0b0";
}

.icon-right-to-left:before {
    content: "\e0b1";
}

.icon-new-tab:before {
    content: "\e0b3";
}

.icon-new-tab-2:before {
    content: "\e0b4";
}

.icon-embed:before {
    content: "\e0b5";
}

.icon-code:before {
    content: "\e0b6";
}

.icon-bluetooth:before {
    content: "\e0b7";
}

.icon-share:before {
    content: "\e0b9";
}

.icon-mail-2:before {
    content: "\e0ba";
}

.icon-google:before {
    content: "\e0bb";
}

.icon-google-plus:before {
    content: "\e0bc";
}

.icon-google-drive:before {
    content: "\e0bd";
}

.icon-facebook:before {
    content: "\e0be";
}

.icon-instagram:before {
    content: "\e0bf";
}

.icon-twitter:before {
    content: "\e0c0";
}

.icon-feed:before {
    content: "\e0c1";
}

.icon-youtube:before {
    content: "\e0c2";
}

.icon-vimeo:before {
    content: "\e0c3";
}

.icon-flickr:before {
    content: "\e0c4";
}

.icon-picassa:before {
    content: "\e0c5";
}

.icon-dribbble:before {
    content: "\e0c6";
}

.icon-deviantart:before {
    content: "\e0c7";
}

.icon-github:before {
    content: "\e0c8";
}

.icon-github-2:before {
    content: "\e0c9";
}

.icon-github-3:before {
    content: "\e0ca";
}

.icon-github-4:before {
    content: "\e0cb";
}

.icon-github-5:before {
    content: "\e0cc";
}

.icon-git:before {
    content: "\e0cd";
}

.icon-github-6:before {
    content: "\e0ce";
}

.icon-wordpress:before {
    content: "\e0cf";
}

.icon-joomla:before {
    content: "\e0d0";
}

.icon-blogger:before {
    content: "\e0d1";
}

.icon-tumblr:before {
    content: "\e0d2";
}

.icon-yahoo:before {
    content: "\e0d3";
}

.icon-amazon:before {
    content: "\e0d4";
}

.icon-tux:before {
    content: "\e0d5";
}

.icon-apple:before {
    content: "\e0d6";
}

.icon-finder:before {
    content: "\e0d7";
}

.icon-android:before {
    content: "\e0d8";
}

.icon-windows:before {
    content: "\e0d9";
}

.icon-soundcloud:before {
    content: "\e0da";
}

.icon-skype:before {
    content: "\e0db";
}

.icon-reddit:before {
    content: "\e0dc";
}

.icon-linkedin:before {
    content: "\e0dd";
}

.icon-lastfm:before {
    content: "\e0de";
}

.icon-delicious:before {
    content: "\e0df";
}

.icon-stumbleupon:before {
    content: "\e0e0";
}

.icon-pinterest:before {
    content: "\e0e1";
}

.icon-xing:before {
    content: "\e0e2";
}

.icon-flattr:before {
    content: "\e0e3";
}

.icon-foursquare:before {
    content: "\e0e4";
}

.icon-paypal:before {
    content: "\e0e5";
}

.icon-yelp:before {
    content: "\e0e6";
}

.icon-libreoffice:before {
    content: "\e0e7";
}

.icon-file-pdf:before {
    content: "\e0e8";
}

.icon-file-openoffice:before {
    content: "\e0e9";
}

.icon-file-word:before {
    content: "\e0ea";
}

.icon-file-excel:before {
    content: "\e0eb";
}

.icon-file-powerpoint:before {
    content: "\e0ec";
}

.icon-file-zip:before {
    content: "\e0ed";
}

.icon-file-xml:before {
    content: "\e0ee";
}

.icon-file-css:before {
    content: "\e0ef";
}

.icon-html5:before {
    content: "\e0f0";
}

.icon-html5-2:before {
    content: "\e0f1";
}

.icon-css3:before {
    content: "\e0f2";
}

.icon-chrome:before {
    content: "\e0f3";
}

.icon-firefox:before {
    content: "\e0f4";
}

.icon-IE:before {
    content: "\e0f5";
}

.icon-opera:before {
    content: "\e0f6";
}

.icon-safari:before {
    content: "\e0f7";
}

.icon-IcoMoon:before {
    content: "\e0f8";
}

.icon-sunrise:before {
    content: "\e0f9";
}

.icon-sun:before {
    content: "\e0fa";
}

.icon-moon:before {
    content: "\e0fb";
}

.icon-sun-2:before {
    content: "\e0fc";
}

.icon-windy:before {
    content: "\e0fd";
}

.icon-wind:before {
    content: "\e0fe";
}

.icon-snowflake:before {
    content: "\e0ff";
}

.icon-cloudy:before {
    content: "\e100";
}

.icon-cloud-3:before {
    content: "\e101";
}

.icon-weather:before {
    content: "\e102";
}

.icon-weather-2:before {
    content: "\e103";
}

.icon-weather-3:before {
    content: "\e104";
}

.icon-lines:before {
    content: "\e105";
}

.icon-cloud-4:before {
    content: "\e106";
}

.icon-lightning-2:before {
    content: "\e107";
}

.icon-lightning-3:before {
    content: "\e108";
}

.icon-rainy:before {
    content: "\e109";
}

.icon-rainy-2:before {
    content: "\e10a";
}

.icon-windy-2:before {
    content: "\e10b";
}

.icon-windy-3:before {
    content: "\e10c";
}

.icon-snowy:before {
    content: "\e10d";
}

.icon-snowy-2:before {
    content: "\e10e";
}

.icon-snowy-3:before {
    content: "\e10f";
}

.icon-weather-4:before {
    content: "\e110";
}

.icon-cloudy-2:before {
    content: "\e111";
}

.icon-cloud-5:before {
    content: "\e112";
}

.icon-lightning-4:before {
    content: "\e113";
}

.icon-sun-3:before {
    content: "\e114";
}

.icon-moon-2:before {
    content: "\e115";
}

.icon-cloudy-3:before {
    content: "\e116";
}

.icon-cloud-6:before {
    content: "\e117";
}

.icon-cloud-7:before {
    content: "\e118";
}

.icon-lightning-5:before {
    content: "\e119";
}

.icon-rainy-3:before {
    content: "\e11a";
}

.icon-rainy-4:before {
    content: "\e11b";
}

.icon-windy-4:before {
    content: "\e11c";
}

.icon-windy-5:before {
    content: "\e11d";
}

.icon-snowy-4:before {
    content: "\e11e";
}

.icon-snowy-5:before {
    content: "\e11f";
}

.icon-weather-5:before {
    content: "\e120";
}

.icon-cloudy-4:before {
    content: "\e121";
}

.icon-lightning-6:before {
    content: "\e122";
}

.icon-thermometer:before {
    content: "\e123";
}

.icon-compass-2:before {
    content: "\e124";
}

.icon-none:before {
    content: "\e125";
}

.icon-Celsius:before {
    content: "\e126";
}

.icon-Fahrenheit:before {
    content: "\e127";
}

.icon-forrst:before {
    content: "\e128";
}

.icon-headphones:before {
    content: "\e129";
}

.icon-bug:before {
    content: "\e12a";
}

.icon-cart-2:before {
    content: "\e12b";
}

.icon-earth:before {
    content: "\e12c";
}

.icon-battery:before {
    content: "\e12d";
}

.icon-list:before {
    content: "\e12e";
}

.icon-grid:before {
    content: "\e12f";
}

.icon-alarm:before {
    content: "\e130";
}

.icon-location-2:before {
    content: "\e131";
}

.icon-pointer:before {
    content: "\e132";
}

.icon-diary:before {
    content: "\e133";
}

.icon-eye-2:before {
    content: "\e134";
}

.icon-console:before {
    content: "\e135";
}

.icon-location-3:before {
    content: "\e136";
}

.icon-move:before {
    content: "\e137";
}

.icon-gift-2:before {
    content: "\e138";
}

.icon-monitor:before {
    content: "\e139";
}

.icon-mobile-2:before {
    content: "\e13a";
}

.icon-switch:before {
    content: "\e13b";
}

.icon-star-4:before {
    content: "\e13c";
}

.icon-address-book:before {
    content: "\e13d";
}

.icon-shit:before {
    content: "\e13e";
}

.icon-cone:before {
    content: "\e13f";
}

.icon-credit-card:before {
    content: "\e140";
}

.icon-type:before {
    content: "\e141";
}

.icon-volume:before {
    content: "\e142";
}

.icon-volume-2:before {
    content: "\e143";
}

.icon-locked-2:before {
    content: "\e144";
}

.icon-warning:before {
    content: "\e145";
}

.icon-info:before {
    content: "\e146";
}

.icon-filter:before {
    content: "\e147";
}

.icon-bookmark-3:before {
    content: "\e148";
}

.icon-bookmark-4:before {
    content: "\e149";
}

.icon-stats:before {
    content: "\e14a";
}

.icon-compass-3:before {
    content: "\e14b";
}

.icon-keyboard:before {
    content: "\e14c";
}

.icon-award-fill:before {
    content: "\e14d";
}

.icon-award-stroke:before {
    content: "\e14e";
}

.icon-beaker-alt:before {
    content: "\e14f";
}

.icon-beaker:before {
    content: "\e150";
}

.icon-move-vertical:before {
    content: "\e151";
}

.icon-move-horizontal:before {
    content: "\e152";
}

.icon-steering-wheel:before {
    content: "\e153";
}

.icon-volume-3:before {
    content: "\e154";
}

.icon-volume-mute:before {
    content: "\e155";
}

.icon-play:before {
    content: "\e156";
}

.icon-pause:before {
    content: "\e157";
}

.icon-stop:before {
    content: "\e158";
}

.icon-eject:before {
    content: "\e159";
}

.icon-first:before {
    content: "\e15a";
}

.icon-last:before {
    content: "\e15b";
}

.icon-play-alt:before {
    content: "\e15c";
}

.icon-battery-charging:before {
    content: "\e160";
}

.icon-left-quote:before {
    content: "\e161";
}

.icon-right-quote:before {
    content: "\e162";
}

.icon-left-quote-alt:before {
    content: "\e163";
}

.icon-right-quote-alt:before {
    content: "\e164";
}

.icon-smiley:before {
    content: "\e165";
}

.icon-umbrella:before {
    content: "\e166";
}

.icon-info-2:before {
    content: "\e167";
}

.icon-chart-alt:before {
    content: "\e168";
}

.icon-at:before {
    content: "\e169";
}

.icon-hash:before {
    content: "\e16a";
}

.icon-pilcrow:before {
    content: "\e16b";
}

.icon-fullscreen-alt:before {
    content: "\e16c";
}

.icon-fullscreen-exit-alt:before {
    content: "\e16d";
}

.icon-layers-alt:before {
    content: "\e16e";
}

.icon-layers:before {
    content: "\e16f";
}

.icon-floppy:before,
.icon-save:before {
    content: "\e170";
}

.icon-rainbow:before {
    content: "\e000";
}

.icon-air:before {
    content: "\e171";
}

.icon-home:before {
    content: "\e172";
}

.icon-spin:before {
    content: "\e173";
}

.icon-auction:before {
    content: "\e174";
}

.icon-dollar:before {
    content: "\e175";
}

.icon-dollar-2:before {
    content: "\e176";
}

.icon-coins:before {
    content: "\e177";
}

.icon-file-2:before {
    content: "\e186";
}

.icon-file-3:before {
    content: "\e187";
}

.icon-file-4:before {
    content: "\e188";
}

.icon-files:before {
    content: "\e189";
}

.icon-phone-2:before {
    content: "\e18a";
}

.icon-tablet:before {
    content: "\e18b";
}

.icon-monitor-2:before {
    content: "\e18c";
}

.icon-window:before {
    content: "\e18d";
}

.icon-tv:before {
    content: "\e18e";
}

.icon-camera-3:before {
    content: "\e18f";
}

.icon-image:before {
    content: "\e190";
}

.icon-open:before {
    content: "\e191";
}

.icon-sale:before {
    content: "\e192";
}

.icon-direction:before {
    content: "\e193";
}

.icon-medal:before {
    content: "\e194";
}

.icon-medal-2:before {
    content: "\e195";
}

.icon-satellite:before {
    content: "\e196";
}

.icon-discout:before {
    content: "\e197";
}

.icon-barcode:before {
    content: "\e198";
}

.icon-ticket:before {
    content: "\e199";
}

.icon-shipping:before {
    content: "\e19a";
}

.icon-globe:before {
    content: "\e19b";
}

.icon-anchor:before {
    content: "\e19c";
}

.icon-pop-out:before {
    content: "\e19d";
}

.icon-pop-in:before {
    content: "\e19e";
}

.icon-resize:before {
    content: "\e178";
}

.icon-battery-2:before {
    content: "\e179";
}

.icon-battery-3:before {
    content: "\e17a";
}

.icon-battery-4:before {
    content: "\e17b";
}

.icon-battery-5:before {
    content: "\e17c";
}

.icon-tools:before {
    content: "\e17d";
}

.icon-alarm-2:before {
    content: "\e17e";
}

.icon-alarm-cancel:before {
    content: "\e17f";
}

.icon-alarm-clock:before {
    content: "\e180";
}

.icon-chronometer:before {
    content: "\e181";
}

.icon-ruler:before {
    content: "\e182";
}

.icon-lamp:before {
    content: "\e183";
}

.icon-lamp-2:before {
    content: "\e184";
}

.icon-scissors:before {
    content: "\e185";
}

.icon-volume-4:before {
    content: "\e19f";
}

.icon-volume-5:before {
    content: "\e1a0";
}

.icon-volume-6:before {
    content: "\e1a1";
}

.icon-battery-full:before {
    content: "\e15f";
}

.icon-battery-empty:before {
    content: "\e15d";
}

.icon-battery-half:before {
    content: "\e15e";
}

.icon-zip:before {
    content: "\e1a2";
}

.icon-zip-2:before {
    content: "\e1a3";
}

.icon-play-2:before {
    content: "\e1a4";
}

.icon-pause-2:before {
    content: "\e1a5";
}

.icon-record:before {
    content: "\e1a6";
}

.icon-stop-2:before {
    content: "\e1a7";
}

.icon-next:before {
    content: "\e1a8";
}

.icon-previous:before {
    content: "\e1a9";
}

.icon-first-2:before {
    content: "\e1aa";
}

.icon-last-2:before {
    content: "\e1ab";
}

.icon-arrow-left-4:before {
    content: "\e1ac";
}

.icon-arrow-down-4:before {
    content: "\e1ad";
}

.icon-arrow-up-4:before {
    content: "\e1ae";
}

.icon-arrow-right-4:before {
    content: "\e1af";
}

.icon-arrow-left-5:before {
    content: "\e1b0";
}

.icon-arrow-down-5:before {
    content: "\e1b1";
}

.icon-arrow-up-5:before {
    content: "\e1b2";
}

.icon-arrow-right-5:before {
    content: "\e1b3";
}

.icon-cc:before {
    content: "\e1b4";
}

.icon-cc-by:before {
    content: "\e1b5";
}

.icon-cc-nc:before {
    content: "\e1b6";
}

.icon-cc-nc-eu:before {
    content: "\e1b7";
}

.icon-cc-nc-jp:before {
    content: "\e1b8";
}

.icon-cc-sa:before {
    content: "\e1b9";
}

.icon-cc-nd:before {
    content: "\e1ba";
}

.icon-cc-pd:before {
    content: "\e1bb";
}

.icon-cc-zero:before {
    content: "\e1bc";
}

.icon-cc-share:before {
    content: "\e1bd";
}

.icon-cc-share-2:before {
    content: "\e1be";
}

.icon-cycle:before {
    content: "\e1bf";
}

.icon-stop-3:before {
    content: "\e1c0";
}

.icon-stats-2:before {
    content: "\e1c1";
}

.icon-stats-3:before {
    content: "\e1c2";
}*/