#dynamic_dom .popup-holder.settings-popup .popup-content-holder {
    /*min-height: clamp(400px, 600px, 80vh);*/

    height: calc(600px * var(--canvas-scale));
    min-height: clamp(200px, 450px, 50vh) !important;
    max-height: clamp(200px, 2800px, 80vh) !important;

    --setting-selected-clr: var(--clr-green5); /* #1e7929*/
    --setting-unselected-clr: #12621c;
}
.portrait #dynamic_dom .popup-holder.settings-popup .popup-content-holder {
    min-height: clamp(200px, 750px, 80vh) !important;
}
.portrait #popupsHolder .popup-holder.settings-popup .popup-content {
    max-height: clamp(calc(200px), calc(700px), calc(95vh - calc(20px * var(--ui-scale))))
}
#dynamic_dom .popup-holder.settings-popup .popup-content-holder .popup-content {
    padding: 0;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: stretch;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .popup-sidebar {
    flex: 0 0 calc(220px * var(--ui-scale));

    background: #258650;
    box-shadow: 1px 0 1px rgba(0,0,0,0.5);
    z-index: 1;
    position: relative;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .popup-sidebar .tabs .tab {
    padding: calc(20px * var(--ui-scale)) calc(20px * var(--ui-scale));
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8em;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .popup-sidebar .tabs .tab.active {
    pointer-events: none;
    background: black;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tabs-content-holder {
    flex: 1;
    position: relative;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .scroll-holder {
    width: auto;
    height: calc(100% - calc(104px * var(--ui-scale))); /*30px margin top, 50px footer height + 2x12 footer padding*/
    margin-left: calc(40px * var(--ui-scale));
    margin-top: calc(30px * var(--ui-scale));
    padding-right: calc(32px * var(--ui-scale));
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tab-data {
    display: none;
    padding-bottom: calc(30px * var(--ui-scale));
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tab-data.active {
    display: block;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tab-data .tab-data-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: calc(12px * var(--ui-scale)) calc(20px * var(--ui-scale));
    background: #258650;
    height: calc(50px * var(--ui-scale));

    display: flex;
    justify-content: space-between;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tab-data .tab-data-footer .btn {
    font-size: calc(20px * var(--ui-scale));
    line-height: calc(40px * var(--ui-scale));
    transform-origin: center;
}
#dynamic_dom .popup-holder.settings-popup .tabs-holder .tab-data .tab-data-footer .btn:last-child {
    margin-left: auto;
}
#dynamic_dom .popup-holder.settings-popup .popup-content-holder {
    width: clamp(calc(400px * var(--ui-scale)), calc(1000px * var(--ui-scale)), 90%);
}

#dynamic_dom .popup-holder.settings-popup .slider-value {
    position: relative;
    margin-bottom: calc(1px * var(--ui-scale));
    padding-top: calc(5px * var(--ui-scale));
}
#dynamic_dom .popup-holder.settings-popup .current-sett-value {
    color: white;
    display: inline-block;
    position: absolute;
    top: calc(24px * var(--ui-scale));
    left: clamp(calc(210px * var(--ui-scale)), calc(510px * var(--ui-scale)), calc(100% - calc(90px * var(--ui-scale))));
    font: 700 calc(14px * var(--ui-scale))/calc(20px * var(--ui-scale)) var(--font-fam-reg);
}
#dynamic_dom .popup-holder.settings-popup .setting-name {
    color: white;
    width: clamp(calc(200px * var(--ui-scale)), calc(500px * var(--ui-scale)), calc(100% - calc(100px * var(--ui-scale))));
    text-align: center;
    text-transform: none !important;
    font: 700 calc(13px * var(--ui-scale))/calc(19px * var(--ui-scale)) var(--font-fam-reg);
    padding-bottom: calc(3px * var(--ui-scale));
}
#dynamic_dom .popup-holder.settings-popup .setting-note {
    color: var(--clr-yellow);

}
#dynamic_dom .popup-holder.settings-popup .slider {
    width: clamp(calc(200px * var(--ui-scale)), calc(500px * var(--ui-scale)), calc(100% - calc(100px * var(--ui-scale))));
}

.settings-holder {
    /*flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;*/
}
.settings-holder > div {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}
.settings-holder .btn-simple-boxy {
    position: relative;
    flex-basis: calc(33% - calc(40px * var(--ui-scale)));
    /*width: 40%;
    max-width: 40%;*/
    padding-right: calc(10px * var(--ui-scale));
    padding-left: calc(30px * var(--ui-scale));
    text-align: left;
    line-height: calc(22px * var(--ui-scale));
}

.settings-holder .setting-label {
    line-height: 2;
    font-weight: 700;
    font-size: calc(16px * var(--ui-scale));
}
.settings-holder .setting-label:not(:first-child) {
    margin-top: 1.15em;
}
.settings-holder .setting-linear-label {
    margin-bottom: 1em;
}
.settings-holder .setting-boolean {
    line-height: 1.5;
}
.settings-holder .setting-numeric {
    width: max-content;
    font-size: calc(16px * var(--ui-scale));
}
.settings-holder .setting-numeric input {
    box-sizing: border-box;
    width: 11ch;
    padding-left: calc(25px * var(--ui-scale));
    font-weight: 600;
    font-size: calc(22px * var(--ui-scale));
    font-family: var(--font-fam-reg);
    line-height: 1.8;
}
.settings-holder .setting-numeric .input-prefix {
    position: absolute;
    left: calc(10px * var(--ui-scale));
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content;
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 600;
    color: black;
}
.settings-holder .setting-numeric.input-wrapper .numeric-steps {
    font-size: 0.67em;
    top: calc(1px * var(--ui-scale));
    right: calc(4px * var(--ui-scale));
}
.settings-holder .list-group {
    display: flex;
    align-items: center;
    position: relative;

    width: max-content;
    flex-wrap: wrap;

    font: calc(18px * var(--ui-scale))/calc(18px * var(--ui-scale)) var(--font-fam-title);
    font-weight: 700;
    color: var(--clr-green1);

    margin-bottom: calc(20px * var(--ui-scale));

    border: calc(1px * var(--ui-scale)) white solid;
    border-radius: calc(10px * var(--ui-scale));
    overflow: hidden;
}
.settings-holder .list-group .btn {
    flex: 0 1 0;
    color: white;
    background: var(--setting-selected-clr);
    border: 0;
    margin: 0;
    border-radius: 0;
    font-weight: bold;

    min-width: max-content;

    padding: calc(14px * var(--ui-scale)) calc(20px * var(--ui-scale));
    font-size: calc(16px * var(--ui-scale));

    pointer-events: none;

    transform: none !important;
}
.settings-holder .list-group .btn:not(.color_select):hover {
    background: var(--setting-selected-clr) !important;
}
.settings-holder .list-group .btn.off {
    background: var(--setting-unselected-clr);
    color: rgba(255, 255, 255, 0.7);
    pointer-events: auto;
}
.settings-holder .list-group.color_select {
    /*--scale-item-mx: var(--ui-scale); !* use if we want it scaled with rest of UI *!*/
    --scale-item-mx: 1; /* keeps items of same size, no matter the relative screen size */
    --locked-scale-mx: clamp(0.2, 1, var(--scale-item-mx)); /* cap scale of locked UI at 1 */

    --item-ui-w: calc(150px * var(--scale-item-mx));
    --item-ui-h: calc(100px * var(--scale-item-mx));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--item-ui-w), 1fr));

    border: none;
    gap: calc(20px * var(--ui-scale));
    width: 100%;
    padding-bottom: calc(20px * var(--ui-scale));
    margin-top: calc(3px * var(--ui-scale));
    margin-bottom: calc(24px * var(--ui-scale));
}
.settings-holder .list-group.color_select .btn {
    --item-ui-locked-w: calc(110px * var(--locked-scale-mx));

    --item-border-w: calc(4px * var(--scale-item-mx));
    --item-border-clr: white;

    position: relative;
    border: var(--item-border-w) var(--item-border-clr) solid;
    border-radius: calc(10px * var(--scale-item-mx));
    /*padding: calc(28px * var(--ui-scale)) calc(40px * var(--ui-scale));*/

    display: flex;
    /*max-width: 7ch;
    min-width: 5ch;*/
    line-height: 1.2;
    /*padding: calc(28px * var(--ui-scale) - 0.5em) calc(40px * var(--ui-scale));*/
    padding: calc(0.1 * var(--item-ui-h)) calc(0.1 * var(--item-ui-w));
    /*min-height: 2.6em;*/
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(12px * var(--scale-item-mx));

    box-sizing: border-box;
    width: var(--item-ui-w);
    height: var(--item-ui-h);
    min-width: var(--item-ui-w);
    max-width: var(--item-ui-w);
}
.portrait .settings-holder .list-group.color_select .btn {
    /*--scale-item-mx: calc(1.16 * var(--ui-scale));*/
}
.settings-holder .list-group.color_select[data-type$="bg_theme"] {
    --item-ui-w: calc(120px * var(--scale-item-mx));
    --item-ui-h: calc(var(--item-ui-w) / 1.5);

    max-width: calc(5 * var(--item-ui-w));
}
.settings-holder .list-group.color_select .btn[data-type$="bg_theme"] {
    padding: calc(0.1 * var(--item-ui-h)) calc(0.1 * var(--item-ui-w));

    --item-border-w: calc(4px * var(--scale-item-mx));
    --item-border-clr: white;
}
.settings-holder .list-group.color_select[data-type$="card_back"] {
    --item-ui-w: calc(75px * var(--scale-item-mx));
    --item-ui-h: calc(var(--item-ui-w) / 0.717);
    max-width: calc(8 * var(--item-ui-w));
}
.settings-holder .list-group.color_select .btn[data-type$="card_back"] {
    background-size: 100% 100% !important;

    --item-border-w: calc(4px * var(--scale-item-mx));
    --item-border-clr: black;
}
.settings-holder .list-group.color_select[data-type$="table_skin"] {
    --item-ui-w: calc(150px * var(--scale-item-mx));
    --item-ui-h: calc(var(--item-ui-w) / 1.8455);

    max-width: calc(3.5 * var(--item-ui-w));
}
.settings-holder .list-group.color_select .btn[data-type$="table_skin"] {
    background-size: 100% 100% !important;
    --item-border-w: 0px;
}

/* START Backgrounds themes */
.settings-holder .list-group.color_select .btn[data-value="theme_1"] {
    background: var(--clr-black2) !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_2"] {
    background: var(--clr-green3) !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_3"] {
    background: var(--clr-grey-2) !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_4"] {
    background: #393939 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_5"] {
    background: #6f0011 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_6"] {
    background: #682478 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_7"] {
    background: #784e25 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_8"] {
    background: #a46729 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_9"] {
    background: #000ec2 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_10"] {
    background: #b76646 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_11"] {
    background: #237788 !important;
}
.settings-holder .list-group.color_select .btn[data-value="theme_12"] {
    background: #992348 !important;
}
/* END Backgrounds themes */

/* START Card Backs */
.settings-holder .list-group.color_select .btn[data-value="cardback_1"] {
    background: url('../images/cards/backs/1.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_2"] {
    background: url('../images/cards/backs/2.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_3"] {
    background: url('../images/cards/backs/3.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_4"] {
    background: url('../images/cards/backs/4.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_5"] {
    background: url('../images/cards/backs/5.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_6"] {
    background: url('../images/cards/backs/6.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_7"] {
    background: url('../images/cards/backs/7.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_8"] {
    background: url('../images/cards/backs/8.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_9"] {
    background: url('../images/cards/backs/9.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_10"] {
    background: url('../images/cards/backs/10.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_11"] {
    background: url('../images/cards/backs/11.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_12"] {
    background: url('../images/cards/backs/12.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_13"] {
    background: url('../images/cards/backs/13.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_14"] {
    background: url('../images/cards/backs/14.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_15"] {
    background: url('../images/cards/backs/15.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_16"] {
    background: url('../images/cards/backs/16.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_17"] {
    background: url('../images/cards/backs/17.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_18"] {
    background: url('../images/cards/backs/18.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_19"] {
    background: url('../images/cards/backs/19.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_20"] {
    background: url('../images/cards/backs/20.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_21"] {
    background: url('../images/cards/backs/21.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_22"] {
    background: url('../images/cards/backs/22.png?v=2') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="cardback_23"] {
    background: url('../images/cards/backs/23.png?v=2') no-repeat center center;
}
/* END Card Backs */

/* START Table Reskins */
/* by default use green one */
.settings-holder .list-group.color_select .btn[data-type$="table_skin"]::before {
    /* table felt*/
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: url('../images/table_backgrounds/felts/horizontal/green_table_horizontal.webp') no-repeat center center;
    background-size: 100% 100% !important;
}
.settings-holder .list-group.color_select .btn[data-type$="table_skin"]::after {
    /* table rail */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: var(--table-rail-bg-horizontal) no-repeat center center;
    background-size: 100% 100% !important;
    pointer-events: none;
}
.settings-holder .list-group.color_select .btn[data-type$="table_skin"] {
    background: none;
}
.settings-holder .list-group.color_select .btn[data-value^="color_"]::before {
    --brightness-mx: 1;
}
.settings-holder .list-group.color_select .btn[data-value^="color_"]:hover {
    /* for color variations, we can't just alter their color variations - we do add an !important to override default hover behaviour */
    --brightness-mx: 1.1;
}
.settings-holder .list-group.color_select .btn[data-value="color_#E00000"]::before {
    filter: hue-rotate(-120deg) saturate(300%) brightness(calc(0.8 * var(--brightness-mx))) !important;
}
.settings-holder .list-group.color_select .btn[data-value="color_#E08300"]::before {
    /*filter: hue-rotate(-90deg) saturate(150%) brightness(calc(1.05 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(-88deg) saturate(203%) brightness(calc(1.55 * var(--brightness-mx))) !important
}
.settings-holder .list-group.color_select .btn[data-value="color_#00A9E6"]::before {
    /*filter: hue-rotate(75deg) saturate(130%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(57deg) saturate(197%) brightness(calc(1.1 * var(--brightness-mx))) !important;
}
.settings-holder .list-group.color_select .btn[data-value="color_#0058E6"]::before {
    /*filter: hue-rotate(100deg) saturate(140%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(95deg) saturate(145%) brightness(calc(1.05 * var(--brightness-mx))) !important;
}
.settings-holder .list-group.color_select .btn[data-value="color_#9E9E9E"]::before {
    /*filter: saturate(0%) brightness(calc(1.05 * var(--brightness-mx))) !important;*/
    filter: saturate(0) brightness(calc(1.55 * var(--brightness-mx))) !important;
}
.settings-holder .list-group.color_select .btn[data-value="color_#7A4A2F"]::before {
    /*filter: hue-rotate(-90deg) saturate(100%) brightness(calc(0.8 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(-112deg) saturate(70%) brightness(calc(1.1 * var(--brightness-mx))) !important;
}
.settings-holder .list-group.color_select .btn[data-value="color_#6C1E94"]::before {
    /*filter: hue-rotate(155deg) saturate(160%) brightness(calc(1.1 * var(--brightness-mx))) !important;*/
    filter: hue-rotate(156deg) saturate(100%) brightness(calc(1 * var(--brightness-mx))) !important;
}
/*
.settings-holder .list-group.color_select .btn[data-type$="table_skin"][data-value^="color_"]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: red;
    background-blend-mode: multiply;
}*/
.settings-holder .list-group.color_select .btn[data-value="bricks"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/bricks_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="camo"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/camo_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="candy_cane"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/candy_cane_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="carbon_fibre"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/carbon_fibre_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="checkered_pattern"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/checkered_pattern_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="gold"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/gold_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="graffiti"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/graffiti_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="marble"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/marble_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="neon"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/neon_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="snow"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/snow_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="space"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/space_table_horizontal.webp') no-repeat center center;
}
.settings-holder .list-group.color_select .btn[data-value="usa_map"]::before {
    background: url('../images/table_backgrounds/felts/horizontal/usa_map_table_horizontal.webp') no-repeat center center;
}
/* END Table Reskins */

.settings-holder .list-group.color_select .btn.off:not(.locked-behind-membership):hover {
    filter: brightness(120%);
}
.settings-holder .list-group.color_select .btn.off .btn-inner {
    transition: transform 200ms ease-in, color 0s, background 0s;
    backface-visibility: hidden;
}
.settings-holder .list-group.color_select .btn.off .btn-inner:hover {
    transform: scale(0.98);
}
.settings-holder .list-group.color_select .btn.off:hover .btn-inner {
    filter: brightness(125%);
}
.settings-holder .list-group.color_select .btn.off.locked-behind-membership:hover .btn-inner {
    filter: brightness(110%);
}
.settings-holder .list-group .btn .item-chosen {
    position: absolute;
    right: calc(5px * var(--ui-scale));
    bottom: calc(5px * var(--ui-scale));
    display: flex;
    justify-content: center;
    align-items: center;

    /*width: 1.3em;
    height: 1.3em;*/

    /* same size as in avatar popup */
    width: 1.4em;
    height: 1.4em;

    background: var(--clr-green3);
    border: calc(1px * var(--ui-scale)) solid var(--clr-pri);
    border-radius: 50%;

    line-height: 1;
    font-size: 1.25em;
    color: #FFFFFF;
    font-weight: bold;
    z-index: 1;
}
.settings-holder .list-group .btn.off .item-chosen {

    display: none;
}
.settings-holder .list-group .btn .checked-icon {
}

.settings-holder .list-group .item-locked {
    position: absolute;
    top: calc(-1 * var(--item-border-w));
    left: calc(-1 * var(--item-border-w));
    color: #FFFFFF;
    font-size: calc(0.09 * var(--item-ui-locked-w));
    background: green;
    border: calc(0.01 * var(--item-ui-locked-w)) solid white;
    padding: calc(0.04 * var(--item-ui-locked-w));
    border-radius: calc(0.04 * var(--item-ui-locked-w));
}
.settings-holder .list-group .locked-behind-login .item-locked {
    background: #0525ff;
}
.settings-holder .list-group .locked-behind-membership .item-locked {
    background: var(--clr-gold);
    color: #000000;
    border-color: #000000;
}
.settings-holder .list-group .locked-behind-ads .item-locked {
    background: #EC7600;
}
.settings-holder .list-group .locked-behind-login > div,
.settings-holder .list-group .locked-behind-membership > div {
    z-index: 1;
}

.settings-holder .list-group .btn-inner {
    position: absolute;
    /*bottom: calc(-14px * var(--ui-scale));*/
    bottom: calc(-0.13 * var(--item-ui-locked-w));
    left: calc(0 * var(--item-border-w)); /* account for padding offset of outline of parent */
    right: 0;
    margin: 0 auto;
    color: #FFFFFF;

    display: flex;
    gap: calc(8px * var(--ui-scale));
    align-items: center;
    line-height: 2.2 !important;
    font-weight: 700;
    font-size: calc(0.08 * var(--item-ui-locked-w));
    padding: calc(0.03 * var(--item-ui-locked-w)) calc(0.08 * var(--item-ui-locked-w));

    border-radius: calc(0.05 * var(--item-ui-locked-w)) !important;
    width: max-content;
}
.settings-holder .list-group [data-type$="card_back"] .btn-inner {
    /*bottom: calc(4px * var(--ui-scale));*/
    /*bottom: calc(0.1 * var(--item-ui-locked-w));*/
    bottom: calc(1.35 * var(--item-border-w)); /* In this case button is aligned ot border of card, not half of button */
    /*left: calc(-2 * var(--item-border-w));*/
    left: calc(-0.5 * var(--item-border-w));
}
.settings-holder .list-group [data-type$="table_skin"] .btn-inner {
    /*bottom: calc(-6px * var(--ui-scale));*/
    bottom: calc(-0.065 * var(--item-ui-locked-w));
}
.settings-holder .list-group .btn-inner::after {
    content: "";
    position: absolute;
    top: calc(-1px * var(--ui-scale));
    /* border: 1px + offset: 0px; */
    right: calc(-1px * var(--ui-scale));
    /* border: 1px + offset: 0px; */
    bottom: calc(-1px * var(--ui-scale));
    /* border: 1px + offset: 0px; */
    left: calc(-1px * var(--ui-scale));
    /* border: 1px + offset: 0px; */
    border: calc(1px * var(--ui-scale)) solid white;
    border-radius: calc(0.05 * var(--item-ui-locked-w)) !important;
}
.settings-holder .list-group .btn-inner .fa-solid {
    font-size: calc(0.11 * var(--item-ui-locked-w));
}
.settings-holder .list-group .btn-inner {
    color: var(--clr-pri);
    background: var(--clr-green5);
}
.settings-holder .list-group .locked-behind-ads .ads-to-unlock {
    background: #EC7600;
}
.settings-holder .list-group .login-required {
    background: #0525ff;
    text-decoration: none;
}
.settings-holder .list-group .membership-required {
    background: var(--clr-gold);
    text-decoration: none;
    color: #000000 !important;
    border-color: #000000 !important;
    font-weight: 700;
    min-width: 9ch;
    justify-content: center;
}
.settings-holder .list-group  .membership-required::after {
    border-color: #000000 !important;
}
.settings-holder .list-title {
    display: inline-block;
    margin-right: calc(20px * var(--ui-scale));
}
.settings-holder .slider-wrapper {
    --clr-progress-front1: #000000;
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
}
.settings-holder .slider-wrapper .slide-container {
    flex: 1;
}
#dynamic_dom .popup-holder .settings-holder .slider-wrapper .current-sett-value {
    display: flex;
    justify-content: center;
    align-items: center;
    position: unset;
    left: unset;
    top: unset;
    flex: 0 1 8ch;
    text-align: center;
}

.list-group.inline-header {
    /*border-radius: calc(20px * var(--ui-scale));*/
    /*overflow: hidden;*/
    margin-right: calc(5px * var(--ui-scale));
}
.list-group.inline-header > .btn:first-child {
    border-top-left-radius: calc(20px * var(--ui-scale));
    border-bottom-left-radius: calc(20px * var(--ui-scale));
}
.list-group.inline-header> .btn:last-child {
    border-top-right-radius: calc(20px * var(--ui-scale));
    border-bottom-right-radius: calc(20px * var(--ui-scale));
}
.list-group.inline-header .btn:after {
    display: none;
}
.list-group.inline-header .btn {
    font-size: calc(14px * var(--ui-scale));
    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale));
    margin: 0;

    color: var(--clr-pri);
    background: var(--clr-green2);
    border-radius: 0;
    pointer-events: none;
}
.list-group.inline-header .btn.off {
    background: white;
    color: var(--clr-green1);
    pointer-events: auto;
}
.list-group.inline-header .btn.off:hover {
    color: var(--clr-sec);
}
/* START removable-list-group */
.settings-holder .list-group.removable-list-group {
    flex-wrap: wrap;
    gap: calc(10px * var(--ui-scale));
    border: none;
    width: 100%;
}
.settings-holder .list-group.removable-list-group .btn {
    border-radius: calc(15px * var(--ui-scale));
    border: 1px solid white;
    pointer-events: auto;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    background: var(--clr-sec);
    min-width: 23.4ch;
    max-width: 23.4ch;
}
.settings-holder .list-group.removable-list-group .removable-item > div {
    line-height: 1.1;
    text-overflow: ellipsis;
    overflow: hidden;
}
.settings-holder .list-group.removable-list-group .removable-item > div > div {
    margin-top: 0.2em;
    font-size: 0.6em;
    font-weight: normal;
}
.settings-holder .list-group.removable-list-group .removable-item:hover {
    cursor: pointer;
    background: #000000 !important;
    filter: none;
}
.settings-holder .list-group.removable-list-group .removable-item .remove {
    font-size: 1.5em;
    line-height: 1;
    margin-left: auto;
}
.settings-holder .list-group.removable-list-group .removable-item:hover .remove {
    transform: scale(1.1);
}
/* END removable-list-group */

.settings-holder .btn {
    transform-origin: 0% center;
}
/*
.popup-holder .settings-holder .one-per-line {
    display: block;
}
.popup-holder .settings-holder .one-per-line .btn {
    display: inline-block;
    margin-right: calc(10px * var(--ui-scale));
}

.popup-holder .settings-holder .one-per-line.btn {
    width: max-content;
    padding-right: calc(20px * var(--ui-scale));
    padding-left: calc(30px * var(--ui-scale));
}*/

/* special settings for blind sizes */
.popup-holder .settings-holder .input-group-wrapper,
.popup-holder .settings-holder .input-wrapper {
    max-width: calc(700px * var(--ui-scale));
}
.popup-holder .settings-holder .input-wrapper-auto {
    max-width: unset;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.popup-holder .settings-holder .input-wrapper-auto > span {

}
.popup-holder .settings-holder .input-wrapper-auto > .btn {
    max-width: max-content;
    width: max-content;
    flex: 1 0 auto;
}
.popup-holder .settings-holder .input-group-wrapper .input-groups {
}
.popup-holder .settings-holder .input-group-wrapper .input-group {
    display: flex;
    gap: calc(5px * var(--ui-scale));
    align-items: stretch;
    margin-top: calc(5px * var(--ui-scale));

    font-weight: bold;
    font-size: calc(25px * var(--ui-scale));
}

.popup-holder .settings-holder .input-group-wrapper .input-group .input-group-id {
    flex: 0 0 2ch;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: calc(10px * var(--ui-scale));
}
.popup-holder .settings-holder .input-group-wrapper .input-group .input-group-title {
    width: 13ch;
    flex: 0 1 auto;
    font-size: calc(15px * var(--ui-scale));
    margin-right: auto;
    margin-top: auto;
    text-align: left;
    margin-left: calc(10px * var(--ui-scale));
}
.popup-holder .settings-holder .input-group-wrapper .input-group.input-group-titles .remove-input-group {
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.popup-holder .settings-holder .input-group-wrapper .input-group:nth-of-type(1) .remove-input-group,
.popup-holder .settings-holder .input-group-wrapper .input-group:nth-of-type(2) .remove-input-group {
    opacity: 0;
    pointer-events: none;
}
.popup-holder .settings-holder .input-group-wrapper .input-group .input-wrapper {
    flex: 1;
    position: relative;
}

.popup-holder .settings-holder .input-group-wrapper .input-group:last-child .input-wrapper.duration:after {
    /* have them appear same way as inputs */
    content: '\221E';
    position: absolute;
    top: 0;
    left: 0;
    background: #FFF;
    color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(11ch - 2px);
    box-sizing: border-box;
    font-size: calc(22px * var(--ui-scale));
    font-family: var(--font-fam-reg);
    line-height: 1.8;
    border-radius: calc(13px * var(--ui-scale));
    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale));
    padding-left: calc(25px * var(--ui-scale));
    border: 2px solid #bebebe;
    cursor: not-allowed;
}
.popup-holder .settings-holder .input-group-wrapper .input-group .remove-input-group {
    flex: 0 0 calc(50px * var(--ui-scale));
    height: calc(50px * var(--ui-scale));
    border-radius: calc(13px * var(--ui-scale));
    border: 2px solid #bebebe;

    display: flex;
    justify-content: center;
    align-items: center;


    background: var(--clr-red);
    cursor: pointer;
}
.popup-holder .settings-holder .input-group-wrapper .input-group .remove-input-group:hover {
    filter: brightness(120%);
}
.popup-holder .settings-holder .input-group-wrapper .btn[data-action-type="add_another_blinds_level"] {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    margin-top: calc(10px * var(--ui-scale));
    display: block;
    text-align: center;
    background: var(--clr-green5);
    transform-origin: center;
    transform: none;
}
.popup-holder .settings-holder .input-group-wrapper .btn[data-action-type="add_another_blinds_level"]:hover {
    transform: none;
    filter: brightness(120%);
}
.popup-holder .settings-holder .input-group-wrapper.blind-levels-limit-hit .btn[data-action-type="add_another_blinds_level"] {
    display: none;
}

.privacy-settings-holder {
    padding-left: 1px;
}
.privacy-settings-holder a {
    color: var(--clr-yellow);
}
.privacy-settings-holder .btn-secondary {
    font-weight: 700;
    font-size: calc(16px * var(--ui-scale));
}
.debug-information {
    font-weight: 400;
    font-size: calc(16px * var(--ui-scale));
    margin-top: 2em;
}
.setting-tab-info-text {
    font-weight: 400;
    font-size: calc(16px * var(--ui-scale));
    line-height: 1.2;
}
/* dev tools */
#dynamic_dom .popup-holder.settings-popup[data-type="dev_tools"] .settings-holder > div {
    padding: 20px;
}