/* Custom functions stylesheet by Maciej Necki and Chiara Cementon */
/* GENERIC APPLICATORS */
.fa-square-xmark {
    color: var(--altColor);
}
.underline {
    text-decoration: underline;
    text-decoration-color: var(--tintColor);
    border-radius: 5px;
}
.underline-wave {
    text-decoration: underline;
    text-decoration-style: wavy;
}
.underline.orange {
    text-decoration-color: var(--accentColor);
}
.largeBottomMargin {
    margin-bottom: var(--space-3xl);
}
.disabled {
    filter: opacity(70%);
    pointer-events: none;
}
.disabled-text {
    filter: opacity(70%);
}
a.favourite {
    color: var(--bg-color-3);
}
a.favourite:hover {
    color: var(--accentColor);
}
a.favourite.disabled {
    filter: none;
    color: var(--accentColor);
}
.disabled-non-link {
    filter: opacity(70%);
}
.hidden {
    display: none;
}
.completed {
    background: var(--green-color) !important;
}
.required {
    color: var(--color);
}
.more {
    color: var(--gray-color);
}
.error {
    display: block;
    color: var(--red-color);
    margin: var(--space-2xs);
}
.pointer{
    cursor: pointer;
}
.paddedContent{
    margin: var(--space-xs);
}
.translucentContent{
    opacity: 90%;
}
.marginCenter {
    margin: 0 auto;
}
.noMargin {
    margin: 0;
}
.leftMargin {
    margin-left: var(--space-s);
}
.leftMargin-m {
    margin-left: var(--space);
}
.leftMargin-l {
    margin-left: var(--space-l);
}
.noPadding {
    padding: 0;
}
.bg-color {
    background: var(--bg-color-1);
}
.fa.max {
    color: var(--green-color);
}
.fa.attention {
    color: var(--red-color);
}
.link {
    position: absolute;
    width: 100%;
    height 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.invisible {
    visibility: hidden;
}
.cancel-button {
    position: absolute;
    top: 8px;
    right: 16px;
}
.oddal {
    color: var(--text-color-light);
    background: #0000006d;
    background-position: center center;
    background-size: cover;
    background-blend-mode: overlay;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.copy-on-click {
    cursor: pointer;
}
.copy-on-click:hover {
    background-color: var(--bg-color-3);
}
.copy-on-click span[tooltip] {
    content: "Copy";
}


input[type=checkbox].checkbox-select {
    color: var(--text-color-light);
    position: absolute;
    visibility: hidden;
    opacity: 0;
}
input[type=checkbox].checkbox-select + label {
    color: var(--text-color-light);
    background-color: var(--accentColor);
    padding: 3px 12px 3px 12px;
    border-radius: 0.3rem;
}
input[type=checkbox].checkbox-select:checked + label {
    filter: saturate(120%);
}
input[type=checkbox].checkbox-select:hover + label {
    filter: saturate(120%);
}

/* Text Sizes */
.callout {
    font-size: var(--font-size-2xl);
}
.medium-callout {
    font-size: var(--font-size-l);
}
.label {
    font-size: var(--font-size-s);
}
.footnote {
    font-size: var(--font-size-xs);
}
.caption {
    font-size: var(--font-size-2xs);
}

/* Scroll */
.scroll {
    overflow: auto;
    max-height: 550px;
}
.scroll.large {
    max-height: 800px;
}
.scroll.half {
    max-height: 80vh;
}
.scroll.full {
    max-height: 100%;
}
.scroll.horizontal {
    white-space: nowrap;
}

/* JS Applicators */
.selection-off {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.separator::after {
    content: "...";
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-xl);
    margin-top: 0;
    margin-bottom: var(--space);
    color: var(--text-color);
    display: block;
    text-align: center;
    letter-spacing: 5px;
}

/* TOOLS */

/* Progress Bar */
.progressWrapper{
    padding: var(--space-xs) 0;
    overflow: hidden;
    border-radius: 0.3rem;
    background-size: 14px 14px;
    background-color: rgba(229,229,247,0);
    background-image: repeating-linear-gradient(45deg, var(--bg-color-1) 0, var(--bg-color-1) 1px, rgba(229,229,247,0) 0, rgba(229,229,247,0) 50%);
}
.progress-bar {
    height: 2rem;
    border-radius: 0.3rem;
    background: var(--bg-color);
    outline: 1px solid var(--sceneColor);
    position: relative;
}
.progress-bar.reward {
    height: auto;
    border-radius: 1rem;
    line-height: 1.6rem;
    background: var(--bg-color);
    outline: none;
    padding: 0 var(--space-2xs);
    color: var(--text-color);
}
.progress {
    display: block;
    height: 100%;
    background-image: linear-gradient(to right, var(--green-color) , #5dff5d);
    border-radius: 0.3rem;
    animation: progress 1500ms ease-in 1;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.progress-bar-container:not(:last-child) {
}
.progress-marker {
    bottom: 0.25rem;
    color: #0a8525;
    position: absolute;
}
.progress-marker.inline {
    position: static;
}
.progress-marker.current mark {
    background: #0a8525;
}
.progress-marker.current {
    opacity: 0;
    animation: progress-marker 1180ms ease-in 1;
    animation-delay: 350ms;
    animation-fill-mode: forwards;
    z-index: 3;
}
.progress-marker.future {
    opacity: 0;
    color: var(--tintColor);
    animation: future-marker 1000ms ease-in 1;
    animation-fill-mode: forwards;
    animation-delay: 500ms;
    right: 2%;
    z-index: 1;
}
.progress-marker-text {
    bottom: -40px;
    color: var(--text-color);
    position: absolute;
    right: -10%;
}
.progress-marker-text.inline {
    position: static;
}
.percentage {
    display: block;
    height: 100%;
    background-color: var(--green-color);
    border-radius: 0.3rem;
    animation: progress 1500ms ease-in 1;
}
@keyframes progress {
    from {
        width: 0;
    }
}
@keyframes progress-marker {
    from {
        left: 0;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes future-marker {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Breadcrumbs */
.breadcrumb {
    padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
    background: var(--bg-color);
    border-bottom: 2px solid var(--bg-color-2)
/*    box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 3px 0px, rgba(0, 0, 0, 0.025) 0px 1px 2px 0px;*/
}
.breadcrumb nav {
    font-size: var(--font-size-xs);
    -webkit-tap-highlight-color: transparent;
    padding: 0.5rem 1rem;
    display: block;
    white-space: nowrap;
    overflow: scroll;
    overflow-y: visible;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.breadcrumb, .menu-items {
    display: block;
    white-space: nowrap;
    overflow: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.breadcrumb nav::-webkit-scrollbar, .menu-items::-webkit-scrollbar {
    display: none;
}
.breadcrumb a {
    padding: 0.5rem;
}
.breadcrumb a + a:before {
    content: "/\00a0";
    color: #999;
    padding-right: 1rem;
}

/* Grids */
.grid,
.grid-2,
.grid-3,
.grid-4
.grid-5,
.grid-6,
.grid-9,
.grid-221,
.grid-211,
.grid-321,
.grid-421 {
    display: grid;
    grid-gap: 1rem;
}
.small-grid-gap {
    grid-gap: var(--space-s);
}
.small-row-gap {
    row-gap: var(--space-s);
}
.x-small-row-gap {
    row-gap: var(--space-4xs);
}
.grid.smallish {
    width: 50%;
}
.grid.fit-content {
    grid-template-columns: fit-content(20%) fit-content(20%) 1fr;
}
.grid.fill {
    grid-template-columns: repeat( auto-fill, minmax(350px, 1fr) );
    grid-auto-flow: dense;
}
@media screen and (max-width: 900px) {
    .grid.fill {
        grid-template-columns: repeat( auto-fill, minmax(245px, 1fr) );
    }
}
.grid.fill.large {
    grid-template-columns: repeat( auto-fill, minmax(500px, 1fr) );
}
.grid.fit.large {
    grid-template-columns: repeat( auto-fit, minmax(500px, 1fr) );
}
.grid.fill.medium {
    grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
    row-gap: var(--space-2xs);
}
.grid.fill.small {
    grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
    row-gap: var(--space-2xs);
}
.grid.fill.x-small  {
    grid-template-columns: repeat( auto-fill, minmax(120px, 1fr) );
    row-gap: var(--space-4xs);
    column-gap: var(--space-4xs);
}
.grid.fit {
    grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
}
.grid.fit.large {
    grid-template-columns: repeat( auto-fill, minmax(600px, 1fr) );
}
.grid.fit.small  {
    grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
    row-gap: var(--space-xs);
    column-gap: var(--space-xs);
}
.grid.fit.medium {
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    row-gap: var(--space-xs);
}
.grid.fit.x-small  {
    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
    row-gap: var(--space-2xs);
}
.grid.fit.zero  {
    grid-template-columns: repeat( auto-fit, minmax(1px, 1fr) );
    row-gap: var(--space-3xs);
    column-gap: var(--space-2xs);
}

.centered {
    justify-content: center;
    align-items: center;
}
.vertically-centered {
    align-items: center;
}

/* Grid with sidebar */
.grid.simple-sidebar {
    grid-area: sidebar;
}
.grid.simple-content {
    grid-area: content;
}
.grid.with-sidebar {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "sidebar content";
    justify-content: center;
    align-content: center;
}
@media screen and (max-width: 600px) {
    .grid.with-sidebar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "content";
        justify-content: center;
        align-content: center;
        align-items: center;
    }
}

/* Gally grid */
.pic-1 {
    grid-area: b;
}
.pic-2 {
    grid-area: c;
}
.pic-3 {
    grid-area: f;
}
.caption-1 {
    grid-area: a;
}
.caption-2 {
    grid-area: d;
}
.caption-3 {
    grid-area: e;
}
.grid.gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "a b"
    "c d"
    "e f";
    justify-content: center;
    align-content: center;
    align-items: center;
    row-gap: 4rem;
    column-gap: 3rem;
}
@media screen and (max-width: 600px) {
    .grid.gallery {
        grid-template-columns: 1fr;
        grid-template-areas:
        "a"
        "b"
        "d"
        "c"
        "e"
        "f";
        justify-content: center;
        align-content: center;
        align-items: center;
        row-gap: 1rem;
    }
}

@media screen and (max-width: 600px) {
    .grid.fill.large, .grid.fit.large {
        grid-template-columns: repeat( auto-fill, minmax(340px, 1fr) );
    }
}
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *, .grid-6 > *, .grid-9, .grid-221 > *, .grid-211 > *, .grid-321 > *, .grid-421, .grid-2-home > * {
    grid-column: span 1;
}
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-2.small {
    row-gap: var(--space-xs);
}
.grid-2.profile {
    grid-template-columns: 1fr 4fr;
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}
.grid-9 {
    grid-template-columns: repeat(9, 1fr);
}
.grid-221,
.grid-211,
.grid-321,
.grid-421 {
    grid-template-columns: repeat(1, 1fr);
}
.grid-221.business_prof {
    margin-bottom: 12px;
}

@media screen and (min-width: 600px) {
    .grid-221, .grid-321, .grid-421 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 900px) {
    .grid-211 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-221 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-321 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-421 {
        grid-template-columns: repeat(4, 1fr);
    }
}
.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}
.grid-6 > * {
    grid-column: span 6;
}
@media screen and (min-width: 600px) {
    .grid-6 .card:first-child {
        grid-column: span 2;
    }
    .grid-6 > * {
        grid-column: span 3;
    }
    .grid-6 .card:first-child {
        grid-column: span 6;
    }

}
@media screen and (min-width: 900px) {
    .grid-6 > * {
        grid-column: span 2;
    }
    .grid-6 > .card:first-child {
        grid-column: span 3;
    }
    .grid-6 .card:nth-child(2) {
        grid-column: span 3;
    }
}
.grid-vertical-centering {
    align-content: center;
    align-items: center;
}



/* Card */
.card img {
    border-radius: 0.3rem;
}
.card {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
    border-radius: 0.3rem;
    box-shadow: 0 8px 15px rgba(0,0,0, 0.1);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
/*    border: 1px solid var(--bg-color-2);*/
    transition: box-shadow .25s ease-out;
}
.card:hover {
    box-shadow: 0 8px 15px rgba(0,0,0, 0.2);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.card hr {
    display: none;
}
.card img {
    border-radius: 0;
}
.card .content {
    margin: 0;
    padding: 1rem;
}
.card .meta {
    font-weight: bold;
}
@media (display-mode: standalone) {
    .card {
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    .card img {
        border-radius: 0.3rem;
        margin-bottom: var(--space-s);
    }
    .card hr {
        display: block;
    }
    .card .content {
        padding: 0;
    }
    .card .meta {
        margin-bottom: 1.5rem;
    }
    .card:last-child hr {
        display: none;
    }
}
.card .date {
    font-size: var(--font-size-s);
}
.container a.card {
    margin-bottom: var(--space-3xl);
}
a.card {
    display: block;
    color: var(--text-color);
}
.card .tags {
    margin-bottom: var(--space-s);
}
.card h2 {
    margin-top: 0rem;
}

/* Flex Container */
.flexContainer {
    display: flex;
    gap: var(--space-xs);
}
.flexContainer.vertical {
    flex-direction: column;
}
.flexContainer.spaced {
    justify-content: space-between;
}
.flexContainer.wrapped {
    flex-flow: row wrap;
}
.flexContainer.left {
    justify-content: left;
    gap: 0;
}
.flexContainer.header {
    height: 4rem;
}
.flexContainer.smallgap {
    gap: var(--space-4xs);
}
.flexContainer.baseline {
    align-items: baseline;
}

.boxer {
    top:0
}

/* Container */
.container {
    position: relative;
    display: block;
    clear: both;
    max-width: var(--container);
    width: 100%;
    overflow: visible;
    margin: var(--space-xl) auto;
}
.container.thin {
    max-width: var(--container-thin);
}
.container.xthin {
    max-width: var(--container-xthin);
}
.container.wide {
    max-width: var(--container-wide);
}
.container.medium {
    max-width: var(--container-medium);
}
@media screen and (max-width: 600px) {
    .container.wide {
        max-width: 100%;
    }
}

/* Sidebar */
.sidebar-container {
    position: fixed;
    z-index: 101;
    margin: 0;
    background: var(--sceneColor);
    transition: 1s;
    box-shadow: var(--shadow);
    height: 100%;
    top: 0;
    left: 0;
}
.header-parent {
    padding-top: var(--space);
    position: relative;
}
.sidebar-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
}
.sidebar hr {
    width: 18px;
    margin-left: var(--space);
    border-bottom: 1px solid var(--text-color);
}
a.button.inSidebar {
    overflow: hidden;
    box-shadow: none;
    text-align: left;
    padding: var(--space-2xs) var(--space-xs);
    background: transparent;
    color: var(--text-color-2);
    margin: 0.125rem var(--space-2xs);
    min-width: 0;
    transition: 0.5s;
}
a.button.inSidebar.spotlight {
    background: var(--bg-color-3);
}
a.button.inSidebar.alert {
    background: var(--altColor);
}
a.button.inSidebar:hover {
    background: var(--bg-color-2);
    box-shadow: var(--shadow);
    color: var(--text-color);
}
a.button.inSidebar.activated {
    background: var(--bg-color-2);
    box-shadow: var(--shadow);
    color: var(--text-color);
}
a.button.inSidebar.spotlight:hover {
    filter: saturate(150%);
    color: var(--text-color);
}
a.button.inSidebar.active {
    font-weight: 700;
    background: var(--bg-color-1);
    color: var(--white-color);
    color: var(--text-color);
}
a.button.inSidebar.cancel {
    color: var(--altColor);
}

.orange-square {
    padding: var(--space-3xs) var(--space-xs);
    margin: var(--space-3xs) var(--space-2xs);
    color: var(--accentColor);
    text-align: center;
}
span.descr {
    display: none;
    transition: 0.5s;
}
#sidebar-box:hover span.descr {
    display: inline-block;
}
#sidebar-box:hover a.button.inSidebar {
    transition: 0.5s;
}
.menu-content {
    left: -1000%;
    position: absolute;
    right: 0;
    top: 0;
    padding: var(--space-xs);
    background: var(--sceneColor);
    box-shadow: var(--shadow);
    width: 100%;
    height: 100vh;
}
.menu-content.show {
    left: 100%;
}
.menu-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
}
a.button.menu-content-button {
    font-size: var(--font-size-xs);
    padding: var(--space-3xs) var(--space-xs);
    margin: var(--space-4xs) 0;
}

/* Highlight */
.highlight {
    background: var(--sceneColor80);
    background-position: center center;
    background-size: 1800px;
    background-blend-mode: overlay;
    color: var(--text-color);
    padding: var(--space-2xs) var(--space-xs);
}
.highlight.info {
    background: var(--tintColor);
    color: var(--text-color-light);
}
.highlight.success {
    background: var(--green-color);
    color: var(--text-color-light);
}
.highlight.alert {
    background: var(--altColor);
    color: var(--text-color-light);
}
.highlight.alert h1 {
    color: #ffffff;
}
.highlight.inner {
    background: var(--bg-color-2);
}
.highlight.neutral {
    background: none;
}
.highlight.scene {
    background: var(--sceneColor);
}
.highlight.special_button {
    background: var(--color);
    text-align: center;
    color: var(--white-color);
}
.highlight.slim {
    padding: var(--space-3xs) var(--space-2xs);
}
.highlight.slim.pricing {
    padding-right: 12px;
    padding-left: 12px;
}
.highlight.slim.pricing.bottom {
    padding-right: 12px;
    padding-left: 12px;
}
.highlight.transparent{
    opacity: 0.85;
    backdrop-filter: blur(6px);
}
.highlight.noMargin {
    margin: 0;
}
.highlight.noPadding {
    padding: 0;
}
.highlight.image {
    background: #0000003d;
    background-position: center center;
    background-size: cover;
    background-blend-mode: overlay;
    color: var(--text-color-light);
}
@media (prefers-color-scheme: dark) {
    .highlight.image {
        background: #00000091;
        background-position: center center;
        background-size: cover;
        background-blend-mode: overlay;
    }
}
.highlight.bottom_rounded {
    border-radius: 0 0 0.3rem 0.3rem;
}
.highlight.top_rounded {
    border-radius: 0.3rem 0.3rem 0 0;
}
.highlight.border {
    outline: 1px solid var(--offColor-1);
}

/* Box */
.boxMargin {
    margin: var(--space-xs) var(--space-xs) var(--space) var(--space-xs);
}
.box {
    padding: var(--space-2xs) var(--space-xs);
    background: var(--bg-color-2);
    box-shadow: var(--shadow);
    margin: var(--space-xs) var(--space-xs) var(--space) var(--space-xs);
}
.box.receipt {
    margin: var(--space-xs) var(--space) var(--space-xs) var(--space);
}
.box.noColor {
    background: transparent;
}
.box.air {
    padding: var(--space) var(--space-l);
}
.box.thinMargin {
    margin-bottom: var(--space-xs);
}
.box.noMargin {
    margin: 0;
}
.box.centered {
    margin: var(--space) auto;
}
.box.noPadding {
    padding: 0;
}
.box.extraPadding {
    padding: var(--space-l) var(--space-xs);
}
.box.camera {
    padding-bottom: 56.25%;
}
.box.camera h5 {
    position: absolute;
    max-width: var(--container);
    width: 100%;
    top: 40%;
}
.box.camera img {
    position: absolute;
    max-width: var(--container);
    top: 6px;
    left: 4px;
}
.box.info {
    background: var(--tintColor);
    color: #fff;
}
.box.success {
    border: 1px solid var(--green-color);
}
.box.info-outline {
    border: 1px solid var(--tintColor);
    background: var(--sceneColor);
}
.box.neutral {
    background: var(--bg-color);
    text-color: var(--text-color-light);
}
.box.tinged {
    background: var(--bg-color-2);
}
.box.confirmed {
    border: 1px solid var(--green-color);
    background: var(--sceneColor);
}
.box.alert {
    border: 1px solid var(--altColor);
    background: var(--sceneColor);
}
.box.trialing {
    border: 1px solid var(--tintColor);
    background: var(--sceneColor);
}
.box.error {
    border: 1px solid var(--red);
    background: var(--altColor);
    color: var(--text-color-light);
}
.box.card {
    min-width: 150px;
    min-height: 120px;
    max-width: 200px;
}
.box.image {
    border: none;
    background: #0000006d;
    background-position: center center;
    background-size: cover;
    background-blend-mode: overlay;
    color: var(--text-color-light);
}
.box.outline {
    border: 1px solid var(--sceneColor);
    background: none;
    box-shadow: none;
}
.box.outline.bg {
    border: 1px solid var(--sceneColor);
    background: var(--bg-color);
    box-shadow: #000f123d 0 2px 3px;
}
.box.outlineDashed {
    border: 2px dashed var(--bg-color-2);
}
.box.flex {
    display: grid;
    justify-items: center;
}

/* Box Select Checkbox */
.box.checked {
    border: 2px solid var(--accentColor) !important;
}

/* Flashes */
#content {
    min-height: calc(100vh - 150px);
}
#flashes {
    position: fixed;
    margin: 0 auto;
    z-index: 1000;
    left: 50%;
    transform: translate(-50%, 0%);
    min-width: 400px;
    top: 0;
}
#flashes div.box {
    margin-bottom: 6px;
}

/* Modal */
.modal {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--sceneColor80);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    overflow: scroll;
}
.modal.search {
    background: var(--bg-color);
}
.modal-content {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-xs);
    z-index: 99;
}
.modal-content.full {
    max-width: 100%;
}


/* Popup */
a.popup{
    position:relative;
    display: inline-block;
    z-index: 11;
}
a.popup .popuptext {
    position: absolute;
    display: none;
    justify-content: center;
    top: calc(100% + 10px);
    left: 0;
	width: 250px;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.6s;
	color: var(--text-color-inv);
	font-weight: normal;
    font-size: var(--font-size-xs);
	background: #fff;
	text-align: left;
	padding: var(--space-2xs) var(--space-xs);
    background-position: center center;
    background-size: 1800px;
    background-blend-mode: overlay;
    -webkit-box-shadow: 0 1px 3px #C0C5CC;
    -moz-box-shadow: 0 1px 3px #C0C5CC;
    box-shadow: 0 3px 6px rgba(0,0,0,0.42), 0 3px 6px rgba(0,0,0,0.13);
}
a.popup:hover {
	filter: saturate(150%);
}
a.popup:hover .popuptext, a.popup:active .popuptext {
    visibility: visible;
    opacity: 1;
    display: block;
}

/* Table Sidebar */
.table-menu-container {
    position: relative;
}
.table-menu{
    position: absolute;
    right: -10000%;
    top: 125%;
    background-color: var(--bg-color-1);
    box-shadow: var(--shadow);
    padding: var(--space-s);
    z-index: 99;
    width: 300px;
    overflow: auto;
    max-height: 600px;
}
.table-menu.show {
    right: 0%;
}
a.inconspicuous-button {
    text-decoration: none;
    color: var(--text-color-light);
    display: flex;
    padding: var(--space-xs);
  justify-content: space-between;
}
a.inconspicuous-button:hover {
    background: var(--bg-color-2);
    box-shadow: var(--shadow);
}

a.bulk-action{
    margin: var(--space-2xs);
}
a.bulk-action.menu-toggle {
    padding: var(--space-4xs) var(--space-2xs);
    margin-right: 0;
}
a.bulk-action.menu-toggle.active {
    background-color: var(--bg-color-1);
}
#filter-container-content {
    animation: fadeEffect 1.4s;
}
#filter-switch {
    cursor: pointer;
}
.table-filter {
    display: inline;
    background-color: transparent;
    border: 1px solid var(--bg-color-3);
    padding: var(--space-2xs);
    margin: var(--space-3xs);
}
.table-filter > input {
    background-color: transparent;
    border: none;
    padding: 0 var(--space-4xs);
    font-size: inherit;
    font-weight: inherit;
    display; inline;
    width: auto;
    display: inline;
}
.table-filter > select {
    width: auto;
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    padding: 0 var(--space-xs);
    background-color: var(--sceneColor);
    border: none;
    cursor: pointer;
    line-height: 3;
}
.table-filter > label {
    font-size: inherit;
    padding: 0;
    margin: 0;
    color: var(--text-color-1);
}
a.view-options:hover {
    text-decoration: none;
}
a.view-options.not-seen {
    color: var(--bg-color-2);
}
a.view-options.not-seen:hover {
    color: var(--text-color-light);
}
a.eye:before {
    content: "\f06e";
    font-family: FontAwesome;
}
a.eye.not-seen:before {
    content: "\f070";
    font-family: FontAwesome;
}
.top-bar {
  padding: 0;
  margin: 0;
  width: 100vw;
  background: var(--bg-color50);
}


/* Tooltips */
[tooltip], [tooltip-up] {
  position: relative;
  justify-content: center;
}

[tooltip]:after, [tooltip-up]:after, [tooltip-left]:after{
  color: #fff;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.6);
  background-color: var(--tintColor);
  z-index: 10;
  padding: 6px;
  text-align: left;
  transition: all 150ms cubic-bezier(.25, .8, .25, 1);
  font-size: var(--font-size-s);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica;
  line-height: var(--line-height);
}

[tooltip]:after, [tooltip-up]:after {
  left: 0;
  top: calc(100% + 10px);
  content: attr(tooltip);
  transform: translateY(14px);
  transition: all 150ms cubic-bezier(.25, .8, .25, 1);
}

[tooltip-left]:after {
  right: calc(100% + 10px);
  top: 0;
  content: attr(tooltip-left);
  white-space:nowrap;
  max-width:none;
  transform: translateX(28px);
}

[tooltip]:active::after, [tooltip]:hover::after, [tooltip-up]:active::after, [tooltip-left]:active::after, [tooltip-up]:hover::after, [tooltip-left]:hover::after{
  opacity: 1;
  transform: translateY(0);
  transition-duration: 300ms;
}

[tooltip-up]:after {
  top: calc(100% - 100px);
  content: attr(tooltip-up);
  right: 0;
  left: auto;
}

/* Pagination */
.pagination{
    display: inline-block;
}
.pagination a{
    padding: var(--space-4xs) var(--space-2xs);
    text-decoration: none;
    transition: background-color .3s;
    font-size: var(--font-size-l);
}
.pagination a.activated{
    background-color: var(--bg-color-1);
}
.pagination a:hover:not(.activated) {
    background-color: var(--bg-color-2);
}


/* Tabs */
.miniMenu {
    overflow: hidden;
    margin: var(--space-2xs);
    display: flex;
    grid-gap: var(--space-xs);
}
.miniMenu a {
    background-color: transparent;
    float: left;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
    padding: var(--space-2xs) var(--space-xs);
    margin: 0;
    min-width: 40px;
    text-decoration: none;
    color: var(--text-color-2);
}
.miniMenu a:hover {
    filter: none;
    box-shadow: var(--shadow);
    background-color: var(--sceneColor80);
    color: var(--text-color);
}
.miniMenu a.active {
    background-color: var(--sceneColor);
    filter: none;
    box-shadow: var(--shadow);
    font-weight: 600;
    color: var(--text-color);
}
.miniMenu a.noBackground {
    background-color: transparent;
    border: none;
}
.miniMenu a.noBackground:hover {
    background-color: transparent;
    border: none;
    filter: saturate(150%);
}

.tab {
    overflow: hidden;
    border: 1px solid var(--sceneColor);
    border-radius: 0.3rem 0.3rem 0 0;
    background: var(--sceneColor);
    margin: var(--space-xs) var(--space-xs) 0 var(--space-xs);
}
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    border-radius: 0;
    transition: 0.3s;
    padding: 0;
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: 2px solid var(--sceneColor);
    margin: 0;
    min-width: 40px;
    color: var(--accentColor);
}
.tab button:hover {
    color: var(--accentColor);
    filter: none;
    border-bottom: 2px solid var(--accentColor);
}
.tab button.active {
    background-color: var(--bg-color);
    color: var(--accentColor);
    border-bottom: 2px solid var(--accentColor);
    filter: none;
}
.tabContent {
    margin: 0 var(--space-xs);
    padding: var(--space-xs) var(--space-xs);
    border: 2px solid var(--sceneColor);
    border-top: none;
    border-radius: 0 0 0.3rem 0.3rem;
    animation: fadeEffect 1.4s;
}
/* (Go from zero to full opacity) */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}


/* The Accordion */
.accordion {
    background-color: var(--sceneColor);
    cursor: pointer;
    text-align: left;
    transition: 0.4s;
    margin: var(--space-2xs) var(--space-xs) 0 var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
}
.accordion.small {
    padding: var(--space-2xs) var(--space-2xs) 0 var(--space-2xs);
    margin: 0;
    background-color: none;
}
.accordion i {
}
.accordion.active, .accordion:hover {
    background-color: var(--sceneColor80);
    color: var(--text-color-light);
}
.accordion-caret:before {
    content: "\f105";
    font-family: FontAwesome;
}
.accordion.active .accordion-caret:before {
    content: "\f107";
}
.accordion:hover i {
    color: inherit;
}

.panel {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: 0px solid var(--bg-color-2);
    margin: 0 var(--space-xs) 0 var(--space-xs);
}
.panel.small {
    margin: 0;
}
.panelPadding {
    padding: var(--space-xs);
}

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
  font-size: var(--font-size-s);
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-color-3);
  box-shadow: var(--shadow);
  z-index: 1;
  overflow-y: scroll;
  -ms-overflow-style: none;
  max-height: 160px;
}
.dropdown-action{
    border: 1px solid var(--bg-color-1);
}
.dropdown-content::-webkit-scrollbar {
    display: none;
}
.dropdown-content a {
  padding: var(--space-3xs) var(--space-s);
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: var(--bg-color-1);
}
.show {
    display: block;
}


/* Equations */
.equation {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid var(--text-color);
}
.frac span.symbol {
    display: none;
}

/* Slideshow */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}
.mySlides {
    display: none;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 75px;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: var(--accentColor);
    font-weight: bold;
    font-size: var(--font-size-l);
    transition: 0.6s ease;
    user-select: none;
}
.next {
    right: 0;
}
.prev:hover, .next:hover {
    filter: saturate(150%);
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--accentColor);
    opacity: 0.5;
    display: inline-block;
    transition: background-color 0.6 ease;
}
.active, .dot:hover {
    background-color: var(--accentColor);
    opacity: 1;
}
.activeBorder {
    outline: 1px solid var(--accentColor);
}
.active-mobile {
    background-color: none;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--accentColor);
}
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Subsidebar */
.subsidebar-container {
    position: absolute;
    margin: 0;
}
.subsidebar-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
    text-align: left;
}


/* SPECIFIC APPLICATORS */

/* Fleets */
.add-fleet-button {

}


/* Banner */
.bannerText {
    position: absolute;
    top: 10rem;
    left: 7rem;
    color: #ffffff;
}
img.banner {
    width: 100%;
    height: 145vh;
    object-fit: cover;
    object-position: center center;
    position: relative;
    top: -20vh;
    z-index: -1;
}

/* Homepage */
.notification {
    color: var(--red-color);
    position: absolute;
    top: 10px;
}
.feedLocStamp {
    overflow: hidden;
    white-space: nowrap;
    width: 130px;
}
.customise-button {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    margin: var(--space);
}

.download-manual-button {
    position: fixed;
    z-index: 100;
    right: 0;
    top: 0;
    margin: var(--space);
}

/* Blog */
.blog-latest-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space);
  row-gap: var(--space);
}

/* Business */
.businessCard {
    height: auto;
}
.businessCard .box.image {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


/* Profile */
.profile-pic {
    position: relative;
}
img.profile {
    overflow: hidden;
    width: 8rem;
    height: 8rem;
    box-shadow: var(--shadow);
}
img.profile.small {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
}
img.profile.xsmall {
    width: 2.8rem;
    height: 2.8rem;
}
img.profile.xxsmall {
    width: 1rem;
    height: 1rem;
}
img.profile {
    object-fit: cover;
    object-position: center center;
}
img.profile + * {
    margin-top: var(--space-2xs);
}
img.profile + .noMargin {
    margin: 0;
}

/* Business Search */
.searchElement {
    border-bottom: 1px solid  #C2EAF2;
    color: var(--text-color);
    text-decoration: none;
}

/* QR codes */
.grid-qr {
    grid-template-columns: repeat(auto-fit, 160px);
    display: grid;
    justify-content: space-evenly;
    justify-items: start;
    align-content: space-evenly;
    align-items: center;
}

/* Notifications Panel */
.notifications-container {
    position: fixed;
    width: 340px;
    background: var(--bg-color-1);
    padding: var(--space-xs);
    height: 100%;
    right: -200%;
    top: 0;
    z-index: 102;
    border-left: 1px solid var(--bg-color-2);
    transition: right 1s ease-out;
    box-shadow: var(--shadow);
    overflow: auto;
}
.notifications-content {
    margin-right: auto;
}
#notifications-toggle {
    display: none;
}
.notifications-bell.ringing {
    display: block;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}
@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.bell-clicker {
    position: absolute;
    cursor: pointer;
}
.notifications-close {
    cursor: pointer;
    margin: 0;
    padding: 0;
}
#notifications-toggle:checked ~ .notifications-container {
    right: 0;
}



/* Widgets */
.gallery-menu {
    pointer-events: none;
    filter: saturate(0.2);
    opacity: 0.8;
}


/* Tutorial */
#page1, #page2 {
    transition: opacity 0.2s ease-in;
}
#page2 {
    z-index: 9;
}

/* Cookies */
.cookie {
    background: var(--bg-color);
    max-width: 400px;
    -webkit-box-shadow: 0 1px 3px #C0C5CC;
    -moz-box-shadow: 0 1px 3px #C0C5CC;
    box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13);
    border: 1px solid var(--color-1);
    z-index: 99;
    position: fixed;
    right: 16px;
    bottom: 16px;
}

/* GIFs */
img.gif {
    width: 50%;
}

/* Blog  */
section.blog-feed li {
  display: inline-block;
  text-decoration: none;
  padding: 16px;
}
section.blog-feed nav {
  text-align: center;
}
article {
  padding: 6px;
  margin-bottom: 16px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13);
  border: 1px solid var(--color-3);
  background: var(--bg-color);
}
article img {
  max-height: 400px;
  object-fit: cover;
}

/* Insights */
.chart-question.pmsize {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
}

/* Business Profile */
.edit-button {
    font-size: var(--font-size-s);
    position: absolute;
    bottom: -15%;
    left: var(--space-3xs);
}
.text-box {
    color: var(--text-color);
    background-color: var(--bg-color-2);
    border: 2px solid var(--sceneColor);
    outline: none;
    display: block;
    font-weight: 600;
    line-height: inherit;
    box-sizing: border-box;
    padding: var(--space-3xs) var(--space-s);
    width: 100%;
}

/* Cookies Notice */
#cookies-notice {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 320px;
    z-index: 99999;
}

/* Home */
.home-logo {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
}
.fade-in {
    animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Tags */
input[type="checkbox"].hidden:not(:checked), input[type="checkbox"].hidden:checked {
    position: absolute;
    left: -9999%;
}
input[type="checkbox"].hidden + label {
    display: inline-block;
    background-color: var(--tintColor);
    color: var(--white-color);
    padding-top: 1px;
    padding-bottom: 3px;
    padding-right: 6px;
    padding-left: 6px;
    margin: var(--space-3xs);
}
input[type="checkbox"].hidden + label:hover {
    filter: saturate(150%);
}
input[type="checkbox"].hidden:checked + label {
    border: 1px solid var(--accentColor);
}

/* New device form */
.step-status-icon {
    display: none;
    text-align: center;
}
.step-status-icon.completed {
    display: list-item;
    background-color: var(--green-color);
    color: var(--sceneColor);
    padding: 0 var(--space-2xs);
}
.autoComplete {
  display: inline-block;
  position: relative;
}
#dataList {
  display: none;
  overflow: scroll;
  left 0;
  border: 1px solid var(--sceneColor);
  position: absolute;
  width: 100%;
  background-color: var(--bg-color);
  max-height: 30vh;
}
#dataList option {
  font-family: arial;
  cursor: pointer;
  padding: 5px 10px;
}
#dataList option:hover {
  background-color: var(--bg-color-1);
}
#dataList.show {
  display: block;
}

.noLeftPadding {
    padding-left: 0;
}
.noBottomMargin {
    margin-bottom: 0;
}
.noBottomPadding {
    padding-bottom: 0;
}
.noTopMargin {
    margin-top: 0;
}