--ts-fieldbordercolor: #999;
--ts-fieldbordercolor-hover: #999;
--ts-fieldbordercolor-focus: #999;


img.tsok {
    width: 17px;
    height: 17px;
    content: url("../Images/checkmark2.png");
    margin-bottom: -2px;
}

img.tswarning {
    width: 17px;
    height: 17px;
    content: url("../Images/warning2.png");
    margin-bottom: -2px;
    margin-right: 4px;
}

img.tsopenfile {
    width: 20px;
    height: 20px;
    content: url("../Images/Open-icon.png");
    margin-bottom: -2px;
    margin-left: 4px;
}

img.tsinfo {
    width: 20px;
    height: 20px;
    content: url("../Images/ic_info_outline_white.png");
    margin-bottom: -7px;
}

img.tsimage {
    width: 20px;
    height: 20px;
    margin-bottom: -6px;
}

img.tsiconimage {
    width: 36px;
    height: 36px;
    margin-bottom: -20px;
    margin-top: 2px;
    margin-right: -2px;
    margin-left: 5px;
}

img.tsiconimage2 {
    width: 30px;
    height: 30px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

.ts-icon-file-label {
    float: none;
    height: 40px !important;
}

.tsfilename {
    font-size: 8pt;
}

.HideDawElement {
    display: none !important;
}

.tsheight26 {
    min-height: 26px;
    padding: 0px 4px 0px 4px;
}

.tswidth15 {
    width: 15%;
}

.tswidth20 {
    width: 20%;
}

.tswidth25 {
    width: 25%;
}

.tswidth30 {
    width: 30%;
}

.tswidth40 {
    width: 40%;
}

.tswidth50 {
    width: 50%;
}

.tswidth55 {
    width: 55%;
}

.tswidth60 {
    width: 60%;
}

.tswidth65 {
    width: 65%;
}

.tswidth50px {
    width: 50px;
}

.tswidth100 {
    width: 226px;
}

.tswidth99 {
    width: 200px;
}

.tsfaderborder {
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 231px;
}

.ts-valuefield {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
}

.ts-valuefield20 {
    width: 20px !important;
    min-width: 20px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
}

.ts-plusminusvaluefield {
    width: 35px !important;
    min-width: 35px !important;
    min-height: 26px;
    padding: 0px 2px 0px 2px;
    text-align: center;
}

.ts-plusminusvaluefield2 {
    width: 55px !important;
    min-width: 55px !important;
    min-height: 26px;
    padding: 0px 2px 0px 2px;
    text-align: center;
}

.ts-plusminusvaluefield45 {
    width: 45px !important;
    min-width: 45px !important;
    min-height: 26px;
    height: 26px;
    padding: 0px 2px 0px 2px;
    text-align: center;
}

.ts-inputfield {
    font-size: 10pt !important;
    min-width: 30px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
}

.ts-inputfieldsmall {
    font-size: 9pt !important;
    min-width: 30px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
}

.ts-inputfieldsmall,
option {
    font-size: 9pt !important;
    font-weight: var(--sdpi-fontweight);
    letter-spacing: var(--sdpi-letterspacing);
}

.ts-select {
    font-size: 10px !important;
    min-width: 30px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
    height: 26px;
}

.ts-select2 {
    min-width: 30px !important;
    min-height: 26px;
    padding: 0px 4px 0px 4px;
    height: 26px;
}

.ts-qinputfield {
    width: 70px !important;
    min-width: 70px !important;
    font-size: 10pt !important;
    min-height: 23px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}

.ts-qinputfield2 {
    width: 70px !important;
    min-width: 70px !important;
    min-height: 23px;
    padding: 0px 5px !important;
    text-align: left;
    font-size: 12pt !important;
}

.ts-textsmall {
    font-size: 8pt !important;
}

.ts-hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #666, transparent);
    margin-bottom: 15px;
    margin-top: 15px;
}

.ts-button {
    margin-right: 0px !important;
    margin-left: 0px !important;
    min-height: 26px;
    border-radius: 3px;
}

    .ts-button:hover {
        background-color: #585858;
        color: white;
        cursor: pointer;
    }

button {
    border-radius: 3px !important;
}

.sdpi-file-label {
    border-radius: 3px !important;
}

.ts-plusminusbutton {
    margin-right: 0px !important;
    margin-left: 0px !important;
    min-height: 26px;
    width: 19px;
}

.ts-plusminusbutton2:hover {
    border-color: #aaa;
}

.ts-plusminusbutton2 {
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    border-radius: 3px;
    border-width: 1px;
    border-color: #777;
    min-height: 26px;
    width: 19px !important;
    min-width: 19px !important;
}

.ts-item-value {
    flex: 1 0 0;
    /* flex-grow: 1;
  flex-shrink: 0; 
  margin-right: 14px;
  margin-left: 4px;*/
    justify-content: space-evenly;
}

.ts-item-value {
    font-size: 9pt;
    font-weight: var(--sdpi-fontweight);
    letter-spacing: var(--sdpi-letterspacing);
}

    .ts-item-value.button,
    .ts-item-value.select,
    .ts-item-value > select {
        padding-left: 5px;
        margin-right: 0px;
        margin-left: 5px;
        min-height: 26px;
    }

.ts-item-label {
    text-align: right;
    flex: none;
    width: 94px;
    padding-right: 4px;
    font-weight: 600;
    -webkit-user-select: none;
}

.ts-box {
    margin-right: 5px;
    margin-left: 15px;
    margin-bottom: 2px;
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    border-radius: 5px;
}

.ts-hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #777;
}

.ts-iconbox {
    margin-right: 5px;
    padding-left: 10px;
    padding: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: dimgray;
    border-radius: 5px;
    width: 70px;
    min-width: 70px;
}

.ts-mixerbox {
    margin-bottom: 2px;
    padding: 2px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    border-radius: 5px;
    width: 98%;
}

.ts-mixerboxheader {
    color: PaleGoldenRod;
    font-weight: bold;
    font-style: italic;
    margin-left: 7px;
    padding: 2px 0px;
}

    /* Force normal arrow cursor on collapsible headers (and all children) */
    .ts-mixerboxheader,
    .ts-mixerboxheader * {
        cursor: default !important;
    }

        .ts-mixerboxheader:hover {
            background-image: linear-gradient(#383838, #383838, #303030, #282828, #222);
        }

.ts-highlight {
    color: PaleGoldenRod;
}

.ts-highlight2 {
    color: PaleGoldenRod;
    font-style: italic;
    font-weight: bold;
}

.ts-highlight3 {
    color: #e0e0e0;
    font-weight: bold;
}

.ts-highlight4 {
    color: #e0e0e0;
}

.ts-selectfile {
    color: PaleGoldenRod;
    font-style: italic;
}

.ts-updateinfo {
    color: PaleGoldenRod;
    font-size: 8pt;
    font-style: italic;
}

.ts-samewarning {
    color: PaleGoldenRod;
    margin-left: 100px;
}

.ts-twolinelabel {
    align-items: safe center;
    /* margin-bottom: 8px;
	padding-bottom:5px;*/
}

.ts-shift-up {
    position: relative;
    top: -2px;
}

.ts-margin {
    margin-left: 5px;
}

.ts-margin4 {
    margin-left: 4px;
}

.ts-margin0 {
    margin-left: 0px !important;
}

.ts-textarea {
    /*   min-height: 40px; 
	height: 40px; 
	
	  min-width: 120px; */
    width: 100%;
    margin-right: 10px;
    padding: 0px 10px;
}

.os-windows .ts-info-note {
    font-size: 11px;
}

.os-mac .ts-info-note {
    font-size: 8pt;
}

.os-windows .ts-logid {
    font-size: 13px;
}

.os-mac .ts-logid {
    font-size: 11px;
}


.showsection {
    float: right;
    width: 18px;
    height: 18px;
    content: url("../Images/ShowSection.png");
    margin-right: 5px;
    margin-top: -1px;
    opacity: 0.4;
}

.hidesection {
    float: right;
    width: 18px;
    height: 18px;
    content: url("../Images/HideSection.png");
    margin-right: 5px;
    margin-top: 0px;
    opacity: 0.4;
}

.sectionOK {
    width: 10px;
    height: 10px;
    content: url("../Images/greenbutton.png");
    margin-left: 5px;
    margin-bottom: -1px;
}

.sectionFail {
    width: 10px;
    height: 10px;
    content: url("../Images/redbutton.png");
    margin-left: 5px;
    margin-bottom: -1px;
}

.sdCollapsableBox .collapse-body {
    margin-top: 4px;
}

.sdCollapsableBox:not(.open) .collapse-body {
    display: none;
}

.sdCollapsableBox .collapse-icon.hidesection {
    display: none;
}

.sdCollapsableBox.open .collapse-icon.hidesection {
    display: inline;
}

.sdCollapsableBox.open .collapse-icon.showsection {
    display: none;
}
/* Color row horizontal layout overrides */
.colors-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start !important; /* override space-evenly */
    gap: 10px; /* spacing between visible groups */
}

.color-group {
    display: flex;
    align-items: center;
}

    .color-group .color-label {
        display: inline-block;
        text-align: right;
        line-height: 10px;
        margin-right: 4px;
        width: 40px;
        white-space: normal;
    }

    .color-group input {
        margin-left: 0; /* remove extra left indentation */
    }

.select, .select2 {
    height: 26px;
    border-radius: 3px;
    cursor: pointer;
}

:root {
    --pi-border-color: #666;
    --pi-border-color-hover: #999;
    /*    --pi-border-color-focus: #b8b670;*/
    --pi-border-color-focus: #999;
    --pi-background-color: #616161;
    --pi-background-filter-hover: brightness(1.2);
    --pi-background-filter-focus: brightness(1.2);
}

/* --- Custom white border around checkbox squares --- */
input[type="checkbox"] + label span,
label > input[type="checkbox"] + span,
input[type="radio"] + label span,
label > input[type="radio"] + span {
    border: 1px solid var(--pi-border-color) !important;
    box-sizing: border-box;
    /* optional: ensure consistent size if theme shrinks it
    width: 14px;
    height: 14px;
    display: inline-block; */
}

/* Hover state (optional stronger contrast) */
input[type="checkbox"]:hover + label span,
label > input[type="checkbox"]:hover + span,
input[type="radio"]:hover + label span,
label > input[type="radio"]:hover + span {
    border-color: var(--pi-border-color-hover) !important;
    filter: var(--pi-background-filter-hover) !important;
}

/* Focus outline for accessibility */
input[type="checkbox"]:focus + label span,
label > input[type="checkbox"]:focus + span,
input[type="radio"]:focus + label span,
label > input[type="radio"]:focus + span {
    outline: 1px solid var(--pi-border-color-focus);
    outline-offset: 2px;
    filter: var(--pi-background-filter-focus) !important;
}


/* === Text input borders (match radio/checkbox theme) === */
.ts-field,
input[type="text"],
input[type="number"],
.sdpi-wrapper input[type="text"],
.sdpi-wrapper input[type="number"],
.sdpi-wrapper textarea,
.sdpi-wrapper select,
.select2-container .select2-selection--single {
    border: 1px solid var(--pi-border-color);
    border-radius: 3px;
    transition: border-color .12s, background .12s;
}

    /* Hover */
    .ts-field:hover,
    input[type="text"]:hover,
    input[type="number"]:hover,
    .sdpi-wrapper input[type="text"]:hover,
    .sdpi-wrapper input[type="number"]:hover,
    .sdpi-wrapper textarea:hover,
    .sdpi-wrapper select:hover,
    .select2-container .select2-selection--single:hover {
        border-color: var(--pi-border-color-hover);
        filter: var(--pi-background-filter-hover) !important;
    }

    /* Focus (align with your highlight color if dynamic styles inject one) */
    .ts-field:focus,
    input[type="text"]:focus,
    input[type="number"]:focus,
    .sdpi-wrapper input[type="text"]:focus,
    .sdpi-wrapper input[type="number"]:focus,
    .sdpi-wrapper textarea:focus,
    .sdpi-wrapper textarea:focus {
        /*border-color: #b8b670;*/
        border-color: var(--pi-border-color-focus);
        filter: var(--pi-background-filter-focus) !important;
    }

    /* Disabled state (future-proof) */
    .ts-field:disabled,
    input[type="text"]:disabled,
    input[type="number"]:disabled,
    .sdpi-wrapper input[type="text"]:disabled,
    .sdpi-wrapper input[type="number"]:disabled,
    .sdpi-wrapper textarea:disabled,
    .sdpi-wrapper select:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

/*.sdpi-wrapper select {
    border: 1px solid #555;
    border-radius: 3px;
}

.select2-container--streamdeck .select2-selection--single {
    border: 1px solid red !important; 
    border-radius: 3px;
}

.select2 {
    border: 1px solid red;
    border-radius: 3px;
}
   

/* ==== Unified select + select2 arrow ===================================== */
/* One variable = one icon (change it once, all arrows update) */

:root {
    --pi-select-arrow: url("chevron-down.svg");
    --pi-select-arrow-size: 14px;
    --pi-select-arrow-offset-x: 8px;
}

/* Native (non-multiple) selects in the PI */
.sdpi-wrapper select.select:not([multiple]),
.sdpi-wrapper select:not([multiple]):not(.no-custom-arrow) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* If you have a themed background already, keep it. Otherwise set a base. */
    background-color: var(--sdpi-background);
    background-image: var(--pi-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right var(--pi-select-arrow-offset-x) center !important;
    background-size: var(--pi-select-arrow-size) var(--pi-select-arrow-size) !important;
    padding-right: calc(var(--pi-select-arrow-size) + 16px) !important;
    cursor: pointer;
}

/* Remove default IE arrow */
.sdpi-wrapper select::-ms-expand {
    display: none;
}

/* Hover / focus feedback */
.sdpi-wrapper select.select:not([multiple]):hover,
.sdpi-wrapper select:not([multiple]):hover {
    filter: var(--pi-background-filter-hover) !important;
}

.sdpi-wrapper select.select:not([multiple]):focus,
.sdpi-wrapper select:not([multiple]):focus {
    outline: 1px solid var(--pi-border-color-focus) !important;
    outline-offset: 0;
    filter: var(--pi-background-filter-focus) !important;
    border-color: var(--pi-border-color-focus) !important;
}

/* Disabled */
.sdpi-wrapper select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.lineup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* ==== Select2 arrow override ============================================= */
/* Select2 builds an arrow with a <b>; we replace it with our SVG */
.select2-container .select2-selection__arrow b {
    border: none !important; /* kill default triangle */
    width: var(--pi-select-arrow-size) !important;
    height: var(--pi-select-arrow-size) !important;
    margin: 0 !important;
    background: var(--pi-select-arrow) no-repeat center center / var(--pi-select-arrow-size) var(--pi-select-arrow-size) !important;
    transform-origin: center;
    transition: transform .15s ease;
}

/* Rotate when open */
.select2-container.select2-container--open .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* Ensure room for arrow inside Select2 single selection */
.select2-container .select2-selection--single {
    padding-right: calc(var(--pi-select-arrow-size) + 10px) !important;
}

    /* Optional: lighter arrow on hover (both native & select2) */
    .sdpi-wrapper select.select:not([multiple]):hover,
    .select2-container .select2-selection--single:hover .select2-selection__arrow b {
        filter: brightness(1.25);
    }

/* === Center Select2 arrow vertically ================================== */
.select2-container .select2-selection--single {
    height: 26px; /* match your native select height */
    min-height: 26px;
    line-height: 26px;
    position: relative;
    padding-right: calc(var(--pi-select-arrow-size) + 12px) !important;
    box-sizing: border-box;
}

.select2-container .select2-selection__rendered {
    line-height: 26px !important; /* vertically center text */
    padding-left: 6px;
    padding-right: 0; /* we already added padding on parent */
}

/* Arrow container: stretch full height and flex-center the <b> icon */
.select2-container .select2-selection__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px; /* horizontal inset */
    width: var(--pi-select-arrow-size);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* click passes through */
    padding: 0;
    margin: 0;
}

    /* Ensure the <b> we restyled earlier is centered with no offset */
    .select2-container .select2-selection__arrow b {
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
        position: static !important; /* remove any absolute from theme */
    }

/* Open state rotation preserved */
.select2-container.select2-container--open .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* High-DPI / taller variants (if some selects are taller) */
.select2-container.select2-container--large .select2-selection--single {
    height: 30px;
    line-height: 30px;
}

.select2-container.select2-container--large .select2-selection__rendered {
    line-height: 30px !important;
}

/* === Select2 dropdown min / max HEIGHT =============================== */
/* Tunables: rows assume ~26px each (adjust if your option line-height changes) */
:root {
    --s2-row-height: 26px;
    --s2-min-rows: 5;
    --s2-max-rows: 11;
}

/* Scrollable results area */
.select2-container .select2-results {
    /* Minimum visible rows before scroll appears */
    min-height: calc(var(--s2-row-height) * var(--s2-min-rows));
    /* Cap so huge lists don’t grow endlessly */
    max-height: calc(var(--s2-row-height) * var(--s2-max-rows));
    overflow-y: auto;
}

    /* Inner options list (needed in some builds to enforce min-height) */
    .select2-container .select2-results > .select2-results__options {
        min-height: calc(var(--s2-row-height) * var(--s2-min-rows));
    }

/* If search box exists it sits above results; keep overall min-height consistent */
.select2-container .select2-dropdown {
    /* Optional: enforce that the whole dropdown (search + results) has at least the same min height */
    min-height: calc(var(--s2-row-height) * var(--s2-min-rows) + 4px);
}

/* Optional: per-control override via data attributes (data-minrows / data-maxrows)
   Add on <select>. This JS snippet adjusts on open.
*/

/* --- Fix dual scrollbars: only the options list should scroll --- */
.select2-container .select2-results {
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
}

    .select2-container .select2-results > .select2-results__options {
        /* Dynamic values still set via JS; these are safe fallbacks */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

/* Divider when Select2 search bar is suppressed (minimumResultsForSearch:-1) */
.select2-dropdown .select2-search--dropdown.select2-search--hide + .select2-results {
    position: relative;
    margin-top: 0px;
    padding-top: 0;
}

    .select2-dropdown .select2-search--dropdown.select2-search--hide + .select2-results::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 4px;
        right: 4px;
        height: 1px;
        background: #666;
        opacity: .9;
    }
/* Full-bleed option:
.select2-dropdown .select2-search--dropdown.select2-search--hide + .select2-results::before { left:0; right:0; }
*/

.select2-container .select2-selection--single .select2-selection__rendered {
    text-overflow: clip;
}


.tooltip-container {
    position: relative;
}

    .tooltip-container:hover .tooltip-content {
        visibility: visible;
        opacity: 1;
        transition: .25s all ease;
        transition-delay: 2s;
    }

.tooltip-container-fast {
    position: relative;
}

    .tooltip-container-fast:hover .tooltip-content {
        visibility: visible;
        opacity: 1;
        transition: .25s all ease;
        transition-delay: .5s;
    }


.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: gray;
    top: -25px;
    left: -50px;
    padding: 3px 15px;
    margin: 16px;
    width: 200px;
    transition: .25s all ease;
    transition-delay: .25s;
    z-index: 2;
    color: #FFFFFF;
}

    .tooltip-content:after {
    }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    height: auto;
}

.stepper {
    border: 1px solid #eee;
    display: inline-block;
    overflow: visible;
    height: 2.1em;
    background: #fff;
    padding: 1px;
}

    .stepper input {
        width: 3em;
        height: 100%;
        text-align: center;
        border: 0;
        background: transparent;
        color: #000;
    }

    .stepper button {
        width: 1.4em;
        font-weight: 300;
        height: 100%;
        line-height: 0.1em;
        font-size: 1.4em;
        padding: 0.2em !important;
        background: #eee;
        color: #333;
        border: none;
    }

/* ============================================= */

u {
    text-decoration: underline;
}

sdCheckbox {
}

input[type="number"] {
    background-image: url('icon_updown_gray.png');
    background-position: center right;
    background-size: 14px;
    background-repeat: no-repeat;
}

    input[type="number"].nospinner {
        background-image: none !important;
        background-position: center right !important;
        background-size: 0px !important;
        background-repeat: no-repeat !important;
        text-align: center;
    }

        input[type="number"].nospinner::-webkit-inner-spin-button {
            background-image: none !important;
            background-position: center right !important;
            background-size: 0px !important;
            -webkit-appearance: none !important;
            height: 0px !important;
            width: 0px !important;
            cursor: default !important;
            background-repeat: no-repeat !important;
            text-align: center;
        }


    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        opacity: 1 !important;
        background: transparent !important;
        border-width: 0px;
        margin: 0;
        /*border-left: 1px solid #d8d8d8;*/
        height: 14px;
        width: 10px;
        cursor: pointer;
    }


.select2-search--dropdown > input {
    -webkit-appearance: none;
    background: var(--sdpi-background);
    color: var(--sdpi-color);
    font-weight: normal;
    font-size: 9pt;
    border: none;
    margin-top: 2px;
    margin-bottom: 2px;
    min-width: 10px !important;
}



/*=========== sdpi.css overrides ==============*/

label.sdpi-file-label,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    border: 1pt solid var(--sdpi-buttonbordercolor);
    border-radius: var(--sdpi-borderradius);
    border-color: var(--sdpi-buttonbordercolor);
    min-height: 26px !important;
    height: 26px !important;
    margin-right: 8px;
}

label.sdpi-file-label,
input[type="file"],
input[type=file]::-webkit-file-upload-button {
    border: 1pt solid var(--sdpi-buttonbordercolor);
    border-radius: var(--sdpi-borderradius);
    border-color: var(--sdpi-buttonbordercolor);
    min-height: 23px !important;
    height: 23px !important;
    margin-right: 8px;
}

.sdpi-wrapper select.select:not([multiple]):focus, .sdpi-wrapper select:not([multiple]):focus {
    outline: 1px solid #b8b670;
    outline-offset: 0;
}

.sdpi-item[type="checkbox"] > .sdpi-item-value > *,
.sdpi-item[type="radio"] > .sdpi-item-value > * {
    display: inline;
}

.sdpi-item[type="range"] .sdpi-item-value {
    margin-top: -10px;
}

html {
    --sdpi-tab-container-left-offset: -30px;
    --sdpi-tab-padding-vertical: 5px;
    --sdpi-tab-padding-horizontal: 7px;
    --sdpi-tab-selected-color: #6b6b6b;
}

html,
body {
    color: #b9b9b9;
}

.os-windows .tab-container-single {
    margin-top: -5px;
}

.os-windows .tab-container-double {
    margin-top: -1px;
}

.os-mac .tab-container-single {
    margin-top: -9px;
}

.os-mac .tab-container-double {
    margin-top: -1px;
}

.tab {
    background-color: #444;
    color: #B8B8B8;
    border: 1px solid gray;
    text-align: center;
    padding-top: 3px;
}

.os-windows .tab {
    font-size: 11px;
}

.os-mac .tab {
    font-size: 10px;
}

.os-windows .tabs-double {
    height: 40px;
}

.os-windows .tabs-single {
    height: 26px;
}

.os-mac .tabs-double {
    height: 33px;
}

.os-mac .tabs-single {
    height: 22px;
    min-height: 22px !important;
}

.tab.selected {
    color: black;
    font-weight: 700;
    background-color: #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
}

.tab:hover {
    border: 1px solid #bbb;
}

.tab-first-margin-mac {
    margin-top: -2px;
}

.tab-first-margin-windows {
    margin-top: -1px;
}


#clights::-webkit-slider-runnable-track {
    background-image: linear-gradient(to right, blue, red)
}

td:hover,
.sdpi-item-value > ul > li:hover:nth-child(even),
.sdpi-item-value > ol > li:hover:nth-child(even),
li:hover:nth-child(even),
li:hover {
    background-color: transparent;
}

td.selected,
td.selected:hover,
li.selected:hover,
li.selected {
    color: transparent;
    background-color: transparent;
}

tr:nth-child(even),
.sdpi-item-value > ul > li:nth-child(even),
.sdpi-item-value > ol > li:nth-child(even),
li:nth-child(even) {
    background-color: transparent;
}

.sdpi-item-value.select, .sdpi-item-value > select {
    margin-right: 10px;
}

.sdpi-item-value > textarea {
    width: 250px;
}

select {
    text-overflow: clip;
}

/* === Generic inline-flex row (minimal version) ==========================
   Opt‑in by adding: data-layout="inline-flex" to an .sdpi-item-value.
   First child (usually a wide select) grows; the rest keep intrinsic width.
   Height differences intentionally ignored (will handle later).
-------------------------------------------------------------------------- */
.sdpi-item-value[data-layout="inline-flex"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
    max-width: 255px;
}

    .sdpi-item-value[data-layout="inline-flex"] > .sdpi-item-child:first-child {
        flex: 1 1 auto;
        min-width: 0; /* allow shrinking in WebKit */
        max-width: 255px;
    }

    .sdpi-item-value[data-layout="inline-flex"] > .sdpi-item-child:not(:first-child) {
        flex: 0 0 auto;
        margin-bottom: 0px;
    }

    /* Make the (usually first) select fill the flexible area even if an inline width was set */
    .sdpi-item-value[data-layout="inline-flex"] > .sdpi-item-child:first-child select {
        width: 100% !important;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Optional: neutralize old margin-right on first select if present */
    .sdpi-item-value[data-layout="inline-flex"] > .sdpi-item-child:first-child [style*="margin-right"] {
        margin-right: 0 !important;
    }

    .sdpi-item-value[data-layout="inline-flex"] > .sdpi-item-child:first-child .select2-container {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 255px;
    }

    .sdpi-item-value[data-layout="inline-flex"] .select2-selection--single {
        width: 100% !important;
        box-sizing: border-box;
        min-width: 0;
    }

.select2-container--streamdeck .select2-selection__rendered {
    overflow: visible; /* default kan klippa bilden */
}

.select2-container--streamdeck .ts-s2-selection img {
    margin-top: 0; /* om den hamnar för högt/lågt */
}
/* Gör att selection-raden inte klipper flex-innehåll */
.select2-container--streamdeck .select2-selection__rendered {
    overflow: visible !important;
}