:root {
    --gadget-ui-menu-bg: #fff;
    --gadget-ui-menu-fg: #222;
    --gadget-ui-menu-border: #777;
    --gadget-ui-menu-hover-bg: #ccc;
    --gadget-ui-lightbox-bg: rgba(0, 0, 0, 0.8);
    /* Prev/next chevron icons. `inherit` keeps the existing look (feather
     * SVGs render at currentColor) — consumers can theme by setting this
     * to e.g. white for a dark-background lightbox. */
    --gadget-ui-lightbox-control-fg: inherit;
    --gadget-ui-popover-bg: #fff;

    /* FloatingPane (and Dialog which extends it). Header is the drag
     * handle / title bar; bg/fg style the panel surface. */
    --gadget-ui-floatingPane-bg: transparent;
    --gadget-ui-floatingPane-fg: inherit;
    --gadget-ui-floatingPane-border: silver;
    --gadget-ui-floatingPane-radius: 5px;
    --gadget-ui-floatingPane-header-bg: silver;
    --gadget-ui-floatingPane-header-fg: black;

    /* CollapsiblePane. Visually identical to FloatingPane by default but
     * has its own token set so consumers can theme the two independently
     * (e.g. a treetable's collapsible sections vs. a draggable
     * inspector). Defaults match FloatingPane values. */
    --gadget-ui-collapsiblePane-bg: transparent;
    --gadget-ui-collapsiblePane-fg: inherit;
    --gadget-ui-collapsiblePane-border: silver;
    --gadget-ui-collapsiblePane-radius: 5px;
    --gadget-ui-collapsiblePane-header-bg: silver;
    --gadget-ui-collapsiblePane-header-fg: black;

    /* Dialog button row. Buttons default to `inherit` so the host page's
     * own button styles win unless a consumer explicitly themes them via
     * these tokens. */
    --gadget-ui-dialog-buttons-padding: 0.5em;
    --gadget-ui-dialog-button-bg: inherit;
    --gadget-ui-dialog-button-fg: inherit;

    /* Modal. Backdrop is the dimmed full-viewport overlay; bg/fg/border
     * style the inner modal window. */
    --gadget-ui-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
    --gadget-ui-modal-bg: #fff;
    --gadget-ui-modal-fg: inherit;
    --gadget-ui-modal-border: silver;

    /* Popover. --gadget-ui-popover-bg was added in 12.2.5; the rest of
     * the surface chrome (fg/border/radius/padding/shadow) joins it here.
     * Shadow defaults to `none` so existing visuals are unchanged;
     * consumers wanting a lift can set e.g. `0 4px 12px rgba(0,0,0,0.15)`. */
    --gadget-ui-popover-fg: inherit;
    --gadget-ui-popover-border: silver;
    --gadget-ui-popover-radius: 0.25em;
    --gadget-ui-popover-padding: 1em;
    --gadget-ui-popover-shadow: none;

    /* ProgressBar. -bg/-fg style the outer progressbox strip (and the
     * label inside it); -track-bg is the unfilled bar; -fill is the
     * progress fill; -status-fg is the percent text overlaid on the bar. */
    --gadget-ui-progressbar-bg: #999;
    --gadget-ui-progressbar-fg: #fff;
    --gadget-ui-progressbar-track-bg: #ddd;
    --gadget-ui-progressbar-fill: #4caf50;
    --gadget-ui-progressbar-status-fg: #333;

    /* Tabs. -bar-bg is the strip behind the tab row; -tab-bg/-fg style
     * each inactive tab; -tab-active-bg/-fg the selected one; -tab-hover-bg
     * the hover state. Horizontal and vertical orientations share tokens
     * since the visual roles are identical. The default --tab-active-bg
     * and --tab-hover-bg happen to be the same color; kept as separate
     * tokens so consumers can differentiate. */
    --gadget-ui-tabs-bar-bg: #ccc;
    --gadget-ui-tab-bg: #777;
    --gadget-ui-tab-fg: #fff;
    --gadget-ui-tab-active-bg: #999;
    --gadget-ui-tab-active-fg: #fff;
    --gadget-ui-tab-hover-bg: #999;

    /* Overlay. Layered under the JS `backgroundColor` option — Overlay
     * only sets inline `background-color` now when the consumer
     * explicitly passes it, so the default flows through this token
     * and is overridable via CSS. */
    --gadget-ui-overlay-bg: rgba(0, 0, 0, 0.5);
    --gadget-ui-overlay-fg: inherit;

    /* Sidebar. Single border token used by both the wrapper and the
     * toggle handle (which has three borders matching the wrapper). */
    --gadget-ui-sidebar-border: silver;
}

div.gadgetui-bubble span {
    font-size: 13px;
}

/* CollapsiblePane — themed via --gadget-ui-collapsiblePane-* tokens.
 * Defaults preserve the original silver/black look (identical to
 * FloatingPane); split so the two can be themed independently. */
div.gadget-ui-collapsiblePane {
    padding: 0px;
    border-radius: var(--gadget-ui-collapsiblePane-radius);
    border: 1px solid var(--gadget-ui-collapsiblePane-border);
    background-color: var(--gadget-ui-collapsiblePane-bg);
    color: var(--gadget-ui-collapsiblePane-fg);
    overflow: hidden;
}

div.gadget-ui-collapsiblePane > div:nth-child(2) {
    padding: 0.5em;
}

div.gadget-ui-collapsiblePane-header {
    padding: 2px 0px 2px 0.5em;
    text-align: left;
    border-radius: var(--gadget-ui-collapsiblePane-radius) var(--gadget-ui-collapsiblePane-radius) 0 0;
    border: 1px solid transparent;
    background-color: var(--gadget-ui-collapsiblePane-header-bg);
    color: var(--gadget-ui-collapsiblePane-header-fg);
    font-weight: bold;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

div.gadget-ui-collapsiblePane-header div {
    float: right;
    display: inline;
    padding-right: 0.25em;
    margin-top: 0.1em;
}

/* FloatingPane — themed via --gadget-ui-floatingPane-* tokens. Defaults
 * preserve the original silver/black look. */
div.gadget-ui-floatingPane {
    padding: 0px;
    border-radius: var(--gadget-ui-floatingPane-radius);
    border: 1px solid var(--gadget-ui-floatingPane-border);
    background-color: var(--gadget-ui-floatingPane-bg);
    color: var(--gadget-ui-floatingPane-fg);
    overflow: hidden;
    position: absolute;
}

div.gadget-ui-floatingPane > div:nth-child(2) {
    padding: 0.5em;
    overflow: auto;
}

div.gadget-ui-floatingPane-header {
    padding: 2px 0px 2px 0.5em;
    text-align: left;
    border-radius: var(--gadget-ui-floatingPane-radius) var(--gadget-ui-floatingPane-radius) 0 0;
    border: 1px solid transparent;
    background-color: var(--gadget-ui-floatingPane-header-bg);
    color: var(--gadget-ui-floatingPane-header-fg);
    font-weight: bold;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

div.gadget-ui-floatingPane-header div {
    float: right;
    display: inline;
    padding-right: 0.25em;
    margin-top: 0.1em;
}

/* Dialog — extends FloatingPane; only the button row and individual
 * buttons need Dialog-specific rules. Inline styles in addButtons() have
 * been moved here so consumers can override via CSS. */
.gadgetui-dialog-buttons {
    text-align: center;
    padding: var(--gadget-ui-dialog-buttons-padding);
}

.gadgetui-dialog-button {
    background-color: var(--gadget-ui-dialog-button-bg);
    color: var(--gadget-ui-dialog-button-fg);
}

p.gadgetui-bubble-speech {
    display: none;
}

div.gadgetui-bubble {
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

.feather {
    width: 1.2em;
    height: 1.2em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

div.gadgetui-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gadget-ui-modal-backdrop-bg);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition:
        visibility 0s linear 0.25s,
        opacity 0.25s 0s,
        transform 0.25s;
}

div.gadgetui-modalWindow {
    padding: 1em;
    border-radius: 0.25em;
    background: var(--gadget-ui-modal-bg);
    color: var(--gadget-ui-modal-fg);
    border: 1px solid var(--gadget-ui-modal-border);
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}

div.gadgetui-showModal {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
        visibility 0s linear 0s,
        opacity 0.25s 0s,
        transform 0.25s;
}

.gadgetui-right-align {
    float: right;
}

div.gadgetui-sidebar {
    border: 1px solid var(--gadget-ui-sidebar-border);
    position: relative;
    top: 0;
    bottom: 0;
}

div.gadgetui-sidebar-minimized {
    width: 25px !important;
}

div.gadgetui-sidebarContent-minimized {
    opacity: 0;
    overflow: hidden;
    width: 0px !important;
}

span.gadgetui-sidebar-toggle {
    position: relative;
    right: 0;
    top: 48%;
    border-left: 1px solid var(--gadget-ui-sidebar-border);
    border-top: 1px solid var(--gadget-ui-sidebar-border);
    border-bottom: 1px solid var(--gadget-ui-sidebar-border);
    padding-top: 4px;
    border-radius: 0.25em 0 0 0.25em;
    cursor: pointer;
}

div.gadget-ui-menu {
    display: inline-block;
    padding: 0 0.25em;
    margin: 0 0 0.25em 0;
    cursor: pointer;
}

/* Theming contract: consumers override these custom properties at any scope
 * to integrate the dropdown with their app's theme. Using a paired var set
 * means the bg/fg can never drift apart (which they could if a consumer
 * mapped only one of them to their app vars). Defaults read on a white
 * surface in any environment. */
.gadget-ui-menu-menuItem {
    display: none;
    border: 1px solid var(--gadget-ui-menu-border);
    background: var(--gadget-ui-menu-bg);
    color: var(--gadget-ui-menu-fg);
}

.gadget-ui-menu-menuItem > div {
    padding-top: 0.5em;
    display: block;
}

.gadget-ui-menu-hovering {
    display: block;
    position: absolute;
}

/* Portal-mode dropdowns are appended to <body>; position is set inline by JS
 * (position: fixed + top/left from the trigger's bounding rect). The high
 * z-index gives a sane default above normal page content even before any
 * consumer styles load. */
.gadget-ui-menu-portaled {
    z-index: 10000;
}

.gadget-ui-menu-item > .gadget-ui-menu-menuItem {
    position: absolute;
    margin-left: 90%;
    margin-top: -1.3em;
    float: right;
}

.gadget-ui-menu-item {
    white-space: nowrap;
    padding: 0 1em 0.5em 0.25em;
}

.gadget-ui-menu-item:hover {
    background: var(--gadget-ui-menu-hover-bg);
}

.gadget-ui-menu-icon {
    width: 2em;
    display: inline;
    margin-right: 0.25em;
}

/* Mobile-friendly menu styles */
@media (max-width: 768px) {
    .gadget-ui-menu-item {
        padding: 0.75em 1em;
        min-height: 44px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .gadget-ui-menu-item:active {
        background: var(--gadget-ui-menu-hover-bg);
    }

    .gadget-ui-menu-menuItem {
        min-width: 180px;
    }

    .gadget-ui-menu-icon {
        width: 1.5em;
        margin-right: 0.5em;
    }
}

.gadget-ui-tabs-h {
    background-color: var(--gadget-ui-tabs-bar-bg);
    padding: 0 0.5em;
    margin-top: 0.25em;
    display: flex;
    /*   justify-content: space-between; */
}

.gadget-ui-tabs-h div.gadget-ui-tab-h {
    display: inline-block;
    padding: 0.5em 1em 0 1em;
    background-color: var(--gadget-ui-tab-bg);
    color: var(--gadget-ui-tab-fg);
    margin: 0.5em 0.5em 0 0.5em;
    font-weight: bold;
    border-radius: 0.25em 0.25em 0 0;
    height: 1.5em;
    cursor: pointer;
}

.gadget-ui-tabs-h div.gadget-ui-tab-h:hover {
    background-color: var(--gadget-ui-tab-hover-bg);
}

.gadget-ui-tabs-h div.gadget-ui-tab-h-active {
    display: inline-block;
    padding: 0.5em 1em 0 1em;
    background-color: var(--gadget-ui-tab-active-bg);
    color: var(--gadget-ui-tab-active-fg);
    margin: 0.5em 0.5em 0 0.5em;
    font-weight: bold;
    border-radius: 0.25em 0.25em 0 0;
    height: 1.5em;
}

.gadget-ui-tabs-v {
    background-color: var(--gadget-ui-tabs-bar-bg);
    padding: 0;
    display: block;
}

.gadget-ui-tabs-v div.gadget-ui-tab-v {
    display: block;
    padding: 0.5em 0.5em 0 1em;
    background-color: var(--gadget-ui-tab-bg);
    color: var(--gadget-ui-tab-fg);
    margin: 0.5em 0 0 0.5em;
    font-weight: bold;
    border-radius: 0;
    height: 1.5em;
    text-align: right;
    cursor: pointer;
}

.gadget-ui-tabs-v div.gadget-ui-tab-v:hover {
    background-color: var(--gadget-ui-tab-hover-bg);
}

.gadget-ui-tabs-v div.gadget-ui-tab-v-active {
    display: block;
    padding: 0.5em 0.5em 0 1em;
    background-color: var(--gadget-ui-tab-active-bg);
    color: var(--gadget-ui-tab-active-fg);
    margin: 0.5em 0 0 0.5em;
    font-weight: bold;
    border-radius: 0;
    height: 1.5em;
    text-align: right;
}

.gadgetui-progressbar-progressbox {
    display: flex;
    padding: 0.25em 0.5em;
    background: var(--gadget-ui-progressbar-bg);
    color: var(--gadget-ui-progressbar-fg);
    align-items: center;
}

.gadgetui-progressbar-label {
    color: var(--gadget-ui-progressbar-fg);
    padding-right: 0.5em;
    white-space: nowrap;
}

.gadgetui-progressbar-container {
    position: relative;
    flex: 1;
    background: var(--gadget-ui-progressbar-track-bg);
    height: 1.5em;
    overflow: hidden;
}

.gadget-ui-progressbar {
    background: var(--gadget-ui-progressbar-fill);
    height: 100%;
    transition: width 0.3s ease;
}

.gadgetui-progressbar-statustxt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gadget-ui-progressbar-status-fg);
    font-weight: bold;
    font-size: smaller;
    pointer-events: none;
}

.gadget-ui-progressbar-filename {
    padding: 0 0.25em;
}

.gadgetui-lightbox {
    width: 100%;
    height: 100%;
    position: relative; /* Changed to relative for better containment */
}

.gadgetui-lightbox-image-container {
    width: 95%;
    height: 100%; /* Ensure container takes full height */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Hide transition image during slide */
}

.gadgetui-lightbox-image {
    width: 100%;
    /* height: 100%;
	position: absolute; */
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1; /* Main image below transition image */
}

.gadgetui-lightbox-transitionimage {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 2; /* Transition image above main image */
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

.gadgetui-slide-left {
    transform: translateX(100%); /* Start off-screen to the right (for next) */
}

.gadgetui-slide-right {
    transform: translateX(
        -100%
    ); /* Start off-screen to the left (for previous) */
}

.gadgetui-slide-in {
    transform: translateX(0); /* Slide to center */
}

.gadgetui-lightbox-previousControl {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--gadget-ui-lightbox-control-fg);
    z-index: 3; /* Above both images */
}

.gadgetui-lightbox-nextControl {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--gadget-ui-lightbox-control-fg);
    z-index: 3; /* Above both images */
}

.gadgetui-lightbox-modal {
    width: 100%;
    height: 100%;
    z-index: 4; /* Above everything */
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(
        --gadget-ui-lightbox-bg
    ); /* Semi-transparent for better UX */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gadgetui-hidden {
    display: none;
}

/* Overlay — anchor-tracking dim layer. Position/size are set inline by
 * JS (driven by the anchor's getBoundingClientRect + ResizeObserver), so
 * only the visual chrome lives here. Background flows through a token
 * so consumers can theme without `!important`, since the JS no longer
 * applies an inline background-color unless one was explicitly passed. */
.gadgetui-overlay {
    background-color: var(--gadget-ui-overlay-bg);
    color: var(--gadget-ui-overlay-fg);
}

.gadgetui-lightbox-modal-imagecontainer {
    width: 90%;
    max-height: 80%;
    position: relative;
}

.gadgetui-lightbox-modal-imagecontainer img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain; /* Ensure modal image fits without stretching */
}

.gadgetui-dialog-button {
    margin: 0 0.5em;
}

/* Popover. The `top: 100px; left: 50%; transform: translateX(-5%)`
 * defaults are the original (pre-12.3.0) placeholder positioning and
 * stay in place for back-compat — 39 consumer call sites rely on them.
 * When the JS-side anchor/portal API is opted into, JS overrides these
 * via inline `position: fixed; top: ...; left: ...; transform: none;`.
 * 13.0.0 plans to rip these defaults and switch to viewport-centered
 * for the no-anchor case. */
div.gadgetui-popover {
    padding: var(--gadget-ui-popover-padding);
    border-radius: var(--gadget-ui-popover-radius);
    background: var(--gadget-ui-popover-bg);
    color: var(--gadget-ui-popover-fg);
    border: 1px solid var(--gadget-ui-popover-border);
    box-shadow: var(--gadget-ui-popover-shadow);
    z-index: 5; /* Above modal */
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-5%);
    visibility: hidden;
}

div.gadgetui-showPopover {
    opacity: 1;
    visibility: visible !important;
    transform: scale(1);
    transition:
        visibility 0s linear 0s,
        opacity 0.25s 0s,
        transform 0.25s;
}

:root {
	/* Shared by lookuplist + autosuggest inputs (visual twins) and the
	 * combobox: the input chrome, the dropdown menu it opens, and the
	 * selected-item "chip" pills. Combobox reuses --gadget-ui-input-bg /
	 * --gadget-ui-input-border for its own select/input chrome. */
	--gadget-ui-input-bg: #fff;
	--gadget-ui-input-border: silver;
	--gadget-ui-input-chip-bg: silver;
	--gadget-ui-input-menu-bg: #fff;
	--gadget-ui-input-menu-fg: #000;
	--gadget-ui-input-menu-border: silver;
	--gadget-ui-input-menu-hover-fg: silver;
	--gadget-ui-input-cancel-bg: #f4f0ec;
	--gadget-ui-input-cancel-border: #f4f0ec;

	/* Range-input-styled toggle switch. Track flips between
	 * --toggle-track-bg (on) and --toggle-track-off-bg (off); thumb is a
	 * separate var so light/dark themes can keep contrast. */
	--gadget-ui-toggle-track-bg: #000;
	--gadget-ui-toggle-track-off-bg: #ccc;
	--gadget-ui-toggle-thumb-bg: #fff;
}

div .gadget-ui-input-div {
	display: inline;
	font-size: 1.1em;
	font-family: inherit;
}
div .gadget-ui-input-div span {
	padding-left: 4px;
	font-size: 0.8em;
	letter-spacing: 1px;
	font-family: inherit;
}
div .gadget-ui-input-div input {
	line-height: 0.8em;
	font-size: 0.8em;
	letter-spacing: 1px;
	font-family: inherit;
	margin: 0px 0px -1px;
	padding: 0px 0px 0px 1px;
	min-width: 2em;
}

div .gadget-ui-input-div div {
}

div.gadgetui-lookuplist-input-div,
div.gadgetui-lookuplist-input {
	background: var(--gadget-ui-input-bg);
	border: 1px solid var(--gadget-ui-input-border);
}

div.gadgetui-lookuplist-input-div input,
div.gadgetui-lookuplist-input input {
	border: 0;
	outline: none;
	padding-left: 10px;
}

div.gadgetui-lookuplist-input-div .gadgetui-lookuplist-input-item,
div.gadgetui-lookuplist-input .gadgetui-lookuplist-input-item {
	display: inline !important;
	padding: 0 20px 0 10px;
}

div.gadgetui-lookuplist-input-div .gadgetui-lookuplist-input-cancel,
div.gadgetui-lookuplist-input .gadgetui-lookuplist-input-cancel {
	background: url("img/cancel.png") 98% center no-repeat var(--gadget-ui-input-cancel-bg);
	border: 1px solid var(--gadget-ui-input-cancel-border);
	padding: 0px 20px 0px 3px;
	margin: 0px;
	display: inline-block;
	position: absolute;
	height: 15px;
}

div.gadgetui-lookuplist-input-div > .gadgetui-lookuplist-input-item-wrapper,
div.gadgetui-lookuplist-input > .gadgetui-lookuplist-input-item-wrapper {
	margin: 3px;
	display: inline-block;
	position: relative;
	background: var(--gadget-ui-input-chip-bg);
	border-radius: 5px;
}

div.gadgetui-lookuplist-menu {
	padding: 0;
	margin: 0;
	background: var(--gadget-ui-input-menu-bg);
	color: var(--gadget-ui-input-menu-fg);
	border: 1px solid var(--gadget-ui-input-menu-border);
}

div.gadgetui-lookuplist-item {
	display: block;
	padding-left: 10px;
}

div.gadgetui-lookuplist-item:hover {
	/*	background: silver;	*/
	color: var(--gadget-ui-input-menu-hover-fg);
	border-top: 1px solid var(--gadget-ui-input-menu-border);
	border-bottom: 1px solid var(--gadget-ui-input-menu-border);
}

div.gadgetui-selectinput-label {
	display: inline-block;
}

div.gadgetui-selectinput-div {
	line-height: normal;
	box-sizing: initial;
	-webkit-box-sizing: initial;
	-moz-box-sizing: initial;
}

select.gadgetui-selectinput {
	/* hack to allow font-size changes in Safari/Chrome */
	border-image: 0;
	-webkit-box-shadow: 0 0 0 transparent;
	box-shadow: 0 0 0 transparent;
}

input.gadgetui-combobox-input,
select.gadgetui-combobox-select {
	outline: none;
}

select.gadgetui-combobox-select::-ms-expand {
	display: none;
}

select.gadgetui-combobox-select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}

div.gadgetui-combobox {
	line-height: normal;
	box-sizing: initial;
	opacity: 1;
	position: relative;
	-webkit-box-sizing: initial;
	-moz-box-sizing: initial;
}

select.gadgetui-combobox-select {
	margin-left: 1px;
	background-color: var(--gadget-ui-input-bg);
	border: 0px;
	display: inline;
}

select.gadgetui-combobox-select option {
	padding-left: 0px;
	margin-left: 1px;
}

div.gadgetui-combobox-selectwrapper {
	box-shadow: 0px 0px 0px;
	border: 1px solid var(--gadget-ui-input-border);
	border-radius: 5px;

	display: inline;
	position: absolute;
	padding-bottom: 1px;
	left: 0;
}

div.gadgetui-combobox-selectwrapper:after {
	content: url(/node_modules/feather-icons/dist/icons/chevron-down.svg);
	right: 0px;
	height: 1.25em;
	border-left: 1px solid var(--gadget-ui-input-border);
	position: absolute;
	pointer-events: none;
	width: 24px;
}

input.gadgetui-combobox-input {
	margin-left: 1px;
	border-radius: 5px 0 0 5px;
	padding-left: 5px;
	border: 0;
	display: inline;
	background-color: var(--gadget-ui-input-bg);
}

div.gadgetui-combobox-label {
	position: absolute;
	padding-top: 2px;
	margin-left: 1px;
}

div.gadgetui-combobox-inputwrapper {
	position: absolute;
}

.gadgetui-fileuploader-wrapper {
	/* border: 1px solid silver; */
}

.gadgetui-fileuploader-dropmessage {
	opacity: 0.7;
	position: sticky;
	margin-top: 45%;
}

.gadgetui-inputlabelinput {
	background: none;
	padding-left: 4px;
	border: 1px solid transparent;
}

.gadget-ui-textinput-hideInput-firefox {
	border-inline-end-width: 8px;
	border-inline-start-width: 8px;
	border-left-width: 0px;
	border-right-width: 8px;
	border-image-width: 1;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-color: transparent !important;
	background-color: transparent !important;
}

.gadget-ui-textinput-hideInput-chrome,
.gadget-ui-textinput-hideInput-generic {
	border-inline-end-width: 8px;
	border-right-width: 8px;
	border-image-width: 1;
	border-color: transparent !important;
	background-color: transparent !important;
}

/* Base toggle styling */
.gadget-ui-toggle {
	-webkit-appearance: none;
	appearance: none;
	width: 3em;
	background-color: transparent;
	height: 1.5em;
	outline: none;
}

/* Track styling - Chrome */
.gadget-ui-toggle::-webkit-slider-runnable-track {
	width: 100%;
	height: 1.5em;
	cursor: pointer;
	background: var(--gadget-ui-toggle-track-bg);
	border-radius: 0px;
	border: 0;
	padding: 2px;
}

.gadget-ui-toggle:focus::-webkit-slider-runnable-track {
	background: var(--gadget-ui-toggle-track-bg);
}

/* Track styling - Firefox */
.gadget-ui-toggle::-moz-range-track {
	width: 100%;
	height: 1.5em;
	cursor: pointer;
	background: var(--gadget-ui-toggle-track-bg);
	border-radius: 0px;
	border: 0;
}

/* Track styling - IE */
.gadget-ui-toggle::-ms-track {
	width: 100%;
	height: 1.5em;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}

/* "Off" state - All browsers */
.gadget-ui-toggle-off::-webkit-slider-runnable-track {
	background: var(--gadget-ui-toggle-track-off-bg) !important;
}

.gadget-ui-toggle-off::-moz-range-track {
	background: var(--gadget-ui-toggle-track-off-bg) !important;
}

.gadget-ui-toggle-off::-ms-track {
	background: var(--gadget-ui-toggle-track-off-bg) !important;
}

/* Thumb styling - Chrome */
.gadget-ui-toggle::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 1.4em;
	width: 1.4em;
	border-radius: 0px;
	background: var(--gadget-ui-toggle-thumb-bg);
	cursor: pointer;
	margin-top: -0.1em; /* Adjusted to center thumb (approx 1.6px up at 16px font-size) */
}

/* Thumb styling - Firefox */
.gadget-ui-toggle::-moz-range-thumb {
	height: 1.4em;
	width: 1.4em;
	border-radius: 0px;
	background: var(--gadget-ui-toggle-thumb-bg);
	cursor: pointer;
}

/* Thumb styling - IE */
.gadget-ui-toggle::-ms-thumb {
	height: 1.4em;
	width: 1.4em;
	border-radius: 0px;
	background: var(--gadget-ui-toggle-thumb-bg);
	cursor: pointer;
}

/* Round variant - Track */
.gadget-ui-toggle-round::-webkit-slider-runnable-track {
	border-radius: 0.7em !important;
}

.gadget-ui-toggle-round::-moz-range-track {
	border-radius: 0.7em !important;
}

.gadget-ui-toggle-round::-ms-track {
	border-radius: 0.7em !important;
}

/* Round variant - Thumb */
.gadget-ui-toggle-round::-webkit-slider-thumb {
	border-radius: 0.7em !important;
}

.gadget-ui-toggle-round::-moz-range-thumb {
	border-radius: 0.7em !important;
}

.gadget-ui-toggle-round::-ms-thumb {
	border-radius: 0.7em !important;
}

div.gadgetui-autosuggest-input-div,
div.gadgetui-autosuggest-input {
	background: var(--gadget-ui-input-bg);
	border: 1px solid var(--gadget-ui-input-border);
}

div.gadgetui-autosuggest-input-div input,
div.gadgetui-autosuggest-input input {
	border: 0;
	outline: none;
	padding-left: 10px;
}

div.gadgetui-autosuggest-input-div .gadgetui-autosuggest-input-item,
div.gadgetui-autosuggest-input .gadgetui-autosuggest-input-item {
	display: inline !important;
	padding: 0 20px 0 10px;
}

div.gadgetui-autosuggest-input-div .gadgetui-autosuggest-input-cancel,
div.gadgetui-autosuggest-input .gadgetui-autosuggest-input-cancel {
	background: url("img/cancel.png") 98% center no-repeat var(--gadget-ui-input-cancel-bg);
	border: 1px solid var(--gadget-ui-input-cancel-border);
	padding: 0px 20px 0px 3px;
	margin: 0px;
	display: inline-block;
	position: absolute;
	height: 15px;
}

div.gadgetui-autosuggest-input-div > .gadgetui-autosuggest-input-item-wrapper,
div.gadgetui-autosuggest-input > .gadgetui-autosuggest-input-item-wrapper {
	margin: 3px;
	display: inline-block;
	position: relative;
	background: var(--gadget-ui-input-chip-bg);
	border-radius: 5px;
}

div.gadgetui-autosuggest-menu {
	padding: 0;
	margin: 0;
	background: var(--gadget-ui-input-menu-bg);
	color: var(--gadget-ui-input-menu-fg);
	border: 1px solid var(--gadget-ui-input-menu-border);
}

div.gadgetui-autosuggest-item {
	display: block;
	padding-left: 10px;
}

div.gadgetui-autosuggest-item:hover {
	/*	background: silver;	*/
	color: var(--gadget-ui-input-menu-hover-fg);
	border-top: 1px solid var(--gadget-ui-input-menu-border);
	border-bottom: 1px solid var(--gadget-ui-input-menu-border);
}

/*# sourceMappingURL=gadget-ui.css.map */