.actions .btn,
.room-actions .btn {
    position: relative;
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale));
    min-width: 11ch;

    color: #FFFFFF;
    font-size: calc(25px * var(--ui-scale));
    line-height: 1.1;

    text-transform: uppercase;
    outline: 1px solid white;
    /* attempt at fixing safari border square issues  - we replace it with a border on :after */
    outline: none;
}

/* attempt at fixing safari border square issues */
.actions .btn:not(.no-action):not(.raise-amount):after,
.room-actions .btn:not(.no-action):not(.raise-amount):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(15px * var(--ui-scale));; /* border—radius: 15px + offset: 0px*/
}
.actions .btn:not(.slider-value) {
    display: flex;
    justify-content: center;
    align-items: center;
}
.actions .btn:not(.icon, :last-child, .no-action),
.room-actions .btn:not(.icon, :last-child, .no-action) {
    margin-right: calc(15px * var(--ui-scale));
}
.actions .btn.temporarily-hidden,
.room-actions .btn.temporarily-hidden {
    display: none;
}
.btn[data-action-type="fold"] {
    background: var(--btn-fold-bg);
}
.btn[data-action-type="call"] {
    background: var(--btn-call-bg);
    padding: calc(15px * var(--ui-scale)) calc(30px * var(--ui-scale));
    padding-right: calc(10px * var(--ui-scale));
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 10ch;
}
.landscape .btn[data-action-type="call"] {
    padding: calc(12px * var(--ui-scale)) calc(30px * var(--ui-scale));
}
.btn[data-action-type="call"] > span,
.btn[data-action-type="raise"] > span {
    display: inline-block;
    min-width: 6ch;

    background: var(--btn-raise-amount-bg);

    border-radius: calc(10px * var(--ui-scale));
    padding: calc(10px * var(--ui-scale)) calc(8px * var(--ui-scale));
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.7em;
    line-height: 1.1;
    /*margin-left: calc(10px * var(--ui-scale));*/
    margin-left: auto;
}
.btn[data-action-type="raise"] > span {
    margin-left: calc(10px * var(--ui-scale));
    min-width: 8ch;
}
.btn[data-action-type="check"] {
    background: var(--btn-check-bg);
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale)); /* to make it same height as call ? */
}
#layoutFooter .actions .btn[data-action-type="open_raise"] {
    background: var(--btn-check-bg);
    transition: none;
    margin-right: 0;
}
.btn.raise-amount {
    background: var(--btn-raise-bg);
    padding-top: calc(7px * var(--ui-scale));
    padding-bottom: calc(7px * var(--ui-scale));
    padding-left: calc(7px * var(--ui-scale));
    /*margin-left: 70px;*/

    transition: none;

    margin-right: 0 !important;
}
/*.landscape .btn.raise-amount.for-landscape, /* for now always keep it the same for both landscape and portrait (the portrait version)*/
.portrait .btn.raise-amount.for-landscape {
    display: none !important;
}
.raise-or-bet-text:before {
    content: 'Raise';
}
#layoutFooter .actions[data-min-bet="0"] .raise-or-bet-text:before {
    content: 'Bet';
}

.landscape .btn.raise-amount.for-portrait { /* TODO remove, jsut added durign early prep as we're using for-portait to maintain current styling*/
    display: none !important;
}
.btn.raise-amount.disabled,
.btn[data-action-type="open_raise"].disabled {
    pointer-events: none;
    /*filter: brightness(30%);*/
    opacity: 0.5; /* make it appear disabled*/
}
.btn[data-action-type="close_raise"] {
    position: absolute;
    background: white;
    color: black;

    top: calc(0px * var(--ui-scale));
    left: calc(5px * var(--ui-scale) - 75px);
    margin: auto 0;

    font-size: calc(43px * var(--ui-scale)) !important;
    line-height: 1;

    padding: calc(8px * var(--ui-scale)) calc(11px * var(--ui-scale)) calc(9px * var(--ui-scale)) calc(6px * var(--ui-scale));
    outline-color: black;

    width: max-content;
    /*min-width: unset;*/
    min-width: auto !important;
}
.btn[data-action-type="cancel_pending_seat_request"],
.room-actions .btn[data-action-type="set_away_off"],
.btn[data-action-type="start_game"] {
    background: var(--btn-fold-bg);
}

.btn[data-action-type="view_waitlist"] {
    background: #818181;
    margin-left: calc(15px * var(--ui-scale));
    min-width: 8ch;
}
.btn[data-action-type="attempt_join_waitlist"],
.btn[data-action-type="leave_waitlist"] {
    background: var(--btn-fold-bg);
    min-width: 8ch;
}
.btn[data-action-type="attempt_join_waitlist"] {
    margin-left: calc(15px * var(--ui-scale));
}


.btn.raise-amount {
    display: flex;
    flex-wrap: wrap;
    gap: calc(20px * var(--ui-scale));
    /*padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale));*/
    padding: 0;
    justify-content: space-between;


    background: transparent;
    border: none;
    outline: none;
}
.btn.raise-amount .slide-container {
    flex-basis: 100%;
    --clr-progress-front1: #000000;
    padding-right: 0 !important;
    margin-bottom: 1em;
    margin-top: 1em;
}
.btn.raise-amount .slide-container .slider {
    --slider-bg-full-clr: #000000;
    margin: 0;
    border-radius: calc(30px * var(--ui-scale));
    /*padding: calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale));*/
    padding: calc(3px * var(--ui-scale)) calc(0px * var(--ui-scale)); /* side padding has to be 0, otherwise it messes slider control thumb position*/
}
.btn.raise-amount .slide-container .slider.vertical {

}
.btn.raise-amount .btn {
    /*flex: 1;*/
    flex: 0 0 11ch;
    line-height: 1.1;
    position: unset;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;

    /*justify-content: space-between;*/
    /*box-sizing: border-box;  */
    box-sizing: content-box;
    margin: 0;
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
    font-size: calc(30px * var(--ui-scale)) !important;
    outline-color: white;

    /* required, otherwise because text inside these is based on :After, it's slightly less in size*/
    min-height: calc(29px * var(--ui-scale));
}
.btn.raise-amount .btn[data-action-type="close_raise"] {
    background: var(--btn-fold-bg);
    color: #ffffff;
    min-width: max-content !important;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
}
.btn.raise-amount .btn[data-action-type="raise"] {
    background: var(--btn-check-bg);
    color: #ffffff;
}
.btn.raise-amount .slider-value {

    /*background: rgba(0,0,0,0.14);*/
    background: var(--btn-check-bg);
    color: #ffffff;
    outline: none;

}
.btn.raise-amount .slider-value:after {
    border-color: transparent;
}
.btn.raise-amount .slider-value .fa-triangle {
    font-size: 0.7em;
    position: relative;
    top: calc(-2px * var(--ui-scale));
}
.btn.raise-amount {
    /*padding-top: calc(10px * var(--ui-scale));*/
}
.btn.raise-amount .raise-options {
    flex: 7.5;
    background: var(--clr-green5);
    padding: calc(15px * var(--ui-scale));
    border-radius: calc(20px * var(--ui-scale));
    border: calc(1px * var(--ui-scale)) solid #bebebe;
}
.btn.raise-amount .raise-options .raise-options-buttons {
    display: flex;
    gap: calc(20px * var(--ui-scale));
}
.btn.raise-amount .raise-options .raise-options-buttons .quick-raise-amounts {
    flex: 1;
    display: flex;
    align-self: stretch;
    font-size: calc(13px * var(--ui-scale));
}
.btn.raise-amount .raise-options .raise-options-buttons .quick-raise-amounts .quick-raise-amount {
    flex: 1;
    align-self: stretch;

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

    background: black;
    color: #ffffff;
    border: calc(1px * var(--ui-scale)) solid #ffffff;
    border-left: none;
    cursor: pointer;
}
.btn.raise-amount .raise-options .raise-options-buttons .quick-raise-amounts .quick-raise-amount:first-child {
    border-left: calc(1px * var(--ui-scale)) solid #ffffff;
    border-top-left-radius: calc(10px * var(--ui-scale));
    border-bottom-left-radius: calc(10px * var(--ui-scale));
}
.btn.raise-amount .raise-options .raise-options-buttons .quick-raise-amounts .quick-raise-amount:last-child {
    border-top-right-radius: calc(10px * var(--ui-scale));
    border-bottom-right-radius: calc(10px * var(--ui-scale));
}
.btn.raise-amount .raise-options .raise-options-buttons .quick-raise-amounts .quick-raise-amount:hover {
    background: #3d3d3d;
}
.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value {
    position: relative;
    flex-basis: 9ch;
    min-width: 9ch;

    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale)) !important;
    font-size: calc(15px * var(--ui-scale)) !important;
    outline-color: white;
    min-height: calc(29px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));

    background: white;
    border: calc(1px * var(--ui-scale)) #000000 solid;
    color: black;

    text-align: right;
    transform: none;
    height: 2.5em;
}
.btn.raise-amount .slider-value::after {
    z-index: -1; /* has to be like this, otherwise it messes up events for input as it appears over them*/
}
.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value .raise-value-in-bb {
    font-size: calc(10px * var(--ui-scale)) !important;
    text-align: right;
    color: var(--clr-green3);
    z-index: 1;
    position: relative;
    line-height: 1.1;
}
.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value:hover {
    transform: none;
    cursor: text;
}
.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value .input-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value .input-wrapper input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    padding-top: calc(17px * var(--ui-scale)) !important;
    padding-right: calc(8px * var(--ui-scale));

    background: none;
    text-align: right;
    font-size: calc(17px * var(--ui-scale)) !important;
    font-weight: bold;
    line-height: 1;

    border-radius: calc(10px * var(--ui-scale));
    border-color: transparent;
    outline: none;
}
.btn.slider-value input:focus:focus-visible:focus-within,
.btn.slider-value input:focus,
.btn.slider-value input:focus-visible,
.btn.slider-value input:focus-within {
    outline: none !important;
    /*border-color: #bebebe !important;*/
    border-color: transparent !important;
}
.btn.raise-amount.is-all-in .raise-options .raise-options-buttons .btn.slider-value .input-wrapper input {
    background: var(--clr-gold);
}
.btn.raise-amount.is-all-in .raise-options .raise-options-buttons .btn.slider-value .raise-value-in-bb {
    color: black;
}
.btn.raise-amount.is-large-number .raise-options .raise-options-buttons .btn.slider-value .input-wrapper input {
    font-size: calc(14px * var(--ui-scale)) !important;
}
.btn.raise-amount.is-extra-large-number .raise-options .raise-options-buttons .btn.slider-value .input-wrapper input {
    font-size: calc(11px * var(--ui-scale)) !important;
}

.btn.slider-value  .input-prefix {
    content: '$';
    position: absolute;
    left: calc(10px * var(--ui-scale));
    bottom: calc(9px * var(--ui-scale));
    margin: auto 0;
    height: max-content;
    font-size: calc(17px * var(--ui-scale)) !important;
    line-height: 1;
    font-weight: bold;
    color: #000;
}
.hide-currency-prefix .btn.slider-value  .input-prefix {
    content: '';
}

.btn.raise-amount .raise-options .raise-options-buttons .btn.slider-value .current-sett-value {
    padding-top: calc(7px * var(--ui-scale));
    display: block;
    padding-bottom: calc(3px * var(--ui-scale));
}
.btn.raise-amount .raise-options .slide-container {
    display: flex;
    gap: calc(20px * var(--ui-scale));
    margin-bottom: 0.3em;
}
.btn.raise-amount .raise-options .slide-container .slider-increment {
    flex-basis: calc(30px * var(--ui-scale));
    width: calc(30px * var(--ui-scale));
    height: calc(30px * var(--ui-scale));

    display: flex;
    justify-content: center;

    color: white;
    background: black;

    border-radius: calc(15px * var(--ui-scale));
    font-size: calc(30px * var(--ui-scale));
    font-weight: normal;

    cursor: pointer;
    line-height: 1;
}
.btn.raise-amount .raise-options .slide-container .slider-increment:hover {
    background: #3d3d3d;
}
.btn.raise-amount .raise-options .slide-container .slider-increment[data-type="reduce_by_bb"] {
    line-height: 0.8;
}
.btn.raise-amount .raise-options .slide-container .slider {
    width: auto;
    flex: 1;
}
.btn.raise-amount .raise-options .slide-container .rangeslider,
.btn.raise-amount .raise-options .slide-container .vertical-slider-holder {
    flex: 1;
}
/* this implementation well with FF, but not with Chrome!*/
.btn.raise-amount .raise-options .slide-container .slider.vertical {
    width: auto;
    flex: 1;
    align-self: stretch;
    flex-basis: var(--vertical-raise-options-height);
}
/* this newer implementation works well with all browsers */
.btn.raise-amount .raise-options .slide-container .slider {
    /*position: absolute;*/

    height: var(--vertical-slider-width);
    width: var(--vertical-slider-height);
    transform: rotate(-90deg);

    top: var(--vertical-slider-increments-height);
    bottom: calc(-1px * var(--ui-scale)); /* fits/covers bottom better*/
    margin: auto 0;
    padding: 0 !important;
    border: 0 solid;
}
.btn.raise-amount .raise-options .slide-container .vertical-slider-holder {
    height: var(--vertical-slider-height);
    width: var(--vertical-slider-width);

    margin: auto 0;
    padding: 0 !important;
    border: 0 solid;
}
.btn.raise-amount .raise-buttons {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    align-self: stretch;
}

/* game actions for landscape */

.btn.raise-amount.for-landscape .raise-buttons .btn {
    width: auto;
    flex: 0 0 auto;
    min-width: 11ch; /* same width as original raise button*/
    padding: calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
    min-height: calc(43px * var(--ui-scale));
    font-size: calc(25px * var(--ui-scale)) !important;
}
.btn.raise-amount.for-portrait .raise-buttons .btn {
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
}
.btn.raise-amount.for-landscape .raise-buttons .btn > span {
    /*margin-left: auto;*/
}
/* end game actions for landscape */

/* game actions, portrait variations layout css overrides START */
.btn.raise-amount.for-portrait .raise-options {
    flex: 0;
    position: absolute;
    bottom: calc(100% + calc(24px * var(--ui-scale))); /* this will put it at the top of the footer*/
    /*right: calc(-21px * var(--ui-scale));!* this will put it at the side right of the footer*!*/
    right: calc(calc(100vw - 100%) / -2 - calc(1px * var(--ui-scale))); /* this will put it at the outside of the footer size based on viewport size (So even if vw is over 800px)

    background: #ffffff;
    border-radius: calc(25px * var(--ui-scale));
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(0px * var(--ui-scale)) calc(12px * var(--ui-scale));

    /* this is new way with border instead of padding, as it makes making slider bar transparent WAY simpler */
    background: transparent;
    border: calc(14px * var(--ui-scale)) white solid;
    padding: 0;
    border-bottom: calc(11px * var(--ui-scale)) white solid;

    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    --vertical-raise-options-height: calc(402px * var(--ui-scale));

    --vertical-slider-increments-height: calc(72px * var(--ui-scale));
    --vertical-slider-width: calc(110px * var(--ui-scale));
    --vertical-slider-height: calc(392px * var(--ui-scale));
}
.btn.raise-amount.for-portrait .raise-options .raise-options-buttons {
    background: #ffffff; /* for new transparent version*/
}
.btn.raise-amount.for-portrait .raise-options .raise-options-buttons .btn.slider-value {
    border-color: transparent !important;
    padding: calc(5px * var(--ui-scale)) calc(7px * var(--ui-scale)) !important;
    flex-basis: 9ch;
    min-width: 9ch;
}
.btn.raise-amount.for-portrait .raise-options .raise-options-buttons .btn.slider-value .raise-value-in-bb {
    margin-right: calc(-3px * var(--ui-scale));
    font-size: calc(13px * var(--ui-scale)) !important;
}
.btn.raise-amount.for-portrait .raise-options .btn.slider-value .input-wrapper input {
    padding-right: calc(0px * var(--ui-scale));
}
.btn.raise-amount.for-portrait .raise-options .btn.slider-value .input-prefix {
    left: calc(3px * var(--ui-scale));
}
.btn.raise-amount.for-portrait .raise-options .raise-options-buttons .quick-raise-amounts {
    position: absolute;
    right: calc(100% + calc(12px * var(--ui-scale)));
    /*top: 0;*/
    bottom: 0;

    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: stretch;
    height: var(--vertical-slider-height);
    z-index: -1; /* ensures it will hide behind the slider in case it overlaps it slightly */
}
.btn.raise-amount.for-portrait .raise-options .raise-options-buttons .quick-raise-amounts .quick-raise-amount {
    flex: 0;
    width: 7ch;

    padding: calc(12px * var(--ui-scale)) calc(12px * var(--ui-scale));
    border: calc(1px * var(--ui-scale)) solid #ffffff;
    border-right: none;

    border-radius: 0;
    border-top-left-radius: calc(10px * var(--ui-scale));
    border-bottom-left-radius: calc(10px * var(--ui-scale));
    line-height: 1.4;
}
.btn.raise-amount.for-portrait .raise-buttons {
    flex-direction: row;
    flex: 1;
    gap: calc(20px * var(--ui-scale));
}
.btn.raise-amount.for-portrait .btn[data-action-type="raise"] {
    display: flex;
    justify-content: center;
    align-items: center;

    flex: 0 0 20ch;
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;
    /*padding: calc(13px * var(--ui-scale)) calc(20px * var(--ui-scale)) !important;*/
}
.btn.raise-amount.for-portrait .raise-options .slide-container {
    flex-direction: column;
    margin: 0;
    gap: calc(10px * var(--ui-scale));
    gap: 0; /* for new rangeslider library*/

    width: var(--vertical-slider-width);
    height: calc(var(--vertical-slider-increments-height) + var(--vertical-slider-height));
    position: relative;

    /* necessary for filter to work in all browsers, including safari*/

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

    background: rgba(0,0,0,0.1);
    -moz-backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    margin-bottom: -2px; /* to hide transparent line of pixel at the bottom */
}
.btn.raise-amount.for-portrait .slider-increments {
    display: flex;
    justify-content: space-evenly;
    align-self: stretch;

    /* for new transparent sldier variant */
    padding: calc(10px * var(--ui-scale)) 0;
    background: #ffffff;
}
.btn.raise-amount.for-portrait .raise-options .slide-container .rangeslider {

    margin: auto 0;
    padding: 0 !important;
    border: 0 solid;
}
.btn.raise-amount.for-portrait .slider-increments .slider-increment {
    flex-basis: calc(52px * var(--ui-scale));
    width: calc(52px * var(--ui-scale));
    height: calc(52px * var(--ui-scale));
    /*border-radius: calc(26px * var(--ui-scale));*/
    border-radius: calc(0px * var(--ui-scale));
    font-size: calc(52px * var(--ui-scale));
}

/* game actions, portrait variations layout css overrides END */

#layoutFooter .expand-chat {
    display: none !important;
    position: absolute;
    right: 1rem;
    font-size: 5rem;
    cursor: pointer;
    width: auto !important;
    height: auto !important;
}
#layoutFooter .portrait .expand-chat {
    display: block !important;
}
.btn[data-action-type="raise"] {
    position: absolute;
    background: white;
    color: black;

    top: calc(7px * var(--ui-scale));
    right: calc(8px * var(--ui-scale));
    margin: auto 0;

    font-size: calc(24px * var(--ui-scale));
    line-height: 1;

    padding: calc(11px * var(--ui-scale)) calc(20px * var(--ui-scale));
    outline-color: black;

    min-width: 7ch;
}
.actions .slide-container {
    display: flex;
    align-items: center;

    --clr-progress-front1: var(--slider-handle-clr);

    padding-right: calc(150px * var(--ui-scale));
    width: auto;
}
.actions .slide-container .slider {
    /*background: var(--slider-bg-clr);*/
}
.actions .slide-container .slider.vertical {
    /*background: var(--slider-bg-clr);*/
}

/* handling slider progress for Chrome */
/* slider styling topic: https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider */
@media screen and (-webkit-min-device-pixel-ratio:1) {
    .actions .slide-container .slider {
        /*overflow: hidden;*/
        /*width: 500px;*/
        -webkit-appearance: none;
        /*background-color: var(--slider-bg-full-clr);*/
    }

    .actions .slide-container .slider::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: calc(10px * var(--ui-scale));
        color: var(--slider-bg-full-clr);
        margin-top: calc(-1px * var(--ui-scale));

        /*background: var(--slider-bg-full-clr);
        /*height: 100%;*/
    }

    .actions .slide-container .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: calc(40px * var(--ui-scale));
        height: calc(40px * var(--ui-scale));
        border-radius: calc(25px * var(--ui-scale));

        cursor: ew-resize;
        background: var(--slider-bg-full-clr);
        margin-top: calc(-15px * var(--ui-scale));
        /*box-shadow: 500px 0 0 500px var(--slider-bg-clr);
        background-color: var(--slider-bg-clr);*/
        transform: translateX(calc(var(--slider-thumb-offset-x) * 100%));
    }

    .actions .slide-container .slider:focus {
        outline: none;
    }
    .actions .slide-container .slider:focus::-webkit-slider-runnable-track {
        /*background-color: var(--slider-bg-clr);*/
    }

    /* slider vertical adjustments: */

    .actions .slide-container .slider.vertical::-webkit-slider-runnable-track {
        height: calc(10px * var(--ui-scale));
        width: 100%;
        /*margin-top: calc(-1px * var(--ui-scale));*/
    }

    .actions .slide-container .slider.vertical::-webkit-slider-thumb {
        width: 110%;
        height: calc(13px * var(--ui-scale));
        border-radius: calc(25px * var(--ui-scale));
        border: 1px solid #ffffff;
        filter: drop-shadow(0 0 3px #ffd700a6);
        /* we can still use xoffset, but apply it veritcally */
        /*transform: translateY(calc(var(--slider-thumb-offset-x) * 100%));*/
        transform: none !important;
    }

    .actions .slide-container .slider.rotate-vertical::-webkit-slider-runnable-track {
        /*background: var(--clr-green3);*/
        height: 100%;
        width: 100%;
    }

    .actions .slide-container .slider.rotate-vertical::-webkit-slider-thumb {
        width: calc(18px * var(--ui-scale));
        height: calc(var(--vertical-slider-width) * 1.1);
        border-radius: calc(25px * var(--ui-scale));
        border: 1px solid #ffffff;
        filter: drop-shadow(0 0 3px #ffd700a6);
        /* we can still use xoffset, but apply it veritcally */
        margin-top: 0;
        transform: translateY(calc(var(--vertical-slider-width) * -0.05)) !important;
        /*transform: none !important;*/
    }

}
/* handling slider progress for Mozilla Firefox */
.actions .slide-container .slider::-moz-range-progress {
    background: var(--slider-bg-full-clr);
    height: 100%;
}
.actions .slide-container .slider::-moz-range-track {
    background-color: var(--slider-bg-clr);
    height: 100%;
}
.actions .slide-container .slider.vertical::-moz-range-progress {
    /*height: calc(10px * var(--ui-scale));*/
    width: 100%;
}
.actions .slide-container .slider.vertical::-moz-range-track {
    /*height: 100%;*/
    width: 100%;
}
/* handling slider progress for IE */
.actions .slide-container .slider::-ms-fill-lower {
    background: var(--slider-bg-full-clr);
    height: 100%;
}
.actions .slide-container .slider::-ms-fill-upper {
    background-color: var(--slider-bg-clr);
}
.actions .slide-container .slider.vertical::-ms-fill-lower {
    width: 100%;
}
.actions .slide-container .slider.vertical::-ms-fill-upper {
}
/* END special browser handling for slider colors */
.actions .slide-container .slider-value {
    flex: 0 0 auto;
    margin: 0;
    font-size: calc(20px * var(--ui-scale));
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.actions .slide-container .slider-value .setting-name {
    display: none;
}
.actions .slide-container .slider-value > * {
    display: inline-block;
    vertical-align: center;
}
.actions .slide-container .slider-value .current-sett-value {
    min-width: 6ch;
    /*background: var(--slider-bg-full-clr);
    border: 1px solid black;*/
    background: var(--btn-raise-amount-bg);
    border-radius: calc(15px * var(--ui-scale));
    padding: calc(13px * var(--ui-scale)) calc(8px * var(--ui-scale));
    text-align: center;
    font-weight: 600;

    font-variant-numeric: tabular-nums;

    cursor: pointer;
}
.actions .slide-container .slider-value .current-sett-value:hover {
    filter: brightness(95%);
}
.actions .slide-container input {
    flex: 1 1 auto;
    margin: 0;
    margin-left: calc(10px * var(--ui-scale));
}