/**
 * preloading
 */

.preload-images:after {
    content:
            url( images/live-sub-menu-item-gradient.png )
            url( images/stickers_buttonClose.png )
            url( images/componen-button.png )
            url( images/mainMenu_tabOn_pointer.png )
            url( images/icon_stickers_off.png )
            url( images/icon_stickers_on.png )
            url( images/icon_leader_off.png )
            url( images/icon_leader_on.png )
            url( images/icon_browse_off.png )
            url( images/icon_browse_on.png )
            url( images/icon_rewards_off.png )
            url( images/icon_rewards_on.png );
    display: none;
}



/**
 * overrides
 */

body{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.component-button {
    background-color: transparent;
}

/**
 * common-style.css overrides:
 */
.scrollable {
    width: 100%;
    position: relative;
}


/**
 * menu & items 
 */

.item {
    font-size: var( --font-10pt );
}

.menu.main {
    height: 30px
}

.menu.sub {
    height: 30px
}

.item.main {
    color: var( --menu-item-text-color );

    border-style: solid;
    border-color: var( --menu-item-border-color );

    padding: 0;
    
    height: calc( 100% - 2px );
    width: calc( 100% / 2 - 2 * 2px );
    border-width: 2px 2px 0 2px;
    background-color: var( --live-menu-item-background-color );

    position: relative;
}

.item.main:hover{
    background-color: var( --live-menu-item-background-color-hover );
}

.item.main.active{
    color: var( --menu-item-active-text-color );

    border-style: none;
    border-width: 0;
    
    padding: 2px 2px 0 2px;

    background-color: var( --live-menu-item-active-background );
    background-image: url( images/mainMenu_tabOn_pointer.png );
    background-repeat: no-repeat;
    background-position: center bottom;
}

.item.main.active:hover{
    background-color: var( --live-menu-item-active-background-hover );
}

.item.sub{
    background-color: var( --live-menu-sub-item-background-color );
    background-image: url( images/live-sub-menu-item-gradient.png );
    background-repeat: repeat-x;
    background-position: center top;
    color: var( --menu-sub-item-text-color );

    border-style: solid;
    border-width: 0 0 3px 0;
    border-color: var( --menu-sub-item-border-color );

    padding: 6px 0 0 0;

    height: calc( 100% - 2 * 2px );

    position: relative;
}

.item.sub:hover {
    background-color: var( --live-menu-sub-item-background-color-hover );
}

.item.sub.active {
    background-color: var( --live-menu-sub-item-active-background-color );
    color: var( --menu-sub-item-active-text-color );
    
    border-color: var( --menu-sub-item-active-border-color );
}

.item.sub.active:hover {
    background-color: var( --live-menu-sub-item-active-background-color-hover );
}

.item.sticker {
    width: 100%;
}

#main_menu_stickers_button > .img {
    width: 25px;
    height: 25px;
    margin: -4px 8px -4px 4px;
    pointer-events: none;
}

#main_menu_stickers_button > .img.active{ display: none; }
#main_menu_stickers_button > .img.inactive{ display: inherit; }
#main_menu_stickers_button.active > .img.active{ display: inherit; }
#main_menu_stickers_button.active > .img.inactive{ display: none; }

#main_menu_leaderboard_button > .img{
    width: 25px;
    height: 25px;
    margin: -4px 8px -4px 4px;
    pointer-events: none;
}

#main_menu_leaderboard_button > .img.active{ display: none; }
#main_menu_leaderboard_button > .img.inactive{ display: inherit; }
#main_menu_leaderboard_button.active > .img.active{ display: inherit; }
#main_menu_leaderboard_button.active > .img.inactive{ display: none; }

#browse_button > .img {
     width: 20px;
     height: 20px;
     margin: -4px 8px -4px 4px;
     pointer-events: none;
 }

#browse_button > .img.active{ display: none; }
#browse_button > .img.inactive{ display: inherit; }
#browse_button.active > .img.active{ display: inherit; }
#browse_button.active > .img.inactive{ display: none; }

#rewards_button > .img {
    width: 20px;
    height: 20px;
    margin: -4px 8px -4px 4px;
    pointer-events: none;
}

#rewards_button > .img.active{ display: none; }
#rewards_button > .img.inactive{ display: inherit; }
#rewards_button.active > .img.active{ display: inherit; }
#rewards_button.active > .img.inactive{ display: none; }

/**
 * One leaderboard entry:
 */

.leaderboard-entry {
    height: 30px;
    
    display: flex;
    justify-content:center;
    align-items:center;
}

.leaderboard-entry-cell{
    width: 33%;

    display: flex;
    justify-content:center;
    align-items:center;;
}


/**
 * Leaderboard's grid
 */

.leaderboard-grid {
    width: 90vw;
    margin: 0 0 0 5vw;
}

.leaderboard-grid-cell {
    
}

.leaderboard-grid-cell.even {
    background-color: var( --live-leaderboard-entry-even-background-color );
}

.leaderboard-grid-cell.odd {
    background-color: var( --live-leaderboard-entry-odd-background-color );
}

.leaderboard-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content:center;
    align-items:center;
    text-align: center;
    vertical-align: middle;
}

.leaderboard-price-icon{

    display: inline-flex;
    justify-content:center;
    align-items:center;

    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;

    background-size: 100%;
}

.leaderboard-price-icon.none{  }
.leaderboard-price-icon.gray{ background-image: url( images/bits/dark_animated_gray_1.gif ); }
.leaderboard-price-icon.blue{ background-image: url( images/bits/dark_animated_blue_1.gif ); }
.leaderboard-price-icon.green{ background-image: url( images/bits/dark_animated_green_1.gif ); }
.leaderboard-price-icon.purple{ background-image: url( images/bits/dark_animated_purple_1.gif ); }
.leaderboard-price-icon.red{ background-image: url( images/bits/dark_animated_red_1.gif ); }
.leaderboard-price-icon.yellow{ background-image: url( images/bits/dark_animated_yellow_1.gif ); }

/**
 * Misc
 */

.title{
    text-align: center;
    width: 100%;
    position: relative;
    
    font-size: var( --font-12pt );
    color: var( --live-title-text-color );
    background: url( images/bgPanels.png), transparent;

    text-shadow:
            3px 3px 0 #01007d60,
            -1px -1px 0 #01007d,
            1px -1px 0 #01007d,
            -1px 1px 0 #01007d,
            1px 1px 0 #01007d;
    
    display: flex;
    justify-content:center;
    align-items:center;
}

.title.twitch-panel{
    height: 70px;
    min-width: 318px;
}

.title.twitch-component{
    height: 50px;
}

#x{
    position: absolute;
    width : 19px;
    height : 19px;

    transform: scale(1);
    transition: var( --short-time );
    
    top : 0;
    right : 0;
    
    background-image: url( images/stickers_buttonClose.png );

    display: flex;
    justify-content:center;
    align-items:center;
}

#x:hover{
    transform: scale(1.316);
    transition: var( --short-time );
    top : 3px;
    right : 3px;
}

#component-button {
    position: absolute;
    width : 128px;
    height : 69px;

    background-image: url( images/componen-button.png );

    transform: scale(1);
    transition: var( --short-time );

    display: flex;
    justify-content:center;
    align-items:center;
}

#component-button:hover{
    transform: scale(1.1);
    transition: var( --short-time );
}

#component-button._0{ top : 4px; left : 4px; }
#component-button._1{ top : 4px; right : 4px; }
#component-button._2{ bottom : 4px; left : 4px; }
#component-button._3{ bottom : 4px; right : 4px; }

/**
 * Stickers' grid
 */

.stickers-grid {
    display: grid;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    align-self:center;
}

.stickers-grid.from-left{
    left: 0;
    --p-duration : 0.2s;
    --p-ease : ease-in-out;

    -webkit-animation: movePageLeft var( --p-duration ) var( --p-ease );
    -moz-animation: movePageLeft var( --p-duration ) var( --p-ease );
    -o-animation: movePageLeft var( --p-duration ) var( --p-ease );
    animation: movePageLeft var( --p-duration ) var( --p-ease );
}

.stickers-grid.from-right{
    right: 0;
    --p-duration : 0.2s;
    --p-ease : ease-in-out;

    -webkit-animation: movePageRight var( --p-duration ) var( --p-ease );
    -moz-animation: movePageRight var( --p-duration ) var( --p-ease );
    -o-animation: movePageRight var( --p-duration ) var( --p-ease );
    animation: movePageRight var( --p-duration ) var( --p-ease );
}

.stickers-grid.twitch-panel{
    grid-template-columns: repeat( 2, auto );
    grid-template-rows: repeat( 3, min-content );
}

.stickers-grid.twitch-component{
    grid-template-columns: repeat( 3, auto );
    grid-template-rows: repeat( 2, min-content );
}

.stickers-grid-cell {
    text-align: center;
    justify-self: stretch;
    height: 85px;
    display: inline-block;
}

.stickers-grid-cell.twitch-panel.reward{
    height: 112px;
}

.stickers-grid-cell.twitch-component.reward{
    height: 128px;
}

.stickers-grid.twitch-panel.reward{
    grid-template-columns: repeat( 1, auto );
    grid-template-rows: repeat( 2, min-content );
}

.stickers-grid.twitch-component.reward{
    grid-template-columns: repeat( 2, auto );
    grid-template-rows: repeat( 1, min-content );
}


/**
 * Sticker element
 */

.sticker-item {
    width: 100%;
    height: 100%;

    position: relative;

    background-color: var( --sticker-config-background-color );
    border: 2px solid var(--border-color-2);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    transition: transform var( --short-time );
    
    cursor: pointer;
}



@media (pointer: fine) {
    .sticker-item:hover {
        transform: scale(1.05);
    }
}

.sticker-image{

    min-width: 38px;
    min-height: 38px;
    max-width: 100px;
    max-height: 60px;
    
    transform: scale(1);
    transition: var( --short-time );
}

.sticker-image-popup{
    max-width: calc( 30vh - 2 * 8px );
    max-height: calc( 30vh - 2 * 8px );

    transform: scale(1);
    transition: var( --short-time );
}

@media (pointer: fine) {
    .sticker-item:hover .sticker-image {
        transform: scale(1.2);
    }
}

.sticker-image-row{
    position: absolute;
    top: 0;
    bottom: 16px;
    left: 0;
    right: 0;

    width: 100%;

    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sticker-price-row{

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 100%;

    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sticker-price-icon{
    
    display: inline-flex;
    justify-content:center;
    align-items:center;
    
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;

    background-size: 100%;
}

.sticker-price{
    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sticker-price-popup {
    font-size: 4vw;
    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sticker-price-icon.none{  }
.sticker-price-icon.gray{ background-image: url( images/bits/dark_static_gray_1.png ); }
.sticker-price-icon.blue{ background-image: url( images/bits/dark_static_blue_1.png ); }
.sticker-price-icon.green{ background-image: url( images/bits/dark_static_green_1.png ); }
.sticker-price-icon.purple{ background-image: url( images/bits/dark_static_purple_1.png ); }
.sticker-price-icon.red{ background-image: url( images/bits/dark_static_red_1.png ); }
.sticker-price-icon.yellow{ background-image: url( images/bits/dark_static_yellow_1.png ); }


/**
 * Reward element
 */

.reward-item {
    width: 100%;
    height: 100%;

    position: relative;

    background-color: var( --sticker-config-background-color );
    border: 2px solid var(--border-color-2);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    transition: transform var( --short-time );

    cursor: pointer;
}

.reward-item {
    display: flex;
    justify-content: flex-start;
}
.sticker-image.reward{
    min-width: 50px;
    min-height: 50px;
    max-width: 90px;
    max-height: 90px;
}


@media (pointer: fine) {
    .reward-item:hover {
        transform: scale(1.03);
    }
}

@media (pointer: fine) {
    .reward-item:hover .sticker-image {
        transform: scale(1.1);
    }
}

.reward-properties-component{
    width: calc( 100% - 8px );
    height: 100px;
}

.reward-property-container{

}

.reward-property-container.bits-progress{
    height: 20px;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    transform: translateY(2px);
}

.reward-property-container.sticker-name{
    height: 20px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reward-property-container.progress-bar{
    height: 20px;
}

.reward-property-container.text1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reward-property-container.text2{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.reward-property-container.text1.twitch-panel{
    height: 20px;
}

.reward-property-container.text1.twitch-component{
    height: 28px;
}

.reward-property-container.text2.twitch-panel{
    height: 20px;
}

.reward-property-container.text2.twitch-component{
    height: 28px;
}

.reward-unlock-icon{

    display: inline-flex;
    justify-content:center;
    align-items:center;

    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;

    background-size: 100%;
}

.reward-unlock-price{
    color: var( --white-text-color );
    margin-right: 8px;
}

.reward-unlock-title{
    color: var( --white-text-color );
}

.reward-image-component{
    min-width: 100px;
    min-height: 100px;

    display: flex;
    justify-content:center;
    align-items:center;
}

.sticker-sticker-icon{
    position: absolute;
    top: 0;
    left: 0;
}

.reward-progress-bar-background{
    width: calc( 100% - 8px );
    height: 100%;
    background-color: #180C31;
}

.reward-progress-bar-foreground{
    width: 50%;
    height: 100%;
    background-color: #D42FB7;
}

.reward-unlock-icon.none{  }
.reward-unlock-icon.gray{ background-image: url( images/bits/dark_static_gray_1.png ); }
.reward-unlock-icon.blue{ background-image: url( images/bits/dark_static_blue_1.png ); }
.reward-unlock-icon.green{ background-image: url( images/bits/dark_static_green_1.png ); }
.reward-unlock-icon.purple{ background-image: url( images/bits/dark_static_purple_1.png ); }
.reward-unlock-icon.red{ background-image: url( images/bits/dark_static_red_1.png ); }
.reward-unlock-icon.yellow{ background-image: url( images/bits/dark_static_yellow_1.png ); }


/**
 * pagination
 */

.arrow-button {
    width: 80px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;

    position: relative;

    background-color: var( --sticker-config-background-color );
    border: 2px solid var(--border-color-2);

    cursor: pointer;
}

.arrow-button:hover {
    background-color: var( --sticker-background-color );
}

.arrow-button.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.arrow {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin: 8px;
}

.arrow-right {
    border-left: 10px solid var( --live-dot-nav-active-color );
    margin-right: -2px;
}

.arrow-left {
    border-right: 10px solid var( --live-dot-nav-active-color );
    margin-left: -2px;
}

.arrow-label {
    width: 64px;
}

.menu.stickers-grid-paginator{
    position: absolute;
    bottom: 0;
    width: 100%;

    display: flex;
    justify-content:center;
    align-items:center;
}

.item.stickers-grid-paginator-button{
    width: 20px;
    height: 20px;
    
    border-radius: 10px;
    
    margin : 4px;

    background-color: var( --live-dot-nav-color );
    cursor: pointer;
}

.item.stickers-grid-paginator-button:hover {
    background-color: var( --live-dot-nav-color-hover );
}

.item.stickers-grid-paginator-button.active {
    background-color: var( --live-dot-nav-active-color );
}

.item.stickers-grid-paginator-button.active:hover {
    background-color: var( --live-dot-nav-active-color-hover );
}

@-webkit-keyframes movePageLeft {
    0% { display: none; left: calc( var( --offset ) + 1px ); }
    1% { display: block; left: var( --offset ); }
    100% { display: block; left: 0; }
}

@-moz-keyframes movePageLeft {
    0% { display: none; left: calc( var( --offset ) + 1px ); }
    1% { display: block; left: var( --offset ); }
    100% { display: block; left: 0; }
}

@-o-keyframes movePageLeft {
    0% { display: none; left: calc( var( --offset ) + 1px ); }
    1% { display: block; left: var( --offset ); }
    100% { display: block; left: 0; }
}

@keyframes movePageLeft {
    0% { display: none; left: calc( var( --offset ) + 1px ); }
    1% { display: block; left: var( --offset ); }
    100% { display: block; left: 0; }
}

@-webkit-keyframes movePageRight {
    0% { display: none; right: calc( var( --offset ) + 1px ); }
    1% { display: block; right: var( --offset ); }
    100% { display: block; right: 0; }
}

@-moz-keyframes movePageRight {
    0% { display: none; right: calc( var( --offset ) + 1px ); }
    1% { display: block; right: var( --offset ); }
    100% { display: block; right: 0; }
}

@-o-keyframes movePageRight {
    0% { display: none; right: calc( var( --offset ) + 1px ); }
    1% { display: block; right: var( --offset ); }
    100% { display: block; right: 0; }
}

@keyframes movePageRight {
    0% { display: none; right: calc( var( --offset ) + 1px ); }
    1% { display: block; right: var( --offset ); }
    100% { display: block; right: 0; }
}



/**
 * Popups
 */

.popup{
    position: fixed;

    background-color: var( --live-background-color );

    border-style: solid;
    border-width: 2px;
    border-color: var( --border-color-1 );

    text-align: center;
    height: 85%;
}

.scrollable_popup {
    position: relative;
    display: table;

    background-color: var( --live-background-color );

    border-style: solid;
    border-width: 2px;
    border-color: var( --border-color-1 );

    text-align: center;
    height: 85%;
}

.popup-image-container{
    margin: 8px;
    width: calc( 100vh - 2 * 8px );
}

#popup-cooldown-message{
    margin: 8px;
    width: calc( 100vh - 2 * 8px );
    text-align: center;
}

#popup-cooldown-counter{
    margin: 8px;
    width: calc( 100vh - 2 * 8px );
    
    font-size: 32pt;
    text-align: center;
}

.popup-image{
    max-width: 100px;
    max-height: 60px;
}

#no_connection_with_streaming_software a{
    color: var( --panel-box-a-color );
}

.message-popup-anchor{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.message-popup-background{
    position: relative;
    display: flex;
    background-color: var( --live-background-color );
    border-style: solid;
    border-width: 2px;
    border-color: var( --border-color-1 );
    border-radius: 8px;
    width: calc( 100% - 40px - 2 * 2px );
    height: calc( 350px - 2 * 2px );
    left: 20px;
    top: 20px;
    justify-content: center;
    align-items: center;
}

.message-popup-background.component{
    width: calc( 100% - 40px - 2 * 2px );
    height: calc( 320px - 2 * 2px );
    left: 20px;
    top: 20px;
}

.message-popup-background.panel{
    top: 60px;
}

.message-popup-content{
    position: absolute;
    width: calc( 100% - 16px ); /* minus padding */
    height: calc( 100% - 16px ); /* minus padding */
    text-align: center;
}

.message-popup-content.component{
    width: calc( 100% - 16px ); /* minus padding */
    height: calc( 100% - 16px ); /* minus padding */
}

.message-popup-image{
    max-width: calc( 100% - 8px );
    max-height: 150px;
    border-radius: 8px;
}

.message-popup-image.component{
    max-height: 160px;
}

.message-popup-subtitle{
    color: white;
    font-size: 10pt;
}

.absolute-anchor{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    pointer-events: none;
}

.absolute-anchor > * {
    pointer-events: all;
}

.close-button{
    cursor: pointer;
    transform: translate(20px, -20px);
}

.close-button:hover{
    transform: translate(20px, -20px) scale(1.1);
}

.popup-button{
    text-align: center;
    width: auto;
    padding: 5px 32px;
    color: var( --white-text-color );
    background-color: var(--popup-button-color);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.popup-button:hover{
    background-color: var(--popup-button-color-hover);
}

.popup-button.disabled{
    opacity: 30%;
    cursor: wait;
}

/**
 * Tabs spreading evenly fix
 */
 .tabs-container {
    display: flex;
    justify-content: space-between;
}

/**
 * Subonly
 */
.sub-only-badge {
    width: 47px;
    height: 47px;

    position: absolute;
    top: 0;
    right: 0;
}

.sub-only-badge-popup {
    width: 9vw;
    height: 9vw;
    background-size:cover;
    background-repeat:no-repeat;
    min-width: 64px;
    min-height: 64px;

    position: absolute;
    top: 13vh;
    right: 4vw;
}

/*
 * Master sticker size buttons
 */
.subonly-popup {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    cursor: default;

    height: 80vh;
    top: 5vh;

    text-align: center;
    vertical-align: middle;
}

.subonly-header-font {
    color: var(--offline-popup-header-color);
    font-size: 7vw;
    pointer-events: none;
    margin: 5px;
}

.subonly-popup-message {
    font-size: 4vw;
}

.sub-only-button.active {
    text-align: center;
    margin-left: 5px;
    margin: 5px;
    border: 2px solid var(--border-color-2);
    background-color: var( --menu-sub-item-active-background-color );
    font-size: var( --font-10pt );
    color: var( --menu-sub-item-active-text-color );
    cursor: pointer;
}

.sub-only-button {
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px;
    border: 2px solid var(--border-color-2);
    background-color: var( --menu-sub-item-background-color );
    font-size: var( --font-9pt );
    cursor: pointer;
    width: calc(65%);
    width: -moz-calc(65%);
    width: -webkit-calc(65%);

    text-decoration: none;
    color: white;

    min-height: 35px;
    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sub-only-close-button {
    position: absolute;
    width : 33px;
    height : 33px;
    top : -15px;
    right : -15px;
    background-image: url( images/button_close.png );
    background-color: transparent;

    transform: scale(1);
    transition: var( --short-time );
    
    cursor: pointer;
}

.sub-only-close-button:hover {
    background-color: transparent;
    border: 0;

    transform: scale(1.1);
    transition: var( --short-time );
}

.sub-only-image-row{
    /*position: absolute;*/
    top: 0;
    bottom: 16px;
    left: 0;
    right: 0;

    /*width: 100vh;*/

    display: inline-flex;
    justify-content:center;
    align-items:center;
}

.sub-only-price-row{
    /*position: absolute;*/
    bottom: 0;
    left: 0;
    right: 0;

    width: 100vh;

    display: inline-flex;
    justify-content:center;
    align-items:center;
}

#offline_buttons_container_one_row{
    display: flex;
}

#popup-platform-message {
    text-align: left;
}

#popup-platform-message > p {
    font-size: 8pt;
}

#popup-platform-message > p > span {
    color: white;
}