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;
}

.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;
}

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;
}