/* General styling */
* {
    box-sizing: border-box;
}
body {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
    margin: 0;
}
#app {
    background: url(img/main_background_history.jpg);
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}
#app.upcoming {
    background-image: url(img/main_background.jpg);
}
.stats-tab {
    line-height: 17px;
}
a {
    text-decoration: none;
    color:rgb(255,204,0);
}
h1 {
    text-align: center;
}
.hidden {
    display: none;
}
h2{
    color:rgb(255,204,0);
}
table {
    width: 100%;
    border: 1px solid white;
    border-collapse: collapse;
}
td, th {
    border: 1px solid white;
    padding: 5px;
}
.tac {
    text-align: center;
}
.tar {
    text-align: right;
}
.float-left {
    float: left;
}
span.tar {
    float: right;
}
.padding {
    padding: 10px;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.hidden {
    display: none;
}
.full-width-link {
    display: inline-block;
    width: 100%;
}
.no-wrap {
    overflow: hidden;
    white-space: nowrap;
}
ul {
    padding-left: 0;
    background: darkgreen;
    padding: 5px;
}
ul.infolist { /* This is for the list in info page */
    background: none;
}
ul.infolist li {
    margin-left: 15px;
}
ul.no-bullet {
    list-style-type: none;
}
.email {
    min-height: 12px;
}

/* Containers */

.container {
    flex: 1 0 auto;
}
footer {
    text-align: center;
    flex-shrink: 0;
    padding: 10px;
    background: darkgreen;
    border-radius: 4px;
}
/* Leagues */
.leagues li {
    display: inline;
    margin: 5px;
}
li.league a {
    min-height: 20px;
    line-height: 20px;
    padding-left: 35px;
    background-size: 30px;
    background-repeat: no-repeat;
}
li.league.EN1 a {
    background-image: url(img/vector/flags/en.svg);
}
li.league.EN2 a {
    background-image: url(img/vector/flags/en.svg) ;
}

li.league.EN3 a {
    background-image: url(img/vector/flags/en.svg) ;
}

li.league.DE a {
    background-image: url(img/vector/flags/de.svg) ;
}

li.league.IT a {
    background-image: url(img/vector/flags/it.svg) ;
}

li.league.ES a {
    background-image: url(img/vector/flags/es.svg) ;
}

li.league.FR a {
    background-image: url(img/vector/flags/fr.svg) ;
}

li.league.NL a {
    background-image: url(img/vector/flags/nl.svg) ;
}
li.league.PT a {
    background-image: url(img/vector/flags/pt.svg) ;
}
li.league.BR a {
    background-image: url(img/vector/flags/br.svg) ;
}
li.league.US a {
    background-image: url(img/vector/flags/us.svg) ;
}
li.league a, .upcoming-link {
    opacity: 0.5;
}
li.league a:hover, .upcoming-link:hover {
    opacity: 0.7;
}
.upcoming-link.active {
    opacity: 1;
    font-weight: bold;
    color:rgb(255,204,0);
}
li.league a.active{
    opacity: 1;
    font-weight: bold;
}
.league a, .upcoming-link {
    text-decoration: none;
    display: inline-block;
    color: white;
}
.league a:visited {
    color: white;
}
.league img {
    height: 20px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    margin-right: 6px;
}
/* Grid */
.row {
    width: 100%;
    float: left;
}
.col {
    padding: 5px;
    float: left;
    min-height: 1px; /* This is needed in case of empty cols (width is not set for empty elements) */
}
.col .col {
    padding: 0 5px; /* Removes extra padding in nested cols */
}
/* Col widths */
.half {
    width: 50%;
}
.one-third {
    width: 33%;
}
.two-third {
    width: 66%;
}
.one-fourth {
    width: 25%;
}
.col-1 {
    width: 16.66%;
}
.col-2 {
    width: 33.33%;
}
.col-3 {
    width: 50%;
}
.col-4 {
    width: 66.5%;
}
.col-5 {
    width: 83.3%;
}
.col-6 {
    width: 100%;
}
.one-third {
    width: 33%;
}
.header .oddsblock:nth-of-type(2) {
    width: 34%;
}
.oddsblock:nth-of-type(1) {
    border-radius: 4px 0 0 4px;
}
.oddsblock:nth-of-type(3) {
    border-radius: 0 4px 4px 0;
}
.date-header .header .oddsblock {
    border-radius: 4px;
}
.colSub {
    font-size: 100%;
    /* color: rgb(36, 32, 32); */
    color: rgb(199, 192, 192);
    /* font-weight: bold; */
    padding: 5px 10px;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis
}
.colTextBackground { 
    opacity: 0.85    ;
}
.colBackground { 
    opacity: 0.85;
}
.colBackgroundSecondary { 
    opacity: 0.75; 
}

.oddsblock {
    display: inline-block;
}
/* Games */
.games {
    width: 100%;
    float: left;
}
.game.row:hover .col {
    opacity: 0.7;
    cursor: pointer;
}
.game.row.no-hover:hover .col {
    opacity: 1;
    cursor: default;
}
.game.row:hover .game.row.no-opacity-change, .game.row:hover .game.row.no-opacity-change .col, div.info .game.row.no-opacity-change:hover, div.info .game.row.no-opacity-change:hover .col {
    opacity: 0.9;
    cursor: default;
}
.upcoming-link {
    margin: 10px;
}
.oddsblock {
    background: #595959;
    box-sizing: border-box;
    border: 1px solid black;
    float: left;
    padding: 0 10px;
    margin: 5px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.transparent {
    background-color: transparent;
    border: none;
}
.oddsblocks .oddsblock {
    margin: 0;
}
.oddsblock:nth-of-type(1) {
    border-right: 0;
}
.oddsblock:nth-of-type(3) {
    border-left: 0;
}
.oddssubblock {
    background: #595959;
    box-sizing: border-box;
    border: 0px solid black;
    float: left;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
}
.oddssubblockempty {
    /* background: #797777; */
    background: #1b6e36;
    box-sizing: border-box;
    border: 0px solid black;
    float: left;
    overflow: hidden; 
    white-space: nowrap;
    width: 100%;
    /* color: rgb(36, 32, 32); */
    color: rgb(201, 197, 197);
    /* font-weight: bold; */
}
.oddssubblockmpptxt {
    box-sizing: border-box;
    border: 0px solid black;
    float: left;
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 10px;
    color: gainsboro;
    font-weight: bold;
}
.oddssubblock span {
    padding: 0 10px;
}
/* Block colours */
.info {
    background: darkgreen;
    float: left;
    width: 100%;
    padding: 10px 0;
    margin-bottom: 5px;
}
.sticky {
    background: green;
    width: 100%;
    float: left;
    border-radius: 4px 4px 0 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    height: 53vh;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */

    background: 
    linear-gradient(#008000 33%, rgba(0,128,0, 0)),
    linear-gradient(rgba(0,128,0, 0), #008000 66%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,255,0, 0.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,255,0, 0.5), rgba(0,0,0,0)) 0 100%;
  background-color: #008000;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 150px, 100% 150px, 100% 50px, 100% 50px;

}
.sticky::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
.light-green {
    background-color: green;
}
.header .oddsblock {
    background: darkgreen;
    border: none;
}
.oddsblock.highest, .oddsblock.oneOfHighest {
    background: #EAEA44;
    color: #000000;
    font-weight: bold;
}
.info .oddsblock.highest, .info .oddsblock.oneOfHighest {
    background: #73701d;
}
.oddsblock.oneOfHighest {
    background: #e9ba1e;
}
.oddsblock.correctGuess {
    background: #10b118;
    color: #000000;
    font-weight: bold;
}
.oddsblock.correctGuessSecondary {
    background: #0c7711;
    color: #000000;
    font-weight: bold;
}
.oddsblock.oneOfCorrect {
    background: #2c64fe;
    color: #000000;
    font-weight: bold;
}
.oddsblock.oneOfCorrectSecondary {
    background: #1a43b3;
    color: #000000;
    font-weight: bold;
}
.oddsblock.incorrectGuess {
    background: #ad1d1d;
    color: #000000;
    font-weight: bold;
}
.oddsblock.incorrectGuessSecondary {
    background: #6d1818;
    color: #000000;
    font-weight: bold;
}
.oddsblock.okGuess {
    background: #2c64fe;
    color: #000000;
    font-weight: bold;
}
.oddsblock.okGuessSecondary {
    background:#1a43b3;
    color: #000000;
    font-weight: bold;
}
.oddssubblock.basicHome {
    /* background: #595959; */
    /* color: #000000; */
    background: #636262;
    color: #242323;
}
.oddssubblock.basicDraw {
    /* background: #797777; */
    /* color: #000000; */
    background: #757373;
    color: #242424;
}
.oddssubblock.basicAway {
    /* background: #595959; */
    /* color: #000000; */
    background: #636262;
    color: #242323;
}
.oddssubblock.basicHomeHighest {
    background: #39465a;
    color: rgb(201, 197, 197);
    /* font-weight: bold; */
}
.oddssubblock.basicDrawHighest {

    background: #39465a;
    color: rgb(201, 197, 197);
    /* background: #797777; */
    /* color: #000000; */
    /* font-weight: bold; */

    /* background: #797777; */
    /* color: #242323; */
}
.oddssubblock.basicAwayHighest {
    /* background:#595959; */
    background: #39465a;
    color: rgb(201, 197, 197);
    /* font-weight: bold; */
}
.secondaryOddsText {
    color: rgb(36, 32, 32);
    font-weight: bold;
    border: 1px solid transparent;
}
.burdenText {
    color: rgb(201, 197, 197);
    /* color: white; */
}

/* Transition */
/* This is the transition used in date toggle */
.slide-enter-active, .slide-leave-active  {
    transition: all .50s;
}
.slide-enter, .slide-leave-to
{
    transform: translateY(0);
    opacity: 0;
}
/* This is the transition used in upcoming/history */
.fade-enter-active {
    transition: opacity .25s linear;
 }
.fade-enter {
    opacity: 0;
 }
/* Icons */
.icon {
    background-size: 17px;
    background-position: 10px;
    background-repeat: no-repeat;
}
div.icon {
    background-position-x: center;
    min-height: 17px;
    line-height: 1em;
}
span.icon {
    display: inline-block;
    height: 17px;
    width: 28px;
    margin-bottom: -2px;
}
.icon.icon-left {
    background-position-x: 10px;
    padding-left: 3em;
}
div.icon.icon-left {
    float: left;
}
.icon.icon-right {
    background-position: right 5px center;
    padding-right: 3em;
}
div.icon.tac {
    background-position: left;
    padding-left: 25px;
}
div.icon-block {
    display: inline-block;
    min-width: 17px;
}
.INJURY_CHANGES_FAV {
    background-image: url(img/injury_changes_favorite.png);
}
.INJURY_TOO_BIG {
    background-image: url(img/injury_too_big.png);
}
.BURDEN_TOO_BIG {
    background-image: url(img/burden_too_big.png);
}
.FULL_SAFE_STYLE_PAIR {
    background-image: url(img/full_safe_style_pair.png);
}
.FULL_SAFE_DOM_PASSIVE {
    background-image: url(img/styles_varying_dom_passive_fs.png);
}
.STYLE_BASED_H2H {
    background-image: url(img/style_based_h2h.png);
}
.STREAK_TOO_LONG {
    background-image: url(img/streak_too_long.png);
}
.INCONSISTENT_FAV {
    background-image: url(img/inconsistent_favorite.png);
}
.DRAW_TOO_CLOSE {
    background-image: url(img/draw_too_close.png);
}
.LOW_SCORING {
    background-image: url(img/low_scoring.png);
}
.MANAGER_CHANGE {
    background-image: url(img/manager_change.png);
}
.MIXED_LG_STREAK {
    background-image: url(img/last_matches_streak.png);
}
.FORCED_STREAK {
    background-image: url(img/streak_data_forced.png);
}
.FAV_COUNTER_VS_POOR {
    background-image: url(img/styles_poor_cntr.png);
}
.NOT_NEEDED {
    background-image: url('img/sleep_not_needed.png');
}
.SPECIFIC {
    background-image: url('img/sleep_needed_red.png');
}
.NOT_SPECIFIC {
    background-image: url('img/sleep_needed_blue.png');
}
.CERTAIN {
    background-image: url('img/sleep_needed_dark.png');

}
.mpp_lineup {
    background-image: url('img/mpp_lineup.png');
}
.mpp_predicted {
    background-image: url('img/mpp_predicted.png');
}
.mpp_na {
    background-image: url('img/mpp_na.png');
}
.loading {
    background: url(img/loading_animated_history.svg) no-repeat top center;
    height: 200px;
}
.upcoming .loading {
    background-image: url(img/loading_animated_upcoming.svg);
 }
/* MEDIA QUERIES */

.short-text { display: none; }
/* DESKTOP */
@media screen and (min-width: 1201px) {
    .logo {
        min-height: 5%;
        min-width: 25%;
        max-width: 45%;
    }
    .result, .no-opacity-change .col span {
        margin-top: 1px;
    }
    .no-opacity-change .col span.full-text {
        display: block;
    }
}
/* MOBILE/TABLET */
@media screen and (max-width: 1200px) {
    
    .result, .no-opacity-change .col span {
        margin-top: 1px;
    }
    .no-opacity-change .col span.short-text {
        display: block;
    }

    .logo {
        min-height: 5%;
        min-width: 65%;
        max-width: 85%;
    }
    .short-text { 
        display: inline-block; 
        overflow: hidden; 
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .full-text { 
        overflow: hidden; 
        white-space: nowrap;
        text-overflow: ellipsis;
        display: none; 
    }

    body {
        margin: 0;
    }
    .app {
      max-width: 100%;
    }
    .col {
        padding: 1px;
    }
    .small-col-0, .col .col.small-col-0  {
        width: 0;
        padding: 0;
        display: none;
    }   
    .small-col-1 {
        width: 20%;
    }
    .small-col-3 {
        width: 49.5%;
    }
    .small-col-4 {
        width: 63%;
    }
    .small-col-6 {
        width: 100%;
    }
    .small-tal {
        text-align: left;
    }
    .oddsblock, .oddsblocks .oddsblock {
        padding: 0 2px;
        margin: 3px 0;
    }
    /*.percentages .oddsblock {
        min-width: 15%;
        max-width: 70%;
    }*/
    .no-opacity-change .colSub {
        padding: 0 2px;
        margin: 4px 0;
    }
    div.icon {
        background-size: 18px 18px;
        line-height: 20px;
    }
    .icon-text {
        line-height: 2em;
    }
    div.icon.tac {
        padding-left: 25px;
    }
    .icon.icon-right {
        padding-right: 20px;
    }
    .icon.icon-left {
        padding-left: 0;
        margin: 3px 0;
    }
    .leagues li {
        margin: 0 2px 0;
    }
  }