label.check-button {
    /*margin: 4px 4px 4px 0px;  This looks waaaay not right.... */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

    label.check-button input {
        cursor: pointer;
        width: 20px;
        min-width: 20px;
        height: 20px;
        margin-right: 8px;
    }




/* 
    --------------------------------------------------------------------------
    For some reason, without this, the button heights get screwed up
    --------------------------------------------------------------------------
    https://stackoverflow.com/a/46110096/2413712
*/

table {
    height: 1px;
}
    table > td {
        height: 100%;
    }


/* Before, we had: */
/*.soundboard_cell {
    height: 1px;
    height: fit-content;
}*/



/* #region Original Selection Highlighting */

[data-bs-theme=light] {
    --sb-hover-cell-color: #2B3035;

    --sb-highlighted-cell-color: #E6EFFD;
    --sb-highlighted-cell-border-color: #1A73E8;

    --sb-highlighted-footer-background-color: #0B57D0;
    --sb-highlighted-footer-border-color: #0B57D0;
    --sb-highlighted-footer-text-color: #FFFFFF;

}

[data-bs-theme=dark] {
    --sb-hover-cell-color: #2B3035;
    --sb-highlighted-cell-color: #032830;
    --sb-highlighted-cell-border-color: #087990;

    --sb-highlighted-footer-background-color: var(--bs-warning-bg-subtle);
    --sb-highlighted-footer-border-color: var(--bs-warning-border-subtle);
    --sb-highlighted-footer-text-color: var(--bs-warning-text-emphasis);
}


    .soundboard_cell.selected > .sb_btn {
        /*background-color: var(--sb-highlighted-cell-color) !important;*/
        border-style: solid !important;
        border-color: var(--sb-highlighted-cell-border-color) !important;
    }

    .soundboard_cell.selected > .sb_footer_btn {
        background-color: var(--sb-highlighted-footer-background-color) !important;
        border-style: solid !important;
        border-color: var(--sb-highlighted-footer-border-color) !important;
        color: var(--sb-highlighted-footer-text-color) !important;
    }

/* #endregion Original Selection Highlighting */


/* #region Soundboard Buttons */

.sb_btn {
    min-height: 58px;
    min-width: 58px;
    height: 100%;
    width: 100%;
    padding: 16px;

    transition: color 150ms ease-in-out,
        background-color 150ms ease-in-out,
        border-color 150ms ease-in-out,
        box-shadow 250ms ease,
        top 250ms ease;
}


.sb_editor_cell {
    cursor: cell !important;
}

.sb_live_btn {
    cursor: pointer !important;
    transition: All 250ms ease;
}


.sb_footer_btn {
    border-style: solid;
    border-width: 1px;

    color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}


.sb_unset_btn {
    border-style: dashed;
    border-width: 1px;

    border-color: var(--bs-gray-500);
}

.sb_set_btn {
    border-style: solid;
    border-width: 2px;
    border-radius: 12px;

    position: relative;
    top: -5px;
}

.sb_live_btn:active {
    top: 0px;
    box-shadow: none !important;
}

/* #endregion Soundboard Buttons */


/* #region Add Row Button */

.soundboard_add_row_button {
    height: 45px;
    margin-left: 45px;
}

/* #endregion Add Row Button */


/* #region Add Column Button */

.newColButtonAndTableWrapperDiv {
    display: flex;
}

.edit_column_button {
    min-width: 45px;
    text-align: center;
}

.verticaltext {
    position: relative;
    padding-left: 45px;
    height: 45px;
}

.verticaltext_content {
    position: absolute;
    transform-origin: 0 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* #endregion Add Column Button */



/* #region Tippy Context Menu */

.tippy-box {
    border-radius: 5px;
}
    .tippy-box > .tippy-content {
        padding: 0;
    }
    
    .tippy-box[data-placement^='top'] > .tippy-arrow::before {
        border-top-color: var(--bs-secondary-color);
    }

    .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
        border-bottom-color: var(--bs-secondary-color);
    }

    .tippy-box[data-placement^='left'] > .tippy-arrow::before {
        border-left-color: var(--bs-secondary-color);
    }

    .tippy-box[data-placement^='right'] > .tippy-arrow::before {
        border-right-color: var(--bs-secondary-color);
    }

/* #endregion Tippy Context Menu */


/* #region Modal Header */

.sb_modal_header {
    cursor: move;
    display: flex;
}
    /*
        Elipses for overflown text
        Source:
                https://stackoverflow.com/a/12656699
                https://jsfiddle.net/Blender/kXMz7/1/
    */
    .sb_modal_header > .modal-title-details {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

/* #endregion Modal Header */



/* #region Button Preview */


#preview_window_wrapper {
    height: 165px;
}

#waveform_container {
    height: 140px;
}

#waveform_container_wrapper {
    height: 100%;
}

#preview_button_wrapper_wrapper {
    height: 100%;
}

/* #endregion Button Preview */




/* #region Modal Section Floaters */

#play_section_preview_floater,
#display_section_preview_floater {
    animation: scaleOut 400ms ease-in-out forwards;
    transform-origin: bottom center;
}


    #play_section_preview_floater.show,
    #display_section_preview_floater.show {
        animation: scaleIn 400ms ease-in-out forwards;
        transform-origin: bottom center;
    }

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    80% {
        transform: scale(1.07);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        transform: scale(1.07);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* #endregion Modal Section Floaters */





/* #region NOT USED */
/* Vertical slider: */
/*
input[type="range"][orient="vertical"] {
    width: 16px;
    writing-mode: bt-lr;
    appearance: slider-vertical;
}
*/
/* Table cell centering: */
.center_content {
    text-align: center;
    vertical-align: middle;
}


/*
    Changing Bootstrap Accordion to be checkbox radio buttons instead.
    Easier said than done.
    Finished with help from the internet:
    ------------------------------------------------------------------------------------------------------------
    https://stackoverflow.com/a/66631679/2413712
    https://jsfiddle.net/vinorodrigues/ejrLb0ox/
    encodeURIComponent()
    https://stackoverflow.com/a/69833762/2413712
    https://stackoverflow.com/a/53336754/2413712
    https://codepen.io/sosuke/pen/Pjoqqp
*/

.accordion_radio_select:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%206.4.0%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M256%2048a208%20208%200%201%201%200%20416%20208%20208%200%201%201%200-416zm0%20464A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM369%20209c9.4-9.4%209.4-24.6%200-33.9s-24.6-9.4-33.9%200l-111%20111-47-47c-9.4-9.4-24.6-9.4-33.9%200s-9.4%2024.6%200%2033.9l64%2064c9.4%209.4%2024.6%209.4%2033.9%200L369%20209z%22%2F%3E%3C%2Fsvg%3E");
    transform: rotate(0deg);
}

.accordion_radio_select::after {
    order: -1;
    margin-left: 0;
    margin-right: 0.5em;
    filter: invert(91%) sepia(12%) saturate(205%) hue-rotate(169deg) brightness(81%) contrast(80%);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!%20Font%20Awesome%20Free%206.4.0%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20(Commercial%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M464%20256A208%20208%200%201%200%2048%20256a208%20208%200%201%200%20416%200zM0%20256a256%20256%200%201%201%20512%200A256%20256%200%201%201%200%20256z%22%2F%3E%3C%2Fsvg%3E");
    transform: rotate(0deg);
}



.TODO_ADD_THESE_IN_VIA_POSTCSS_IF_TRULY_NECESSARY {
    -webkit-box-shadow: 0px 5px 0px #c4c4c4;
    -moz-box-shadow: 0px 5px 0px #c4c4c4;
    -ms-box-shadow: 0px 5px 0px #c4c4c4;
    -o-box-shadow: 0px 5px 0px #c4c4c4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-transition: All 250ms ease;
    -moz-transition: All 250ms ease;
    -o-transition: All 250ms ease;
    -ms-transition: All 250ms ease;
}


/* #endregion NOT USED */



/* 
    Original source:
    https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
*/


/* Customize the radio_button_label */
.radio_button_label {
    display: block;
    position: relative;
    padding: 16px 16px 24px 62px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default radio button */
input.radio_button {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 38%;
    left: 19px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_button_label:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio_button_label input:checked ~ .checkmark {
    background-color: #2196F3;
}


/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_button_label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio_button_label .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}





.join_button {
    background-color: rgb(25, 135, 84);
    color: rgb(255, 255, 255);
    border-color: rgb(9, 49, 30);
    box-shadow: rgb(5, 27, 17) 0px 5px 0px;
    padding: 4px 14px;
    text-decoration: none;
}


.join_button_disabled {
    padding: 4px 14px;
    text-decoration: none;
    font-size: 48px;
    cursor: not-allowed;
    border-radius: 12px;
    border-style: dashed;
}



#payment_pane_container {
    width: 100%;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

#payment_selection_pane {
    display: inline-block;
    width: 100%;
}


#payment_confirmation_pane {
    position:absolute;
    display: inline-block;
    width: 100%;
}

#payment_pane_container {
    transition: height 0.5s ease-in-out;
}

#payment_pane_container div {
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

#payment_pane_container.show_confirmation div {
    transform: translateX(-100%);
}