/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

:focus {
  outline-color: transparent;
  outline-style: none;
}

.topcoat-select {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
}

.topcoat-select {
  vertical-align: top;
  outline: none;
}

.topcoat-select {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.topcoat-select {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
}

.topcoat-select {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.topcoat-select:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.topcoat-select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.topcoat-select::-ms-expand {
  display: none;
}

.topcoat-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  appearance: button;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 0.15rem 1rem 0.15rem 0.3rem;
  font-size: 12px;
  font-weight: 400;
  height: 1.4rem;
  letter-spacing: 1px;
  color: var(--button-text-color);
  text-shadow: 0 -1px var(--button-text-shadow-color);
  border-radius: 6px;
  background-color: var(--button-bg-color);
  box-shadow: inset 0 1px var(--button-shadow-color);
  border: 1px solid var(--button-border-color);
  background-image: url('../img/drop-down-triangle-dark.png');
  background-repeat: no-repeat;
  background-position: center right;
}

.topcoat-select:hover {
  background-color: var(--hover-button-bg-color);
}

.topcoat-select:active {
  background-color: var(--active-select-bg-color);
/* box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.05); */
}

.topcoat-select:focus {
  border: 1px solid hsla(227, 100%, 50%, 1);
/*  box-shadow: 0 0 0 2px hsla(208, 82%, 69%, 1); */
  outline: 0;
}
/*!
 * jQuery UI CSS Framework 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*!
 * jQuery UI Selectable 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
/*!
 * jQuery UI Selectmenu 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/selectmenu/#theming
 */
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
/*!
 * jQuery UI Slider 1.13.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/slider/#theming
 */
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}/*!
 * OverlayScrollbars
 * https://github.com/KingSora/OverlayScrollbars
 *
 * Version: 1.13.0
 *
 * Copyright KingSora | Rene Haas.
 * https://github.com/KingSora
 *
 * Released under the MIT license.
 * Date: 02.08.2020
 */

/*
OVERLAY SCROLLBARS CORE:
*/

html.os-html,
html.os-html > .os-host {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    height: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    position: absolute !important; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
}
html.os-html > .os-host > .os-padding {
    position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
}
body.os-dragging,
body.os-dragging * {
    cursor: default;
}
.os-host,
.os-host-textarea {
    position: relative;
    overflow: visible !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start;
}
.os-host-flexbox {
    overflow: hidden !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.os-host-flexbox > .os-size-auto-observer {
    height: inherit !important;
}
.os-host-flexbox > .os-content-glue {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.os-host-flexbox > .os-size-auto-observer,
.os-host-flexbox > .os-content-glue {
    min-height: 0;
    min-width: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
}
#os-dummy-scrollbar-size {
    position: fixed;
    opacity: 0;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    visibility: hidden;
    overflow: scroll;
    height: 500px;
    width: 500px;
}
#os-dummy-scrollbar-size > div {
    width: 200%;
    height: 200%; 
    margin: 10px 0;
}
/* fix restricted measuring */
#os-dummy-scrollbar-size:before,
#os-dummy-scrollbar-size:after,
.os-content:before,
.os-content:after {
    content: '';
    display: table;
    width: 0.01px;
    height: 0.01px;
    line-height: 0;
    font-size: 0;
    flex-grow: 0;
    flex-shrink: 0;
    visibility: hidden;
}
#os-dummy-scrollbar-size,
.os-viewport {
    -ms-overflow-style: scrollbar !important;
}
.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size,
.os-viewport-native-scrollbars-invisible.os-viewport {
    scrollbar-width: none !important;
}
.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,
.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,
.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,
.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    visibility: hidden !important;
    background: transparent !important;
}
.os-content-glue {
    box-sizing: inherit;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none;
}
.os-padding {
    box-sizing: inherit;
    direction: inherit;
    position: absolute;
    overflow: visible;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
	z-index: 0;
}
.os-host-overflow > .os-padding {
    overflow: hidden;
}
.os-viewport {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    outline: none !important;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
.os-content-arrange {
    position: absolute;
    z-index: -1;
    min-height: 1px;
    min-width: 1px;
    pointer-events: none;
}
.os-content {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    height: 100%;
    width: 100%;
    visibility: visible;
}
.os-content > .os-textarea {
    box-sizing: border-box !important;
    direction: inherit !important;
    background: transparent !important;
    outline: 0px none transparent !important;
    overflow: hidden !important;
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0px !important;
    float: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    border: none !important;
    resize: none !important;
    -webkit-transform: none !important;
            transform: none !important;
    max-width: none !important;
    max-height: none !important;
    box-shadow: none !important;
    -webkit-perspective: none !important;
            perspective: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    clip: auto !important;
    vertical-align: baseline !important;
    padding: 0px;
}
.os-host-rtl > .os-padding > .os-viewport > .os-content > .os-textarea {
    right: 0 !important;
}
.os-content > .os-textarea-cover {
    z-index: -1;
    pointer-events: none;
}
.os-content > .os-textarea[wrap='off'] {
    white-space: pre !important;
    margin: 0px !important;
}
.os-text-inherit {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-variant: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    text-indent: inherit;
    text-align: inherit;
    text-shadow: inherit;
    text-overflow: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    line-height: inherit;
    unicode-bidi: inherit;
    direction: inherit;
    color: inherit;
    cursor: text;
}
.os-resize-observer,
.os-resize-observer-host {
    box-sizing: inherit;
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.os-resize-observer-host {
    padding: inherit;
    border: inherit;
    border-color: transparent;
    border-style: solid;
    box-sizing: border-box;
}
.os-resize-observer-host.observed {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.os-resize-observer-host > .os-resize-observer,
.os-resize-observer-host.observed > .os-resize-observer {
    height: 200%;
    width: 200%;
    padding: inherit;
    border: inherit;
    margin: 0;
    display: block;
    box-sizing: content-box;
}
.os-resize-observer-host.observed > .os-resize-observer,
.os-resize-observer-host.observed > .os-resize-observer:before {
    display: flex;
    position: relative;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    box-sizing: border-box;
}
.os-resize-observer-host.observed > .os-resize-observer:before {
    content: '';
    box-sizing: content-box;
    padding: inherit;
    border: inherit;
    margin: 0;
}
.os-size-auto-observer {
    box-sizing: inherit !important;
    height: 100%;
    width: inherit;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    -webkit-box-flex: inherit;
        -ms-flex-positive: inherit;
            flex-grow: inherit;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
}
.os-size-auto-observer > .os-resize-observer {
    width: 1000%;
    height: 1000%;
    min-height: 1px;
    min-width: 1px;
}
.os-resize-observer-item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    direction: ltr !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: none !important;
    flex: none !important;
}
.os-resize-observer-item-final {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: none !important;
    flex: none !important;
}
.os-resize-observer {
    -webkit-animation-duration: 0.001s;
    animation-duration: 0.001s;
    -webkit-animation-name: os-resize-observer-dummy-animation;
    animation-name: os-resize-observer-dummy-animation;
}
object.os-resize-observer {
    box-sizing: border-box !important;
}
@-webkit-keyframes os-resize-observer-dummy-animation {
    from {
        z-index: 0;
    }
    to {
        z-index: -1;
    }
}
@keyframes os-resize-observer-dummy-animation {
    from {
        z-index: 0;
    }
    to {
        z-index: -1;
    }
}

/*
CUSTOM SCROLLBARS AND CORNER CORE:
*/

.os-host-transition > .os-scrollbar,
.os-host-transition > .os-scrollbar-corner {
    -webkit-transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
    transition: opacity 0.3s, visibility 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
html.os-html > .os-host > .os-scrollbar {
    position: absolute; /* could be position: fixed; but it causes issues on iOS (-webkit-overflow-scrolling: touch) */
    z-index: 999999; /* highest z-index of the page */
}
.os-scrollbar,
.os-scrollbar-corner {
    position: absolute;
    opacity: 1;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    z-index: 1;
}
.os-scrollbar-corner {
    bottom: 0;
    right: 0;
}
.os-scrollbar {
    pointer-events: none;
}
.os-scrollbar-track {
    pointer-events: auto;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0 !important;
    border: none !important;
}
.os-scrollbar-handle {
    pointer-events: auto;
    position: absolute;
    width: 100%;
    height: 100%;
}
.os-scrollbar-handle-off,
.os-scrollbar-track-off {
    pointer-events: none;
}
.os-scrollbar.os-scrollbar-unusable,
.os-scrollbar.os-scrollbar-unusable * {
    pointer-events: none !important;
}
.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle {
    opacity: 0 !important;
}
.os-scrollbar-horizontal {
    bottom: 0;
    left: 0;
}
.os-scrollbar-vertical {
    top: 0;
    right: 0;
}
.os-host-rtl > .os-scrollbar-horizontal {
    right: 0;
}
.os-host-rtl > .os-scrollbar-vertical {
    right: auto;
    left: 0;
}
.os-host-rtl > .os-scrollbar-corner {
    right: auto;
    left: 0;
}
.os-scrollbar-auto-hidden,
.os-padding + .os-scrollbar-corner,
.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-corner,
.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal,
.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-corner,
.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical,
.os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical + .os-scrollbar-corner,
.os-scrollbar-horizontal + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner,
.os-scrollbar-horizontal.os-scrollbar-auto-hidden + .os-scrollbar-vertical.os-scrollbar-auto-hidden + .os-scrollbar-corner {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.os-scrollbar-corner-resize-both {
    cursor: nwse-resize;
}
.os-host-rtl > .os-scrollbar-corner-resize-both {
    cursor: nesw-resize;
}
.os-scrollbar-corner-resize-horizontal {
    cursor: ew-resize;
}
.os-scrollbar-corner-resize-vertical {
    cursor: ns-resize;
}
.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize {
    cursor: default;
}
.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
    top: 0;
    bottom: 0;
}
.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal,
.os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
    right: 0;
    left: 0;
}
.os-scrollbar:hover,
.os-scrollbar-corner.os-scrollbar-corner-resize {
    opacity: 1 !important;
    visibility: visible !important;
}
.os-scrollbar-corner.os-scrollbar-corner-resize {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    pointer-events: auto !important;
}
.os-host-rtl > .os-scrollbar-corner.os-scrollbar-corner-resize {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.os-host-overflow {
    overflow: hidden !important;
}
.os-host-overflow-x {
} 
.os-host-overflow-y {
} 

/*
THEMES:
*/

/* NONE THEME: */
.os-theme-none > .os-scrollbar-horizontal,
.os-theme-none > .os-scrollbar-vertical,
.os-theme-none > .os-scrollbar-corner {
    display: none !important;
}
.os-theme-none > .os-scrollbar-corner-resize {
    display: block !important;
    min-width: 10px;
    min-height: 10px;
}
/* DARK & LIGHT THEME: */
.os-theme-dark > .os-scrollbar-horizontal,
.os-theme-light > .os-scrollbar-horizontal {
    right: 10px;
    height: 10px;
}
.os-theme-dark > .os-scrollbar-vertical,
.os-theme-light > .os-scrollbar-vertical {
    bottom: 10px;
    width: 10px;
}
.os-theme-dark.os-host-rtl > .os-scrollbar-horizontal,
.os-theme-light.os-host-rtl > .os-scrollbar-horizontal {
    left: 10px;
    right: 0;
}
.os-theme-dark > .os-scrollbar-corner,
.os-theme-light > .os-scrollbar-corner {
    height: 10px;
    width: 10px;
}
.os-theme-dark > .os-scrollbar-corner,
.os-theme-light > .os-scrollbar-corner {
    background-color: transparent;
}
.os-theme-dark > .os-scrollbar,
.os-theme-light > .os-scrollbar {
    padding: 2px;
    box-sizing: border-box;
    background: transparent;
}
.os-theme-dark > .os-scrollbar.os-scrollbar-unusable,
.os-theme-light > .os-scrollbar.os-scrollbar-unusable {
    background: transparent;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.os-theme-light > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: 30px;
}
.os-theme-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: 30px;
}
.os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
.os-theme-light > .os-scrollbar > .os-scrollbar-track {
    border-radius: 10px;
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(0, 0, 0, 0.4);
}
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 255, 255, 0.4);
}
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(0, 0, 0, .55);
}
.os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 255, 255, .55);
}
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: rgba(0, 0, 0, .7);
}
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
    background: rgba(255, 255, 255, .7);
}
.os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
.os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
}
.os-theme-dark.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-dark.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before,
.os-theme-light.os-host-scrollbar-horizontal-hidden > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-light.os-host-scrollbar-vertical-hidden > .os-scrollbar-vertical .os-scrollbar-handle:before {
    display: none;
}
.os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
.os-theme-light > .os-scrollbar-horizontal .os-scrollbar-handle:before {
    top: -6px;
    bottom: -2px;
}
.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
    left: -6px;
    right: -2px;
}
.os-host-rtl.os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,
.os-host-rtl.os-theme-light > .os-scrollbar-vertical .os-scrollbar-handle:before {
    right: -6px;
    left: -2px;
}
/*
os-theme-block-dark
*/

.os-theme-block-dark > .os-scrollbar {
    padding: 0;
}
.os-theme-block-dark > .os-scrollbar-horizontal {
    right: 16px;
    height: 16px;
}
.os-theme-block-dark > .os-scrollbar-vertical {
    bottom: 16px;
    width: 16px;
}
.os-theme-block-dark.os-host-rtl > .os-scrollbar-horizontal {
    left: 16px;
    right: 0;
}
.os-theme-block-dark > .os-scrollbar-corner {
    height: 16px;
    width: 16px;
    background-color: transparent;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
    left: 4px;
    right: 4px;
    height: 2px;
    top: 50%;
    margin-top: -1px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    top: 4px;
    bottom: 4px;
    width: 2px;
    left: 50%;
    margin-left: -1px;
}
.os-theme-block-dark > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-horizontal.active > .os-scrollbar-track:before {
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    margin-top: 0;
}
.os-theme-block-dark > .os-scrollbar-vertical:hover > .os-scrollbar-track:before,
.os-theme-block-dark > .os-scrollbar-vertical.active > .os-scrollbar-track:before {
    top: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    margin-left: 0;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: transparent;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    min-width: 100px;
    max-width: 100px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    min-height: 100px;
    max-height: 100px;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: #6e6e6e;
}
.os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: #454545;
}
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    background: #000;
}
.os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    height: 100%;
    min-width: 16px;
}
.os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    width: 100%;
    min-height: 16px;
}
.os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: background 0.3s;
}
.os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track:before {
    transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
@charset "utf-8";
/* yarn gulp copy-css */

:root {
  overflow-anchor: none;
  scroll-behavior: smooth;
}

body.light-theme {
  --main-bg-color: #f0f0f0;
  --main-bg-color-deep: #8c8a8a;
  --main-bg-color-props: #dbdbdb;
  --main-text-color-deep: hsla(180, 2%, 20%, 1);
  --button-bg-color: #e5e9e8;
  --active-button-bg-color: #d2d6d6;
  --hover-button-bg-color: #eff1f1; /* #d2d6d6; */
  --props-text-color: #454545;
  --wheel-text-color: #151515;
  --props-header-text-color: #454545;
  --button-text-color: #000000;
  --button-text-inactive-color: #101010;
  --button-text-hover-color: #78d3f5; /* blue */
  --button-border-color: #9daca9;
  --checked-bg-color: #d2d6d6;
  --button-text-shadow-color: #fff;
  --button-shadow-color: #fff;
  --tab-border-color: hsla(180, 1%, 45%, 0.3);

  --active-button-bg-color2: #908f8f;
  --button-menu-color-active: #ebedeb;

  --slider-side-color: #c0c0c0;
  --slider-mid-color: #d0d0d0;
  --menu-bg-color: #dddddd;
  --active-select-bg-color: #dddddd;
}
body.dark-theme {
  --main-bg-color: #7c7a7c;
  --main-bg-color-deep: #2c2c2c;
  --main-bg-color-props: #424242;
  --main-text-color-deep: hsla(180, 2%, 78%, 1);
  --button-bg-color: #585a5a /*hsla(180, 1%, 35%, 1)*/;
  --active-button-bg-color: #727474 /* hsla(180, 1%, 45%, 1) */;
  --hover-button-bg-color: hsla(200, 2%, 39%, 1);
  --props-text-color: hsla(180, 2%, 68%, 1);
  --wheel-text-color: #151515;
  --props-header-text-color: hsla(180, 2%, 78%, 1);
  --button-text-color: hsla(180, 2%, 78%, 1);
  --button-text-inactive-color: hsla(180, 2%, 50%, 1);
  --button-text-hover-color: #ddd;
  --button-border-color: hsla(180, 1%, 20%, 1);
  --active-select-bg-color: hsla(210, 2%, 25%, 1);
  --checked-bg-color: hsla(210,2%,25%,1);
  --button-text-shadow-color: hsla(0, 0%, 0%, 0.69);
  --button-shadow-color: hsla(0, 0%, 45%, 1);
  --tab-border-color: hsla(180, 1%, 45%, 0.3);
  --active-button-bg-color2: hsla(180, 1%, 60%, 0.3);
  --button-menu-color-active: hsla(180, 2%, 20%, 1);

  --slider-side-color: #8c8a8c;
  --slider-mid-color: #6c6a6c;
  --menu-bg-color: #2c2c2c;
}
/* false colors */
body.food-theme {
  --main-bg-color: cucumber;
  --main-bg-color-props: pink;
  --main-bg-color-deep: orange;
  --button-bg-color: tomato;
  --active-button-bg-color: salmon;
  --active-button-bg-color2: salmon;
  --hover-button-bg-color: mango;
  --props-text-color: #fff;
  --props-header-text-color: #ccc;
  --button-text-color: chocolate;
  --button-text-inactive-color: red;
  --button-text-hover-color: #fff;
  --button-border-color: sunflower;
  --checked-bg-color: blueberry;
  --button-text-shadow-color: eggplant;
  --button-shadow-color: olive;
  --button-menu-color-active: red;
}

body {
  -webkit-font-smoothing: antialiased;
  --scale-factor-basic: 1;
  --color-space-popup-width: 115px;
  --point-style-popup-width: 100px;
  --scale-factor: calc(1.25 * var(--scale-factor-basic));
  --info-text-size: calc(var(--scale-factor) * 9px);
  --tab-text-size: calc(var(--scale-factor) * 12px);
  --btn-size-t: calc(var(--scale-factor) * 13px);
  --btn-size-h: calc(var(--scale-factor) * 24px);
  --btn-size-w: calc(var(--scale-factor) * 26px);
  --btn-size-ts: calc(var(--scale-factor) * 9px);
  --menu-offset-top: calc(var(--scale-factor) * 24px);
  --menu-t: calc(var(--scale-factor) * 12px);

  --buy-text-size: calc(var(--scale-factor) * 16px);

  --angle-offset-tip-text-size: calc(var(--scale-factor) * 16px);

  /* also see getSampleBlockWidth */
  --sample-block-height: calc(min(max(60px, 12vw), 120px)); /* some % of viewport height */
  --sample-height: calc(var(--sample-block-height) * 0.9);
  --sample-font-size: calc(var(--sample-height) * 0.33); /* size of add and deselect buttons icons */
  --sample-remove-font-size: calc(var(--sample-height) * 0.2);

  --colors-block-height: var(--sample-block-height);
  --colors-block-font-size: calc(var(--colors-block-height) * 0.28);
  --slider--label-text-size: calc(var(--scale-factor) * 9px);
  --tippy-font-size: calc(var(--scale-factor) * 12px);
  font-size: calc(var(--scale-factor) * 12px);
}

body {
  --spectrogram-image-color: #99ffff; /* teal */
  --spectrogram-sample-color: #ff9977; /* orange */
  --wheel-border: 8px; /* should be even */
}

body { /* sample-on-bottom */
  --spectrogram-top-color: var(--spectrogram-image-color);
  --spectrogram-bottom-color: var(--spectrogram-sample-color);
}

body.sample-on-top {
  --spectrogram-top-color: var(--spectrogram-sample-color);
  --spectrogram-bottom-color: var(--spectrogram-image-color);
}

html {
    overflow:hidden;
    -webkit-app-region: no-drag;
}

body {
    -webkit-app-region: no-drag;
}



#index_body {
    cursor: default !important;
    background-color: var(--main-bg-color);
    margin: 0;
    padding: 0;

    /* disable scrolling */
    height: 100%;
    overflow: hidden;
}

table.ui-menu {
    margin-top: 0px;
}

.selectmenu-wrapper-custom {
    position: relative; /* needed to be used as a position starter for our menu */
    display: inline-block;
    vertical-align: top;
}

#buttons_panel, #curve_buttons_panel, #settings_buttons_panel {
    padding-bottom: 1px;
}

#buttons_panel {
    justify-content: space-between;
    display: flex;
}

#right-buttons {
    text-align: right;
    font-size: 0.1rem; /* no space between buttons */
}

#left-buttons {
    font-size: 0.1rem; /* no space between buttons */
}

/* class="ui-selectmenu-button ui-button ui-widget topcoat-select ui-selectmenu-button-closed ui-corner-all" */

.ui-selectmenu-text {
    padding-top: 0.2rem;
}

.ui-selectmenu-menu {
    position: absolute;
    top: var(--menu-offset-top);
    left: 0;
}

.selectmenu-wrapper-custom {
    /* Position relative creates a new block.
     * This causes z-order of the popup menu to be ignored.
     * So, sometimes, canvas could be on top of menu (at least from mouse point of view).
     */
    position: relative;
    /*z-index: 50;*/
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--button-border-color);
}

.ui-menu {
  background-color: var(--button-bg-color);
  border: 0.1px solid var(--button-border-color) !important;
  margin-top: 0.1rem;
  /* spacing between cells */
  border-collapse: separate;
  border-spacing: 0px;
}

.ui-menu tr, .ui-menu td {
  padding: 0px 0px 0px 0px !important;
  margin: 0px !important;
  border: 0px !important;
}

.ui-menu-item {
  /* we need all menu items of the same size to avoid menu jumping between two elements
   * when mouse is on the edge */
  background-color: var(--button-bg-color);
  padding: 0px 0px 0px 0px !important;
  margin: 0px !important;
  line-height: 1.6em;
  border: 0px !important;
}

.ui-selectmenu-menu .ui-menu {
    overflow: hidden; /* remove scrollbar on Windows, if ui-menu-item is fixed height */
}

.ui-menu-item-wrapper {
  line-height: 1.6em;
  background-color: var(--button-bg-color);
  position: static !important;
  padding: 0px 0.3em 0px 0.3em !important;
  margin: 0px !important;
}

.menu-active-row div {
  background-color: var(--active-button-bg-color2);
}

.ui-menu-item-wrapper.ui-state-active {
  border: 0px !important;
  background-color: var(--active-button-bg-color);
}

.ui-selectmenu-text {
overflow: visible;
text-overflow: unset;
margin-right: 0px;
}

.ui-selectmenu-button {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;

  vertical-align: top;
  outline: none;

  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: relative;
  display: inline-block;
  vertical-align: top;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  padding: 0.15rem 1rem 0.15rem 0.3rem;
  font-size: 12px;
  font-weight: 400;
  height: 1rem;
  letter-spacing: 1px;
  color: var(--button-text-color);
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.69);
  border-radius: 6px;
  background-color: var(--button-bg-color);
  box-shadow: inset 0 1px var(--button-shadow-color);
  border: 1px solid var(--button-border-color);
  background-image: url('../img/drop-down-triangle-dark.png') !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  vertical-align: top;
  display: inline-block;
}

.ui-selectmenu-button,
.ui-selectmenu-button:focus,
.ui-selectmenu-button:hover,
.ui-selectmenu-button-open,
.ui-selectmenu-button-open:focus
 {
  background-color: var(--button-bg-color);
  border: 1px solid var(--button-border-color);
  vertical-align: top;
  display: inline-block;
  height: 1.35em;
}

.ui-selectmenu-text
{
  vertical-align: middle;
  display: inline-block;
}



.topcoat-icon-button:focus {
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 0px #6fb5f1;
  border: 1px solid var(--button-border-color);
}

.topcoat-button-bar__item:focus {
  box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 0px #6fb5f1;
  border: 1px solid var(--button-border-color);
}

.topcoat-button-bar__button {
  width: 2rem;
  padding: 0;
}

/* square */
.cp-button
{
  height: var(--btn-size-h);
  width: var(--btn-size-w);
  font-size: var(--btn-size-t);
  vertical-align: top;
  display: inline-block;
}

.cp-button-half
{
  height: calc(var(--btn-size-h) / 2);
  line-height: calc(var(--btn-size-h) / 2);
  width: calc(var(--btn-size-w) / 2);
  font-size: calc(var(--btn-size-t) / 2);
  vertical-align: top;
  display: inline-block;
  position: absolute;
}

.cp-button-half-down
{
   margin-top: calc(var(--btn-size-h) / 2);
}

.cp-button2 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button2 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button3 {
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cp-button6 { /* cp-button3 without display: flex */
    padding: 0;
    width: var(--btn-size-w);
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    justify-content: center;
    align-items: center;
}

.cp-button4 { /* big */
  height: calc(2 * var(--btn-size-h));
  width: calc(2 * var(--btn-size-w));
  font-size: calc(2 * var(--btn-size-t));
  display: inline-block;
}

.cp-button5 {
    height: var(--btn-size-h);
    font-size: var(--btn-size-t);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* XXX should it be cp-button6 ? */
.cp-button5 { /* small */
  font-size: var(--btn-size-ts);
  height: calc(2 * var(--btn-size-ts));
  vertical-align: top;
  display: inline-block;
}

.cp-button7 { /* big cp-button5 */
    height: var(--btn-size-h);
    font-size: var(--menu-t);
    display: flex;
    justify-content: center;
    align-items: center;
}


#lut_add_button_container {
    padding: 0.5em;
}

.topcoat-button-bar {
    vertical-align: top;
}

/* disables text selection */
/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting#4407335 */
body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.curve_type_default {
    color: #999;
}


#custom-handle {
  width: 0.6em;
  height: 0.6em;
  top: calc(50% - 0.5px);
  margin-top: -0.3em;
  margin-left: -0.3em;
  line-height: 0.3em;
  border: 1px solid;
  border-color: var(--button-text-color);
  font-size: 16px; /* controls handle size */
  offset-top: -3px; /* get border into account */
}

#custom-handle-left, #custom-handle-right {
  width: 0.2em;
  height: 0.6em;
  top: calc(50% - 0.5px);
  margin-top: -0.3em;
  margin-left: -0.1em;
  line-height: 0.3em;
  border: 1px solid;
  border-color: var(--button-text-color);
  font-size: 16px; /* controls handle size */
}

#custom-handle-leftMask {
  width: 0.3em;
  height: 0.6em;
  top: calc(50% - 0.5px);
  margin-top: -0.3em;
  margin-left: -0.4em;
  line-height: 0.3em;
  border: 1px solid;
  border-color: var(--button-text-color);
  font-size: 16px; /* controls handle size */

  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

#custom-handle-rightMask {
  width: 0.3em;
  height: 0.6em;
  top: calc(50% - 0.5px);
  margin-top: -0.3em;
  margin-left: 0.1em;
  line-height: 0.3em;
  border: 1px solid;
  border-color: var(--button-text-color);
  font-size: 16px; /* controls handle size */

  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

.ui-slider-region {
    position: absolute;
    height: 100%;
    padding-left: 0.05em;
    padding-right: 0.05em;

    padding-top: 0.05em;
    padding-bottom: 0.05em;
    top: -0.5px; /* get border into account */
}

.ui-mask-region-mid {
  background-color: var(--slider-mid-color);
}

.ui-mask-region-side {
  background-color: var(--slider-side-color);
}

.ui-slider-horizontal {
    /* rest of slider */
    height: 10px;
    border-color: var(--button-border-color) !important;
    background-color: var(--button-bg-color);
}

.ui-widget-header {
    /* beginning of slider */
    background-color: inherit;
}


.lut-projection-type .topcoat-button {
    width: 2.4rem;
    padding: 0;
    text-align: center;
}

.settings-grid-type .topcoat-button {
    width: 2.4rem;
}

input {
pointer-events: none;
}


/* This is for Tobcoat Select Bar (the one that is radio) */
:checked+.topcoat-button {
    background-color: var(--checked-bg-color);
    box-shadow:inset 0 1px hsla(0,0%,0%,.05)
}
.topcoat-button-bar__item:not(:last-child)>.topcoat-button {
    margin-right:-1px
}
.topcoat-button-bar__item>.topcoat-button {
    border-radius:inherit
}

body.click_propagation_disabled div.grid-direct-adjust input:checked+.topcoat-button,
body.click_propagation_disabled div.lut-pick-angle input:checked+.topcoat-button,
body.click_propagation_disabled div.curve-mouse-type input:checked+.topcoat-button {
    color: #4fb354 !important; /* green */
}

#settings_offset_angle_react .topcoat-select {
    width: 3.7em; /* enough for 3 digits and the degree mark */
}

#color_space_react select.topcoat-select {
    width: 5.3em;
}

#curve_type_react select.topcoat-select,
#curve_type_react table,
#curve_type_react tr,
#curve_type_react td,
#curve_type_react div {
    width: 10em;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  vertical-align: middle;
  display: inline-block;
}

.topcoat-select {
    height: var(--btn-size-h);
    font-size: var(--menu-t);
}

/* for selected menu element */
.cp-state-active {
    color: var(--button-menu-color-active);
    /* glow */
    box-shadow:
      inset 0px  5px 3px -5px #4195fc,
      inset 0px -5px 3px -5px #4195fc,
      inset 5px  0px 3px -5px #4195fc,
      inset 0px  5px 3px -5px #4195fc,
      inset 0px -5px 3px -5px #4195fc,
      inset -5px 0px 3px -5px #4195fc; 
}


/* slider */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background-color: var(--button-bg-color) !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: var(--button-text-color) !important;
    text-shadow: 0 -1px var(--button-text-shadow-color);
    font: inherit;
    font-size: 12px;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    color: var(--button-text-color) !important;
    background-color: var(--hover-button-bg-color) !important;
    text-shadow: 0 -1px var(--button-text-shadow-color);
    font: inherit;
    font-size: 12px;
}

.ui-widget {
    font: inherit;
    font-family: inherit;
}

.ui-selectmenu-text {
    text-shadow: 0 -1px var(--button-text-shadow-color);
}

.ui-widget-content {
    color: var(--button-text-color);
}


#sample_block {
    background-color: var(--main-bg-color);
    height: var(--sample-block-height);
    width: 100%;

    margin: 0 auto;

    white-space: nowrap;
    /*overflow-x: auto;*/
    position: absolute;
    z-index: 11;
    overflow: scroll;
}

#sample_block img {
    height: var(--sample-height);
    width: var(--sample-height);
}



#colors_block {
    background-color: var(--main-bg-color);
    height: var(--colors-block-height);
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow-x: auto;
    position: absolute;
    z-index: 11;
    font-size: var(--colors-block-font-size);
}

#colors_block::-webkit-scrollbar {
    display: none;
}

.sample-button {
    text-align: center;
    line-height: var(--sample-height);
    padding: 0px;
    width: var(--sample-height);
    height: var(--sample-height);
    border: 1px solid var(--button-border-color);
    color: var(--button-text-color);
    /*display: inline-block; */
    font-size: var(--sample-font-size);
    margin: auto;
    margin-top: 3px;
}

.sample-button:hover {
    background-color: var(--checked-bg-color);
}

.sample-preview {
    position: relative; /* allows for children to set absolute coordinates relative to the parent */
}

.preset-preview {
    position: relative; /* allows for children to set absolute coordinates relative to the parent */
    display: inline-block;
}

/* canvasWidth */
.sample-preview img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

.preset-preview img {
    max-width: 100%;        /* Scale the image to fit the parent */
    max-height: 100%;       /* Scale the image to fit the parent */
    height: auto;           /* Maintain aspect ratio */
    width: auto;            /* Maintain aspect ratio */
    position: absolute;     /* COL-075 to avoid jumping when loading */
}

.preset-button {
    text-align: center;
    line-height: var(--sample-height);
    padding: 0px;
    width: calc(2 * var(--sample-height));
    height: calc(2 * var(--sample-height));
    border: 1px solid var(--tab-border-color);
    color: var(--button-text-color);
    /*display: inline-block; */
    font-size: var(--sample-font-size);
    margin: auto;
    margin-top: 3px;
    margin-left: 3px;

    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    overflow: hidden;       /* Optional: to hide any overflow */
    background-color: var(--checked-bg-color);
}

.preset-group-header {
    font-size: calc(1.2 * var(--menu-t));
    color: var(--button-text-color);
    margin-top: 8px;
    border-bottom: 0.1px solid var(--tab-border-color);
    border-top: 0.1px solid var(--tab-border-color);
    background-color: var(--checked-bg-color);
}

.preset-group-header span {
    font-size: calc(0.8 * var(--menu-t));
    position: absolute;
    right: 10px;
    /* align vertically */
    margin-top: calc((1.2 * var(--menu-t) - 0.8 * var(--menu-t)) / 2);
}

.preset-group-header-hidden {
  color: var(--button-text-inactive-color);
}

.preset-group-header:hover,
.preset-group-header-hidden:hover {
  color: var(--button-text-hover-color);
}

.preset-group-body {
  /* for animation */
  height: calc-size(auto, size);
  transition: height 0.3s;
}

.preset-group-body-hidden {
  /* for animation */
  height: 0px;
  transition: height 0.3s;
  overflow-y: hidden;
}

.sample-preview::after {
    content: "\a0"; /*   fixes position of sample-preview */
}

.sample-remove {
    /* small remove icon in top right corner above preview image */
    z-index: 2000;
    position: absolute;
    left: 0px;
    top: 0px;
    vertical-align: top;
    line-height: initial;
    font-size: var(--sample-remove-font-size);
}

.sample-remove:hover {
    color: #730806;
}

.sample-pin {
    /* small pin icon in top right corner above preview image */
    z-index: 2000;
    position: absolute;
    right: 0px;
    top: 0px;
    vertical-align: top;
    line-height: initial;
    font-size: var(--sample-remove-font-size);
}

.sample-pinned
.sample-pin {
    color: green;
}

.sample-pin:hover {
    color: green;
}

.sample-pinned
.sample-pin:hover {
    color: #730806; /* red */
}

.sample-active {
    border: 1px solid var(--spectrogram-sample-color); /* hist sample color */
    background-color: var(--button-bg-color);
}

.sample-active-down {
    border: 1px solid #FFF;
}


#settings_offset_angle_container {
    background-color: var(--main-bg-color);
    display: none;
    position: absolute;
    z-index: 1000
}

.ui-slidermenu-menu {
    background: var(--menu-bg-color);
 /*   background-color: var(--active-select-bg-color); */
    z-index: 1000;
    border: 1px solid var(--button-border-color);
}
.ui-slidermenu-menu {
    position: absolute;
    /*
    left: 0; if anchoring + width > viewportSize
    right: 0; if anchoring position + width < viewportSize
    */
}


#settings_offset_angle_slider {
    width:120px;
    margin:10px;
}

body.projection-sp .lut-pick-angle,
body.projection-al .lut-pick-angle {
    display:inline; 
}

.lut-pick-angle, .lut-pick-angle label {
/*  display: flex; */
    align-items: center;
    justify-content: center;
}

body.projection-ab .lut-pick-angle,
body.projection-ab #settings_offset_angle_react {
    display: none;
}

body.grid-round .settings-pin-assist-button,
body.grid-round2 .settings-pin-assist-button,
body.grid-cross .settings-pin-assist-button {
    display: none;
}


/* round corners on selectmenu */
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 6px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 6px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 6px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 6px;
}



ul.ui-menu {
   column-gap: 0px;
}

.label-desc {
    font-size: 75%;
}

.topcoat-select {
    appearance: none;
}

.topcoat-button-bar .topcoat-button {
    border: 0.5 solid;
}


#license_expire_info {
    position: absolute;
    z-index: 9000;
    right: 3px;
    bottom: 3px;
    font-size: 10px;
    color: grey;
}


#license_expire_info:hover {
    color: white;
}

select.ui-selectmenu-open-custom {
    border: 1px solid #ffffff99;
}

button.ui-button-open-custom {
    border: 1px solid #ffffff99;
}

.ui-selectmenu-open {
    z-index: 9999;
}

.ui-selectmenu-disabled {
    color: var(--button-text-inactive-color);
}

/* disable text for AL angle offset */
body.projection-ab #props_container tr.not-ab,
body.projection-cl #props_container tr.not-cl,
body.projection-wb #props_container tr.not-wb,
body.projection-bp #props_container tr.not-bp,
body.grid-square #props_container tr.not-grid-square,
body.grid-round #props_container tr.not-grid-round,
body.grid-round2 #props_container tr.not-grid-round2,
body.no-support-nits tr.feature-nits,
body.no-support-illuminant tr.feature-illuminant,
body.no-support-nits tr.feature-nits select,
body.no-support-illuminant tr.feature-illuminant select
 {
    color: var(--button-text-inactive-color);
}

#main_tabs {
    font-size: var(--tab-text-size);
    color: var(--button-text-inactive-color);
}

#main_tabs .tab-selected {
    color: var(--button-text-color);
}

#main_tabs span:hover {
    color: var(--button-text-hover-color);
}

#main_tabs span.tab-header {
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block; /* for first-letter to work */
}

#main_tabs_react {
    border-bottom: 0.1px solid var(--tab-border-color);
    padding-bottom: 3px;
}

#main_tabs_sep {
    height: 3px;
}

#main_tabs_react {
    display: flex;
    justify-content: center;
}

.levels-modified .tab-pane-levels::first-letter {
    color: green;
}

.curves-modified .tab-pane-curve::first-letter {
    color: green;
}

.volume-modified .tab-pane-volume::first-letter {
    color: green;
}

.lut-modified .tab-pane-lut::first-letter {
    color: green;
}

.huesat-modified .tab-pane-huesat::first-letter {
    color: green;
}

.wheels-modified .tab-pane-wheels::first-letter {
    color: green;
}

.hue-canvas {
    position: relative;
    opacity: 0.8;
}

#no_layer {
    position: absolute;
    left: 50%;
    top: calc(1em + 50%);
    min-width: 11em;
    max-width: 20em;
    transform: translate(-50%, -50%);
    background-color: var(--main-bg-color-deep);
    z-index: 9900;
    padding: 15px;
    border-radius: 5px;
    color: var(--main-text-color-deep);
    text-align: center;
}

#ps_hung {
    position: absolute;
    left: 50%;
    top: 90%;
    min-width: 11em;
    max-width: 20em;
    transform: translate(-50%, -100%);
    background-color: var(--main-bg-color-deep);
    z-index: 9999;
    padding: 15px;
    border-radius: 5px;
    color: var(--main-text-color-deep);
    text-align: center;
}

body.closing .cp-close-button {
    color: #8b0000; /* dark red */
}


.icon-loop-top {
    position: absolute;
    transform: translateY(-50%);
    color: var(--spectrogram-top-color);
}

.icon-loop-bottom {
    position: absolute;
    transform: translateY(-50%);
    color: var(--spectrogram-bottom-color);
}

body.some-sample-active .appearance-sample-button {
    color: var(--spectrogram-sample-color);
}

.color-circle-active {
    text-shadow: 0 0 0.5em;
}

.color-picker-conflict .color-circle-active {
    text-shadow: 0 0 0.5em red;
}

.color-picker-text {
    color: var(--button-text-inactive-color);
    font-size: var(--menu-t);
}

.color-bar-table {
    height: 100%;
}

.ui-slider-label {
    font-size: var(--slider--label-text-size);
    position: relative;
    top: 5px;
    left: 10px;
    color: var(--button-text-color);
}

.lut-size-sliders-wrapper > div {
    display: table-cell;
}

.lut-size-sliders-lock {
    vertical-align: middle;
    color: var(--button-shadow-color);
    font-size: var(--slider--label-text-size);
}

.tip-header {
    text-align: center;
    border-bottom: 0.1px solid var(--tab-border-color);
    font-size: calc(var(--info-text-size)*0.8);
}

#props_container,
#sample_block {
    background-color: var(--main-bg-color-props);
}

#props_container table {
    width: 100%;
}

#props_container table,
.props-cat {
    margin-bottom: 20px;
}

#props_container table td:first-child { width: 55% }
#props_container h4 {
    margin-block-end: 0px;
    margin-block-start: 0px;
    color: var(--props-header-text-color);
}

#props_container { overflow: scroll; }
#presets_grid {
position: absolute; 
width: 100%;
}

#props_container {
    color: var(--props-text-color);
}


#lut_tool_type_react .ui-menu-item-wrapper,
#lut_aggr_type_react .ui-menu-item-wrapper,
#lut_hover_type_react .ui-menu-item-wrapper {
    display: flex;
    white-space: nowrap;
}

.menu-item-icon:before {
    margin-top: 0.2em;
}

.select-menu-overlay {
    position: absolute;
    z-index: 10;
    margin-top: 0;
    top: calc(-0.09*var(--btn-size-t));
    line-height: var(--btn-size-h);
    left: 0.2em;
    color: var(--button-text-color);
    pointer-events: none;
    text-shadow: 0 -1px rgb(0 0 0 / 69%);
    font-size: var(--btn-size-t);
}

.ui-menu {
    font-size: var(--btn-size-t);
}

.ui-menu-item-wrapper {
    font-size: var(--btn-size-t);
}

#lut_tool_type_react select,
#lut_aggr_type_react select,
#lut_hover_type_react select {
    width: 2.7em;
}

body.disabled-tips .tippy-box{
  display:none;
}


body.disabled-tips .tippy-box[data-theme="presets-comp"],
body.disabled-tips .tippy-box[data-theme="palette-comp"]{
  display: block !important;
}

.tippy-box{
   border:1px solid var(--tab-border-color) !important;
    font-size: var(--tippy-font-size);
}

.tippy-box[data-placement^='top'] > .tippy-arrow::before {
  border-top-color: var(--tab-border-color) !important;
  margin-bottom: -1px;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: var(--tab-border-color) !important;
  margin-top: -1px;
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  border-left-color: var(--tab-border-color) !important;
  margin-right: -1px;
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
  border-right-color: var(--tab-border-color) !important;
  margin-left: -1px;
}

.topcoat-button-bar {
  display: inline-block;
}

.cp-menu-wrap {
    font-size: 1rem;
}


#color_space_popup {
    left: calc(100% - var(--color-space-popup-width));
}

#point_style_popup {
    left: calc(100% - var(--point-style-popup-width));
}

.flat-menu div {
    margin-left: 5px;
    margin-right: 5px;
}

#buy_text, #thankyou {
    width: 50%;
    text-align: center;
    color: var(--main-text-color-deep);
    font-size: var(--buy-text-size);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.buy-warning {
  color: red;
}

.topcoat-checkbox {
  vertical-align: middle;
}

body:not(.show-advanced) .advanced {
  display: none;
}

tr.tr-sep td {
   border-top: calc(var(--scale-factor) * 16px) solid transparent;
}

#pick_color_block {
    background-color: var(--main-bg-color-props);
    padding: 0px;
    height: 100px;
}


span.checkbox-text {
   color: var(--props-text-color);
}

.palette-sample {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.volume-handle, .wheel-handle {
  box-shadow: 0 0 3px #9ecaed;
  background: #dddddd;
}

.volume-handle:hover, .wheel-handle:hover {
  box-shadow: 0 0 10px #9ecaff;
}


.lut-modified-ab .settings-projection-ab div { color: green; }
.lut-modified-al .settings-projection-al div { color: green; }
.lut-modified-bl .settings-projection-bl div { color: green; }
.lut-modified-hl .settings-projection-hl div { color: green; }
.lut-modified-ha .settings-projection-ha div { color: green; }
.lut-modified-cl .settings-projection-cl div { color: green; }
.lut-modified-wb .settings-projection-wb div { color: green; }
.lut-modified-bp .settings-projection-bp div { color: green; }
.lut-modified-ww .settings-projection-ww div { color: green; }
.lut-modified-bb .settings-projection-bb div { color: green; }

.lut-modified-rg .settings-projection-rg div { color: green; }
.lut-modified-gb .settings-projection-gb div { color: green; }
.lut-modified-br .settings-projection-br div { color: green; }

#license_info {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  top: 50%;
  transform: translateY(-50%);
  width: 200px; /* Need a specific value to work */
  background-color: var(--main-bg-color-props);
  border:1px solid var(--tab-border-color) !important;
  z-index: 9100;
  display: none;
  padding: 30px;
}

body.can-see-license-info  #license_info {
  display: block;
}

#reset_license_btn {
  color: red;
}

.modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--main-bg-color);
    z-index: 9998;
    padding: 15px;
    border-radius: 5px;
    color: var(--props-text-color);
    border: 0.3px solid var(--tab-border-color);
}

.modal-backdrop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    z-index: 9997;
    opacity: 90%;
}

label.topcoat-button-bar__item:has(> input[disabled]) { 
    opacity: 0.5;
}
label.topcoat-button-bar__item:has(> input[disabled]) div:before {
    color: red !important;
}

.tools-sliders span:hover {
    color: var(--button-text-hover-color);
}
.tools-sliders span {
    color: var(--button-text-color);
    font-size: calc(var(--btn-size-t) * 0.8);
}

.hide-when-not-in-progress { opacity: 0; }
body.in-progress .hide-when-not-in-progress { opacity: 1; }

.icon-spin5::before {
    content: '★'; /* The character you want to rotate (star in this case) */
    display: inline-block; /* Needed for animation to work */
    animation: rotate 2s infinite linear
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.sliders-header {
    margin-top: 20px;
    border-top: 0.1px solid var(--tab-border-color);
}

.control-group {
   color: var(--wheel-text-color);
   flex: 1;
}

.color-wheel {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
background: 
    conic-gradient(
  from 90deg,
  #0000ff 5.2deg,
  #00ffff 77.5deg,
  #00ff00 130.3deg, /* green */
  #ffff00 185.2deg,
  #ff0000 257.2deg, /* red */
  #ff00ff 310.3deg,
  #0000ff 365.2deg /* blue */
);
    margin-bottom: 20px;
    margin-left:auto;
    margin-right: auto;
}
.color-wheel::before {
    content: '';
    position: absolute;
    top: calc(var(--wheel-border)/2);
    left: calc(var(--wheel-border)/2);
    width: calc(100% - var(--wheel-border));
    height: calc(100% - var(--wheel-border));
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.8) calc(100% - var(--wheel-border)),
        transparent calc(100% - var(--wheel-border))
    );
    pointer-events: none;
}

/* Horizontal line */
.color-wheel-lines {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: grey;
  transform: translateY(-50%);
  opacity: 0.3;
}

/* Vertical line */
.color-wheel-lines2 {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: grey;
  transform: translateX(-50%);
  opacity: 0.3;
}

.adjustment-info {
  left: 50%;
  transform: translateX(-50%);
}
@font-face {
  font-family: 'luttello';
  src: url('../font/luttello.eot?72359751');
  src: url('../font/luttello.eot?72359751#iefix') format('embedded-opentype'),
       url('../font/luttello.woff2?72359751') format('woff2'),
       url('../font/luttello.woff?72359751') format('woff'),
       url('../font/luttello.ttf?72359751') format('truetype'),
       url('../font/luttello.svg?72359751#luttello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'luttello';
    src: url('../font/luttello.svg?72359751#luttello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "luttello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-eye-off:before { content: '\e800'; } /* '' */
.icon-left-open:before { content: '\e801'; } /* '' */
.icon-four-points:before { content: '\e802'; } /* '' */
.icon-cross:before { content: '\e803'; } /* '' */
.icon-edge:before { content: '\e804'; } /* '' */
.icon-line:before { content: '\e805'; } /* '' */
.icon-plus-circled:before { content: '\e806'; } /* '' */
.icon-cancel:before { content: '\e807'; } /* '' */
.icon-eye:before { content: '\e808'; } /* '' */
.icon-attach-off:before { content: '\e809'; } /* '' */
.icon-attach:before { content: '\e80a'; } /* '' */
.icon-background-on:before { content: '\e80b'; } /* '' */
.icon-background-off:before { content: '\e80c'; } /* '' */
.icon-curve:before { content: '\e80d'; } /* '' */
.icon-square:before { content: '\e80e'; } /* '' */
.icon-swatches-circled:before { content: '\e80f'; } /* '' */
.icon-arrows-ccw:before { content: '\e810'; } /* '' */
.icon-pull:before { content: '\e811'; } /* '' */
.icon-move-two:before { content: '\e812'; } /* '' */
.icon-move-two-vertical:before { content: '\e813'; } /* '' */
.icon-block:before { content: '\e814'; } /* '' */
.icon-levels:before { content: '\e815'; } /* '' */
.icon-aperture:before { content: '\e816'; } /* '' */
.icon-plus:before { content: '\e817'; } /* '' */
.icon-reset:before { content: '\e818'; } /* '' */
.icon-mono:before { content: '\e819'; } /* '' */
.icon-web:before { content: '\e81a'; } /* '' */
.icon-grid:before { content: '\e81b'; } /* '' */
.icon-layer-mask:before { content: '\e81c'; } /* '' */
.icon-invert:before { content: '\e81d'; } /* '' */
.icon-apply:before { content: '\e81e'; } /* '' */
.icon-settings:before { content: '\e81f'; } /* '' */
.icon-one-point:before { content: '\e820'; } /* '' */
.icon-target:before { content: '\e821'; } /* '' */
.icon-cursor:before { content: '\e822'; } /* '' */
.icon-push:before { content: '\e823'; } /* '' */
.icon-loop:before { content: '\e824'; } /* '' */
.icon-loop-top:before { content: '\e825'; } /* '' */
.icon-loop-bottom:before { content: '\e826'; } /* '' */
.icon-lock:before { content: '\e827'; } /* '' */
.icon-selectall:before { content: '\e828'; } /* '' */
.icon-region-circle:before { content: '\e829'; } /* '' */
.icon-samples:before { content: '\e82a'; } /* '' */
.icon-selection-freeze:before { content: '\e82b'; } /* '' */
.icon-ring:before { content: '\e82c'; } /* '' */
.icon-deselect:before { content: '\e82d'; } /* '' */
.icon-polar-move:before { content: '\e82e'; } /* '' */
.icon-selection:before { content: '\e82f'; } /* '' */
.icon-lasso:before { content: '\e830'; } /* '' */
.icon-floppy:before { content: '\e831'; } /* '' */
.icon-up-dir:before { content: '\e832'; } /* '' */
.icon-down-dir:before { content: '\e833'; } /* '' */
.icon-pin:before { content: '\e834'; } /* '' */
.icon-web-line:before { content: '\e835'; } /* '' */
.icon-web-half-line:before { content: '\e836'; } /* '' */
.icon-web-ring:before { content: '\e837'; } /* '' */
.icon-line-rotate2:before { content: '\e838'; } /* '' */
.icon-line-rotate:before { content: '\e839'; } /* '' */
.icon-gauge:before { content: '\e83a'; } /* '' */
.icon-spin5:before { content: '\e83b'; } /* '' */
.icon-selection-plus:before { content: '\e83c'; } /* '' */
.icon-selection-half-minus:before { content: '\e83d'; } /* '' */
.icon-selection-minus:before { content: '\e83e'; } /* '' */
.icon-saturation-up:before { content: '\e83f'; } /* '' */
.icon-saturation-down:before { content: '\e840'; } /* '' */
.icon-upload:before { content: '\e841'; } /* '' */
.icon-marquee:before { content: '\e847'; } /* '' */
.icon-move:before { content: '\f047'; } /* '' */
.icon-move-four:before { content: '\f0b2'; } /* '' */
.icon-selection-new:before { content: '\f0c8'; } /* '' */
.icon-selection-add:before { content: '\f0fe'; } /* '' */
.icon-circle:before { content: '\f10c'; } /* '' */
.icon-puzzle:before { content: '\f12e'; } /* '' */
.icon-unlock:before { content: '\f13e'; } /* '' */
.icon-selection-subtract:before { content: '\f146'; } /* '' */
.icon-brush:before { content: '\f1fc'; } /* '' */
.icon-hand:before { content: '\f256'; } /* '' */
.icon-zoom:before { content: '\f50d'; } /* '' */