@import './base.css';

html, body, #app, .viewer {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: transparent !important;
    scrollbar-width: none !important;
}
.alert-button-thumbnail .center-Icon {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/*.icon {*/
/*    background-color: var(--text-primary);*/
/*    height: 50px;*/
/*    width: 50px;*/
/*    mask-size: 50px;*/
/*}*/

/*.icon-sm {*/
/*    background-color: var(--text-primary);*/
/*    height: 16px;*/
/*    width: 16px;*/
/*    mask-size: 16px;*/
/*}*/
@font-face {
    font-family: VideoJS;
    src: url('/src/assets/videojs.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}
.svg-icon {
    display: block;
    background-color: transparent;
}
.svg-sm {
    height: var(--svg-sm-size);
    width: var(--svg-sm-size);
}
.svg-md {
    height: var(--svg-md-size);
    width: var(--svg-md-size);
}
.svg-xl {
    height: var(--svg-xl-size);
    width: var(--svg-xl-size);
}
.svg-xxl {
     height: var(--svg-xxl-size);
     width: var(--svg-xxl-size);
 }
/*.icon-mid {*/
/*    background-color: var(--text-primary);*/
/*    height: 24px;*/
/*    width: 24px;*/
/*    mask-size: 24px;*/
/*}*/


/*.svg-md {*/
/*    height: 24px;*/
/*    width: 24px;*/
/*}*/

/*.soundicon {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-up" viewBox="0 0 16 16"><path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path d="M10.025 8a4.5 4.5 0 0 1-1.318 3.182L8 10.475A3.5 3.5 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.5 4.5 0 0 1 10.025 8M7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12zM4.312 6.39 6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11"/></svg>');
}

.ttsicon {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-megaphone-fill" viewBox="0 0 16 16"><path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25 25 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 1.996 1.994 2.009l.496.008a64 64 0 0 1 1.51.048m1.39 1.081q.428.032.85.078l.253 1.69a1 1 0 0 1-.983 1.187h-.548a1 1 0 0 1-.916-.599l-1.314-2.48a66 66 0 0 1 1.692.064q.491.026.966.06"/></svg>');
}

.bi-camera-video {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"/></svg>');
}

.bi-file-play {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-play" viewBox="0 0 16 16"><path d="M6 10.117V5.883a.5.5 0 0 1 .757-.429l3.528 2.117a.5.5 0 0 1 0 .858l-3.528 2.117a.5.5 0 0 1-.757-.43z"/><path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1"/></svg>');
}*/

/*.bi-volume-up-fill {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16"><path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg>');
}*/

/*.bi-x {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');
}
 */

/*.bi-exclamation-triangle-fill {*/
/*    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/></svg>');*/
/*}*/

.bit-Icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAYAAAA2Lt7lAAAAAXNSR0IArs4c6QAABF5JREFUSA2NVl1oXEUUPmfu3d1stmli1qQaRCrSdt2UigjiSx+KRSyoWKEKouiDKIKFglhJ8SeIlVKKxWrjD0hBUITSF5WAD4JPPghpfZRWklhQrILWNN3de+feOZ4zc+dml+7fhN05c86Z75zvnJnZAAw5vvucKt+eopNDuuduKpcGCPEavEUAhxZP04MDXDvM2LHqsVg8RXVt4GckKADCpTtnYOfsExj3cO9QD8UgiuB0GlMhiQmSGLZdvAyHO1D6LAYyOHeUnjJAXyCnTvxnZ4RmiFDfP4erfbCtqS+DxXnanCZwIuViSPZ21jxHVNYRvD8IXOx9A1xN4G0dmVtTDcCBQGYjMn+0pke/ep0eHhSkZ4m+PEK7GOg8gQmACwNcno2ZJWQd4cptFajvmcdWr0BdGRARxk1aSDQFNnspi0b+yCwM0JaM7Xf89p+Z6wUu+q4MPjtIz1FqznQkLt6ehMh+IEalAu585iT+6lXtc9i+EPnMIZrQDTouWF0BRe8HsRdCqaXhA1bt8+r2+YYStdbMUR2bKT73eUnsCZLS2HuQlUnsiZSNGx6Zhz5+nh5vB/ZyR4kWnqV7U0M/gTGKu8gMLA/nK2sZLuuMnejYR9wQLxdH1V0vfooNcfMjZyCN1c10IY2M4ua5bG1DOXM5opwx8Fthm8z3wussO2e/vXXNvOGB/ZwzOPFY+gIifeINflZ8SMemEca2IBRGABprAOt/Gmj868jY9D1bVHER1d0Hz+Evfr8N8OF+qja1uWjITMr5ZjZQKANsnlawaYofB+HJnvaZYJv4SOZrVwys/803hRlYB6kV4veHvwn3+gC2RNeb6TFu7KTc0iIDV7cqmN6moDyRnfeInwq+SnHTQMKybvGrZISZgltqAYzPcMtCXz564Pi+5EkfAN/ZS/crSH+sTAJWphSERckiy9Z2z7l6Zn7OAdjX9p3naB2ZkYHmGvwRjga1177Ga2HlJvPRpipzZgfxlAztoeBv+3ra+gqcaHlwo0XM1aLij1gVsxifQahUYabxj3mTVa+G1FJPR9fNUlCAUg6SbfHZyizDBrQ2u3TrzOYcXBJRA1dHq+qI6OzO9x6hWSylS0ERSs6f1Za3A9rI0a+FgTsMuSajoRmcS72d7wN3NAsgwrE9NBuMcZCMia2ZjeN+ZPI62JR4gyTrZQHgETP4xBUGX3LgoutweXc31bGcnhcmloFHFVrCSDZI5hZdNm/8ysVNWL35atABbv3trrav+XuoHowzk5BGbkhS0nFxXGqZnLTUypam2tGeuYfsYOCVEoRKyZIKYcRhtodi2TXK8tMt/tExQVdwwesaQAxzs1RXHAQV8QMhmN7VB+OLFanlSzuC7WfPYio+3Ybf1c0Gr2ylWljWF4SJq0b2XwV7mxiWV3YV+oILaN8A4iBB+J21QWwDmEkS0fLv9xUHgg8VwAapUi0u6QvSeM2Z/7V7OHDZO/R4eYxqL1XjHw4cIH7Ahx//AxmqHr7YGOTaAAAAAElFTkSuQmCC) !important;
    float: left;
    height: 13px;
    width: 10px;
    background-repeat: no-repeat;
    background-size: 10px 13px;
    margin-top: 2px;
}




.displayBlock {
    display: block !important
}

.displayNone {
    display: none !important
}

.displayFlex {
    display: flex !important
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

.panel {
    position: relative;
    color: var(--text-primary);
    background: var(--background-panel);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.panel__column {
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    user-select: none;
    min-height: 100%;
    overflow: hidden;
    width: 100%;
}


.modal-error__backdrop {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0009;
    display: flex;
    justify-content: center;
    align-items: center;
}



[data-theme=purple] .panel__buttons-wrapper {
    scrollbar-color: var(--background-primary) transparent;
}

.panel__buttons-wrapper {
    overflow-y: auto;
    padding: var(--spacing-md);
    padding-top: var(--spacing-xl);
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--background-tertiary) transparent;
}

.panel__buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-xl);
}

/*Buttons*/
[data-theme=purple] .alert-button {
    border-color: var(--border-primary);
    background: #0d072080;
}

.alert-button {
    background: color-mix(in srgb, var(--background-secondary) 50%, transparent);
    border: solid 2px color-mix(in srgb, var(--background-secondary) 50%, transparent);
    border-radius: var(--radius-lg);
    min-width: 90px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    padding: 16px 7px 7px;
    z-index: 1;
    position: relative;
    transition: box-shadow .1s;
    background-clip: padding-box;
    gap: 8px;
    line-height: normal;
}

    .alert-button:hover, .alert-button:focus {
        border-color: var(--border-alert-button-hover);
        box-shadow: 0 0 20px 0 var(--background-secondary);
        z-index: 0;
    }

.alert-button-thumbnail {
    min-height: 70px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--thumbnail-shadow-color);
    background: var(--background-dark);
    position: relative;
}

.alert-button .bit-badge {
    display: flex;
    padding: var(--spacing-sm) 10px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    background: var(--background-darker);
    gap: 4px;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 12px;
    box-shadow: 0 1px 3px 1px #1018284d;
    backdrop-filter: blur(2px);
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-weight: 700;
    left: 50%;
    transform: translate(-50%);
    top: -12px;
    position: absolute;
}
/*.alert-button-thumbnail--icon {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
}
.alert-button__cost-tag {
    left: 50%;
    transform: translate(-50%);
    top: -12px;
    position: absolute;
}*/

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
}

button, select {
    text-transform: none;
}

button, input {
    overflow: visible;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

[data-theme=purple] .cost-badge--secondary {
    border-color: var(--border-primary);
}

.cost-badge--sm {
    font-weight: 700;
    line-height: 12px;
}

/*.cost-badge--secondary {
    border: 2px solid var(--background-alert-button-cost-badge);
    background: var(--background-alert-button-cost-badge);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background-clip: padding-box;
}

.cost-badge {
    display: flex;
    padding: var(--spacing-sm) 10px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-tertiary);
    background: var(--background-darker);
    gap: 4px;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 12px;
    box-shadow: 0 1px 3px 1px #1018284d;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}*/
.alert-button__name {
    word-break: break-word;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    height: 24px;
    align-items: center;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    z-index: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
}