html {
    height: 100%;
    width: 100%;
    font-size: 1.7vmin;
    line-height: 1.2;
}
body {
    height: 100%;
    width: 100%;
    padding: 0;
    font-size: 1.7vmin;
    margin: 0;
    background: black;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    color: white;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

.bold {
    font-weight: bold;
}
.bolder {
    font-weight: 800;
}
.font-700 {
    font-weight: 700;
}
.font-600 {
    font-weight: 600;
}
.font-500 {
    font-weight: 500;
}
.font-400 {
    font-weight: 400;
}
#app {
    height: 100%;
}
.section {
    position: relative;
    margin-top: 12vh;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 2vw;
    height: 86vh;
    width: 96vw;
}

/*****  SCROLL STYLING *****/
/* width */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 4rem;
}

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover styles can be added here if needed */

.scrollbarVisible {
    overflow-y: scroll;
}
.scrollbarVisible::-webkit-scrollbar {
    width: 0.2vw !important;
}
.scrollbarVisible::-webkit-scrollbar-thumb {
    background: #f5f6f8;
    border-radius: 0.313vw;
}

/* outline & border must use px , otherwise old TV browser doesn't apply*/

.overflow-y-scroll {
    overflow-y: scroll;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.4);
}
.z-1 {
    z-index: 1;
}
.z-10 {
    z-index: 10;
}
.z-100 {
    z-index: 100;
}
.z-900 {
    z-index: 900;
}
.z-101 {
    z-index: 101;
}
.white {
    color: white;
}

.overflow-hidden {
    overflow: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-visible {
    overflow: visible;
}

.bg-black {
    background-color: black;
}
.bg-white {
    background-color: white;
}
.bg-gray-100 {
    background-color: #f5f6f8;
}
.bg-gray-200 {
    background-color: #e9edf0;
}
.bg-gray-300 {
    background-color: #d3dae1;
}
.bg-gray-400 {
    background-color: #bdc8d3;
}
.bg-gray-600 {
    background-color: #91a3b5;
}
.bg-gray-700 {
    background-color: #76889b;
}
.bg-gray-800 {
    background-color: #576575;
}
.bg-gray-900 {
    background-color: #2e3843;
}
.bg-gray-1000 {
    background-color: #373d42;
}
.bg-gray-1050 {
    background-color: #363737;
}
.bg-gray-1100 {
    background-color: #252626;
}
.bg-gray-1200 {
    background-color: #545454;
}
.fg-black {
    color: black;
}
.fg-white {
    color: white;
}

.bg-gray {
    background-color: gray;
}
.bg-gray-200 {
    background-color: #e9edf0;
}
.bg-transparent {
    background-color: transparent !important;
}
.text-gray-100-important {
    color: #f5f6f8 !important;
}

.pre-line {
    white-space: pre-line;
}

.nowrap {
    white-space: nowrap;
}

.text-red-100 {
    color: #de350b;
}
.text-gray-100 {
    color: #f5f6f8;
}
.text-gray-300 {
    color: #d3dae1;
}
.text-gray-600 {
    color: #91a3b5;
}
.text-gray-800 {
    color: #576575;
}
.text-gray-900 {
    color: #2e3843;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}

.msgUrgentIcon {
    color: #ff991f;
}
.hidden {
    display: none;
}
.invisible {
    visibility: hidden;
}
.bg-contain {
    background-size: contain;
}
.bg-cover {
    background-size: cover;
}
.bg-cover-adjust {
    background-size: 100% 100%;
}
.bg-center {
    background-position: center;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}

.content-center {
    -ms-flex-pack: center;
        justify-content: center;
}
.align-content-center {
    -ms-flex-line-pack: center;
        align-content: center;
}
.items-center {
    -ms-flex-align: center;
        align-items: center;
}
.justify-center {
    -ms-flex-pack: center;
        justify-content: center;
}
.items-end {
    -ms-flex-align: end;
        align-items: end;
    -ms-flex-item-align: end;
        align-self: end;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.fixed {
    position: fixed;
}
.fullscreen {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0%;
    top: 0%;
}
.w-full {
    width: 100%;
}
.w-1px {
    width: 1px;
}
.w-10px {
    width: 10px;
}
.w-1\/2 {
    width: 50%;
}
.w-1\/3 {
    width: 33.333334%;
}
.w-2\/3 {
    width: 66.666664%;
}
.min-w-1\/2 {
    min-width: 50vw;
}
.min-w-1\/4 {
    min-width: 25vw;
}
.min-h-1\/2 {
    min-height: 50vw;
}
.min-h-1\/4 {
    min-height: 25vw;
}
.h-full {
    height: 100%;
}
.flex {
    display: -ms-flexbox;
    display: flex;
}
.flex-flow-column {
    -ms-flex-flow: column;
        flex-flow: column;
}
.flex-flow-row {
    -ms-flex-flow: row;
        flex-flow: row;
}
.grid {
    display: grid;
}
.inline-block {
    display: inline-block;
}
.inline-flex {
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.table {
    display: table;
}

.block {
    display: block;
}
.table-cell {
    display: table-cell;
}
.contents {
    display: contents;
}
.vertical-middle {
    vertical-align: middle;
}
.vertical-top {
    vertical-align: top;
}
.vertical-bottom {
    vertical-align: bottom;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-l {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.rounded-b {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.rounded-t {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.rounded-sm {
    border-radius: 0.15rem;
}
.rounded-lg {
    border-radius: 0.3rem;
}
.rounded-4vw {
    border-radius: 0.4vw;
}

.h-10rem {
    height: 10rem;
}
.top-0 {
    top: 0;
}
.bottom-0 {
    bottom: 0;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}
.border {
    border-width: 1px;
    border-style: solid;
}
.border-0 {
    border: 0;
}
.border-gray-300 {
    border-color: #d3dae1;
}
.border-gray-400 {
    border-color: #a7b5c4;
}

.h-auto {
    height: auto;
}
.w-auto {
    width: auto;
}
.h-1px {
    height: 1px;
}
.h-10px {
    height: 10px;
}
.h-1\/3 {
    height: 33.333334%;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-16 {
    height: 4rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-28 {
    height: 7rem;
}
.h-32 {
    height: 8rem;
}
.h-36 {
    height: 9rem;
}
.h-40 {
    height: 10rem;
}

.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-7 {
    padding: 1.75rem;
}
.p-8 {
    padding: 2rem;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-5 {
    padding-right: 1.25rem;
}
.pr-6 {
    padding-right: 1.5rem;
}
.pr-7 {
    padding-right: 1.75rem;
}
.pr-8 {
    padding-right: 2rem;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-6 {
    padding-left: 1.5rem;
}
.pl-7 {
    padding-left: 1.75rem;
}
.pl-8 {
    padding-left: 2rem;
}
.pt-1\/2 {
    padding-top: 0.15rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.pt-7 {
    padding-top: 1.75rem;
}
.pt-8 {
    padding-top: 2rem;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-5 {
    padding-bottom: 1.25rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-7 {
    padding-bottom: 1.75rem;
}
.pb-8 {
    padding-bottom: 2rem;
}
.pl-4vw {
    padding-left: 4vw;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.m-1 {
    margin: 0.25rem;
}
.m-2 {
    margin: 0.5rem;
}
.m-3 {
    margin: 0.75rem;
}
.m-4 {
    margin: 1vw;
}
.m-5 {
    margin: 1.25rem;
}
.m-6 {
    margin: 1.5rem;
}
.m-7 {
    margin: 1.75rem;
}
.m-8 {
    margin: 2rem;
}
.mt-auto {
    margin-top: auto;
}
.mt-1 {
    margin-top: 0.25vh;
}
.mt-2 {
    margin-top: 0.5vh;
}
.mt-3 {
    margin-top: 0.75vh;
}
.mt-4 {
    margin-top: 1vh;
}
.mt-5 {
    margin-top: 1.25vh;
}
.mt-6 {
    margin-top: 1.5vh;
}
.mt-7 {
    margin-top: 1.75vh;
}
.mt-8 {
    margin-top: 2vh;
}
.mb-1 {
    margin-bottom: 0.25vh;
}
.mb-2 {
    margin-bottom: 0.5vh;
}
.mb-3 {
    margin-bottom: 0.75vh;
}
.mb-4 {
    margin-bottom: 1vh;
}
.mb-5 {
    margin-bottom: 1.25vh;
}
.mb-6 {
    margin-bottom: 1.5vh;
}
.mb-7 {
    margin-bottom: 1.75vh;
}
.mb-8 {
    margin-bottom: 2vh;
}
.mb-9 {
    margin-bottom: 2.25vh;
}
.mb-10 {
    margin-bottom: 2.5vh;
}
.mb-11 {
    margin-bottom: 2.75vh;
}
.mb-12 {
    margin-bottom: 3vh;
}
.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 0.75rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mr-5 {
    margin-right: 1.25rem;
}
.mr-6 {
    margin-right: 1.5rem;
}
.mr-7 {
    margin-right: 1.75rem;
}
.mr-8 {
    margin-right: 2rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.ml-5 {
    margin-left: 1.25rem;
}
.ml-6 {
    margin-left: 1.5rem;
}
.ml-7 {
    margin-left: 1.75rem;
}
.ml-8 {
    margin-left: 2rem;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.mx-7 {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
}
.mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}
.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-7 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}
.py-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

p {
    display: block;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
    -webkit-margin-start: 0px;
            margin-inline-start: 0px;
    -webkit-margin-end: 0px;
            margin-inline-end: 0px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
.zoomOutAnimation {
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}
.capitalize {
    text-transform: capitalize;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-1xl {
    font-size: 1.35rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-4xl-2 {
    font-size: 2.5rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-ellipsis {
    text-overflow: ellipsis;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mleft-auto {
    margin-left: auto;
}
.mright-auto {
    margin-right: auto;
}

/* TV */
.itemsList {
    position: absolute;
    right: 0;
    height: 75vh;
    width: 59vw;
    top: 3vw;
}
.itemsListFull {
    left: 3vw;
    top: 7vh;
    position: fixed;
    width: 94vw;
    height: 85vh;
    z-index: 100;
    visibility: visible;
}
.tvlogo {
    width: 9vw;
    height: 17.5vh;
}
.itemsListFull .tvlogo {
    width: 7vw;
    height: 11.5vh;
}

.channel {
    width: 9vw;
}
.itemsListFull .channel {
    width: 7vw;
}
.channelList {
    width: 100%;
    height: 100%;
    color: #ffffff;
    background: linear-gradient(rgba(30, 30, 30, 1), rgba(55, 61, 66, 0.6), rgba(30, 30, 30, 1));
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.channelList_no_gradient {
    background: rgba(55, 61, 66, 0.6);
}
.channelList .filters {
    padding-top: 7vh;
}
.channelList .filters .filter span {
    width: 19vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}
.channelList .filters .filter {
    width: 19vw;
    padding: 0.7vw;
    border-radius: 0.4vw;
}
.countryFilter,
.countryFilter span {
    width: 19vw !important;
}
#btn-continue {
    padding: 0.4vh;
}
.channelList-focus {
    background-color: #f5f6f8;
    color: #2e3843;
    font-weight: 700;
}
.tvLayout-focus {
    background-color: #f5f6f8;
    color: #2e3843;
}

.continue-watching-focus,
.channel-focus .remark {
    box-shadow: inset 0 0 0 0.2vw #f5f6f8;
}
.grid-focus .remark {
    outline: 0.2vw solid #f5f6f8;
}
.channelList-focus .iconNameFocused,
#moviePlayerBar .iconNameFocused,
.channelInfo .iconNameFocused {
    float: right;
    font-size: 1.7vw;
    padding-left: 0.4vw;
    padding-right: 1.5vw;
    margin-top: -0.1vh;
}
.channelList-focus.icon {
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 0.4vw;
}
#moviePlayerBar .iconActive,
.channelInfo .iconActive {
    padding-left: 1vw;
    padding-right: 1vw;
    border-bottom: 0.4vh solid white;
}
#moviePlayerBar .selector,
.channelInfo .selector {
    left: 0;
    bottom: 7.4vh;
    width: 100%;
    border-radius: 0.4vw;
    height: 12.8vh;
}
.channelFocusLeyend {
    height: 13vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.9), transparent);
    padding-left: 10%;
    padding-right: 5%;
    margin-top: 0.4vh;
    padding-top: 2vh;
    overflow: hidden;
    display: none;
    font-weight: 400;
    font-size: 1.65vw;
}

.showHiddenLegend .channelFocusLeyend {
    display: block;
    visibility: hidden;
}

.borderBottomTransparent {
    border-bottom: 0.4vh solid transparent;
}

.verticalGroup .channel-focus .channelFocusLeyend,
.horizontalGroup .channel-focus .channelFocusLeyend_horizontal {
    display: block;
}
.horizontalGroup .grid-focus .channelFocusLeyend_horizontal {
    display: block;
    float: left;
}
.channelFocusLeyend_horizontal {
    height: 14vh;
    width: 18vw;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
    padding-left: 4%;
    padding-right: 5%;
    margin-top: 0.4vh;
    padding-top: 2vh;
    overflow: hidden;
    display: none;
    font-weight: 400;
    font-size: 1.65vw;
}

#tv {
    color: #ffffff;
}

.channelDisplay {
    background: linear-gradient(to right, rgba(55, 61, 66, 0.8), rgba(55, 61, 66, 0));
}
.channelInfo {
    background: linear-gradient(rgba(55, 61, 66, 0), rgba(55, 61, 66, 0.8));
}
.channelList .bar,
.channelInfo .bar {
    width: 100%;
    background: linear-gradient(to right, rgba(55, 61, 66, 0.8), rgba(55, 61, 66, 0));
}
.channelInfo .bar > div {
    float: left;
}

#moviePlayerBar .icon,
.channelInfo .icon {
    float: left;
    font-size: 3.3vw;
}
.selector .icon-chevron-up {
    top: 0.5vh;
    width: 100%;
    font-size: 2vw !important;
}
.selector .icon-chevron {
    top: 8.8vh;
    width: 100%;
    font-size: 2vw !important;
}

/* ANIMATIONS */

.animateMarginTop {
    transition: margin-top 0.1s;
}
.animateMarginTopFast {
    transition: margin-top 0.01s;
}
.animateMarginLeft {
    transition: margin-left 0.1s;
}

.animateMarginLeftTickerTape {
    white-space: nowrap;
    animation: example1 20s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-110%);
    }
}

@keyframes example1 {
    from {
        margin-left: 100%;
    }
    to {
        margin-left: -110%;
    }
}

.backgroundImageTransition {
    transition: background-image 0.2s ease-in-out;
}

.fadeInAnimation-enter {
    opacity: 0;
    -ms-transform: scale(0);
        transform: scale(0);
}
.fadeInAnimation-enter-active {
    opacity: 1;
    -ms-transform: translateX(0);
        transform: translateX(0);
    transition: opacity 600ms, transform 600ms;
}
.fadeInAnimation-exit {
    opacity: 1;
}
.fadeInAnimation-exit-active {
    opacity: 0;
    transition: opacity 600ms, transform 600ms;
}
#itemsList.fadeInAnimation-exit-active {
    opacity: 1;
    transition: opacity 0ms, transform 0ms;
}

.topAnimation-enter {
    margin-top: -100%;
}
.topAnimation-enter-active {
    margin-top: 0%;
    -ms-transform: translateX(0);
        transform: translateX(0);
    transition: margin-top 600ms, transform 600ms;
}
.topAnimation-exit {
    margin-top: 0%;
}
.topAnimation-exit-active {
    margin-top: -100%;
    -ms-transform: translateX(1);
        transform: translateX(1);
    transition: margin-top 600ms, transform 600ms;
}

/* This fires as soon as the element enters the DOM */
.bottomAnimation-enter {
    bottom: 0%;
}
/* This is where we can add the transition*/
.bottomAnimation-enter-active {
    bottom: 100%;
    -ms-transform: translateX(0);
        transform: translateX(0);
    transition: bottom 600ms, transform 600ms;
}
/* This fires as soon as the this.state.showList is false */
.bottomAnimation-exit {
    bottom: 100%;
}
/* fires as element leaves the DOM*/
.bottomAnimation-exit-active {
    bottom: 0%;
    -ms-transform: translateX(1);
        transform: translateX(1);
    transition: bottom 600ms, transform 600ms;
}

.leftAnimation-enter {
    margin-left: -100%;
    -ms-transform: scale(0);
        transform: scale(0);
}
.leftAnimation-enter-active {
    margin-left: 0%;
    -ms-transform: translateX(0);
        transform: translateX(0);
    transition: margin-left 600ms, transform 600ms;
}
.leftAnimation-exit {
    margin-left: 0%;
}
.leftAnimation-exit-active {
    margin-left: -100%;
    transition: margin-left 600ms, transform 600ms;
}

/* This fires as soon as the element enters the DOM */
.rightAnimation-enter {
    margin-left: 100%;
}
/* This is where we can add the transition*/
.rightAnimation-enter-active {
    margin-left: 0%;
    -ms-transform: translateX(0);
        transform: translateX(0);
    transition: margin-left 600ms, transform 600ms;
}
/* This fires as soon as the this.state.showList is false */
.rightAnimation-exit {
    margin-left: 0%;
}
/* fires as element leaves the DOM*/
.rightAnimation-exit-active {
    margin-left: 100%;
    transition: margin-left 600ms, transform 600ms;
}

.heightAnimation {
    transition: height 0.65s ease-in;
}
.gridGroupAnimation {
    transition: all 0.1s ease-in;
}
#sales {
    display: block;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    /*position: fixed;
    display: inline-grid;*/
}
.LG #sales {
    position: initial;
    display: initial;
}
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}
.lato {
    font-family: Lato;
}
.underSlashFocus {
    box-shadow: 0 0 0 0.26vw rgba(189, 200, 211);
}

.ribbon-wrapper-rented {
    width: 82.5%;
    height: 58%;
    overflow: hidden;
    position: absolute;
    top: 11.1vh;
    left: 1.75vw;
}

.ribbon-rented {
    font-size: 0.75em;
    color: #576575;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 3vw;
    left: -6em;
    top: 5em;
    width: 20em;
    background-color: white;
}

.ribbon-rented:before,
.ribbon-rented:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-rented:before {
    left: 0;
}
.ribbon-rented:after {
    right: 0;
}
.singleGridGroup {
    height: 100vh;
    width: 100vw;
    background: linear-gradient(
        360deg,
        #292929 0%,
        rgba(41, 41, 41, 0.8) 61%,
        rgba(41, 41, 41, 0) 100%
    );
    background-color: black;
    color: #f5f6f8;
}

.sigleGroupPriceWrapper {
    width: 60%;
    height: 20%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
    color: #f5f6f8;
}

.grid-btn-back-focus {
    background-color: #f5f6f8 !important;
    color: #2e3843 !important;
}

.border-bottom-focus {
    border-bottom: var(--border-focus) solid #f5f6f8 !important;
}

.grid-btn-back-focus-strong {
    background-color: #f5f6f8 !important;
    color: #2e3843 !important;
    border-radius: 0.25rem;
    text-shadow: 0 0 1.2px #2e3843;
}

.readMoreFocus {
    color: #f5f6f8;
    background-color: transparent;
    border-bottom: 0.208117vw solid #f5f6f8 !important;
}

.blur {
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.borderTransparent {
    border-width: 0.390625vw;
    border-color: transparent !important;
    border-style: solid;
}

video::-webkit-media-text-track-display {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    bottom: 12vh;
    font-size: 3.34vw;
}

::cue {
    font-size: 3.34vw;
    background: rgba(0, 0, 0, 0);
}

.tickertape {
    position: absolute;
    width: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    z-index: 299;
}
@keyframes bannerFadeIn {
    0% {
        transform: scale(0.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-image-out {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.fade-image-out.hidden {
    opacity: 0;
    visibility: hidden;
}

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.two-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.tree-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    /* 20% { transform: translateX(0%); } */
    100% {
        transform: translateX(-100%);
    }
}
.marquee-content {
    position: absolute;
    white-space: nowrap;
    animation: continuousmarquee linear infinite;
}

.marquee-text {
    display: inline-block;
    padding-left: 0%;
    animation: marquee 11s linear infinite;
}

.marquee-text::after {
    content: " " attr(data-text);
}

.vertical-body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Opcional, evita scroll */
    height: 100vw;
    width: 100vh;
}
.rotated-content-clock {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vw;
    width: 100vh;
    -ms-transform: rotate(90deg) translateY(-100%);
        transform: rotate(90deg) translateY(-100%);
    -ms-transform-origin: top left;
        transform-origin: top left;
}
.rotated-content-anti-clock {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vw;
    width: 100vh;
    -ms-transform: rotate(-90deg) translateX(-100%);
        transform: rotate(-90deg) translateX(-100%);

    -ms-transform-origin: top left;

        transform-origin: top left;
}
.landScapeFullSizes {
    width: 100vw;
    height: 100vh;
}
.listFocused {
    background-color: transparent !important;
}
.noBorderFocus {
    border: none !important;
    box-shadow: none !important;
}

@font-face {
    font-family: "icomoon";
    src: url(/bb9aa95c74d79130e4dac6207a908ee6.eot);
    src: url(/bb9aa95c74d79130e4dac6207a908ee6.eot#iefix) format("embedded-opentype"),
        url(/2f637c3aa5bf639164b92b3e713350f9.ttf) format("truetype"),
        url(/33cd21de186a99f9fc8b73a04a2d159f.woff) format("woff"),
        url(/17e00d79ce78293c7cab01d8073ccd10.svg#icomoon) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-Update:before {
    content: "\e948";
}
.icon-flights-departures:before {
    content: "\e949";
}
.icon-flights-arrivals:before {
    content: "\e94a";
}
.icon-close:before {
    content: "\e947";
}
.icon-weather-clear-sky:before {
    content: "\e935";
}
.icon-weather-scattered-clouds:before {
    content: "\e936";
}
.icon-weather-broken-clouds:before {
    content: "\e937";
}
.icon-weather-few-clouds:before {
    content: "\e938";
}
.icon-weather-rain:before {
    content: "\e939";
}
.icon-weather-shower-rain:before {
    content: "\e93a";
}
.icon-weather-thunderstorm:before {
    content: "\e93b";
}
.icon-weather-mist:before {
    content: "\e93c";
}
.icon-weather-snow:before {
    content: "\e93d";
}
.icon-weather-humidity:before {
    content: "\e93e";
}
.icon-weather-wind-S:before {
    content: "\e93f";
}
.icon-weather-wind-SE:before {
    content: "\e940";
}
.icon-weather-wind-E:before {
    content: "\e941";
}
.icon-weather-wind-NE:before {
    content: "\e942";
}
.icon-weather-wind-N:before {
    content: "\e943";
}
.icon-weather-wind-NO:before {
    content: "\e944";
}
.icon-weather-wind-O:before {
    content: "\e945";
}
.icon-weather-wind-SO:before {
    content: "\e946";
}
.icon-clock-widget:before {
    content: "\e934";
}
.icon-Channels_EPG:before {
    content: "\e933";
}
.icon-filter:before {
    content: "\e932";
}
.icon-advertising:before {
    content: "\e930";
}
.icon-message:before {
    content: "\e931";
}
.icon-play-focus:before {
    content: "\e900";
}
.icon-pause-focus:before {
    content: "\e901";
}
.icon-face-angry:before {
    content: "\e902";
}
.icon-face-sad:before {
    content: "\e903";
}
.icon-face-neutral:before {
    content: "\e904";
}
.icon-face-happy:before {
    content: "\e905";
}
.icon-face-very-happy:before {
    content: "\e906";
}
.icon-unlike:before {
    content: "\e907";
}
.icon-like:before {
    content: "\e908";
}
.icon-adult-movies:before {
    content: "\e909";
}
.icon-alarm:before {
    content: "\e90a";
}
.icon-tv-back-remote:before {
    content: "\e90b";
}
.icon-backward:before {
    content: "\e90c";
}
.icon-backspace:before {
    content: "\e90d";
}
.icon-audio-channels-movies:before {
    content: "\e90e";
}
.icon-crustaceans:before {
    content: "\e90f";
}
.icon-tick-right:before {
    content: "\e910";
}
.icon-channels:before {
    content: "\e911";
}
.icon-celery:before {
    content: "\e912";
}
.icon-subtitles:before {
    content: "\e913";
}
.icon-pause:before {
    content: "\e914";
}
.icon-milk:before {
    content: "\e915";
}
.icon-lupins:before {
    content: "\e916";
}
.icon-home:before {
    content: "\e917";
}
.icon-gluten:before {
    content: "\e918";
}
.icon-start-over:before {
    content: "\e919";
}
.icon-nuts:before {
    content: "\e91a";
}
.icon-mustard:before {
    content: "\e91b";
}
.icon-music:before {
    content: "\e91c";
}
.icon-soy:before {
    content: "\e91d";
}
.icon-cart:before {
    content: "\e91e";
}
.icon-forward:before {
    content: "\e91f";
}
.icon-warning:before {
    content: "\e920";
}
.icon-sesame:before {
    content: "\e921";
}
.icon-multimedia:before {
    content: "\e922";
}
.icon-movies:before {
    content: "\e923";
}
.icon-play:before {
    content: "\e924";
}
.icon-eggs:before {
    content: "\e925";
}
.icon-molluscs:before {
    content: "\e926";
}
.icon-peanuts:before {
    content: "\e927";
}
.icon-sulfur-dioxide-sulphites:before {
    content: "\e928";
}
.icon-fish:before {
    content: "\e929";
}
.icon-message-important:before {
    content: "\e92a";
}
.icon-chevron-right:before {
    content: "\e92b";
}
.icon-chevron-left:before {
    content: "\e92c";
}
.icon-chevron:before {
    content: "\e92d";
}
.icon-chevron-up:before {
    content: "\e92e";
}
.icon-no-color:before {
    content: "\e92f";
}

#lowSignalOverlay {
    padding: 1.3vh 0;
    background: rgba(46, 56, 67, 0.9);
    position: fixed;
    left: 0;
    width: 100%;
    top: 5vh;
    z-index: 5;
}
#lowSignalText {
    font-style: normal;
    font-weight: 400;
    font-size: 2.1vmax;
    line-height: 2.7vmax;
    text-align: center;
    color: #e9edf0;
    font-family: Lato;
}
#lowSignalText > :nth-child(1) {
    font-weight: 700;
}
#lowSignalText > :nth-child(2) {
    font-size: 1.75vmax;
}
#lowSignalText img {
    width: 2.1vmax;
    margin-right: 0.8vmax;
    vertical-align: bottom;
    filter: invert(61%) sepia(75%) saturate(715%) hue-rotate(342deg) brightness(100%) contrast(101%);
}

#app-root {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(12, 17, 37);
}

#googleCastLeft {
    position: relative;
    float: left;
    height: 100%;
    background-color: #181818;
}

#googleCastRight {
    position: relative;
    float: right;
    height: 100%;
    background-color: #232323;
}

#googleCastConnectIcon {
    background: #000000; /* SRID*/
}

#googleCastLogo {
    width: 100%;
}

#googleCastLogoContent {
    font-family: "Google Sans";
    font-weight: 700;
    font-style: normal;
    float: left;
    color: #e9e9e9;
}

#googleCastRoomInfo {
    font-family: "Google Sans Text";
    font-weight: 500;
    font-style: normal;
    color: #8c8c8e;
}

#googleCastDescription {
    text-align: left;
    font-family: "Google sans";
    font-weight: 400;
    font-style: normal;
    color: #aaaaaa;
}

#googleCastSettingsDesc {
    text-align: left;
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    color: #aaaaaa;
}

.googleCastSettingsButton {
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    color: #ffffff;
    font-family: "Roboto";
    font-weight: 500;
}

.googleCastSettingsFocus {
    color: #062e6f;
    background-color: #a8c7fa;
}

.cast-instructions {
    color: #fff;
    font-family: "Google Sans";
}

.wifi-name {
    color: #9bc3ff;
    font-weight: bold;
    margin-top: 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 6px;
}

.qr-code {
    border: 2px solid #8ab4f8;
    border-radius: 8px;
    padding: 8px;
    background: #181818;
    margin-bottom: 6px;
}
.qr-code img {
    width: 120px;
    height: 120px;
    display: block;
}
.qr-label {
    color: #ccc;
}
.pin {
    color: #9bc3ff;
    font-weight: bold;
    margin-top: 2px;
    letter-spacing: 2px;
}
hr {
    border: none;
    border-top: 1px solid #444;
    margin: 18px 0;
}

.cast-instructions {
    color: #fff;
    margin: 40px auto;
    border-radius: 12px;
    padding: 32px 24px 16px 24px;
}

.step {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
}

.step-number {
    background: #444;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.wifi-icon {
    color: #8ab4f8;
}
.wifi-name {
    color: #8ab4f8;
    margin-top: 2px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 6px;
}

.qr-section {
    margin-top: 8px;
}

#googleCastQRCodeOuter {
    position: relative;
    background-repeat: no-repeat;
}

.qr-code img {
    display: block;
}

.qr-label {
    color: #ccc;
    margin-top: 2px;
}

.pin {
    color: #8ab4f8;
    font-weight: bold;
    margin-top: 2px;
    letter-spacing: 2px;
}

hr {
    border: none;
    border-top: 1px solid #444;
    width: 84%;
    margin-left: 7%;
}

.footer {
    color: #bbb;
    line-height: 1.4;
}

.number {
    width: 3vw;
    height: 3vw;
    background-color: gray;
    color: white;
    margin: 0.8vw;
    grid-column: 1;
    text-align: center;
    float: left;
}
.numberRow {
    -ms-flex-pack: center;
        justify-content: center;
}