+/* === Color Picker === */
+:root {
+ --f7-color-picker-sheet-bg-color: #fff;
+ --f7-color-picker-popup-bg-color: #fff;
+ --f7-color-picker-popover-width: 350px;
+ --f7-color-picker-slider-size: 6px;
+ --f7-color-picker-slider-knob-size: 16px;
+ --f7-color-picker-bar-size: 50px;
+ --f7-color-picker-bar-min-height: 260px;
+ --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
+ --f7-color-picker-value-width: 64px;
+ --f7-color-picker-value-height: 32px;
+ --f7-color-picker-value-font-size: 16px;
+ --f7-color-picker-value-border-radius: 4px;
+ --f7-color-picker-hex-value-width: 84px;
+ --f7-color-picker-label-font-size: 14px;
+ --f7-color-picker-label-width: 10px;
+ --f7-color-picker-label-height: 14px;
+ --f7-color-picker-sb-spectrum-height: 260px;
+ --f7-color-picker-sb-spectrum-handle-size: 16px;
+ --f7-color-picker-wheel-width: 330px;
+ --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
+ --f7-color-picker-group-value-bg-color: #fff;
+ --f7-color-picker-palette-value-width: 36px;
+ --f7-color-picker-palette-value-height: 36px;
+ --f7-color-picker-initial-current-color-height: 40px;
+ --f7-color-picker-initial-current-color-border-radius: 4px;
+}
+:root .theme-dark,
+:root.theme-dark {
+ --f7-color-picker-sheet-bg-color: #171717;
+ --f7-color-picker-popup-bg-color: #171717;
+ --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
+ --f7-color-picker-group-bg-color: #000;
+ --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
+}
+.color-picker {
+ overflow: hidden;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.color-picker.color-picker-inline,
+.color-picker-popover .color-picker,
+.color-picker-popup .color-picker {
+ position: relative;
+}
+.color-picker-sheet-modal {
+ background: var(--f7-color-picker-sheet-bg-color);
+}
+.color-picker-sheet-modal:before {
+ z-index: 600;
+}
+.color-picker-sheet-modal .sheet-modal-inner {
+ margin-bottom: var(--f7-safe-area-bottom);
+}
+.color-picker-popup .page {
+ background: var(--f7-color-picker-popup-bg-color);
+}
+.color-picker-popup .page-content {
+ padding-bottom: var(--f7-safe-area-bottom);
+}
+.color-picker-popover .color-picker,
+.color-picker-popup .color-picker,
+.color-picker-page .color-picker {
+ height: 100%;
+}
+.color-picker-popover .color-picker .toolbar,
+.color-picker-popup .color-picker .toolbar,
+.color-picker-page .color-picker .toolbar {
+ position: absolute;
+}
+.color-picker-popover {
+ width: var(--f7-color-picker-popover-width);
+ max-width: 90vw;
+ max-height: 80vh;
+}
+.color-picker-popover .color-picker {
+ max-height: 80vh;
+}
+.color-picker-popover .toolbar-top {
+ border-top-left-radius: var(--f7-popover-border-radius);
+ border-top-right-radius: var(--f7-popover-border-radius);
+}
+.color-picker-popover .color-picker-module-palette {
+ overflow: hidden;
+ flex-shrink: 0;
+}
+.color-picker-popover .color-picker-module-palette:first-child {
+ border-top-left-radius: var(--f7-popover-border-radius);
+ border-top-right-radius: var(--f7-popover-border-radius);
+}
+.color-picker-popover .color-picker-module-palette:last-child {
+ border-bottom-left-radius: var(--f7-popover-border-radius);
+ border-bottom-right-radius: var(--f7-popover-border-radius);
+}
+.color-picker-popover .color-picker-module-palette:first-child:last-child {
+ border-radius: var(--f7-popover-border-radius);
+}
+.color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.color-picker-popup .page-content,
+.color-picker-popover .page-content,
+.color-picker-sheet-modal .page-content,
+.color-picker-page .page-content {
+ display: flex;
+ justify-content: flex-start;
+ align-items: stretch;
+ flex-direction: column;
+ overflow-x: hidden;
+}
+.color-picker-module {
+ margin-top: 5px;
+}
+.color-picker-module:last-child {
+ margin-bottom: 5px;
+}
+.color-picker-module-sb-spectrum,
+.color-picker-module-hs-spectrum {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+.color-picker-module-sb-spectrum:first-child,
+.color-picker-module-hs-spectrum:first-child {
+ margin-top: 10px;
+}
+.color-picker-module-sb-spectrum .color-picker-sb-spectrum,
+.color-picker-module-hs-spectrum .color-picker-sb-spectrum,
+.color-picker-module-sb-spectrum .color-picker-hs-spectrum,
+.color-picker-module-hs-spectrum .color-picker-hs-spectrum {
+ border-radius: 4px;
+ height: var(--f7-color-picker-sb-spectrum-height);
+}
+.color-picker-sb-spectrum {
+ background-color: #000;
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
+ position: relative;
+}
+.color-picker-hs-spectrum {
+ position: relative;
+ background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+}
+.color-picker-hs-spectrum:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
+}
+.color-picker-sb-spectrum-handle,
+.color-picker-hs-spectrum-handle {
+ width: 4px;
+ height: 4px;
+ position: absolute;
+ left: -2px;
+ top: -2px;
+ z-index: 1;
+}
+.color-picker-sb-spectrum-handle:after,
+.color-picker-hs-spectrum-handle:after {
+ background-color: inherit;
+ content: '';
+ position: absolute;
+ width: var(--f7-color-picker-sb-spectrum-handle-size);
+ height: var(--f7-color-picker-sb-spectrum-handle-size);
+ border: 1px solid #fff;
+ border-radius: 50%;
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+ box-sizing: border-box;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transition: 150ms;
+ transition-property: transform;
+ transform-origin: center;
+}
+.color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
+.color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
+.color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
+.color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
+ transform: scale(1.5) translate(-33.333%, -33.333%);
+}
+.color-picker-module-wheel {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+.color-picker-wheel {
+ position: relative;
+ width: var(--f7-color-picker-wheel-width);
+ max-width: 100%;
+ height: auto;
+ font-size: 0;
+ margin-left: auto;
+ margin-right: auto;
+}
+.color-picker-wheel svg {
+ width: 100%;
+ height: auto;
+}
+.color-picker-wheel .color-picker-wheel-handle {
+ width: calc(100% / 6);
+ height: calc(100% / 6);
+ position: absolute;
+ box-sizing: border-box;
+ border: 2px solid #fff;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+ background: red;
+ border-radius: 50%;
+ left: 0;
+ top: 0;
+}
+.color-picker-wheel .color-picker-sb-spectrum {
+ width: 45%;
+ height: 45%;
+ left: 50%;
+ top: 50%;
+ transform: translate3d(-50%, -50%, 0);
+ position: absolute;
+}
+.color-picker-slider-wrap {
+ display: flex;
+ align-items: center;
+ margin-bottom: 2px;
+}
+.color-picker-slider-wrap + .color-picker-slider-wrap {
+ margin-top: 5px;
+}
+.color-picker-hex-wrap {
+ justify-content: space-between;
+ display: flex;
+ align-items: center;
+}
+.color-picker-slider-label,
+.color-picker-hex-label {
+ font-size: var(--f7-color-picker-label-font-size);
+ width: var(--f7-color-picker-label-size);
+ flex-shrink: 0;
+ margin-left: 12px;
+}
+.color-picker-hex-label {
+ width: auto;
+}
+.color-picker-bar-value,
+.color-picker-slider-value,
+.color-picker-hex-value {
+ width: var(--f7-color-picker-value-width);
+ height: var(--f7-color-picker-value-height);
+ background: var(--f7-color-picker-value-bg-color);
+ border-radius: var(--f7-color-picker-value-border-radius);
+ text-align: center;
+ font-size: var(--f7-color-picker-value-font-size);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ margin-right: 10px;
+}
+.color-picker-bar-value input,
+.color-picker-slider-value input,
+.color-picker-hex-value input {
+ width: 100%;
+ height: 100%;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: none;
+ outline: 0;
+ background: transparent;
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ text-align: center;
+ display: block;
+ border-radius: 4px;
+}
+.color-picker-bar-value input::-webkit-inner-spin-button,
+.color-picker-slider-value input::-webkit-inner-spin-button,
+.color-picker-hex-value input::-webkit-inner-spin-button,
+.color-picker-bar-value input::-webkit-outer-spin-button,
+.color-picker-slider-value input::-webkit-outer-spin-button,
+.color-picker-hex-value input::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ margin: 0;
+ display: none;
+}
+.color-picker-hex-value {
+ width: var(--f7-color-picker-hex-value-width);
+}
+.color-picker-hex-value:first-child {
+ margin-right: auto;
+}
+.color-picker-slider {
+ --f7-range-bar-active-bg-color: transparent;
+ --f7-range-bar-size: var(--f7-color-picker-slider-size);
+ --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
+ --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
+ --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+.color-picker-slider .range-knob {
+ transition-duration: 200ms;
+ transition-property: transform;
+}
+.color-picker-slider .range-knob:after {
+ width: 30px;
+ height: 30px;
+ margin-left: -15px;
+ margin-top: -15px;
+}
+.color-picker-slider .range-knob-active-state .range-knob {
+ transform: scale(1.5);
+}
+.md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
+ background: var(--f7-range-knob-color) !important;
+ border: none;
+}
+.color-picker-module-rgb-bars {
+ display: flex;
+ justify-content: space-around;
+ justify-content: space-evenly;
+ align-items: stretch;
+ height: 100%;
+ min-height: var(--f7-color-picker-bar-min-height);
+ padding-bottom: 10px;
+ padding-top: 10px;
+ box-sizing: border-box;
+}
+.color-picker-bar-wrap {
+ display: flex;
+ align-items: center;
+ flex-direction: column-reverse;
+}
+.color-picker-bar {
+ --f7-range-bar-active-bg-color: transparent;
+ --f7-range-bar-size: var(--f7-color-picker-bar-size);
+ --f7-range-bar-border-radius: 2px;
+ --f7-range-knob-size: 6px;
+ --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
+ --f7-range-knob-color: #fff;
+}
+.color-picker-bar .range-knob {
+ transition-duration: 0ms;
+ transition-property: transform;
+ border-radius: 3px;
+}
+.color-picker-bar .range-knob-wrap {
+ height: 6px;
+ width: calc(var(--f7-color-picker-bar-size) - 4px);
+ margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
+}
+.color-picker-bar .range-knob-active-state .range-knob {
+ transform: scale(1);
+}
+.md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
+ background: var(--f7-range-knob-color) !important;
+ border: none;
+}
+.color-picker-bar-label {
+ font-size: var(--f7-color-picker-label-size);
+ margin-top: 12px;
+ line-height: 1;
+ height: var(--f7-color-picker-label-height);
+ flex-shrink: 0;
+}
+.color-picker-bar-value {
+ margin-left: 0;
+ margin-bottom: 10px;
+}
+.color-picker-slider-alpha {
+ --f7-range-knob-color: #fff;
+}
+.color-picker-slider-alpha .range-bar {
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
+ background-size: 100% 100%, 6px 3px, 6px 3px;
+ background-position: 0 0, 0px 3px, 0 0;
+ background-repeat: repeat-y, repeat-x, repeat-x;
+}
+.color-picker-slider-hue .range-bar {
+ background-image: linear-gradient(to left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
+}
+.color-picker-slider-brightness .range-bar {
+ background-image: linear-gradient(to left, #000, #fff);
+}
+.color-picker-module-palette {
+ margin-top: 15px;
+}
+.color-picker-module-palette:first-child {
+ margin-top: 0;
+}
+.color-picker-module-palette:last-child {
+ margin-bottom: 0;
+}
+.color-picker-module-palette:first-child:last-child {
+ margin: 0;
+}
+.color-picker-palette {
+ display: flex;
+ flex-wrap: wrap;
+}
+.color-picker-palette-row {
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+}
+.color-picker-palette-row .color-picker-palette-value {
+ width: 100%;
+}
+.color-picker-palette-value {
+ width: var(--f7-color-picker-palette-value-width);
+ height: var(--f7-color-picker-palette-value-height);
+ cursor: pointer;
+}
+.color-picker-module-initial-current-colors,
+.color-picker-module-current-color {
+ margin-left: 10px;
+ margin-right: 10px;
+ border-radius: var(--f7-color-picker-initial-current-color-border-radius);
+ overflow: hidden;
+ flex-shrink: 0;
+}
+.color-picker-initial-color,
+.color-picker-current-color {
+ height: var(--f7-color-picker-initial-current-color-height);
+}
+.color-picker-initial-current-colors {
+ display: flex;
+}
+.color-picker-initial-current-colors .color-picker-initial-color,
+.color-picker-initial-current-colors .color-picker-current-color {
+ width: 50%;
+}
+.color-picker-module-rgb-sliders,
+.color-picker-module-hsb-sliders,
+.color-picker-module-alpha-slider,
+.color-picker-module-hue-slider,
+.color-picker-module-brightness-slider,
+.color-picker-module-hex {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+.color-picker-grouped-modules .color-picker-module-rgb-sliders,
+.color-picker-grouped-modules .color-picker-module-hsb-sliders,
+.color-picker-grouped-modules .color-picker-module-alpha-slider,
+.color-picker-grouped-modules .color-picker-module-hue-slider,
+.color-picker-grouped-modules .color-picker-module-brightness-slider,
+.color-picker-grouped-modules .color-picker-module-hex {
+ background: var(--f7-color-picker-group-bg-color);
+ padding: 5px;
+ border-radius: 4px;
+ margin-top: 15px;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+.color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
+.color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
+.color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-hex:last-child {
+ margin-bottom: 15px;
+}
+.color-picker-grouped-modules .color-picker-slider-value,
+.color-picker-grouped-modules .color-picker-hex-value {
+ background: var(--f7-color-picker-group-value-bg-color);
+}
+.color-picker-grouped-modules .color-picker-slider-label,
+.color-picker-grouped-modules .color-picker-hex-label {
+ margin-right: 5px;
+}
+.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
+.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
+.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
+.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
+.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
+ margin-right: 5px;
+}
+.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
+.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
+ margin-left: 5px;
+}
+/* === Treeview === */
+:root {
+ --f7-treeview-toggle-size: 24px;
+ --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
+ --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
+ --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
+ --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
+ --f7-treeview-children-offset: 29px;
+ --f7-treeview-label-font-weight: 400;
+ --f7-treeview-label-text-color: inherit;
+ --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
+ /*
+ --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
+ */
+ --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
+ --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
+}
+:root .theme-dark,
+:root.theme-dark {
+ --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
+ --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
+ --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
+ --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
+ --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
+ --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
+ --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
+}
+.ios {
+ --f7-treeview-item-height: 34px;
+ --f7-treeview-item-padding-left: 15px;
+ --f7-treeview-item-padding-right: 15px;
+ --f7-treeview-label-font-size: 17px;
+ --f7-treeview-icon-size: 24px;
+}
+.md {
+ --f7-treeview-item-height: 34px;
+ --f7-treeview-item-padding-left: 16px;
+ --f7-treeview-item-padding-right: 16px;
+ --f7-treeview-label-font-size: 16px;
+ --f7-treeview-icon-size: 24px;
+}
+.aurora {
+ --f7-treeview-item-height: 28px;
+ --f7-treeview-item-padding-left: 15px;
+ --f7-treeview-item-padding-right: 15px;
+ --f7-treeview-label-font-size: 14px;
+ --f7-treeview-icon-size: 20px;
+}
+.treeview-item-root {
+ padding-right: var(--f7-treeview-item-padding-left);
+ padding-left: var(--f7-treeview-item-padding-right);
+ height: var(--f7-treeview-item-height);
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+.treeview-item-content {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+.treeview-item-content > i,
+.treeview-item-content > .f7-icons,
+.treeview-item-content > .material-icons {
+ width: var(--f7-treeview-icon-size);
+ height: var(--f7-treeview-icon-size);
+ font-size: var(--f7-treeview-icon-size);
+ color: var(--f7-treeview-icon-color);
+}
+.treeview-item-content:first-child {
+ margin-right: calc(var(--f7-treeview-toggle-size) + 5px);
+}
+.treeview-item-content > * + * {
+ margin-right: 5px;
+}
+.treeview-item-label {
+ font-size: var(--f7-treeview-label-font-size);
+ font-weight: var(--f7-treeview-label-font-weight);
+ color: var(--f7-treeview-label-text-color);
+}
+.treeview-toggle {
+ width: var(--f7-treeview-toggle-size);
+ height: var(--f7-treeview-toggle-size);
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: rgba(0, 0, 0, 0);
+ transition-duration: 200ms;
+ position: relative;
+ margin-left: 5px;
+}
+.treeview-toggle.active-state {
+ background-color: var(--f7-treeview-toggle-pressed-bg-color);
+}
+.treeview-toggle:after {
+ transition-duration: 200ms;
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ transform: translate(-50%, -50%);
+ border-right: 6px solid var(--f7-treeview-toggle-color);
+}
+.treeview-toggle-hidden {
+ opacity: 0;
+ pointer-events: none;
+ visibility: hidden;
+}
+.treeview-preloader {
+ --f7-preloader-size: var(--f7-treeview-toggle-size);
+ margin-left: calc(-1 * var(--f7-treeview-toggle-size));
+}
+.treeview-item-children {
+ display: none;
+}
+.treeview-item-opened > .treeview-item-children {
+ display: block;
+}
+.treeview-item-opened > .treeview-item-root .treeview-toggle:after {
+ transform: translate(-50%, -50%) rotate(-90deg);
+}
+a.treeview-item-root {
+ color: var(--f7-treeview-label-text-color);
+}
+.treeview-item-selectable > .treeview-item-root,
+.treeview-item-selectable.treeview-item-root {
+ cursor: pointer;
+ transition-duration: 150ms;
+}
+a.treeview-item-root {
+ transition-duration: 150ms;
+}
+a.treeview-item-root.active-state {
+ background: var(--f7-treeview-link-pressed-bg-color);
+}
+.treeview-item-toggle > .treeview-item-root,
+.treeview-item-toggle.treeview-item-root {
+ cursor: pointer;
+}
+.treeview-item-selected > .treeview-item-root,
+.treeview-item-selected.treeview-item-root {
+ background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
+}
+.treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
+}
+.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
+ padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
+}
+.aurora .treeview-toggle:hover {
+ background-color: var(--f7-treeview-toggle-hover-bg-color);
+}
+.aurora .treeview-toggle.active-state {
+ background-color: var(--f7-treeview-toggle-pressed-bg-color);
+}
+.aurora .treeview-item-selectable > .treeview-item-root:hover,
+.aurora .treeview-item-selectable.treeview-item-root:hover {
+ background: var(--f7-treeview-selectable-hover-bg-color);
+}
+.aurora a.treeview-item-root:hover {
+ background: var(--f7-treeview-link-hover-bg-color);
+}
+.aurora a.treeview-item-root.active-state {
+ background: var(--f7-treeview-link-pressed-bg-color);
+}
+.aurora .treeview-item-selected > .treeview-item-root:hover,
+.aurora .treeview-item-selected.treeview-item-root:hover {
+ background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
+}