html {
    font-size: 16px;
    line-height: 1.4;
}

body {
    font-style: normal;
    color: #160d16;
    background: #f1f0f1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 1.3rem;
    height: 1.3rem;
}

.icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.icon-red {
    fill: var(--color-red);
}

.flat-visible {
    display: none !important;
}

.bold {
    font-weight: bold;
}

[data-tap] {
    cursor: pointer; /* show pointer cursor on hover */
    touch-action: manipulation; /* remove 300ms delay */
    -webkit-tap-highlight-color: transparent; /* remove grey highlight on tap */
    -webkit-touch-callout: none; /* no "copy" callout on long press iOS */
    user-select: none; /* no text selection */
    -webkit-user-select: none; /* no text selection iOS */
    outline: none; /* no outline on tap */
}

.row-cells {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0;
}

.row-cells > * {
    flex: 1;
    text-align: center;
}

.toggle-animation {
    transform-origin: top center;
    transition: initial;
}

.toggle-animation.animation-pop {
    transform: scale(0);
}

.toggle-animation.animation-pop.visible {
    transform: scale(1);
}

:root {
    --white: #ffffff;
    --gray-1: #f3f9ff; /* rgb(243, 249, 255) */
    --gray-2: #e7edf5; /* rgb(231, 237, 245) */
    --gray-3: #dbe0e9; /* rgb(219, 224, 233) */
    --gray-4: #ced3db; /* rgb(206, 211, 219) */
    --gray-5: #c2c7cf; /* rgb(194, 199, 207) */
    --gray-6: #b6bbc2; /* rgb(182, 187, 194) */
    --gray-7: #aaafb6; /* rgb(170, 175, 182) */
    --gray-8: #9ea2a9; /* rgb(158, 162, 169) */
    --gray-9: #92969d; /* rgb(146, 150, 157) */
    --gray-10: #868a90; /* rgb(134, 138, 144) */
    --gray-11: #797d83; /* rgb(121, 125, 131) */
    --gray-12: #6d7176; /* rgb(109, 113, 118) */
    --gray-13: #61656a; /* rgb(97, 101, 106) */
    --gray-14: #55585d; /* rgb(85, 88, 93) */
    --gray-15: #494c51; /* rgb(73, 76, 81) */
    --gray-16: #3d4044; /* rgb(61, 64, 68) */
    --gray-17: #313438; /* rgb(49, 52, 56) */
    --gray-18: #24272a; /* rgb(36, 39, 42) */
    --gray-19: #181a1e; /* rgb(24, 26, 30) */
    --gray-20: #0c0e11; /* rgb(12, 14, 17) */
    --black: #000000;
}

.theme-light {
    --gray-muted: var(--gray-9);
    --list-alone-background: var(--gray-1);
    --list-separator-color: var(--gray-2);
    --list-normal-element-color: var(--gray-18);
    --list-small-element-color: var(--gray-8);
    --list-checkbox-background: var(--gray-5);
    --list-checkbox-foreground: var(--gray-1);
    --list-checkbox-checked-background: var(--color-green);
    --list-icon-background: var(--gray-3);
    --list-label-background: var(--gray-4);
}

.theme-dark {
    --gray-muted: var(--gray-10);
    --list-alone-background: var(--gray-18);
    --list-separator-color: var(--gray-17);
    --list-normal-element-color: var(--gray-1);
    --list-small-element-color: var(--gray-11);
    --list-checkbox-background: var(--gray-13);
    --list-checkbox-foreground: var(--gray-1);
    --list-checkbox-checked-background: var(--color-green);
    --list-icon-background: var(--gray-7);
    --list-label-background: var(--gray-15);
}

/* Common for both types */

[data-slider] {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}

[data-slider] > div {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* Specific for JS type */

[data-slider].slider-type-js {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
}

[data-slider].slider-type-js > div {
}

/* Specific for CSS type */

[data-slider].slider-type-css {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

[data-slider].slider-type-css > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/** App preloader *******************************************************/

#app-preloader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

#app-preloader .spinner {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

/** Spinner *************************************************************/

.spinner {
    font-size: 2rem;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    position:relative;
}

.spinner-blade {
    position: absolute;
    left: 0.4629em;
    bottom: 0;
    width: 0.074em;
    height: 0.2777em;
    border-radius: 0.5em;
    background-color: transparent;
    transform-origin: center -0.2222em;
    -webkit-animation: spinner-fade 1s infinite linear;
    animation: spinner-fade 1s infinite linear;
}

.spinner-blade:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    transform: rotate(0deg);
}

.spinner-blade:nth-child(2) {
    -webkit-animation-delay: 0.083s;
    animation-delay: 0.083s;
    transform: rotate(30deg);
}

.spinner-blade:nth-child(3) {
    -webkit-animation-delay: 0.166s;
    animation-delay: 0.166s;
    transform: rotate(60deg);
}

.spinner-blade:nth-child(4) {
    -webkit-animation-delay: 0.249s;
    animation-delay: 0.249s;
    transform: rotate(90deg);
}

.spinner-blade:nth-child(5) {
    -webkit-animation-delay: 0.332s;
    animation-delay: 0.332s;
    transform: rotate(120deg);
}

.spinner-blade:nth-child(6) {
    -webkit-animation-delay: 0.415s;
    animation-delay: 0.415s;
    transform: rotate(150deg);
}

.spinner-blade:nth-child(7) {
    -webkit-animation-delay: 0.498s;
    animation-delay: 0.498s;
    transform: rotate(180deg);
}

.spinner-blade:nth-child(8) {
    -webkit-animation-delay: 0.581s;
    animation-delay: 0.581s;
    transform: rotate(210deg);
}

.spinner-blade:nth-child(9) {
    -webkit-animation-delay: 0.664s;
    animation-delay: 0.664s;
    transform: rotate(240deg);
}

.spinner-blade:nth-child(10) {
    -webkit-animation-delay: 0.747s;
    animation-delay: 0.747s;
    transform: rotate(270deg);
}

.spinner-blade:nth-child(11) {
    -webkit-animation-delay: 0.83s;
    animation-delay: 0.83s;
    transform: rotate(300deg);
}

.spinner-blade:nth-child(12) {
    -webkit-animation-delay: 0.913s;
    animation-delay: 0.913s;
    transform: rotate(330deg);
}

@-webkit-keyframes spinner-fade {
    0% {
        background-color: #8a8a85;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes spinner-fade {
    0% {
        background-color: #8a8a85;
    }
    100% {
        background-color: transparent;
    }
}

/* Universal panel navigation */
#panels-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

#panels-container {
    height: 100%;
}

.panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f1f0f1;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.panel-back {
    cursor: pointer;
    display: flex;
    align-items: center;
}