/**************************************************************
**************** UTILITIES (PLEASE, USE!) *********************
***************************************************************/

/*Text with white outline*/
.text-white-shadow {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
/*Text with bg color outline*/
.text-shadow {
    text-shadow: -1px 0 var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1))), 0 1px var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1))), 1px 0 var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1))), 0 -1px var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)));
}
.text-shadow-mild {
    text-shadow: 0px 0px 3px var(--color-bg-primary);
}
html[data-color-mode=dark] .invert-icon {
    filter: invert(0.8);
}
/*Button is outlined like selected*/
.btn-selected {
    background: var(--color-border-overlay) !important;
}
/*Resizable cursor*/
.resizable {
    cursor: ns-resize;
}
/*Auto cursor*/
.non-draggable {
    cursor: auto;
}
/*Pointer cursor*/
.pointer, .btn-pointer {
    cursor: pointer;
}
.color-bg-white {
    background-color: white;
}
/*Use with FA icons class 'btn-pointer' to make them highlight on hover, add class 'selected' to highlight,
also good idea to use <span class="btn-pointer"><span class="fa-auto fa-icon-name"></span>text</span> */
.btn-pointer:hover, .btn-pointer.selected,
.btn-pointer:hover .fa-auto, .btn-pointer.selected .fa-auto {
    color:var(--color-state-focus-border) !important;
}

.ui-highlight {
    -webkit-box-shadow: 0 0 5px 3px var(--color-state-focus-border);
    -moz-box-shadow: 0 0 5px 3px var(--color-state-focus-border);
    box-shadow: 0 0 5px 3px var(--color-state-focus-border);
}

.ui-highlight-animated {
    animation: highlighted 0.5s infinite linear;

}
@keyframes highlighted {
    0% { -webkit-box-shadow: 0 0 0 0 var(--color-state-focus-border);
        -moz-box-shadow:  0 0 0 0 var(--color-state-focus-border);
        box-shadow:  0 0 0 0 var(--color-state-focus-border);}
    33% {    -webkit-box-shadow: 0 0 4px 1px var(--color-state-focus-border);
        -moz-box-shadow: 0 0 4px 1px var(--color-state-focus-border);
        box-shadow: 0 0 4px 1px var(--color-state-focus-border);}
    66% {    -webkit-box-shadow: 0 0 5px 5px var(--color-state-focus-border);
        -moz-box-shadow: 0 0 5px 5px var(--color-state-focus-border);
        box-shadow: 0 0 5px 5px var(--color-state-focus-border);}
    100% { -webkit-box-shadow: 0 0 0 0 var(--color-state-focus-border);
        -moz-box-shadow:  0 0 0 0 var(--color-state-focus-border);
        box-shadow:  0 0 0 0 var(--color-state-focus-border);}
}
/*stolen from github sourcecode page (flash.scss) use <div class="blob-code"><div class="blob-code-inner"></div></div>*/
.blob-code-inner {
    overflow: visible;
    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    font-size: 12px;
    color: var(--color-text-secondary);
    word-wrap: normal;
    white-space: pre;
}
.blob-code {
    position: relative;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 20px;
    vertical-align: top;
}
.keyboard-key {
    border: 1px solid var(--color-text-primary);
    -webkit-box-shadow: 0px 2px 3px 0px var(--color-bg-canvas-inverse);
    -moz-box-shadow: 0px 2px 3px 0px var(--color-bg-canvas-inverse);
    box-shadow: 0px 2px 3px 0px var(--color-bg-canvas-inverse);
    background-color: var(--color-icon-tertiary);
    border-radius: 3px;
    color: var(--color-text-primary);
    display: inline-block;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
    margin: 0 0.1em;
    overflow-wrap: break-word;
    padding: 0.1em 0.6em;
    text-shadow: 0 1px 0 var(--color-bg-canvas-inverse);
}
/**
 * Set parent with 'progress-bottom-bar' your animation-duration
 *  so that it is inherited, color is inherited from background
 */
.progress-bottom-bar:after {
    animation: progressAfterBar;
    animation-duration: inherit;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    height: 5px;
    background-color: inherit;
    filter: invert();
    width: 0;
    content: "";
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
}
@keyframes progressAfterBar {
    0% {width: 100%} 100% {width: 0}
}
/**
 * ==============================================
 * Dot Pulse from https://codepen.io/nzbin/pen/GGrXbp
 * use: <span class="dot-pulse"></span> for pulse-like animation
 */
.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-text-primary);
    color: var(--color-text-primary);
    box-shadow: 9999px 0 0 -5px var(--color-text-primary);
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
    display: inline-block;
}
.dot-pulse::before, .dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-color: var(--color-text-primary);
    color: var(--color-text-primary);
}
.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px var(--color-text-primary);
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
}
.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px var(--color-text-primary);
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
}
@keyframes dotPulseBefore {
    0% {box-shadow: 9984px 0 0 -5px var(--color-text-primary);}
    30% {box-shadow: 9984px 0 0 2px var(--color-text-primary);}
    60%, 100% {box-shadow: 9984px 0 0 -5px var(--color-text-primary);}
}
@keyframes dotPulse {
    0% {box-shadow: 9999px 0 0 -5px var(--color-text-primary);}
    30% {box-shadow: 9999px 0 0 2px var(--color-text-primary);}
    60%, 100% {box-shadow: 9999px 0 0 -5px var(--color-text-primary);}
}
@keyframes dotPulseAfter {
    0% {box-shadow: 10014px 0 0 -5px var(--color-text-primary);}
    30% {box-shadow: 10014px 0 0 2px var(--color-text-primary);}
    60%, 100% {box-shadow: 10014px 0 0 -5px var(--color-text-primary);}
}

/*Show small text hint above field, use <..class="show-hint" data-hint="Show me as hint!"..> */
.show-hint, .show-right-hint {
    position: relative;
}
.show-hint::before {
    content: attr(data-hint);
    position: absolute;
    font-size: xx-small;
    top:-3px;
    display: inline-block;
    z-index: 1;
}
.show-right-hint::before {
    content: attr(data-hint);
    position: absolute;
    font-size: xx-small;
    right:-3px;
    display: inline-block;
}
/*Enforce container for text to show only one line*/
.one-liner {
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

/*Set to a title to add a split (hr) line like so:  The Title -----------------  */
.header-sep {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-sep::after {
    content: '';
    flex-grow: 1;
    border: 1px solid var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity, 1))) !important;
    height: 0;
    margin-left: 20px;
    margin-top: 4px;
}

/* Show error in a nice box, use: <div class="error-container">text<code>hidden details</code></div> */
.error-container {
    background: var(--color-bg-danger);
    text-overflow: ellipsis;
    cursor: auto;
}

.error-container code {
    display: none;
    padding: 3px 9px;
}
.error-container:hover code {
    display: block;
}
.error-container:hover {
    max-height: initial;
}

.notification {
    position: relative !important;
}

/* Pop in notification */
.notification::before {
    content:attr(data-notification);
    background:var(--color-icon-warning);
    position:absolute;
    -webkit-animation: popIn 0.2s normal forwards;
    -moz-animation:    popIn 0.2s normal forwards;
    -o-animation:      popIn 0.2s normal forwards;
    top: -5px;
    right: -5px;
    padding: 3px;
    font-size: .7em;
    color: var(--color-text-inverse);
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    opacity: 0.6;
}
@keyframes popIn {
    0% {transform: scale(0.0);} 40% {transform: scale(1.2);}
    60% {transform: scale(0.9);} 100% {transform: scale(1.0);}
}

.force-visible {
    display: block !important;
    visibility: visible !important;
    max-height: initial !important;
}

.disabled {
    position: relative;
}
/* Dimmed overlay over container */
.disabled::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(0.3);
    z-index: 99998;
    background: #22272ead;
}

/*Prevent user interaction*/
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/**
  Selectable multi-icon buttons (use with input radio or checkbox)
  Use (strictly follow this):
    <input id="id" type="radio" name="name" class="switch hidden">
    <label for="id"><span class="fa-auto fa-icon-name"></span></label>
 */
input.switch:checked + label span {
    background: var(--color-bg-tertiary);
    color: var(--color-state-focus-border);
}

/**
  Selectable multibutton shows on hover
  Use:
     <[container] class="hover-selectable">
            <!-- anything you want to be visible without hover -->
            <[container] class="position-absolute">
                   <!-- anything you want to be visible with hover, position absolute as you like -->
            </[container] >
     </[container]>
 */
.hover-selectable {
    position: relative;
}
.hover-selectable > .position-absolute {
    display: none;
}
.hover-selectable:hover > .position-absolute, .hover-selectable > .position-absolute:hover {
    display: flex !important;
}


/**************************************************************
**************** SYSTEM UI SPECIFIC STYLES ********************
***************************************************************/
/* font awesome: default behavior extended by these properties
                 to avoid the styling, use full name, e.g. fa-solid
*/
/* Font Awesome Free – Regular */
@font-face{
    font-family: "FA6FreeRegular";
    src: url("../libs/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"),
    url("../libs/fontawesome/webfonts/fa-regular-400.ttf") format("ttf");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Font Awesome Free – Solid */
@font-face{
    font-family: "FA6FreeSolid";
    src: url("../libs/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"),
    url("../libs/fontawesome/webfonts/fa-solid-900.ttf") format("ttf");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    font-size: larger;
}

.fa-auto,
.fa-auto::before {
    font-family: "FA6FreeRegular","FA6FreeSolid", var(--fa-style-family, "Font Awesome 6 Free"); /* fallback order */
    font-weight: 200;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    content: var(--fa);
}

.fas, .far, .fab {
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: var( --color-icon-primary);
    vertical-align: middle;
    padding: 3px 9px;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/*Important: fixes the navigator viewport position*/
div.openseadragon-canvas, div.openseadragon-canvas div {box-sizing: initial !important;}
/*div.openseadragon-container, div.openseadragon-canvas, #panel-navigator,  {box-sizing: initial !important;}*/

/*.hover-dim:hover {opacity: 1}*/
/*.hover-dim {opacity: 0.5; animation: hoverDims 5s normal linear; }*/
/*@keyframes hoverDims {*/
/*    0% {opacity: 1} 50% {opacity: 1} 100% {opacity: 0.5;}*/
/*}*/
.bg-opacity::before {content: "";width: 100%;height: 100%;position: absolute;left: 0;
    background-color: var(--color-bg-primary);opacity: 0.6;top: 0;}
.bg-opacity.fixed-bg-opacity::before {z-index: -1;}
.right-side-menu {z-index: 3;right: 0;}
.inner-panel {padding: 3px 0 15px 0;position: relative;}
.inner-panel .inner-panel-content {overflow-x: hidden;min-height: 50px;}
.inner-panel::after {content: '';}
.inner-panel-simple {padding-left: 9px;padding-right: 5px;}
.inner-panel-visible {padding: 0 5px 0 9px;}
.inner-panel-hidden {transition: max-height 0.15s ease-in-out;overflow: hidden; display: none;
    border-radius: 6px; width: calc(100% - 5px)}
.inner-panel.loading::before {content: '';position: absolute;width: 100%;height: 100%;
    background: rgba(34, 34, 34, 0.68);top: 0;left: 0;}
.inner-panel.loading::after {content: '';position: absolute;width: 75px;height: 75px;display: inline-block;
    border-width: 2px;border-color: rgba(255, 255, 255, 0.05);border-top-color: #fff;border-radius: 100%;
    border-style: solid;animation: spin 1s infinite linear;top: calc(50% - 37px);left: calc(50% - 37px);}
@keyframes spin { 100% {transform: rotate(360deg);} }
.inline-pin {cursor: pointer;vertical-align: baseline !important;}
.inline-pin.pressed  {transform: translate(0, 6px);}
.inline-pin.pressed::after {content: '';width: 6px;height: 7px;background: var(--color-bg-canvas);position: absolute;
    right: 14px;top: 17px;}
.inline-arrow {vertical-align: sub !important;}
.inline-arrow.opened {transform: rotate(90deg);}
.label-render-type:hover > select {display: inline-block !important;position: absolute;top: 0;right: 0;}
.panel-menu input.panel-menu-input {display: none !important;}
.panel-menu label.panel-menu-label {padding: 5px 11px 3px 11px;background: var(--color-bg-tertiary);
    display: inline-block;overflow: hidden;text-overflow: ellipsis;}
.panel-menu label.panel-menu-label:hover {background: var(--color-bg-primary);}
.panel-menu input.panel-menu-input:checked + label {background: var(--color-bg-primary);
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.panel-menu input.panel-menu-input:checked + label.panelmenu-bottom {
    border-bottom: 3px solid var(--color-state-focus-border);}
.panel-menu input.panel-menu-input:checked + label.panelmenu-left {
    border-left: 3px solid var(--color-state-focus-border);}
.panel-menu input.panel-menu-input:checked + label.panelmenu-right {
    border-right: 3px solid var(--color-state-focus-border);}
.panel-menu input.panel-menu-input:checked + label.panelmenu-top {
    border-top: 3px solid var(--color-state-focus-border);}
.panel-menu.panel-horizontal label.panel-menu-label {max-width: 180px;white-space: nowrap;}
.panel-menu.panel-vertical label.panel-menu-label {max-height: 70px;width: 100%;}

.fas, .fa-solid {
    font-weight: 900 !important;
  }

/*TODO implement switch button
  input.switch[type=checkbox]{height: 0;width: 0;visibility: hidden;}*/
/*input.switch + label {cursor: pointer;text-indent: -9999px;*/
/*    width: 200px;height: 100px;background: var(--color-bg-tertiary);*/
/*    display: block;border-radius: 100px;position: relative;}*/
/*input.switch + label:after {*/
/*    content: '';position: absolute;top: 5px;*/
/*    left: 5px;width: 90px;height: 90px;background: var(--color-bg-primary);*/
/*    border-radius: 90px;transition: 0.3s;*/
/*}*/
/*input.switch:checked + label {background: var(--color-diff-blob-comment-button-bg);}*/
/*input.switch:checked + label:after {left: calc(100% - 5px);transform: translateX(-100%);}*/
/*input.switch + label:active:after {width: 130px;}*/


/** DIALOGS*/
input.selectable-image-row-context:checked + div {
    outline: none; -webkit-box-shadow: 0 0 5px 3px var(--color-state-focus-border);
    -moz-box-shadow: 0 0 5px 3px var(--color-state-focus-border);
    box-shadow: 0 0 5px 3px var(--color-state-focus-border);}
@-webkit-keyframes popUpEnter { 0%{opacity: 0; margin-top: -20%;} 75%{margin-top: 50px;} 100%{opacity: 1;} }
@keyframes popUpEnter { 0%{opacity: 0; margin-top: -20%;} 75%{margin-top: 50px;} 100%{opacity: 1;} }
@-webkit-keyframes popUpHide { 0%{opacity: 1;display: flex !important;}
    75%{opacity: 0.9; margin-top: 0;display: flex !important;}
    100%{opacity: 0;margin-top: 10px;display: flex !important;} }
@keyframes popUpHide { 0%{opacity: 1;display: flex !important;}
    75%{opacity: 0.9; margin-top: 0;display: flex !important;}
    100%{opacity: 0;margin-top: 10px;display: flex !important;} }
.popUpEnter{opacity: 1 !important;animation: popUpEnter 0.2s;-webkit-animation: popUpEnter 0.2s;}
.popUpHide{opacity: 0;display: none !important;animation: popUpHide 0.2s;-webkit-animation: popUpHide 0.2s;
    -webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.loading-text-style {display: block !important;animation: pulsing 2s linear infinite;}
@keyframes pulsing {
    from { opacity: 1; }
    50% { opacity: 0.5; }
    to { opacity: 1; }
}

.shader-controls-row {
    width: 100%;
}

.shader-controls-row--renderer {
    display: block;
}

.shader-controls-row--renderer > .er-control {
    width: 100%;
    max-width: 100%;
}

/* One row of controls */
.shader-controls-row--grid {
    display: grid;
    grid-template-columns: minmax(0, var(--side, 30%)) minmax(0, 1fr) minmax(0, var(--side, 30%));
    gap: .5rem;
    align-items: center;
}

.shader-controls-row--grid > * {
    min-width: 0;
    max-width: 100%;
}

.shader-controls-row--grid[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.shader-controls-row--grid[data-columns="2"] {
    grid-template-columns: minmax(0, var(--side, 30%)) minmax(0, 1fr);
}

.shader-controls-row--grid[data-columns="3"] {
    grid-template-columns: minmax(0, var(--side, 30%)) minmax(0, 1fr) minmax(0, var(--side, 30%));
}

.shader-controls-row--grid[data-columns="1"] > :nth-child(1) { grid-column: 1; }
.shader-controls-row--grid[data-columns="2"] > :nth-child(1) { grid-column: 1; }
.shader-controls-row--grid[data-columns="2"] > :nth-child(2) { grid-column: 2; }
.shader-controls-row--grid[data-columns="3"] > :nth-child(1) { grid-column: 1; }
.shader-controls-row--grid[data-columns="3"] > :nth-child(2) { grid-column: 2; }
.shader-controls-row--grid[data-columns="3"] > :nth-child(3) { grid-column: 3; }

.shader-controls-row--grid[data-columns="1"] > :is(input, select, textarea, .form-control),
.shader-controls-row--grid[data-columns="2"] > :nth-child(2):is(input, select, textarea, .form-control),
.shader-controls-row--grid[data-columns="3"] > :nth-child(2):is(input, select, textarea, .form-control),
.shader-controls-row--grid[data-columns="3"] > :nth-child(3):is(input, select, textarea, .form-control) {
    width: 100%;
    max-width: 100%;
}
.er-control input[type="number"] { width: 100%; }

/* Small screens: stack vertically */
@media (max-width: 560px) {
    .shader-controls-row--grid {
        grid-template-columns: 1fr;
    }
    .shader-controls-row--grid > * { grid-column: auto; }
}

@keyframes toastbar { from { transform: scaleX(1); transform-origin:left } to { transform: scaleX(0); transform-origin:left } }
.animate-toastbar { animation-name: toastbar; animation-timing-function: linear; animation-fill-mode: forwards; }

/**************************************************************
**************** GLOBAL RULES *********************************
***************************************************************/
:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
    overflow: hidden;
    scrollbar-gutter: auto;
}
:root:has(:is(.modal-open, .\!modal:target, .modal-toggle:checked + .\!modal, .\!modal[open])) {
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
}
.svg-bg {fill: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)));}
.svg-fg {fill: var(--fallback-bc,oklch(var(--bc)/1));}
.stretch-grid__item {
    /*aspect-ratio: var(--aspect);*/
    display: grid;                 /* enables the stretch trick below */
}

/* anything you put inside (your OSD root div) fills the cell */
.stretch-grid__item > * {
    width: 100%;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;
}

/* extra safety for OSD’s own container */
.openseadragon-container {
    width: 100% !important;
    height: 100% !important;
}
a {cursor: pointer;}
input {background-color: inherit;}
input[type=range]:not(.range) {
    filter: contrast(0.5); /*attempt to make really visible*/
}
canvas { outline: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);border: none;}
/*IE*/ select::-ms-expand {display: none; /* Remove default arrow in Internet Explorer 10 and 11 */}
::-webkit-scrollbar {background: transparent;margin: 25px 0 25px 0;width: 14px;height: 14px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {height: 6px;border: 4px solid rgba(0, 0, 0, 0);background-clip: padding-box;
    -webkit-border-radius: 7px;background-color: var(--color-bg-tertiary);
    -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 0 rgba(0, 0, 0, 0.05);}
::-webkit-scrollbar-button {width: 0;height: 0;display: none;}
::-webkit-scrollbar-corner {background-color: transparent;}

#osd .xo-viewer-host {position: relative;}
#osd .xo-viewer-host::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px transparent;
    border-radius: 8px;
    pointer-events: none;
    z-index: 12;
    transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
#osd .xo-viewer-host[data-active-viewer="true"]::before {
    border-color: rgba(59, 130, 246, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(59, 130, 246, 0.65);
}
@media (prefers-reduced-motion: reduce) {
    #osd .xo-viewer-host::before {
        transition: none;
    }
}

/*This is copied style block from flex-renderer library here because I am just too lazy to add new css file.*/
.er-control {
    display: grid;
    width: 100%;
    gap: .5rem;
    align-items: center;
}

.er-control > * {
    min-width: 0;
    max-width: 100%;
}

.er-control[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.er-control[data-columns="2"] {
    grid-template-columns: minmax(0, var(--side, 30%)) minmax(0, 1fr);
}

.er-control[data-columns="3"] {
    grid-template-columns: minmax(0, var(--side, 30%)) minmax(0, 1fr) minmax(0, var(--side, 30%));
}

.er-control__title {
    grid-column: 1;
}

.er-control[data-columns="1"] > .er-control__body {
    grid-column: 1;
}

.er-control[data-columns="2"] > .er-control__body {
    grid-column: 2;
}

.er-control[data-columns="3"] > .er-control__body {
    grid-column: 2;
}

.er-control[data-columns="3"] > .er-control__aux {
    grid-column: 3;
}

.er-control__body,
.er-control__aux {
    min-width: 0;
    width: 100%;
}

.er-control__body > :is(input, select, textarea, .form-control, .er-control__input, .er-control__display, .er-control__widget),
.er-control__aux > :is(input, select, textarea, .form-control, .er-control__input, .er-control__display, .er-control__widget) {
    width: 100%;
    max-width: 100%;
}

.er-control--slider-with-input > .er-control__body,
.er-control--slider-with-input > .er-control__aux {
    min-width: 0;
    width: 100%;
}

.er-control__body--slider-with-input > .er-control,
.er-control__aux--slider-with-input > .er-control {
    display: block;
}

.er-control__body--slider-with-input > .er-control > .er-control__body,
.er-control__aux--slider-with-input > .er-control > .er-control__body {
    display: block;
}
@media (max-width: 560px) {
    .er-control {
        grid-template-columns: 1fr !important;
    }

    .er-control__title,
    .er-control__body,
    .er-control__aux {
        grid-column: 1 !important;
    }
}

.er-slider--vertical-pips .noUi-value {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translate(-50%, 0);
    padding-top: 9px;
    line-height: 1.1;
    font-size: 0.75rem;
    white-space: nowrap;
}

.er-slider--vertical-pips.noUi-horizontal {
    margin-bottom: 4.5rem;
}