* {
    font-family: sans-serif;
}
iframe {
    border: 0;
}

.button {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding: 1px;
    opacity: 0.9;
    cursor: pointer;
    width: 32px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button:hover {
    border-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

.button:active, .button.active {
    border-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.button > img {
    max-height: 32px;
}

.button-row {
    display: flex;
    flex-direction: row;
}

.left-buttons, .team-buttons {
    display: flex;
}

.left-buttons {
    margin-right: 4px;
}

body {
    background: hsla(261, 43%, 10%, 1);
    margin: 0;
}

#stream, #chat {
    position: fixed;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#stream {
    background: hsla(261, 43%, 20%, 1);
    width: calc(100vw - 340px);
    color: white;
}

#chat {
    background: hsla(261, 43%, 30%, 1);
    width: 340px;
    align-items: center;
}

body[data-chat="right"] #chat {
    right: 0;
}

#overlay-frame {
    width: 100%;
    margin: 0;
}

#player-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 4px 0px;
}

.button[data-button-type="player"] img {
    margin-top: -8px;
    opacity: 0.75;
}

.button[data-button-type="player"] span {
    color: rgba(255, 255, 255, 0.75);
    left: 0;
    position: absolute;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: -0.5px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.button[data-button-type="player"] {
    position: relative;
    overflow: hidden;
}

#stream iframe {
    width: 100%;
    height: 100%;
}

.menu {
    display: flex;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    font-size: 12px;
    margin: 2px 0;
    /*    width: 100%;*/
    width: calc(100% - 8px);

    /*
    */
}

#chat-holder {
	flex-grow: 1;
}

.menu + .menu {
    margin-bottom: 4px;
}

.inline-label {
    margin: 2px 6px 2px 4px;
}

.small-button {
    width: auto;
    flex-grow: 1;
    justify-content: center;
}

#chat-frame {
    width: 100%;
    height: 100%;
}

#swapped {
    position: absolute;
    left: calc(100% - calc(340px + 260px + 10px));
    bottom: 10px;
    height: 200px;
    width: 356px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}

#swapped iframe, #swapped img {
    width: 100%;
    height: 100%;
}

/* cut swapped */

#swapped {
    width: 260px;
}

#swapped iframe,
#swapped img {
    width: 356px;
    margin-left: -60px;
}

#swapped:hover iframe,
#swapped:active iframe {
    width: 260px !important;
    margin-left: 0px !important;
    height: 200px !important;
    margin-top: 0px;
}

#swapped {
    /*left: calc(calc(calc(100% - 260px) / 2) * 1.07);*/
}

/*
        body:not(.swapped) #swapped {
            display: none;
        }*/

body.swapped #swapped {
    width: calc(100% - 340px);
    left: 0;
    top: 0;
    height: 100vh;
}

body.swapped #swapped iframe,
body.swapped #swapped img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

body.swapped #stream {
    z-index: 10;
}

body.swapped #stream {
    z-index: 10;
    width: calc(calc(100vw - 340px) * 0.308);
    height: calc(calc(calc(100vw - 340px) * 0.308) * 0.5625);
    top: calc(((100vh - (((100vw - 340px) * 0.5625))) / 2) + 10px);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}

body:not(.swapped) #swapped {

    bottom: calc(calc(calc(100vh - calc(calc(calc(100vw - 340px) * 0.5625))) / 2) + 10px);
}

body.swapped-side #swapped {
    left: calc(100% - calc(340px));
    z-index: 100;
    width: 340px;
    height: 192px;
    border-radius: 0;
    top: 256px;
}

body.swapped-side #swapped iframe {
    width: 340px !important;
    margin: 0 !important;
}

[data-tooltip] {
    position: relative;
    overflow: unset !important;
}

.button.pov-active[data-tooltip]:hover:after {
    content: attr(data-tooltip) " - Click again for split screen view";
}

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    color: white;
    background: black;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    top: calc(100% + 1px);
    min-width: 100px;
    text-align: center;
    z-index: 1000;
    right: 0;
    text-transform: none !important;
}

#twitter {
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
}

#chat a {
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    text-decoration: none;
}

#chat-holder, #chat-holder iframe {
    width: 100%;
}

.no-analyst {
    display: none !important;
}

body:not(.swapped) #analysts-holder #analyst-jayne iframe,
body:not(.swapped) #analysts-holder #analyst-elkgg iframe {
    margin-left: -240px;
    width: 620px;
    height: 400px;
    margin-top: -57px;
}

body[data-players="0"] #player-buttons {
    flex-direction: row;
}

body[data-players="0"] .left-buttons {
    margin-right: 0;
}

#analyst-menu .button, #chat-menu .button {
    margin-right: 2px;
}

body[data-players="0"] #player-buttons .button {
    margin-right: 4px;
}

#analysts-holder .analyst-box {
    width: 260px;
    overflow: hidden;
}

#analysts-holder iframe {
    width: 356px;
    height: 100%;
    margin-left: -60px;
}
#analysts-holder .analyst-box:active iframe,
#analysts-holder .analyst-box:hover iframe {
    width: 260px;
    margin-left: 0px;
    height: 100%;
    margin-top: 0px;
}

body:not(.swapped) #analysts-holder #analyst-elkgg:hover iframe, 
body:not(.swapped) #analysts-holder #analyst-jayne:hover iframe {
    width: 260px !important;
    margin-left: 0px !important;
    height: 100% !important;
    margin-top: 0px !important;
}

#analysts-holder {
    right: calc(340px + 10px);
    height: 200px;
    bottom: calc(calc(calc(100vh - calc(calc(calc(100vw - 340px) * 0.5625))) / 2) + 10px);
    position: absolute;
}

#analysts {
    display: flex;
    height: 200px;
    flex-direction: row-reverse;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}

#button-row-top .team-buttons .button {
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    margin-top: -1px;
    margin-bottom: -1px;
}

#button-row-bottom .team-buttons .button {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    margin-top: 0px;
    margin-bottom: -1px;
}

#button-row-top .team-buttons[data-team="Dallas Fuel"] .button {
    border-top-color: #0072ce;
}

#button-row-top .team-buttons[data-team="Philadelphia Fusion"] .button {
    border-top-color: #F99F29;
}

#button-row-top .team-buttons[data-team="Houston Outlaws"] .button {
    border-top-color: #97D700;
}

#button-row-top .team-buttons[data-team="Boston Uprising"] .button {
    border-top-color: #174B97;
}

#button-row-top .team-buttons[data-team="New York Excelsior"] .button {
    border-top-color: #0F57EA;
}

#button-row-top .team-buttons[data-team="San Francisco Shock"] .button {
    border-top-color: #FC4C02;
}

#button-row-top .team-buttons[data-team="LA Valiant"] .button {
    border-top-color: #004438;
}

#button-row-top .team-buttons[data-team="LA Gladiators"] .button {
    border-top-color: #3C1053;
}

#button-row-top .team-buttons[data-team="Florida Mayhem"] .button {
    border-top-color: #FEDA00;
}

#button-row-top .team-buttons[data-team="Shanghai Dragons"] .button {
    border-top-color: #D22630;
}

#button-row-top .team-buttons[data-team="Seoul Dynasty"] .button {
    border-top-color: #AA8A00;
}

#button-row-top .team-buttons[data-team="London Spitfire"] .button {
    border-top-color: #59CBE8;
}

#button-row-top .team-buttons[data-team="Chengdu Hunters"] .button {
    border-top-color: #FFA000;
}

#button-row-top .team-buttons[data-team="Hangzhou Spark"] .button {
    border-top-color: #FB7299;
}

#button-row-top .team-buttons[data-team="Paris Eternal"] .button {
    border-top-color: #8d042d;
}

#button-row-top .team-buttons[data-team="Toronto Defiant"] .button {
    border-top-color: #C10021;
}

#button-row-top .team-buttons[data-team="Vancouver Titans"] .button {
    border-top-color: #2FB228;
}

#button-row-top .team-buttons[data-team="Washington Justice"] .button, #button-row-top .team-buttons[data-team="Washington DC Justice"] .button, #button-row-top .team-buttons[data-team="DC Justice"] .button {
    border-top-color: #990034;
}

/* Sometimes Twitch likes to give them a weird name */
#button-row-top .team-buttons[data-team="Atlanta Reign"] .button {
    border-top-color: #910F1B;
}

#button-row-top .team-buttons[data-team="Guangzhou Charge"] .button {
    border-top-color: #67a2b2;
}

#button-row-bottom .team-buttons[data-team="Dallas Fuel"] .button {
    border-bottom-color: #0072ce;
}

#button-row-bottom .team-buttons[data-team="Philadelphia Fusion"] .button {
    border-bottom-color: #F99F29;
}

#button-row-bottom .team-buttons[data-team="Houston Outlaws"] .button {
    border-bottom-color: #97D700;
}

#button-row-bottom .team-buttons[data-team="Boston Uprising"] .button {
    border-bottom-color: #174B97;
}

#button-row-bottom .team-buttons[data-team="New York Excelsior"] .button {
    border-bottom-color: #0F57EA;
}

#button-row-bottom .team-buttons[data-team="San Francisco Shock"] .button {
    border-bottom-color: #FC4C02;
}

#button-row-bottom .team-buttons[data-team="LA Valiant"] .button {
    border-bottom-color: #004438;
}

#button-row-bottom .team-buttons[data-team="LA Gladiators"] .button {
    border-bottom-color: #3C1053;
}

#button-row-bottom .team-buttons[data-team="Florida Mayhem"] .button {
    border-bottom-color: #FEDA00;
}

#button-row-bottom .team-buttons[data-team="Shanghai Dragons"] .button {
    border-bottom-color: #D22630;
}

#button-row-bottom .team-buttons[data-team="Seoul Dynasty"] .button {
    border-bottom-color: #AA8A00;
}

#button-row-bottom .team-buttons[data-team="London Spitfire"] .button {
    border-bottom-color: #59CBE8;
}

#button-row-bottom .team-buttons[data-team="Chengdu Hunters"] .button {
    border-bottom-color: #FFA000;
}

#button-row-bottom .team-buttons[data-team="Hangzhou Spark"] .button {
    border-bottom-color: #FB7299;
}

#button-row-bottom .team-buttons[data-team="Paris Eternal"] .button {
    border-bottom-color: #8d042d;
}

#button-row-bottom .team-buttons[data-team="Toronto Defiant"] .button {
    border-bottom-color: #C10021;
}

#button-row-bottom .team-buttons[data-team="Vancouver Titans"] .button {
    border-bottom-color: #2FB228;
}

#button-row-bottom .team-buttons[data-team="Washington Justice"] .button, #button-row-bottom .team-buttons[data-team="Washington DC Justice"] .button, #button-row-bottom .team-buttons[data-team="DC Justice"] .button {
    border-bottom-color: #990034;
}

/* Sometimes Twitch likes to give them a weird name */
#button-row-bottom .team-buttons[data-team="Atlanta Reign"] .button {
    border-bottom-color: #910F1B;
}

#button-row-bottom .team-buttons[data-team="Guangzhou Charge"] .button {
    border-bottom-color: #67a2b2;
}

/* Pacific cbae46 */

#button-row-bottom .team-buttons[data-team="Pacific"] .button {  border-bottom-color: #cbae46; }
#button-row-top .team-buttons[data-team="Pacific"] .button {  border-top-color: #cbae46; }
#player-buttons .team-buttons[data-team="Pacific"] .button {  background-color: #cbae465f; }

#button-row-bottom .team-buttons[data-team="Atlantic"] .button {  border-bottom-color: #3b3ba4; }
#button-row-top .team-buttons[data-team="Atlantic"] .button {  border-top-color: #3b3ba4; }
#player-buttons .team-buttons[data-team="Atlantic"] .button {  background-color: #3b3ba45f; }


#player-buttons .team-buttons[data-team="Atlanta Reign"] .button {
    background-color: #C4C4C45f;
}
#player-buttons .team-buttons[data-team="Dallas Fuel"] .button {
    background-color: #0072ce5f;
}

#player-buttons .team-buttons[data-team="Philadelphia Fusion"] .button {
    background-color: #F99F295f;
}

#player-buttons .team-buttons[data-team="Houston Outlaws"] .button {
    background-color: #97D7005f;
}

#player-buttons .team-buttons[data-team="Boston Uprising"] .button {
    background-color: #174B975f;
}

#player-buttons .team-buttons[data-team="New York Excelsior"] .button {
    background-color: #0F57EA5f;
}

#player-buttons .team-buttons[data-team="San Francisco Shock"] .button {
    background-color: #FC4C025f;
}

#player-buttons .team-buttons[data-team="LA Valiant"] .button {
    background-color: #0044385f;
}

#player-buttons .team-buttons[data-team="LA Gladiators"] .button {
    background-color: #3C10535f;
}

#player-buttons .team-buttons[data-team="Florida Mayhem"] .button {
    background-color: #FEDA005f;
}

#player-buttons .team-buttons[data-team="Shanghai Dragons"] .button {
    background-color: #D226305f;
}

#player-buttons .team-buttons[data-team="Seoul Dynasty"] .button {
    background-color: #AA8A005f;
}

#player-buttons .team-buttons[data-team="London Spitfire"] .button {
    background-color: #59CBE85f;
}

#player-buttons .team-buttons[data-team="Chengdu Hunters"] .button {
    background-color: #FFA0005f;
}

#player-buttons .team-buttons[data-team="Hangzhou Spark"] .button {
    background-color: #FB72995f;
}

#player-buttons .team-buttons[data-team="Paris Eternal"] .button {
    background-color: #303d565f;
}

#player-buttons .team-buttons[data-team="Toronto Defiant"] .button {
    background-color: #C100215f;
}

#player-buttons .team-buttons[data-team="Vancouver Titans"] .button {
    background-color: #2FB2285f;
}

#player-buttons .team-buttons[data-team="Washington Justice"] .button, #player-buttons .team-buttons[data-team="Washington DC Justice"] .button, #player-buttons .team-buttons[data-team="DC Justice"] .button {
    background-color: #9900345f;
}



/*
border-top: 2px solid #e9480d;
border-bottom: 2px solid #31a62d;
*/
.button[data-button-type="player"] span {
    margin-top: 11px;
}

.button[data-button-type="player"] img {
    margin-top: -10px;
}

body.swapped #stream {
    right: 350px;
}

body.swapped #analysts-holder {
    height: 100%;
    top: 0;
    left: 0;
    right: calc(340px + 0px);
}

body.swapped #analysts {
    height: 100%;
    top: 0;
    left: 0;
}

body:not([data-analysts="0"])[data-layout="stack"] #stream {
    height: 50vh;
}

body[data-layout="stack"] #analysts-holder {
    height: 50vh;
    bottom: 0;
    left: 0;
    width: calc(100vw - 340px);
}

body[data-layout="stack"] #analysts {
    height: 100%;
    justify-content: center;
    flex-direction: row;
}

body[data-layout="stack"] #analysts-holder .analyst-box {
    width: auto;
    flex-grow: 1;
}

body.swapped #analysts-holder iframe,
body[data-layout="stack"] #analysts-holder iframe {
    width: 100%;
    margin-left: 0;
}

body.swapped #analysts-holder .analyst-box {
    width: 100%;
}

body[data-layout="stack"].swapped #stream {
    width: calc(100vw - 340px);
    left: 0;
    top: 50vh;
    height: 50vh;
}

body[data-layout="stack"].swapped #analysts,
body[data-layout="stack"].swapped #analysts-holder {
    left: 0;
    bottom: 0;
    height: 50vh;
}
/*
body.swapped[data-analysts] #stream {
    right: calc((100vw + 340px - ((100vw - 340px) * 0.308)) / 2);
}*/

body.swapped[data-analysts="0"] #stream {
    right: 340px;
    height: 100vh;
    top: 0;
    width: calc(100vw - 340px);
}

body.swapped[data-analysts="1"] #stream {
    right: calc(340px + 10px);
}

body.swapped #analysts-holder .analyst-box:hover iframe,
body[data-layout="stack"] #analysts-holder .analyst-box:hover iframe {
    width: 100%;
    margin-left: 0px;
    height: 100%;
    margin-top: 0px;
}

div#player-holder {
    position: absolute;
    left: 15px;
    top: 15px;
}

body.swapped div#player-holder,
body[data-layout="stack"] div#player-holder {
    display: none;
}

#team-logo {
    background-size: 66px 66px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    background-color: gray;
    width: 70px;
    height: 70px;
    display: inline-block;
}

#player-name {
    background-color: gray;
    color: white;
    display: inline-block;
    vertical-align: top;
    padding: 2px 10px;
    font-size: 24px;
    font-family: "Helvetica Neue", "Arial", sans-serif;
    padding-left: 0;
    min-width: 150px;
    text-align: center;
    height: 32px;
}

div#player-role {
    background-color: gray;
    width: 32px;
    height: 30px;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
    padding: 3px;
}

@font-face {
    font-family: 'SGS-display';
    src: url(https://styleguide.overwatchleague.com/6.7.0/assets/themes/owl/fonts/industry-bold-webfont.woff2);
    font-weight: 400;
    font-style: normal;
}

#player-name {
    font-family: 'SGS-display', sans-serif;
    line-height: 35px;
}

div#player-headshot {
    display: inline-block;
    background-size: 80px 80px;
    background-position: -5px -5px;
    background-repeat: no-repeat;
    background-color: gray;
    width: 70px;
    height: 70px;
}

body.full #chat:not(:hover) #player-buttons, body.full #chat:not(:hover) #analyst-menu {
    opacity: 0;
}

body.full #player-buttons, body.full #analyst-menu {
    transition: opacity .2s ease-in-out;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 0;
    border-radius: 4px;
}

body.full #analyst-menu {
    padding: 6px 4px;
}

body.full #chat {
    background: transparent;
    max-height: 100px;
}

body.full #overlay-frame, body.full #chat-menu, body.full #chat-holder {
    display: none;
}

body.full:not(.swapped) #stream {
    width: 100%;
}

body.full #player-buttons .button {
    background-color: rgba(0, 0, 0, 0.5);
}

body.full:not(.swapped) #analysts-holder {
    bottom: calc(((100vh - ((100vw * 0.5625))) / 2) + 10px);
    right: 10px;
}

body.full.swapped #analysts-holder {
    right: 0;
}

body.swapped.full[data-analysts="1"]:not([data-layout="stack"]) #stream {
    left: 10px;
    top: 10px;

}

body.swapped[data-analysts] #stream {
    right: calc((100vw - ((100vw - 340px) * 0.308)) / 2);
}

body.full:not(.swapped) #analysts-holder {
    bottom: calc(((100vh - ((100vw * 0.5625))) / 2) + 10px);
    bottom: 10px;
    right: 10px;
}

body.full.swapped #analysts-holder {
    right: 0;
}

body.swapped.full[data-analysts="1"]:not([data-layout="stack"]) #stream {
    left: 10px;
    top: 10px;

}
/*
body.swapped[data-analysts] #stream {
    right: calc((100vw - ((100vw - 340px) * 0.308)) / 2);
}*/

body.full[data-layout="stack"] #analysts-holder,
body.full[data-layout="stack"] #stream {
    width: 100vw;
}

body.swapped[data-analysts] #stream {
    /*right: calc(100vw - calc(calc(100vw - 340px) * 0.308) - 5px);*/
    top: calc(((100vh - (((100vw - 340px) * 0.5625))) / 2) + 5px);

}
body.swapped[data-analysts="1"][data-layout="stack"] #stream {
     top: 50vh;
}

#avast-with {
    opacity: 0.8;
    font-size: 9px;
margin-left: 2px;
}

#player-name {
    min-width: 220px;
}

#player-headshot {
    background-color: transparent !important;
    margin-left: -70px;
}

.menu {
    align-items: center;
}

#analyst-menu .button, #chat-menu .button {
    padding: 0 4px;
}

.modal {
    left: 20px;
    bottom: 45px;
    position: absolute;
    color: white;
    font-size: 12px;
    background-color: hsla(261, 43%, 20%, 0.85);
    padding: 8px;
    border-radius: 4px;
    width: 500px;
    max-width: 50vw;
}

.modal a {
    font-weight: bold;
    color: white;
}

.modal p {
    margin: 6px 0;
}

.modal .modal-title {
    font-size: 16px;
}

.modal-close {
    float: right;
    padding: 0 6px;
    cursor: pointer;
    transform: rotate(45deg);
}

#analyst-menu {
    display: flex;
    flex-direction: column;
    width: calc(100% - 8px);
}

#avast-row, .buttons-container {
    display: flex;
    width: 100%;
}
.button.button-with-image {
    border: 0;
    padding: 0px !important;
}
.button.button-with-image img {
    border-radius: 3px;
    max-height: 18px;
}

#avast-row {
    margin-top: 4px;
    background: hsla(240, 43%, 30%, 1);
}

#avast-row.offline {
    display: none;
}

#avast-row .button {
    flex-grow: 0;
}
#avast-row {
    padding: 2px 4px;
    margin: 3px -8px 0 -8px;
}
#avast-row #avast-with {
    flex-grow: 1;
    align-self: center;
}

#avast-row.live #avast-with:before {
    content: 'LIVE';
    opacity: 1;
    margin-right: 4px;
    color: #6dbbff;
}
.inline-label {
    align-self: center;
}

.buttons-container {
    flex-wrap: wrap;
    margin-bottom: -2px;
    margin-left: 4px;
    justify-content: flex-end;
}
.buttons-container .button {
    flex-grow: 0;
    margin-bottom: 2px;
}
.button[data-button-type="no-analyst"] {
    order: 99;
}
#analyst-controls {
    width: 100%;
    display: flex;
}


body[data-analysts="0"] #analysts-holder {
    display: none;
}

body {

}
#stream {
    background: rgba(0,0,0,0.1)
}
#chat {
    background: rgba(0,0,0,0.2)
}
.left-buttons .button img {
    filter: grayscale(1)
}

.button.button-with-image {
    opacity: 0.5;
}
.button.button-with-image:hover {
    opacity: 0.7;
}
.button.button-with-image:active, .button.button-with-image.active {
    opacity: 1;
}


/*new sizing*/


body[data-layout="stack"]:not(.swapped).full #stream {
    height: calc(100vw * 0.5625) !important;
    max-height: calc(100vh - 200px);
    min-height: 50vh;
}
body[data-layout="stack"]:not(.swapped).full #analysts-holder,
body[data-layout="stack"]:not(.swapped).full #analysts {
    height: calc(100vh -  (100vw * 0.5625)) !important;
    max-height: 50vh;
    min-height: 200px;
    bottom: 0;
}

/* update 2*/

#chat-holder {
    height: 0 !important;
    flex-grow: 1 !important;
}

#avast-row .button {
    display: none;
}

body:not(.swapped):not([data-layout="stack"]) #stream:hover + #analysts-holder,
body:not(.swapped):not([data-layout="stack"]) #analysts-holder:hover {
    bottom: calc(calc(calc(100vh - calc(calc(calc(100vw - 340px) * 0.5625))) / 2) + 240px);
}

body:not(.swapped):not([data-layout="stack"]) #analysts-holder {
    transition: bottom .15s ease-in-out;
}



body.swapped[data-analysts] #stream {
    /* Center top for multiple analysts */
    right: calc(((100vw - 340px) - calc((100vw - 340px) * 0.308)) / 2 + 340px);
}
body.swapped[data-analysts="1"] #stream {
    /* Top left for one analyst */
    right: calc(100vw - calc(calc(100vw - 340px) * 0.308) - 5px)
}

#owc-banner {
    justify-content: center;
    background-color: rgba(140, 186, 17, 0.8);
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 4px 30px;
    background: radial-gradient(ellipse at top, rgba(140, 186, 17, 0.8), transparent 70%);
    padding-bottom: 4px;
    margin-bottom: -4px;
    width: auto;

}


div#player-holder {
    display: none !important;
}

        #chat-holder {
        height: 0 !important;
        flex-grow: 1 !important;
    }
 body:not(.swapped):not([data-layout="stack"]) #analysts-holder {
        transition: bottom .15s ease-in-out;
}
    body:not(.swapped):not([data-layout="stack"]) #stream:hover + #analysts-holder, body:not(.swapped):not([data-layout="stack"]) #analysts-holder:hover {

        bottom: calc(calc(calc(100vh - calc(calc(calc(100vw - 340px) * 0.5625))) / 2) + 240px);
    }


#avast-row .button {
    display: flex;
    margin-left: 2px;
}

body:not(.contenders) {
    background-image: url(https://winston.slmn.io/media/banner.png);background-size: 1500px;
}

body.contenders {
    background-color: #1b2129;
    background-image: url(https://d29lsjvrzx3tjj.cloudfront.net/5.20.1/assets/themes/ow-contenders/images/background/bg-swirl.jpg);
    background: #1b2129 url(https://d29lsjvrzx3tjj.cloudfront.net/5.20.1/assets/themes/ow-contenders/images/background/bg-swirl.jpg);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
}

body.swapped[data-analysts="1"][data-avast="active"] #stream {
    width: calc((100vw - 340px) * 0.25);
    height: calc(((100vw - 340px) * 0.25) * 0.5625);
    right: calc(100vw - calc(calc(100vw - 340px) * 0.25 * 1.5) - 5px);
}

.small-button:not(.stream-live):not(.active) {
    color: rgba(255,255,255,0.35);
}
.small-button.stream-live {
    color: rgba(255,255,255, 0.7);
}
.small-button {
    transition: color .3s;
}

div#top-bar {
    height: 8px;
    color: rgba(255,255,255,0.75);
    display: flex;
    padding: 4px 0;
    width: calc(100% - 12px);
    text-transform: uppercase;
    font-size: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

#top-bar #grab-bar {
    flex-grow: 1;
    margin: 0 6px;
    
    background-size: 15px;
    filter: brightness(20);
    height: 12px;
    transition: cursor .5s linear;
    transition-delay: 1s;
}
.small-button:hover:after {
    width: 200px;
}

#avast-row {
    margin-top: 5px;
    padding: 3px 4px;
}
/*
#analyst-menu {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}*/

body.swapped[data-analysts="1"][data-swimmer="active"]:not([data-layout="stack"]) #stream {
    
    width: calc((100vw - 340px) * 0.37);
    height: calc(((100vw - 340px) * 0.37) * 0.5625);
    right: calc(100vw - calc(calc(100vw - 340px) * 0.456 * 1.5));
    top: calc(((100vh - (((100vw - 340px) * 0.5625))) / 2));
}

#analyst-a_seagull iframe {
    margin-left: -5px;
}

body.swapped[data-analysts="1"][data-a_seagull="active"]:not([data-layout="stack"]) #stream {
    right: 345px;
}

#top-bar { opacity: 1; transition: opacity .2s ease; }
body.full #top-bar {
    width: auto;
    align-self: flex-end;
    margin-right: 6px;
	opacity: 0.5;
}

body.swapped.full[data-analysts="1"][data-avast="active"] #stream {
    width: calc((100vw) * 0.25);
    height: calc(((100vw) * 0.25) * 0.5625);;
    right: calc(100vw - calc(calc(100vw) * 0.25 * 1.5) - 5px);
    top: calc(((100vh - (((100vw) * 0.5625))) / 2) + 5px);
    left: auto;
}

body.contenders #top-bar {
    margin-top: -16px;
    position: relative;
    top: 16px;
}

.left-buttons [data-tooltip]:hover:after {
    top: calc(100% + 3px);
}


#stream-info {
    color: white;
    width: calc(100% - 8px);
    font-size: 14px;
}

.stream-thumb {
    height: 30px;
    background: gray;
    width: calc(16/9 * 30px);
    margin-right: 4px;
    border-radius: 2px;
}

.stream-top {
    display: flex;
}

.stream-username {
    color: #ffffff80;
}

.stream-bar {
    width: 100%;
    height: 4px;
    background: #333;
    margin: 2px 0px 4px 0px;
}

.stream-bar-inner {
    position: relative;
    background: #888;
    height: 100%;
    width: 0%; left: 0%;
    transition: width .2s ease, left .2s ease, opacity .2s ease;
}


.stream-bar-inner.loading {
    width: 100%;
    left: 0%;
    animation: loadflash 1s infinite;
}

@keyframes loadflash {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

.day {
    color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.day-top {
    display: flex;
    margin-bottom: 4px;
    margin-top: 8px;
}

.day-date {
    margin-left: 12px;
}

.day-name {
    font-weight: bold;
}

.day .team {
    width: 50px;
    height: 50px;
    background-size: 46px;
    background-repeat: no-repeat;
    background-position: center;
}

.day .teams {
    display: flex;
}

.day .game, .day .game a {
    display: flex;
    justify-content: center;
    margin: 4px;
}

.game.game-start {
    width: 100px;
    height: 50px;
    align-items: center;
    text-align: center;
    background: #333;
}