@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

*,
*::after,
*::before {
    box-sizing: border-box;
}

:root {
    font-size: 16px;
    --page-padding: 1.5rem;
    --color-text: #fff;
    --color-bg: #12100e;
    --color-link: rgba(255,255,255,0.6);
    --color-link-hover: #fff;
    --color-bg-1: #2f251e;
    --color-bg-2: #43392f;
    --color-bg-3: var(--color-bg-1);
    --color-bg-4: var(--color-bg-2);
    --color-bg-5: var(--color-bg-1);
    --color-bg-6: var(--color-bg-2);
}

body {
    margin: 0;
    color: var(--color-text) !important;
    background-color: var(--color-bg) !important;
    font-family: "area-variable", sans-serif !important;
    font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    overflow-x: hidden;    
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
    content: '';
    position: fixed;
    z-index: 5000;
}

.js .loading::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.js .loading::after {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    opacity: 0.4;
    background: var(--color-link);
    animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5,0.5,1);
    }
}

a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
    cursor: pointer;
}

    a:hover {
        color: var(--color-link-hover);
        outline: none;
    }

    a:focus {
        outline: none;
        background: lightgrey;
    }

        a:focus:not(:focus-visible) {
            background: transparent;
        }

    a:focus-visible {
        outline: 2px solid red;
        background: transparent;
    }

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

    .unbutton:focus {
        outline: none;
    }

.frame {
    padding: var(--page-padding);
    position: relative;
    display: grid;
    z-index: 1000;
    width: 100%;
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;
    justify-items: start;
    text-transform: uppercase;
    font-size: 12px;
}

.frame--header {
    height: 100%;
    z-index: 3000;
    background: linear-gradient(0deg, rgba(47,37,30,1) 0%, rgba(47,37,30,0.4357142515209209) 17%, rgba(67,57,47,0.31246495180103295) 94%, rgba(47,37,30,0.8194677529214811) 100%), url("../img/band.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor' 'demos' 'heading';
}

.frame--footer {
    grid-template-areas: 'credits' 'author';
    align-content: end;
}

.frame #cdawrap {
    justify-self: start;
}

.frame a {
    pointer-events: auto;
}

.frame__title {
    grid-area: title;
    font-size: inherit;
    margin: 0;
}

.frame__back {
    grid-area: back;
    justify-self: start;
}

.frame__prev {
    grid-area: prev;
    justify-self: start;
}

.frame__sub {
    grid-area: sub;
}

.frame__demos {
    grid-area: demos;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    align-self: start;
    flex-wrap: wrap;
    background: var(--color-bg);
    border: 1px solid;
    padding: 1rem;
    border-radius: 10px;
}

@media(max-width: 999px) {
    .frame__demos {
        flex-direction: column;
        align-items: start;
        align-content: space-between
    }

        .frame__demos .event {
            width: 100%;
        }
}

    .frame__demos .event {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .frame__demos .date {
        margin: 10px;
    }

    .frame__demos .event a {        
        display: block;
        flex: none;
        text-decoration: none;
        border-radius: 4px;
        border: 1px solid var(--color-link-hover);
        display: grid;
        place-items: center;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.8em;
        padding-right: 0.8em;
        background: var(--color-link-hover) !important;
        color: var(--color-bg) !important;
        font-weight: bold;
    }

    .frame__demos > span {
        filter: invert(100%);
    }

    .frame__demos::before {
        content: "Show Dates:";
    }

.frame__heading {
    grid-area: heading;
    align-self: center;
    justify-self: start;
    width: min-content;
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
}

    .frame__heading h2 {
        margin: 0;
        line-height: 0.9;
        text-transform: uppercase;
        margin-left: -0.065em;
        font-size: clamp(2.5rem,12vw,7rem);
        letter-spacing: -0.105em;
        font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400;
    }

i {
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400, "INKT" 400;
}

.frame__heading p {
    margin: 0;
}

.frame__credits {
    grid-area: credits;
}

.frame__author {
    display: flex;
    gap: 1.5rem;
    grid-area: author;
}

.content {
    padding: var(--page-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content--perspective {
    perspective-origin: 50% 0%;
    perspective: 1000px;
}

.text-large {
    font-size: clamp(1.5rem,5vw,3rem);
    max-width: 900px;
    margin: 0 0 0.85em 0;
    line-height: 1.2;
    font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100;
}

.content--sticky {
    width: 100vw;
    position: sticky;
    top: 0;
    --offset: 0px;
    top: var(--offset);
    height: calc(100vh - var(--offset));
}

.content--grid,
.content--grid .content__inner {
    display: grid;
    overflow: hidden;
    grid-column-gap: 5vw;
    grid-row-gap: 2vh;
    align-content: center;
    grid-template-areas: 'content-img' 'content-title' 'content-text';
    justify-items: center;
}

    .content--grid:has(.content__inner) {
        display: block;
        padding: 0;
    }

.content__inner {
    width: 100%;
    height: 100%;
    border-radius: 0 0 2rem 2rem;
}

.content--card {
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 95vw;
    max-width: 500px;
    aspect-ratio: 0.8;
    top: 10vh;
    margin: auto;
    border-radius: 14px;
    gap: 3vh;
    text-align: center;
    margin-bottom: 5vh;
}

    .content--card .content__title {
        font-size: clamp(1.5rem,4vw,3.5rem);
    }

        .content--card .content__title i {
            display: block;
        }

.content--half {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    text-align: center;
}

    .content--half:nth-child(odd) {
        margin-left: auto;
    }

.content__img {
    grid-area: content-img;
    width: 50%;
    max-width: 300px;
    height: auto;
}

.content__img--large {
    width: 60%;
    height: auto;
}

.content__img--banner {
    max-width: 90vw;
    height: auto;
}

.content__img--small {
    height: 35%;
    width: auto;
}

.spacer {
    margin-top: 20vh;
}

.content__title {
    grid-area: content-title;
    line-height: 1;
    font-weight: normal;
    font-size: clamp(2rem,6vw,5rem);
    margin: 0;
    font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400;
    font-family: "Parisienne", system-ui;
}

.content__title img {
    max-width: 50vw;
}

.content__text {
    margin: 0;
    max-width: 500px;
    grid-area: content-text;
    text-align: center;
    line-height: 1.5;
    padding: 0 1rem;
    backface-visibility: hidden;
}

.content--link {
    text-align: center;
    display: flex;
    width: 100%;
    justify-content: right;
}

    .content--link a {
        color: #CCC;
    }

    .content__text--narrow {
        max-width: 300px;
    }

.content--intro {
    padding-top: 25vh;
    padding-bottom: 25vh;
    z-index: 2;
}

.content--outro {
    padding-top: 50vh;
    padding-bottom: 30vh;
}

.content--outro img.logo {
    max-width: 200px;
    margin: 6rem;
}

.bg-1 {
    background: var(--color-bg-1);
}

.bg-2 {
    background: var(--color-bg-2);
}

.bg-3 {
    background: var(--color-bg-3);
}

.bg-4 {
    background: var(--color-bg-4);
}

.bg-5 {
    background: var(--color-bg-5);
}

.bg-6 {
    background: var(--color-bg-6);
}

@media screen and (min-width: 63em) {
    body {
        --page-padding: 2rem 3rem;
    }

    .frame--header {
        height: 100vh;
        grid-template-columns: auto auto auto 1fr 1fr;
        grid-template-rows: auto 1fr auto;
        align-content: space-between;
        grid-template-areas: 'title back prev sub sponsor' 'heading heading heading heading heading' 'demos demos demos demos demos';
    }

    .frame__heading {
        margin-top: 0;
    }

        .frame__heading h2 {
            white-space: nowrap;
        }

        .frame__heading p {
            margin: 0 0 0 auto;
        }

    .content--grid .content__title {
        align-self: end;
    }

    .frame__demos {
        position: fixed;
        bottom: 2rem;
    }

    .frame--footer {
        padding-bottom: 0;
        grid-template-areas: 'credits ...' '... author';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 6rem;
    }

    .frame__author {
        align-self: center;
    }

    .frame #cdawrap {
        max-width: 300px;
        text-align: right;
    }

    .frame #cdawrap,
    .frame__author,
    .frame__sub {
        justify-self: end;
    }

    .content--grid,
    .content--grid .content__inner {
        grid-template-areas: 'content-img content-title' 'content-img content-text';
        grid-template-columns: 30% 1fr;
        justify-items: start;
    }

    .content__img--large {
        width: 160%;
    }

    .content__img--left {
        justify-self: end;
    }

    .content__text--left {
        text-align: left;        
    }

    .content--card {
        width: 50vw;
    }

    .content--half {
        width: 50%;
    }
}

.song-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width: 999px) {
    .song-wrapper {
        flex-direction: column;
    }

}

/*-----------------------------------Play Button-----------------------------------*/
.play-button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.button-content {
    background: #f4471f;
    border-radius: 50%;
    box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051), 0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06), 0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059), 0 35px 80px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    height: 100px;
    position: absolute;
    width: 100px;
}

.play-button:active .button-content {
    background: #e93c15;
}

.button-icon {
    height: 200px;
    transform: rotate(-120deg);
    transition: transform 500ms;
    width: 200px;
}

.button-part {
    background: white;
    height: 200px;
    position: absolute;
    width: 200px;
}

.button-part-play {
    clip-path: polygon( 43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486% );
    transition: clip-path 500ms;
}

.button-part-pause {
    clip-path: polygon( 43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428% );
    transition: clip-path 500ms;
}

.button-end {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

.active .button-icon {
    transform: rotate(-90deg);
}

.active .button-part-play {
    clip-path: polygon( 56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471% );
}

.active .button-part-pause {
    clip-path: polygon( 56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916% );
}

.video-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 35vw;
    width: 60vw;
}

    .video-thumbnail .thumbnail-image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0 !important;
        cursor: pointer;
    }

    .video-thumbnail .thumbnail-button {
        background: rgba(255, 255, 255, 0.5);
        pointer-events: none;

    }

.mud-dialog-container {
    z-index: 30001 !important;
}