@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,500&display=swap);
div[id^="region-"] {
  overflow: hidden;
}

.region-back {
  opacity: 0;
}

.controls-container {
  position: fixed;
  bottom: 2.22%;
  left: 1.25%;
  padding-top: 1.125em;
  padding-bottom: 1.125em;
  height: calc((5vh + 5vw) / 3);
  border-radius: 78px;
  background: rgba(30, 28, 36, 0.7);
  color: white;
  display: flex;
  align-items: center;
  z-index: 200;
  font-size: calc((1.5vw + 1.5vh) / 3);
  pointer-events: auto !important;
}

#region-toggle-controls,
#region-close-menu,
#region-home {
  padding: 1.125em;
}
#region-toggle-controls {
  border-radius: 50%;
}
#region-home {
  border-radius: 50%;
}
#region-open-menu {
  margin-left: 1.0625em;
  margin-right: 2em;
  padding: 0.375em;
  border-radius: 50%;
}

#region-item-indicator {
  margin-right: 2em;
}
#region-prev-item,
#region-toggle-play-pause {
  margin-right: 1em;
  padding: 0.375em;
  border-radius: 50%;
}

#region-next-item {
  margin-right: 1.5em;
  padding: 0.375em;
  border-radius: 50%;
}

.controls-container span:not(:first-child) {
  display: none;
}

.controls-container.embed span {
  display: block;
}

.interactive-container {
  width: 100%;
  height: 100%;
  pointer-events: auto !important;
  z-index: 1;
  position: absolute;
}

.menu-container {
  width: 100vw;
  height: 100vh;
  z-index: 199;
  display: none;
  flex-wrap: wrap;
  padding: 2.96vh 4.68vw;
  position: absolute;
  overflow: scroll;
  align-content: flex-start;
  gap: 2.96% 1.45%;
  box-sizing: border-box;
  scrollbar-width: none;
}

.region-playlist-item {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-color: black;
}

.region-playlist-item p {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  height: 10%;
  white-space: nowrap;
  overflow: hidden;
}

.menu-container img {
  object-fit: contain;
  position: relative;
  width: 100%;
  height: 85%;
  border: 2px solid #989898;
  border-radius: 4px;
}

.highlighted-menu-item {
  color: #f26f26;
}

.highlighted-menu-item img {
  border-color: #f26f26;
  border-width: 5px;
}

.expired-media {
  display: none;
}

.light-theme-menu {
  background: #c5ced6;
  color: #1e1c24;
}
.dark-theme-menu {
  background: #22262e;
  color: #fff;
}
.light-theme-controls {
  background: rgb(246, 248, 251);
  color: rgb(30, 28, 36);
}
.dark-theme-controls {
  background: rgb(30, 28, 36);
  color: #fff;
}
.light-theme-toggle-controls {
  background: rgb(246, 248, 251);
  border: 3px solid rgb(30, 28, 36);
}
.dark-theme-toggle-controls {
  background: rgb(30, 28, 36);
  border: 3px solid #fff;
}
.light-theme-home {
  background: rgb(246, 248, 251);
  border: 3px solid rgb(30, 28, 36);
}
.dark-theme-home {
  background: rgb(30, 28, 36);
  border: 3px solid #fff;
}
.light-theme-page-numbering {
  background: rgb(246, 248, 251);
  color: rgb(30, 28, 36);
  padding: 0.5em 0.75em;
  margin-left: 1em;
  border-radius: 2em;
}
.dark-theme-page-numbering {
  background: rgb(30, 28, 36);
  color: #fff;
  padding: 0.5em 0.75em;
  margin-left: 1em;
  border-radius: 2em;
}

.highlighted-control {
  border: 3px solid #f26f26;
}
.non-highlighted-control {
  border: 3px solid transparent;
}

body {
	--embed-border-radius: 12px;
	--embed-padding: 6px;
	--embed-text-padding: 16px;
	--embed-text-size: 24px;
	--embed-icon-size: 48px;
	--embed-progress-height: 11px;
	--embed-floating-btn-size: 50px;
	--embed-floating-btn-padding: 15px;
	--embed-container-padding-bottom: 16px;
	--embed-container-padding-sides: 24px;
}

@media screen and (max-width: 1024px) {
	body {
		--embed-border-radius: 8px;
		--embed-padding: 8px;
		--embed-text-padding: 12px;
		--embed-text-size: 16px;
		--embed-icon-size: 32px;
		--embed-progress-height: 8px;
		--embed-floating-btn-size: 36px;
		--embed-floating-btn-padding: 12px;
	}
}

@media screen and (max-width: 576px) {
	body {
		--embed-border-radius: 4px;
		--embed-padding: 4px;
		--embed-text-padding: 8px;
		--embed-text-size: 10px;
		--embed-icon-size: 24px;
		--embed-progress-height: 6px;
		--embed-floating-btn-size: 20px;
		--embed-floating-btn-padding: 8px;
	}
}

@media screen and (max-width: 375px) {
	body {
		--embed-border-radius: 2px;
		--embed-padding: 2px;
		--embed-text-padding: 4px;
		--embed-text-size: 8px;
		--embed-icon-size: 16px;
		--embed-progress-height: 4px;
		--embed-floating-btn-size: 16px;
		--embed-floating-btn-padding: 4px;
		--embed-container-padding-bottom: 8px;
		--embed-container-padding-sides: 12px;
	}
}

.controls-container.embed {
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.5) 100%
	);
	opacity: 0;
	transition: opacity 500ms ease;
	border-radius: 0;
	display: block;
	height: auto;
}

.controls-container.embed img {
	position: initial;
}

#embed-controls-container {
	padding-left: var(--embed-container-padding-sides);
	padding-right: var(--embed-container-padding-sides);
	padding-bottom: var(--embed-container-padding-bottom);
	display: flex;
}

#embed-controls-container > * {
	cursor: pointer;
}

.controls-container.embed.hover {
	opacity: 1;
	transition: opacity 500ms ease;
}

.embed-el-bg {
	background: rgba(48, 49, 54, 0.4);
	border-radius: var(--embed-border-radius);
}

#embed-middle {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
	position: absolute;
}

#embed-middle.center {
	left: 50%; /* relative to container (full width)*/
	transform: translateX(-50%); /* relative to self */
}

#embed-right {
	margin-left: auto;
	display: flex;
}

.embed-icon {
	width: var(--embed-icon-size);
	height: var(--embed-icon-size);
	padding: var(--embed-padding);
	display: flex;
	align-items: center;
}

.embed-icon > svg {
	fill: white;
}

.embed-pause-hover,
.embed-play-hover,
.embed-prev-hover,
.embed-next-hover,
.embed-volume-hover,
.embed-expand-hover,
.embed-collapse-hover {
	display: none;
}

#embed-toggle-play-pause:hover > .embed-pause,
#embed-toggle-play-pause:hover > .embed-play,
#embed-prev-item:hover > .embed-prev,
#embed-next-item:hover > .embed-next,
#embed-sound:hover > .embed-volume,
#embed-maximize:hover > .embed-expand,
#embed-maximize:hover > .embed-collapse {
	display: none;
}

#embed-toggle-play-pause:hover > .embed-pause-hover,
#embed-toggle-play-pause:hover > .embed-play-hover,
#embed-prev-item:hover > .embed-prev-hover,
#embed-next-item:hover > .embed-next-hover,
#embed-sound:hover > .embed-volume-hover,
#embed-maximize:hover > .embed-expand-hover,
#embed-maximize:hover > .embed-collapse-hover  {
	display: block;
}

.embed #embed-item-indicator {
	font-family: 'Roboto Flex', sans-serif;
	padding: var(--embed-text-padding);
	font-size: var(--embed-text-size);
	letter-spacing: 0.24px;
	font-weight: 500;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: default;
}

#embed-progress-container {
	padding: 12px 25px;
	z-index: 999;
	opacity: 0;
}

#embed-progress-bg {
	height: var(--embed-progress-height);
	border-radius: 2px;
	background-color: #ffffff6b;
}

#embed-progress-bar {
	width: 0%;
	height: 100%;
	background-color: white;
	border-radius: 2px;
}

#embed-progress-text {
	color: white;
	font-size: var(--embed-text-size);
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-family: 'Roboto Mono', monospace;
}

#embed-maximize {
	margin-left: 8px;
}

#embed-play-pause-region {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
}

#embed-floating-btn {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--embed-floating-btn-size);
	height: var(--embed-floating-btn-size);
	padding: var(--embed-floating-btn-padding);
	border-radius: 9999px;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

#embed-info-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(30, 28, 36, 0.8);
}

#embed-info-overlay-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0px 8vw
}

#embed-info-overlay .embed-info-text {
	color: white;
	text-align: center;
	font-family: 'Roboto Flex', sans-serif;
	font-size: var(--embed-text-size);
}

#embed-info-overlay .embed-info-icon {
	width: calc(var(--embed-icon-size) * 2);
	height: calc(var(--embed-icon-size) * 2);
	position: initial;
}

#embed-info-overlay button {
	font-family: 'Roboto Flex', sans-serif;
	font-size: calc(var(--embed-text-size) * 0.8);
	color: #1e1c24;
	border: none;
	border-radius: 8px;
	background: #dadee2;
	padding: 12px 32px;
	cursor: pointer;
}

#embed-info-overlay button:hover {
	background: #c8cdd3;
}

#embed-info-overlay button:active {
	background: #b5bdc5;
}

iframe.widget {
  /* Browser in some cases cuts one pixel from iframe */
  width: calc(100% + 1px);
  height: calc(100% + 1px);
}

/* ########### Fallback Player ########### */
.fallback-container {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #1e1c24;
  text-align: center;
}

.fallback-thumbnail {
  width: 100%;
}

.fallback-container img {
  position: relative;
  border-radius: 50%;
  margin: auto;
}

.qr-image img {
  border-radius: 0;
}

.fallback-container .fallback-text {
  /* color:  #FFF;; */
  /* background: #1E1C24; */
  text-align: center;
  font-weight: bold;
  line-height: 1.5em;
}

.fallback-container .fallback-subtext {
  /* color: #FFF; */
  /* background: #1E1C24; */
  text-align: center;
  line-height: 1.5em;
  font-weight: 400;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  width: 75%;
  margin: auto;
}

.interactive-library-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999999999;
  overflow: scroll;
  scrollbar-width: none;
  width: 100%;
  height: 100%;
  display:none;
  
}

.interactive-library-interface {
  display: flex;
  padding-top: 4em;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  gap: 2em;
  transition: transform .5s ease;
}

.library-logo {
  position: absolute;
  left: 88%;
  top: 2%;
  width: auto;
  height: 63px;
  z-index: 2;
}

.library-category {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* overflow-x: scroll; */
  /* scrollbar-width: none; */
}

.category-name {
  position: fixed;
  font-weight: bold;
  font-size: 1.4em;
  padding-left: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 66%;
}

.category-items {
  position: relative;
  display: flex;
  gap: 32px;
  padding-right: 4em;
  overflow: visible;
  margin-top: 4em;
  padding: 1em 1em 1em 28px;
  overflow: hidden;
  transition: transform .5s ease;
}

.library-category[category-highlighted="true"] .category-items{
  min-width: 100%;
}

.favourite-category-items {
  transform: scale(1.2);
  transform-origin: left;
}

.library-category .sub-item:first{
   padding-left: 56px;
}

.sub-item {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.selected-sub-item {
  box-shadow: 0 0 0 6px #f26f26;
}

.sub-item img {
  position: relative;
  opacity: 1;
  width: 25em;
  height: 14.0625em;
  object-fit: cover;
  border-radius: 8px;
  z-index: 3;
}

.category-item-expired{
  display: none !important;
}

.playlist-sub-item img {
  object-fit: cover !important; /** Playlist item should be coverd - looks bad with the back layers */
}

.playlist-layer-1,
.playlist-layer-2 {
  position: absolute;
  display: none;
  height: 100%;
  border-radius: 8px;
}

.playlist-layer-1 {
  top: -14px;
  z-index: 2;
  width: 96%;
}

.playlist-layer-2 {
  top: -28px;
  z-index: 1;
  width: 90%;
}

.playlist-sub-item .playlist-layer-1, .playlist-sub-item .playlist-layer-2 {
  display: block;
}

.sub-item-box {
  padding: 10px 12px;
  position: absolute;
  border-radius: 8px;
  background: #1e1e1eb2;
  width: auto;
  margin: 0 auto;
  color: #f6f8fb;
  font-style: normal;
  line-height: normal;
  max-width: 66.66%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 3;
}

.sub-name {
  font-style: 600;
  bottom: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  max-width: 94%;
  border-radius: 0px 0px 8px 8px;
}

.current-category .sub-name {
  max-width: 96%;
}

.library-category[category-highlighted="true"] .sub-name {
  max-width: calc(100% - 24px); /* -24px for the border of the selected item (12px * 2)  */ 
  /* bottom: 0%; */
}

.selected-sub-item .sub-name {
  bottom: 0px;
  max-width: calc(100% - 24px);
  border-radius: 0px;
}

.sub-item-duration {
  top: 10%;
  right: 6%;
  z-index: 999999999999999;
  font-size: 0.8em;
  font-weight: 600;
}

.sub-item .sub-item-duration {
  display: none;
}

.playlist-sub-item .sub-item-duration {
  display: block;
}

.arrow-container {
  position: absolute;
  top: 50%;
  width: 64px;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 10px;
  z-index: 999999;
  opacity: 0;
}

.arrow {
  width: 60px;
  height: 60px;
  display: flex;
  background-repeat: no-repeat;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}

.arrow-container-right {
  right: 4%;
}

.arrow-right {
  background-position: 24px;
}

.arrow-container-left {
  margin-right: -4em;
  left: 0%;
}

.arrow-left {
  background-position: 12px;
}


.arrow-container-enable-transition-effect {
  transition: opacity 0.4s;
}

/* TOUCH SCREEN ENABLED - REMOVE ARROWS AND HIGHLIGHT OF SELECTED CATEGORY ITEM */
.touch-screen-enabled {
  .selected-sub-item {
    border: none !important;
  }

  .arrow-container {
    display: none !important;
  }
}

.library-dark, .library-dark .interactive-library-interface{
    background: linear-gradient(180deg, #2F2F36 0%, #29292D 100%);
    background-blend-mode: darken, normal;
}

.library-dark .category-name{
        color: #F6F8FB;
}

.library-dark .library-category[category-highlighted="true"] > .category-items {
    background: rgba(128, 128, 128, 0.30);
}


.library-dark .playlist-layer-1 {
    background: #A3ACB6;
    border: 1px solid rgba(112, 112, 112, 0.70);
}

.library-dark .playlist-layer-2{
    
    border: 1px solid rgba(112, 112, 112, 0.70);
    background: #E0E2E3;
    
}

.library-dark .playlist-layer-1, .library-dark .playlist-layer-2{
    border-radius: 8px;
}

.library-dark .arrow-container .arrow {
    background-color: #ffffff;
}

.library-dark .arrow-right{
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"17\" viewBox=\"0 0 11 17\" fill=\"none\"><path d=\"M0.916875 2.09143L7.02354 8.21143L0.916874 14.3314L2.79687 16.2114L10.7969 8.21143L2.79688 0.211425L0.916875 2.09143Z\" fill=\"%231E1C24\"/></svg>");
}

.library-dark .arrow-left{
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M20.548 22.12L14.4413 16L20.548 9.88L18.668 8L10.668 16L18.668 24L20.548 22.12Z\" fill=\"%231E1C24\"/></svg>");
}
.library-light, .library-light .interactive-library-interface{
    background: linear-gradient(180deg, #DFDFDF 0%, #F3F3F3 50.01%, #DFDFDF 100%);
}


.library-light .interactive-library-interface{
    background: #F6F8FB;
}

.library-light .library-category[category-highlighted="true"] > .category-items{
    background: rgba(128, 128, 128, 0.30)
}

.library-light .category-name{
        color: #1E1C24;
    }

.library-light .sub-item{
        /* border: 1px solid #e2e2e2; */
    }

.library-light .playlist-layer-1{
    background-color: #6E91C8;
}

.library-light .playlist-layer-2{
    background-color: #4F7BBD;
}

.library-light .arrow-container .arrow {
    background-color: #242424;;
}

.library-light .arrow-right{
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\"><path d=\"M11.452 9.88L17.5587 16L11.452 22.12L13.332 24L21.332 16L13.332 8L11.452 9.88Z\" fill=\"%23F6F8FB\"/></svg>");
    background-position: 12px;
}

.library-light .arrow-left{
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"16\" viewBox=\"0 0 11 16\" fill=\"none\"><path d=\"M10.548 14.12L4.4413 8L10.548 1.88L8.66797 9.5399e-08L0.667969 8L8.66797 16L10.548 14.12Z\" fill=\"%23F6F8FB\"/></svg>");
    background-position: 24px;
}
/* 
   *********** Order of divs in z-index attribute ***********

   1. #boot-image - It has the most z-index value (first priority)

   2. .banner - Second priority over all elements

   1. interactive-library-container (when displayed) is on top of every content related element

   2. main-container <div> has the second priority over every other content element

        ******* Inside main-container *********
        
        a. controls-container (has full z-index value to be on top of everything)

        b. layout-container (when content is displayed) will be on top of anything else

        c. interactive-container (for interactive-playlist) will have the last z-index priority (will be displayed only when nothing else is on the screen actually)
    

    
*/

#boot-image{
    z-index: 9999 !important;
}

.banner{
    z-index: 9998 !important;
}

.interactive-library-container{
    z-index: 2 !important;
}

.main-container {
    z-index : 1 !important;
}

/* Inside main container  */

.controls-container {
    z-index:  999 !important;
}

.interactive-container{
    z-index: 1 !important;
}

.layout-container {
    z-index: 2 !important;
}


body {
  background: #000000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  overflow: hidden;
  margin: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none; /* Disable zoom-gesture in touch screens */
}

#boot-image {
  width: 100%;
  height: 100%;
  z-index: 9999;
  object-fit: contain;
  display: none;
}

.branded-boot-logo {
  background-color: rgb(242, 111, 38);
}

.unbranded-boot-logo {
  background-color: rgb(1 0 102);
}

.custom-boot-logo {
  background-color: transparent !important;
}

.display-boot {
  display: block !important;
}

.main-container {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Styling Banners */

.banner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  z-index: 9999;
}

.banner-text {
  display: inline;
}

.warning-banner {
  background: #e61c1c;
  color: white;
  top: unset;
  bottom: 0%;
}

.installation-banner {
  background: #ffbc53;
  color: #000;
}

.banner b {
  cursor: pointer;
  font-weight: 600;
}

.banner span {
  font-size: 12px;
  padding-right: 24px;
  cursor: pointer;
  float: right;
}

/* ---  */

.allowTouch {
  pointer-events: auto;
}

.message-widget-iframe,
.fallback-container {
  pointer-events: auto;
}

.unsupported-browser .fallback-subtext {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.fit-fit {
  object-fit: contain;
}
.fit-crop {
  object-fit: cover;
}
.fit-stretch {
  object-fit: fill;
}
.fadeOut {
  opacity: 0;
}
.background-element {
  z-index: -1;
  opacity: 0;
}
.top {
  z-index: 1;
}
.hidden {
  display: none !important;
}

.layout-container {
  position: absolute;
  background: black;
  /* margin: auto; */
  overflow: hidden;
}

div[class^='layout'] {
  position: absolute;
  background: black;
  /* margin: auto; */
  overflow: hidden;
}

img {
  position: absolute;
  opacity: 1;
  width: 100%;
  height: 100%;
  border: none;
}

canvas:not(.alertTicker) {
  position: absolute;
  opacity: 1;
  border: none;
  width: 100%;
  height: 100%;
}

.alertTicker {
  z-index: 99999;
  position: absolute;
}

video {
  position: absolute;
  opacity: 1;
  width: auto;
  height: auto;
  border: none;
}

iframe {
  position: relative;
  opacity: 1;
  border: none;
}

.video-container,
.iframe-container {
  overflow: hidden;
  position: relative;
}

.streamContainer {
  overflow: hidden;
  position: absolute;
}

.horizontalVideo {
  width: 100%;
  height: 100%;
}

#downloading,
#updating,
#configuring {
  display: flex;
  position: absolute;
  bottom: 2%;
  right: 2%;
  z-index: 99999999;
  visibility: visible;
  width: 30%;
  height: 2%;
  justify-content: flex-end;
  align-items: center;
}

#downloading > h3,
#updating > h3,
#configuring > h3 {
  color: gainsboro;
  font-size: calc((5vw+5vh) / 5);
}

#downloading > img,
#updating > img,
#configuring > img {
  width: auto;
  height: 100%;
  position: relative;
  margin-right: 7%;
}

/* ticker */
.ticker-container {
  /* hide scrollbar */
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.ticker-wrap {
  /* push content to the right */
  width: 100%;
  height: 100%;
  padding-left: 100%;
  position: absolute;
}

.ticker-move {
  display: inline-block;
  white-space: pre;
  position: absolute;
}

/* preview button on hover change cursor to pointer */
.preview-button:hover {
  cursor: pointer;
}

.preview-outer-div {
  width: 100%;
  height: 100%;
  background: #1e1c24;
  pointer-events: auto !important;
}

.preview-title {
  position: absolute;
  margin: 0;
  font-weight: 400;
  font-family: 'ClearSansWeb';
  color: white;
  top: 45.996%;
  left: 38.05555%;
  width: 24.0972%;
  height: 3.6132%;
  text-align: center;
}

.preview-button {
  position: absolute;
  font-weight: 700;
  font-family: 'ClearSansWeb';
  color: white;
  top: 52.539%;
  left: 45.7638%;
  width: 8.4722%;
  height: 4.2968%;
  background: #f4712f;
  border-color: #f4712f;
  border: none;
  text-align: center;
}

/* loading */

#loading {
  --loading-icon-size: 10vh;
}

@media (orientation:portrait) {
  #loading {
    --loading-icon-size: 10vw;
  }
}

#loading.disable-transitions * {
  transition: none !important;
}

#loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: flex;
  pointer-events: none;
}

#loading .bg-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  transition: opacity 1000ms ease;
}

#loading.loading-done .bg-container {
  opacity: 0;
}

#loading .animation {
  position: absolute;
  top: calc(8vh / 2);
  bottom: calc(8vh / 2);
  left: calc(4.2vw / 2);
  right: calc(4.2vw / 2);
  border-radius: 12px;
  background: #333333;
  background: linear-gradient(
    270deg,
    rgb(51, 51, 51) 6%,
    rgba(255, 255, 255, 0.15) 18%,
    rgb(51, 51, 51) 30%
  );
  animation: LoadingAnimation 1.5s linear infinite;
  animation-fill-mode: forwards;
}

#loading .loading-container {
  z-index: 2;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading .image-container {
  position: absolute;
  overflow: hidden;
  border-radius: 999999px;
  top: initial;
  right: auto;
  transition: all 1000ms ease;
}

#loading.loading-done .image-container {
  transform: translateX(calc(50vw - 50% - 1.25vw))
    translateY(calc(-50vh + 50% + 3.5vh));
}

#loading .link {
  width: var(--loading-icon-size);
  height: var(--loading-icon-size);
  position: absolute;
  top: 3.5vh;
  right: 1.25vw;
  border-radius: 999999px;
  cursor: pointer;
  z-index: 9999;
  pointer-events: auto;
  display: none;
}

#loading.loading-done .link {
  display: block;
}

@keyframes LoadingAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100vw 0%;
  }
}

#loading .powered-by {
  height: var(--loading-icon-size);
  width: unset;
  position: relative;
  right: 0;
  transition: all 500ms ease;
}

#loading.loading-done .powered-by {
  position: relative;
  right: -100%;
}

#loading .icon {
  position: absolute;
  right: 0;
  height: var(--loading-icon-size);
  width: var(--loading-icon-size);
  opacity: 1;
}

#embed-icon {
  width: var(--loading-icon-size);
  height: var(--loading-icon-size);
  position: absolute;
  right: 1.25vw;
  top: 3.5vh;
  z-index: 99;
  transition: all 500ms ease;
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.spinner {
  animation: SpinnerAnimation 2s linear infinite;
  max-width: 5vw;
  max-height: 5vw;
}

@keyframes SpinnerAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}