@-webkit-keyframes enter {
    0% {
        opacity: 0;
        top: -10px;
    }

    5% {
        opacity: 1;
        top: 0px;
    }

    50.9% {
        opacity: 1;
        top: 0px;
    }

    55.9% {
        opacity: 0;
        top: 10px;
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        top: -10px;
    }

    5% {
        opacity: 1;
        top: 0px;
    }

    50.9% {
        opacity: 1;
        top: 0px;
    }

    55.9% {
        opacity: 0;
        top: 10px;
    }
}

@-moz-keyframes enter {
    0% {
        opacity: 0;
        top: -10px;
    }

    5% {
        opacity: 1;
        top: 0px;
    }

    50.9% {
        opacity: 1;
        top: 0px;
    }

    55.9% {
        opacity: 0;
        top: 10px;
    }
}

.square {
    background: #0D6EFD;
    width: 15px;
    height: 15px;
    float: left;
    top: -10px;
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    opacity: 0;
    -webkit-animation: enter 6s infinite;
    animation: enter 6s infinite;
}

.enter {
    top: 0px;
    opacity: 1;
}

.square:nth-child(1) {
    -webkit-animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.square:nth-child(2) {
    -webkit-animation-delay: 2.1s;
    -moz-animation-delay: 2.1s;
    animation-delay: 2.1s;
}

.square:nth-child(3) {
    -webkit-animation-delay: 2.4s;
    -moz-animation-delay: 2.4s;
    animation-delay: 2.4s;
    background: #fdc96f;
}

.square:nth-child(4) {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.square:nth-child(5) {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.square:nth-child(6) {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.square:nth-child(8) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.square:nth-child(9) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.clear {
    clear: both;
}

.last {
    margin-right: 0;
}


#loading_placeholder {
    margin: 40px 106px;
    height: 72px;
}

.loaded_content {
    display: none;
}

/**
  * bootstrap-table - An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)
  *
  * @version v1.23.1
  * @homepage https://bootstrap-table.com
  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
  * @license MIT
  */

.bootstrap-table .fixed-table-toolbar::after{content:"";display:block;clear:both}.bootstrap-table .fixed-table-toolbar .bs-bars,.bootstrap-table .fixed-table-toolbar .columns,.bootstrap-table .fixed-table-toolbar .search{position:relative;margin-top:10px;margin-bottom:10px}.bootstrap-table .fixed-table-toolbar .columns .btn-group>.btn-group{display:inline-block;margin-left:-1px!important}.bootstrap-table .fixed-table-toolbar .columns .btn-group>.btn-group>.btn{border-radius:0}.bootstrap-table .fixed-table-toolbar .columns .btn-group>.btn-group:first-child>.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.bootstrap-table .fixed-table-toolbar .columns .btn-group>.btn-group:last-child>.btn{border-top-right-radius:4px;border-bottom-right-radius:4px}.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu{text-align:left;max-height:300px;overflow:auto;-ms-overflow-style:scrollbar;z-index:1001}.bootstrap-table .fixed-table-toolbar .columns label{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.4286}.bootstrap-table .fixed-table-toolbar .columns-left{margin-right:5px}.bootstrap-table .fixed-table-toolbar .columns-right{margin-left:5px}.bootstrap-table .fixed-table-toolbar .pull-right .dropdown-menu{right:0;left:auto}.bootstrap-table .fixed-table-container{position:relative;clear:both}.bootstrap-table .fixed-table-container .table{width:100%;margin-bottom:0!important}.bootstrap-table .fixed-table-container .table td,.bootstrap-table .fixed-table-container .table th{vertical-align:middle;box-sizing:border-box}.bootstrap-table .fixed-table-container .table tfoot th,.bootstrap-table .fixed-table-container .table thead th{vertical-align:bottom;padding:0;margin:0}.bootstrap-table .fixed-table-container .table tfoot th:focus,.bootstrap-table .fixed-table-container .table thead th:focus{outline:0 solid rgba(0,0,0,0)}.bootstrap-table .fixed-table-container .table tfoot th.detail,.bootstrap-table .fixed-table-container .table thead th.detail{width:30px}.bootstrap-table .fixed-table-container .table tfoot th .th-inner,.bootstrap-table .fixed-table-container .table thead th .th-inner{padding:.75rem;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bootstrap-table .fixed-table-container .table tfoot th .sortable,.bootstrap-table .fixed-table-container .table thead th .sortable{cursor:pointer;background-position:right;background-repeat:no-repeat;padding-right:30px!important}.bootstrap-table .fixed-table-container .table tfoot th .sortable.sortable-center,.bootstrap-table .fixed-table-container .table thead th .sortable.sortable-center{padding-left:20px!important;padding-right:20px!important}.bootstrap-table .fixed-table-container .table tfoot th .both,.bootstrap-table .fixed-table-container .table thead th .both{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC")}.bootstrap-table .fixed-table-container .table tfoot th .asc,.bootstrap-table .fixed-table-container .table thead th .asc{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==")}.bootstrap-table .fixed-table-container .table tfoot th .desc,.bootstrap-table .fixed-table-container .table thead th .desc{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ")}.bootstrap-table .fixed-table-container .table tbody tr.selected td{background-color:rgba(0,0,0,.075)}.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td{text-align:center}.bootstrap-table .fixed-table-container .table tbody tr .card-view{display:flex}.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title{font-weight:700;display:inline-block;min-width:30%;width:auto!important;text-align:left!important}.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value{width:100%!important;text-align:left!important}.bootstrap-table .fixed-table-container .table .bs-checkbox{text-align:center}.bootstrap-table .fixed-table-container .table .bs-checkbox label{margin-bottom:0}.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type=checkbox],.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type=radio]{margin:0 auto!important}.bootstrap-table .fixed-table-container .table.table-sm .th-inner{padding:.25rem}.bootstrap-table .fixed-table-container.fixed-height:not(.has-footer){border-bottom:1px solid #dee2e6}.bootstrap-table .fixed-table-container.fixed-height.has-card-view{border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.bootstrap-table .fixed-table-container.fixed-height .fixed-table-border{border-left:1px solid #dee2e6;border-right:1px solid #dee2e6}.bootstrap-table .fixed-table-container.fixed-height .table thead th{border-bottom:1px solid #dee2e6}.bootstrap-table .fixed-table-container.fixed-height .table-dark thead th{border-bottom:1px solid #32383e}.bootstrap-table .fixed-table-container .fixed-table-header{overflow:hidden}.bootstrap-table .fixed-table-container .fixed-table-body{overflow:auto;height:100%}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading{align-items:center;background:#fff;display:flex;justify-content:center;position:absolute;bottom:0;width:100%;max-width:100%;z-index:1000;transition:visibility 0s,opacity .15s ease-in-out;opacity:0;visibility:hidden}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.open{visibility:visible;opacity:1}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap{align-items:baseline;display:flex;justify-content:center}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .loading-text{margin-right:6px}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap{align-items:center;display:flex;justify-content:center}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before{content:"";animation-duration:1.5s;animation-iteration-count:infinite;animation-name:loading;background:#212529;border-radius:50%;display:block;height:5px;margin:0 4px;opacity:0;width:5px}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot{animation-delay:.3s}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after{animation-delay:.6s}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark{background:#212529}.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-dot,.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::after,.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::before{background:#fff}.bootstrap-table .fixed-table-container .fixed-table-footer{overflow:hidden}.bootstrap-table .fixed-table-pagination::after{content:"";display:block;clear:both}.bootstrap-table .fixed-table-pagination>.pagination,.bootstrap-table .fixed-table-pagination>.pagination-detail{margin-top:10px;margin-bottom:10px}.bootstrap-table .fixed-table-pagination>.pagination-detail .pagination-info{line-height:34px;margin-right:5px}.bootstrap-table .fixed-table-pagination>.pagination-detail .page-list{display:inline-block}.bootstrap-table .fixed-table-pagination>.pagination-detail .page-list .btn-group{position:relative;display:inline-block;vertical-align:middle}.bootstrap-table .fixed-table-pagination>.pagination-detail .page-list .btn-group .dropdown-menu{margin-bottom:0}.bootstrap-table .fixed-table-pagination>.pagination ul.pagination{margin:0}.bootstrap-table .fixed-table-pagination>.pagination ul.pagination li.page-intermediate a{color:#c8c8c8}.bootstrap-table .fixed-table-pagination>.pagination ul.pagination li.page-intermediate a::before{content:"⬅"}.bootstrap-table .fixed-table-pagination>.pagination ul.pagination li.page-intermediate a::after{content:"➡"}.bootstrap-table .fixed-table-pagination>.pagination ul.pagination li.disabled a{pointer-events:none;cursor:default}.bootstrap-table.fullscreen{position:fixed;top:0;left:0;z-index:1050;width:100%!important;background:#fff;height:100vh;overflow-y:scroll}.bootstrap-table.bootstrap4 .pagination-lg .page-link,.bootstrap-table.bootstrap5 .pagination-lg .page-link{padding:.5rem 1rem}.bootstrap-table.bootstrap5 .float-left{float:left}.bootstrap-table.bootstrap5 .float-right{float:right}div.fixed-table-scroll-inner{width:100%;height:200px}div.fixed-table-scroll-outer{top:0;left:0;visibility:hidden;width:200px;height:150px;overflow:hidden}@keyframes loading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}


/* 
    --------------------------------------------------------------------------
    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 */