/* background-color: rgb(230, 212, 173); */

* {
    margin: 0;
    padding: 0;
    user-select: none;
    transition: 0.4s;
}

@font-face {
    font-family: 'Dalek';
    src: URL('../fonts/Dalek.ttf') format('truetype');
}

@font-face {
    font-family: 'DarumadropOne';
    src: URL('../fonts/DarumadropOne.ttf') format('truetype');
}

.DarumadropOne {
    font-family: "DarumadropOne", sans-serif;
}

.Dalek {
    font-family: 'Dalek';
}

.fontSize24 {
    font-size: 24px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
    color: #1a1a1a;
    background-color: #f5f7fa;
    overflow-x: hidden;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    padding: 5px 0;
    background: linear-gradient(180deg, #205400 0%, #2e7d32 100%);
    z-index: 1001;
}

.header-centered {
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    padding-left: 200px;
    position: relative;
}

#trueOddsLogoContainer {
    position: fixed;
    left: 15px;
    width: 222px;
    cursor: pointer;
}


#trueOddsLogoImg {
    position: relative;
    left: 0px;
}

#trueOddsLogoText {
    position: fixed;
    left: 67px;
    top: 21px;
    width: 172px;
    height: 28px;
    cursor: pointer;
    background-image: url(/img/OddsTeller-Text-172x28.png);
    background-size: cover;
    background-position: center;
}

#headerLines {
    position: relative;
    top: -75px;
}

#headerLine1 {
    position: relative;
    top: -5px;
    z-index: 1000;
}

#headerLine2 {
    position: relative;
    top: -1px;
}

#headerRightSection {
    position: relative;
    top: -143px;
    /*left: 755px;*/
    height: 80px;
    width: 150px;
}

#predictionsLinkGroup {
    position: absolute;
    top: 44px;
    width: 172px;
    height: 26px;
    line-height: 20px;

    background-color: #0d790d;
    border-top: 1px solid antiquewhite;
    border-radius: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

#trueOddsLogoContainer,
#predictionsLinkGroup,
#loginLinkGroup,
#seasonRangeGroup,
#hamburgerGroup {
    filter: brightness(1) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease-in-out;
}

#trueOddsLogoContainer:hover {
    filter: brightness(1.2) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}

#predictionsLinkGroup:hover,
#loginLinkGroup:hover,
#seasonRangeGroup:hover,
#hamburgerGroup:hover {
    filter: brightness(1.12) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}

#predictionsImg {
    position: absolute;
    left: 10px;
    top: 2px;
    transition: none;
}

#predictionsLinkText,
#betsLinkText {
    position: absolute;
    left: 41px;
    font-size: 20px;
    color: #bb9537;
    text-shadow: 1px 2px black;
    text-shadow: 2px 1px 1px black;
}

#betsLinkText,
#seasonRangeGroup,
#hamburgerGroup {
    opacity: 0;
}

#youtubeHeaderImg,
#settingsHeaderImg,
#seasonRangeImage,
#hamburgerImage {
    position: absolute;
    height: 22px;
    top: 12px;
    cursor: pointer;
    transition: filter 0.3s ease-in-out;
}

#hamburgerImage {
    left: 12px;
    height: 26px;
    width: 26px;
    display: block;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));

    background-image: url('../img/hamburger-32x32.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#seasonRangeImage {
    left: 12px;
    top: 10px;
    height: 28px;
    width: 28px;
    display: block;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 1));

    background-image: url('../img/season-31x36.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#youtubeHeaderImg {
    left: 0px;
    height: 22px;
    width: 30px;
}

#settingsHeaderImg {
    left: 48px;
}

#youtubeHeaderImg:hover,
#settingsHeaderImg:hover {
    filter: brightness(2) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7));
}

#loginLinkGroup {
    position: absolute;
    top: 9px;
    width: 80px;
    left: 89px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-color: #f8f9fa;
    background: linear-gradient(to bottom, #dbdfe4, #c6cbd1);
}

#seasonRangeGroup,
#hamburgerGroup {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    background-color: #f8f9fa;
    background: linear-gradient(to bottom, #dbdfe4, #c6cbd1);
}

#seasonRangeGroup,
#hamburgerGroup,
#loginLinkGroup,
#predictionsLinkGroup {
    box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
}

#seasonRangeGroup {
    top: 9px;
    left: 335px;
}

#hamburgerGroup {
    top: 14px;
    right: -5px;
}

#loginImg {
    position: absolute;
    top: 3px;
    left: 2px;
    height: 20px;
}

#loginText {
    position: absolute;
    top: 0px;
    left: 30px;
    font-size: 16px;
}




select,
input {
    appearance: none;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    height: 24px;
    min-width: 108px;
    cursor: pointer;
}

option {
    cursor: pointer;
}

label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

.dropdown-header.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
    color: grey;
}

#leagueLogo {
    position: absolute;
    top: 4px;
    /*margin-right: 5px;*/
    padding-right: 9px;
}

#league-dropdown {
    top: 5px;
    left: 37px;
    width: 170px;
    margin-bottom: 10px;
    z-index: 20000;
}

#league-dropdown .dropdown-item {
    padding-left: 13px;
}

#league-dropdown .dropdown-separator-item {
    margin-left: 0px !important;
    border-bottom: 1px dotted lightgray;
}

#league-dropdown .dropdown-item span,
#team-dropdown .dropdown-item span {
    overflow: hidden;
}

#seasonSection {
    position: absolute;
    top: -5px;
    left: 258px;
}

#seasonLogo {
    position: relative;
    top: 8px;
    padding-right: 9px;
}

#selectedSeason {
    position: relative;
    left: 20px;
}

#toSeasonSwitch {
    position: absolute;
    top: 12px;
    left: 151px;
    display: inline-block;
    width: 50px;
    height: 20px;
}

#toSeasonSwitch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 2px;
    bottom: 0px;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
    width: 58px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    /*background-color: #4caf50;*/
    background-color: #33b7b7;
}

input:checked+.slider:before {
    transform: translateX(37px);
}

#gamesSection {
    position: absolute;
    left: 604px;
    top: 4px;
}

#gamesDropdown {
    position: absolute;
    width: 45px;
    text-align: center;
    top: 1px;
    left: 51px;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}

#gamesDropdownLabel {
    padding-right: 10px;
    padding-bottom: 3px;
}

#gamesDropdown .dropdown-item {
    padding: 0px 0px;
    gap: 0px;
    height: 32px;
}

#gamesDropdown .dropdown-header,
#gamesDropdown .dropdown-item {
    justify-content: center;
}

#gamesDropdown .dropdown-header {
    padding-right: 4px;
}

#gamesDropdown::-webkit-scrollbar {
    width: 8px;
}

#gamesDropdown::-webkit-scrollbar-track {
    background: #f5f5f5;
}

#gamesDropdown::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

#teamLogo {
    position: absolute;
    top: 38px;
    padding-right: 9px;
}

#team-dropdown {
    position: absolute;
    top: 40px;
    left: 37px;
    width: 170px;
    line-height: 20px;
    z-index: 19000;
}

#league-dropdown .dropdown-list.show,
#team-dropdown .dropdown-list.show,
#fromSeason .dropdown-list.show,
#toSeason .dropdown-list.show,
#gamesDropdown .dropdown-list.show {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}

#league-dropdown .dropdown-list.show,
#fromSeason .dropdown-list.show,
#toSeason .dropdown-list.show,
#gamesDropdown .dropdown-list.show {
    max-height: calc(100vh - 45px);
}

#team-dropdown .dropdown-list.show {
    max-height: calc(100vh - 80px);
}

#team-dropdown .selected-item {
    margin-left: 6px;
}

#team-dropdown::-webkit-scrollbar,
#match-details-tooltip::-webkit-scrollbar {
    width: 8px;
}

#team-dropdown::-webkit-scrollbar-thumb,
#match-details-tooltip::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

#team-dropdown::-webkit-scrollbar-thumb:hover,
#match-details-tooltip::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

#team-dropdown::-webkit-scrollbar-track,
#match-details-tooltip::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

#venueSection {
    position: absolute;
    top: 30px;
    left: 252px;
}

#stadiumLogo {
    position: relative;
    top: 9px;
    padding-right: 7px;
}

#venue {
    position: relative;
    left: 3px;
    width: 100px;
}

#venue-dropdown,
#outcome-dropdown {
    z-index: 500;
}

#venue-dropdown .hideImg {
    width: 0px !important;
}

#venue-dropdown img,
#fromSeason img,
#toSeason img,
#gamesDropdown img {
    display: none;
}

#venue-dropdown .selected-item,
#fromSeason .selected-item,
#toSeason .selected-item {
    padding-left: 3px !important;
}

#venue-dropdown .dropdown-item {
    padding-left: 17px !important;
}

#outcomeSection {
    position: absolute;
    top: 39px;
    left: 442px;
}

#expectedOutcomeLogo {
    position: absolute;
    top: 0px;
    left: 5px;
    padding-right: 8px;
}

#outcome-dropdown {
    left: 40px !important;
    top: 1px;
}

.custom-dropdown {
    position: absolute;
    left: 38px;
    top: 10px;
    width: 108px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.dropdown-item span,
.dropdown-item img,
.selected-item img {
    pointer-events: none;
}

.dropdown-header {
    height: 22px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    line-height: 20px;
}

.custom-dropdown div {
    transition: none;
}

.dropdown-list {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;

    z-index: 1000;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: 0;
}

.dropdown-list.show {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


#fromSeason {
    left: 32px;
    max-height: calc(100vh - 45px);
}

#toSeason {
    left: 224px;
}

.dropdown-item {
    padding: 3px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#fromSeason .dropdown-item,
#toSeason .dropdown-item {
    height: 26px;
}

.dropdown-item:hover {
    background: #9fc7ff;
}

.dropdown-item img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 3px;
}

.selected-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 5px;
}

.selected-item img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 3px;
}

.dropdown-item.selected {
    background: #1967d2;
    color: whitesmoke;
}

.dropdown-separator-item {
    color: #838181;
    background-color: #f5f5f5;
    pointer-events: none;
    cursor: not-allowed;
    font-style: italic;
    padding-left: 7px !important;
}

.dropdown-separator-item span {
    opacity: 0.7;
}

.dropdown-item.dropdown-separator-item {
    border-top: 1px solid #ddd;
    /* Separator line for clarity */
}



.body-centered {
    position: relative;
    /* Change from absolute to relative */
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
    /* Keep top spacing from header */
    max-width: 100vw !important;
    width: 1020px;
    min-height: calc(100vh - 70px - 212px);
    min-height: calc(100vh - 80px - 560px);
    padding: 5px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.body {
    display: flex;
    flex-direction: column;
}

.left-body-shadow,
.right-body-shadow {
    position: absolute;
    height: 100%;
    width: 60px;
    top: -5px;
    padding-top: 5px;
}

.left-body-shadow {
    left: 0px;
    background: linear-gradient(to right, #f5f7fa, whitesmoke);
}

.right-body-shadow {
    right: 0px;
    background: linear-gradient(to left, #f5f7fa, whitesmoke);
}


td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
}

.leftSideHeader,
.sumTd {
    background-color: #f4f4f4;
}

.oddsRangeTable {
    width: 860px !important;
    table-layout: fixed;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    font-size: 12px;
    margin: 5px 0;
    margin-bottom: 10px;
}

.oddsRangeTable th,
.oddsRangeTable td {
    border: 1px solid #e0e0e0;
    height: 23px;
    padding: 4px;
}

.oddsRangeTable th:first-child {
    width: 132px;
}

.oddsRangeTable td,
.oddsRangeTable th:not(:first-child) {
    width: 102px;
}

.rangeHeaders th {
    border-bottom: 2px double rgb(217 217 217) !important;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.30px;
    font-size: 11px;
    padding: 4px 8px;
    border-right: 1px solid rgb(227, 227, 227);
}

.oddsRangeHeader {
    border-bottom: 2px double rgb(101, 101, 101);
    border-left: 2px solid white !important;
    font-size: 12px !important;
}

.oddsRangeHeader,
.trueOddsHeader,
.tooltip-text-main,
.profitHeader {
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: 0.22px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.trueOddsHeader,
.profitHeader {
    color: #205400;
}

.oddsRangeLarger,
.occurrencesLarger,
.profitHeaderLarger {
    font-size: 12.8px;
}

.trueOddsLarger {
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
}

.papirRangeHeaderTr .oddsRangeHeader {
    background: linear-gradient(to left, rgb(88, 175, 0), whitesmoke);
}

.papirRange1 {
    background-color: rgb(88, 175, 0);
    background: linear-gradient(to right, rgb(88, 175, 0), rgb(99, 198, 0));
}

.papirRange2 {
    background-color: rgb(99, 198, 0);
    background: linear-gradient(to right, rgb(99, 198, 0), rgb(109, 217, 0));
}

.papirRange3 {
    background-color: rgb(109, 217, 0);
    background: linear-gradient(to right, rgb(109, 217, 0), rgb(119, 236, 0));
}

.papirRange4 {
    background-color: rgb(119, 236, 0);
    background: linear-gradient(to right, rgb(119, 236, 0), rgb(128, 255, 0));
}

.papirRange5 {
    background-color: rgb(128, 255, 0);
    background: linear-gradient(to right, rgb(128, 255, 0), rgb(170, 255, 0));
}

.papirRange6 {
    background-color: rgb(109, 217, 0);
    background: linear-gradient(to right, rgb(88, 175, 0), rgb(170, 255, 0));
}

.morelikelyHeaderTr .oddsRangeHeader {
    background: linear-gradient(to left, rgb(170, 255, 0), whitesmoke);
}

.moreLikelyRange1 {
    background-color: rgb(170, 255, 0);
    background: linear-gradient(to right, rgb(170, 255, 0), rgb(191, 255, 0));
}

.moreLikelyRange2 {
    background-color: rgb(191, 255, 0);
    background: linear-gradient(to right, rgb(191, 255, 0), rgb(212, 255, 0));
}

.moreLikelyRange3 {
    background-color: rgb(212, 255, 0);
    background: linear-gradient(to right, rgb(212, 255, 0), rgb(233, 255, 0));
}

.moreLikelyRange4 {
    background-color: rgb(233, 255, 0);
    background: linear-gradient(to right, rgb(233, 255, 0), rgb(255, 255, 0));
}

.moreLikelyRange5 {
    background-color: rgb(255, 255, 0);
    background: linear-gradient(to right, rgb(255, 255, 0), rgb(255, 230, 0));
}

.moreLikelyRange6 {
    background-color: rgb(212, 255, 0);
    background: linear-gradient(to right, rgb(170, 255, 0), rgb(255, 230, 0));
}

.lessLikelyHeaderTr .oddsRangeHeader {
    background: linear-gradient(to left, rgb(255, 230, 0), whitesmoke);
}

.lessLikelyRange1 {
    background-color: rgb(255, 230, 0);
    background: linear-gradient(to right, rgb(255, 230, 0), rgb(255, 205, 0));
}

.lessLikelyRange2 {
    background-color: rgb(255, 205, 0);
    background: linear-gradient(to right, rgb(255, 205, 0), rgb(255, 180, 0));
}

.lessLikelyRange3 {
    background-color: rgb(255, 180, 0);
    background: linear-gradient(to right, rgb(255, 180, 0), rgb(255, 155, 0));
}

.lessLikelyRange4 {
    background-color: rgb(255, 155, 0);
    background: linear-gradient(to right, rgb(255, 155, 0), rgb(255, 130, 0));
}

.lessLikelyRange5 {
    background-color: rgb(255, 130, 0);
    background: linear-gradient(to right, rgb(255, 130, 0), rgb(255, 105, 0));
}

.lessLikelyRange6 {
    background-color: rgb(255, 180, 0);
    background: linear-gradient(to right, rgb(255, 230, 0), rgb(255, 105, 0));
}

.unlikelyHeaderTr .oddsRangeHeader {
    background: linear-gradient(to left, rgb(255, 105, 0), whitesmoke);
}

.unlikelyRange1 {
    background-color: rgb(255, 105, 0);
    background: linear-gradient(to right, rgb(255, 105, 0), rgb(255, 80, 0));
}

.unlikelyRange2 {
    background-color: rgb(255, 80, 0);
    background: linear-gradient(to right, rgb(255, 80, 0), rgb(255, 55, 0));
}

.unlikelyRange3 {
    background-color: rgb(255, 55, 0);
    background: linear-gradient(to right, rgb(255, 55, 0), rgb(255, 30, 0));
}

.unlikelyRange4 {
    background-color: rgb(255, 30, 0);
    background: linear-gradient(to right, rgb(255, 30, 0), rgb(255, 0, 0));
}

.unlikelyRange5 {
    background-color: rgb(220, 0, 0);
    background: linear-gradient(to right, rgb(255, 30, 0), rgb(220, 0, 0));
}

.unlikelyRange6 {
    background-color: rgb(255, 55, 0);
    background: linear-gradient(to right, rgb(255, 105, 0), rgb(220, 0, 0));
}


.tooltip-container {
    position: relative;
    cursor: help;
}

.tooltip-text-main {
    display: inline-block;
    text-align: center;
    font-size: 11px;
}

.tooltip-container::after {
    position: absolute;
    content: "?";
    top: 1.5px;
    right: -8.5px;
    font-size: 9.6px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    border: 1px solid #9f9f9f;
    border-radius: 50%;
    color: #7c7c7c;
    cursor: help;
}

.tooltip-container:hover .tooltip-popup {
    position: absolute;
    display: block;
    bottom: 100%;
    left: 89px;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
}

.tooltip-popup {
    position: absolute;
    display: none;
    pointer-events: none;
}

.tooltip-container:hover .tooltip-popup::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}


#papirforma-data-row-realOdds td,
#moreLikely-data-row-realOdds td,
#lessLikely-data-row-realOdds td,
#unlikely-data-row-realOdds td {
    padding: 5.6px;
    font-size: 15px;
    font-weight: bold;
    user-select: text;
}

#papirforma-data-row-events td,
#moreLikely-data-row-events td,
#lessLikely-data-row-events td,
#unlikely-data-row-events td {
    position: relative;
    padding: 0px;
}

#papirforma-data-row-profit td,
#moreLikely-data-row-profit td,
#lessLikely-data-row-profit td,
#unlikely-data-row-profit td {
    user-select: text;
}

.stat-button {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    font-size: 12px;
    color: #495057;
    margin: 1px;
    margin-top: 3px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 -1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
}

.stat-button:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 -1px 0 rgba(255, 255, 255, 0.2) inset,
        0 3px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.stat-button[data-pressed='true'] {
    background: linear-gradient(to bottom, #dee2e6, #ced4da);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2) inset,
        0 1px 0 rgba(255, 255, 255, 0.2);

    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(1px);
}

#seasonRangeGroup[data-pressed='true'],
#hamburgerGroup[data-pressed='true'] {
    background: linear-gradient(to bottom, #bcbfc3, #a6abb1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4));
}

#seasonRangeGroup[data-pressed='true'] {
    transform: translateY(1px);
    /*transform: translateY(6px);*/
}

#hamburgerGroup[data-pressed='true'] {
    transform: translateY(3px);
}

.stat-button:not([style*="cursor: pointer"]) {
    opacity: 0.7;
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef) !important;
    transform: translateY(0px);
    box-shadow: none;
    cursor: default;
}

.leftRowSpan {
    left: 15px;
    background: linear-gradient(to bottom, #e8f4e6, #d1e7cd);
}

.rightRowSpan {
    right: 15px;
    background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

.leftRowSpan:hover {
    background: linear-gradient(to bottom, #d1e7cd, #b8daaf);
}

.rightRowSpan:hover {
    background: linear-gradient(to bottom, #e9ecef, #dee2e6);
}

.midRowSpan {
    line-height: 32px;
    text-align: center;
    pointer-events: none;
    font-weight: bold;
    font-size: 14px;
    color: #6c757d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


#match-details-tooltip {
    position: fixed;
    left: auto;
    right: auto;
    min-width: 200px;
    max-width: 420px;
    max-height: calc(100vh - 135px);
    background-color: white;
    border: 0px !important;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    filter: brightness(1) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    z-index: 1000;
    transition: none !important;
}


#match-details-tooltip::-webkit-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
}


.season-header-row td {
    height: 24px;
    background: linear-gradient(to bottom, darkblue, rgb(0, 0, 70));
    color: whitesmoke;
    font-size: 14px;
    font-style: italic;
}

.close-button {
    position: absolute;
    top: -2px;
    right: -0px;
    width: 22px;
    height: 22px;
    line-height: 11px;
    color: antiquewhite;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    background: linear-gradient(to bottom, #d30000, maroon);
    padding: 0 4px;
    margin: 2px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1001;
}

.close-button:hover {
    color: goldenrod;
}

.match-header-row {
    border-color: transparent;
    border-left: 1px solid #ddd;
}

.match-header-td {
    background-color: gainsboro;
    border: none !important;
}

.match-header,
.match-table-round,
.match-table-date {
    height: 20px;
    line-height: 20px;
}

.match-header {
    position: relative;
    top: 2px;
    display: flex;
    justify-content: space-between;
}

.match-table-round {
    position: relative;
    top: -2px;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-left: 5px;
}

.match-table-round::first-letter {
    font-size: 12px;
    font-weight: bold;
}

.roundNumber {
    font-size: 12px;
    font-weight: bold;
}

.match-table-date {
    position: relative;
    top: -2px;
    font-size: 11px;
    margin-right: 5px;
    color: #343434;
}

.match-table td {
    padding: 0px;
    vertical-align: middle;
    line-height: 12px;
}

.match-table .logo-cell {
    border-right: none;
    padding: 1px;
    width: 30px;
    white-space: nowrap;
}

.popupTeamLogo {
    position: relative;
    top: 1px;
    display: flex;
    height: 20px;
    width: 20px;
    padding-left: 5px;

    padding-bottom: 2px;
}

.team-cell,
.score-cell {
    font-family: LivesportFinderLatin, Adjusted Arial Fallback, Arial, sans-serif;
    font-size: 13px !important;
}

.match-table .team-cell {
    border-left: none;
    border-right: none;
    text-align: left;
    padding-left: 7px;
    width: 143px;
    padding-top: 2px;
}

.match-table .score-cell {
    border-left: none;
    text-align: right;
    padding-right: 16px;
    min-width: 30px;
    max-width: 30px;
    padding-top: 2px;
}

.match-table .odds-cell {
    min-width: 54px;
    max-width: 54px;
    font-size: 16px;
}

.match-table .no-bottom-border {
    border-bottom: none;
}

.match-table .no-top-border {
    border-top: none;
}

.match-table-last-row {
    border-bottom: 1px solid #ddd;
}

.match-table-row-spacer {
    height: 0px;
}

.match-table-row-spacer:last-of-type {
    height: 1px !important;
}

.oddsIsOutcome {
    background-color: rgb(255, 217, 0);
    box-shadow: unset !important;
}

.EventWon {
    background-color: rgb(0, 224, 0);
    box-shadow: inset 0 0 0 4px green !important;
}

.EventLost {
    box-shadow: inset 0 0 0 4px red;
}

.greenTeam {
    background-color: #c9ffc9;
    font-weight: bold;
}

.redTeam {
    background-color: #ffc9c9;
    font-weight: bold;
}

.drawTeam {
    background-color: #feffdb;
}






.myHidden {
    display: none;
}





.popup-controls {
    position: absolute;
    top: 0;
    right: 2px;
    display: flex;
    gap: 4px;
    padding: 4px;
}

.popup-controls-with-season {
    top: 2px;
}



.pin-button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    transition: color 0.2s;
    position: absolute;
    right: 18px;
    top: -4px;
    z-index: 2000;
}

.pin-button:hover {
    color: #000;
}

.close-button {
    margin-left: 4px;
}






.footer-centered {
    position: relative;
    top: 50px;
    max-width: 1000px;
    margin: 0 auto;
    height: 100px;
}

.footer {
    position: relative;
    top: auto;
    width: 100%;
    height: 548px;
    background-color: #0f0f0f;
}

footer {
    margin-bottom: 38px;
    font-size: 14px;
    text-align: center;
    position: relative;
}

#GiveSpace2 {
    margin-top: 15px;
}

#FooterLineContainer {
    position: absolute;
    bottom: 0px;
    font-family: Times New Roman, Times, serif;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 100%;
    line-height: 25px;
    background-color: black;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #e1e1e1;
}

.FooterLineText {
    display: inline-block;
    margin: 0px 10px;
}

#unLimited {
    font-size: 12px;
    font-style: italic;
}

#Socialize {
    margin-top: 50px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #e1e1e1;
}

#SocializeLine {
    background-repeat: repeat-x;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    min-width: 225px;
    width: 48%;
    height: 10px;
}

.f26 {
    font-size: 26px;
}

#KolosWorksFooter {
    margin-top: 25px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #e1e1e1;
}

#KolosWorksR {
    display: inline-block;
    width: 0;             
    position: relative;
    top: -14px;           
    left: 2px;            
    font-size: 16px;      
}

.KWfooterCap {
    font-size: 36px;
    color: white;
}

/*
img.BnW {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    cursor: pointer;
}

.BnW {
    filter: grayscale(100%);
}
*/




.FooterIcon {
    width: 80px;
    height: 80px;
    margin-left: 23px;
    margin-right: 23px;
    margin-top: 30px;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
}

.FooterIcon:not(.BnW) {
    filter: none;
}

.footerInch {
    margin-left: 13px;
    margin-right: 13px;
    margin-top: 20px;
    margin-bottom: 0px;
    height: 100px;
    width: 100px;
}

.footerNoInch {
    margin-left: 23px;
    margin-right: 23px;
    margin-top: 30px;
    margin-bottom: 10px;
    height: 80px;
    width: 80px;
}


#youtubeLinkText,
#settingsLinkText {
    opacity: 0;
    display: none;
}




#predictionsLinkGroup::after,
#loginLinkGroup::after,
#settingsLinkGroup::after,
#youtubeLinkGroup::after,
#leagueLogoTooltip::after,
#teamLogoTooltip::after,
#fromSeasonLogoTooltip::after,
#toSeasonSwitchTooltip::after,
#toSeasonLogoTooltip::after,
#venueLogoTooltip::after,
#outcomeLogoTooltip::after,
#gamesSection::after {
    content: attr(data-tooltip);
    position: absolute;
    transform: translateX(-50%) translateY(-.5em);
    white-space: nowrap;
    padding: .4em .6em;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    border-radius: 4px 0px 0px 4px;
    opacity: 0;
    pointer-events: none;
    /* don’t block mouse events */
    transition: opacity .2s ease, transform .2s ease;
    /*z-index: 990000;*/
}

#leagueLogoTooltip::after,
#teamLogoTooltip::after,
#fromSeasonLogoTooltip::after,
#toSeasonSwitchTooltip::after,
#toSeasonLogoTooltip::after,
#venueLogoTooltip::after,
#outcomeLogoTooltip::after,
#gamesSection::after {
    position: absolute;
    text-align: center;
    border-radius: 4px;
    background: rgb(155 83 8 / 85%);
}

#leagueLogoTooltip:hover::after,
#teamLogoTooltip:hover::after,
#fromSeasonLogoTooltip:hover::after,
#toSeasonSwitchTooltip:hover::after,
#toSeasonLogoTooltip:hover::after,
#venueLogoTooltip:hover::after,
#outcomeLogoTooltip:hover::after,
#gamesSection:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#toSeasonLogoTooltip.hideTooltip:hover::after {
    opacity: 0;
}

#predictionsLinkGroup::after {
    top: 35px;
    left: -12px;
}

#loginLinkGroup::after {
    top: 70px;
    left: -12px;
}

#settingsLinkGroup::after {
    top: 80px;
    left: 135px;
    border-radius: 4px;
}

#youtubeLinkGroup::after {
    top: 80px;
    left: 135px;
    border-radius: 4px;
}

#leagueLogoTooltip::after,
#teamLogoTooltip::after {
    top: 75px;
    left: 122px;
    width: 152px;
}

#fromSeasonLogoTooltip::after {
    top: 80px;
    left: 86px;
    width: 90px;
}

#toSeasonSwitchTooltip::after {
    top: 80px;
    left: 182px;
    width: 282px;
}

#toSeasonLogoTooltip::after {
    top: 80px;
    left: 278px;
    width: 90px;
}

#venueLogoTooltip::after {
    top: 75px;
    left: 344px;
    width: 90px;
}

#outcomeLogoTooltip::after {
    top: 75px;
    left: 536px;
    width: 90px;
}

#gamesSection:after {
    top: 71px;
    left: 45px;
    width: 86px;
}







@media (min-width: 1920px) {
    .body-centered {
        width: 1200px;
    }

    .header-centered {
        max-width: 1089px;
    }

    #headerRightSection {
        left: 765px;
    }

}

/*
@media (min-width: 1285px) and (max-width: 1300px) {
    * {
        transition: unset;
    }
}
    */



@media (min-width: 100px) {


    #headerLines {
        top: unset;
        width: 705px;
    }

    #headerRightSection {
        position: fixed;
        top: 0px;
        left: unset;
        right: 40px;
    }

    #headerLines {
        position: relative;
        left: unset;
        padding-left: 5px;
    }

    #headerLines {
        margin: 0 auto;
    }

    .header-centered {
        padding-left: 20px;
    }
}

@media (min-width: 1367px) {
    #trueOddsLogoContainer {
        left: calc(50% - 660px);
    }

    #headerRightSection {
        right: calc(50% - 630px);
    }
}

@media (max-width: 1367px) {
    #settingsLinkGroup::after {
        top: 80px;
        left: 155px;
        border-radius: 4px;
    }

    #youtubeLinkGroup::after {
        top: 80px;
        left: 155px;
        border-radius: 4px;
    }
}

@media (max-width: 1350px) {
    .header-centered {
        padding-left: 60px;
    }

    #headerRightSection {
        width: 122px;
        right: 20px;
    }

    #loginText {
        /*display: none;*/
        opacity: 0;
    }

    #loginLinkGroup {
        width: 30px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #loginImg {
        left: 5.5px;
    }

    #predictionsLinkText {
        opacity: 0;
        /*display: none;*/
    }

    #betsLinkText {
        opacity: 1;
        /*display: block;*/
        left: 52px;
    }

    #predictionsLinkGroup {
        width: 121px;
    }

    #predictionsImg {
        left: 21px;
    }

    #settingsLinkGroup::after,
    #youtubeLinkGroup::after {
        left: 106px;
        border-radius: 4px 0px 0px 4px;
    }

}






@media (max-width: 1275px) {
    .header-centered {
        padding-left: 5px;
    }

    #trueOddsLogoText {
        top: 5px;
        left: 63px;
        width: 106px;
        height: 61px;
        background-image: url(/img/OddsTeller-Text-106x61.png);
    }

}

@media (max-width: 1150px) {
    .header-centered {
        padding-left: 0px;
    }

    #trueOddsLogoContainer {
        width: 100px;
    }

    #trueOddsLogoText {
        left: 67px;
        width: 39px;
        background-image: url(/img/OddsTeller-Text-39x61.png);
        background-image: none;
    }

    #seasonSection {
        left: 228px;
    }

    #gamesSection {
        left: 574px;
    }

    #venueSection {
        left: 222px;
    }

    #outcomeSection {
        left: 412px;
    }

    #venueLogoTooltip::after {
        left: 314px;
    }

    #outcomeLogoTooltip::after {
        left: 506px;
    }
}

@media (max-width: 1045px) {
    #trueOddsLogoText {
        /*display: none;*/
        opacity: 0;
    }

    #headerLines {
        padding-right: 23px;
    }
}

@media (max-width: 999px) {
    #headerLines {
        width: 670px;
    }

    #headerRightSection {
        width: 82px;
    }

    #settingsHeaderImg {
        left: unset;
        right: 52px;
    }

    #loginLinkGroup {
        left: unset;
        right: 0px;
    }

    #youtubeHeaderImg {
        left: unset;
        right: 48px;
        top: 46px;
    }

    #predictionsLinkGroup {
        width: 35px;
        right: 0px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #predictionsImg {
        left: 6px;
    }

    #betsLinkText {
        opacity: 0;
        /*display: none;*/
    }

    #settingsLinkGroup::after,
    #youtubeLinkGroup::after {
        left: 66px;
        border-radius: 4px 0px 0px 4px;
    }


}




@media (min-width: 760.1px) and (max-width: 1200px) {

    #loginLinkGroup:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (min-width: 760.1px) and (max-width: 999px) {

    #predictionsLinkGroup:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (min-width: 760.1px) {

    #settingsLinkGroup:hover::after,
    #youtubeLinkGroup:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 945px) {
    #headerLines {
        width: 570px;
        padding-right: 40px;
    }

    select,
    input {
        min-width: 77px;
    }

    .slider {
        width: 40px;
    }

    input:checked+.slider:before {
        transform: translateX(18px);
    }

    #toSeason {
        left: 175px;
    }

    #toSeasonSwitch {
        left: 121px;
    }

    .custom-dropdown {
        width: 77px;
    }

    #outcomeSection {
        left: 363px;
    }

    #outcome-dropdown .dropdown-item {
        padding-left: 2px;
        gap: 3px;
    }

    .maybe-to {
        font-size: 8px;
        /*display: none;*/
    }

    #gamesSection {
        left: 494px;
    }

    #fromSeasonLogoTooltip::after {
        left: 71px;
        width: 60px;
    }

    #venueLogoTooltip::after {
        left: 299px;
        width: 60px;
    }

    #toSeasonSwitchTooltip::after {
        top: 80px;
        left: 143px;
        width: 204px;
    }

    #toSeasonLogoTooltip::after {
        left: 214px;
        width: 61px;
    }

    #outcomeLogoTooltip::after {
        left: 441px;
        width: 60px;
    }
}

@media (max-width: 850px) {
    #headerLines {
        width: 555px;
        padding-right: 10px;
        padding-left: 0px;
    }

    #leagueLogo,
    #teamLogo {
        left: 5px;
    }

    #gamesSection {
        top: -16px;
    }

    #gamesDropdown {
        top: 21px;
        left: 0px;
    }

    #gamesDropdownLabel {
        position: absolute;
        top: 46px;
        left: 1px;
    }

    #expectedOutcomeLabel {
        position: relative;
        top: 1px;
        left: 1px;
    }

    #gamesSection:after {
        top: 91px;
        left: 23px;
        width: unset;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 800px) {
    #headerLines {
        width: 525px;
    }

    #league-dropdown,
    #team-dropdown {
        width: 140px;
    }

    #league-dropdown .dropdown-item {
        padding-left: 8px;
        padding-right: 0px;
        gap: 6px;
    }

    #team-dropdown .dropdown-item {
        padding-right: 4px;
    }

    #seasonSection {
        left: 198px;
    }

    #gamesSection {
        left: 544px;
    }

    #venueSection {
        left: 192px;
    }

    #outcomeSection {
        left: 333px;
    }

    #gamesSection {
        left: 465px;
    }

    #loginText,
    #youtubeLinkText,
    #settingsLinkText,
    #predictionsLinkText {
        transition: none;
    }

    #predictionsLinkGroup::after {
        left: -12px;
    }

    #loginLinkGroup::after {
        left: -11px;
    }

    #settingsLinkGroup::after,
    #youtubeLinkGroup::after {
        left: 135px;
        left: 68px;
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after {
        left: 107px;
        width: 122px;
    }

    #fromSeasonLogoTooltip::after {
        left: 71px;
        width: 62px;
    }

    #toSeasonSwitchTooltip::after {
        left: 143px;
        width: 204px;
    }

    #toSeasonLogoTooltip::after {
        left: 213px;
        width: 60px;
    }

    #venueLogoTooltip::after {
        left: 269px;
        width: 60px;
    }

    #outcomeLogoTooltip::after {
        left: 411px;
        width: 60px;
    }

    #leagueLogoTooltip:hover::after,
    #teamLogoTooltip:hover::after,
    #fromSeasonLogoTooltip:hover::after,
    #toSeasonSwitchTooltip:hover::after,
    #toSeasonLogoTooltip:hover::after,
    #venueLogoTooltip:hover::after,
    #outcomeLogoTooltip:hover::after,
    #gamesSection:hover::after {
        display: none !important;
    }
}

@media (max-width: 760px) {
    #headerLines {
        width: 375px;
    }

    #seasonSection,
    #gamesSection {
        opacity: 0;
        display: none;
    }

    #outcomeSection {
        top: 4px;
        left: 190px;
        z-index: 1001;
    }

    #seasonRangeGroup,
    #hamburgerGroup {
        opacity: 1;
    }

    #seasonSection,
    #hamburgerMenuCollector {
        border-radius: 0 0 10px 10px;
        box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #seasonSection {
        position: absolute;
        top: 75px;
        left: -5px;
        width: 400px;
        height: 34px;
        padding-left: 10px;
        /*background-color: #2e7d32;*/
        background: linear-gradient(to bottom, #2e7d32, #2e7d32cc);
    }

    #hamburgerMenuCollector {
        position: fixed;
        right: -7px;
        left: unset;
        top: 80px;
        width: 180px;
        height: 162px;

        background: linear-gradient(to right, rgb(255 255 255), rgb(36 82 109 / 80%));
        border-top: antiquewhite solid 1px;
        opacity: 0;
        display: none;
    }

    #seasonLogo {
        top: -2px;
    }

    #fromSeason {
        left: 42px;
        top: 0px;
        width: 140px;
    }

    #toSeasonSwitch {
        top: 2px;
        left: 187px;
    }

    #toSeason {
        top: 0px;
        left: 235px;
    }

    #gamesSection {
        position: absolute;
        top: 54px;
        left: 335px;
    }

    #gamesDropdown {
        width: 52px;
    }

    #gamesDropdownLabel {
        top: 9px;
        left: 9px;
        font-size: 9px;
    }

    #gamesDropdown .dropdown-list.show,
    #fromSeason .dropdown-list.show,
    #toSeason .dropdown-list.show {
        max-height: calc(100vh - 115px);
    }

    @media (overflow-block: scroll) {
        #toSeason .dropdown-list.show .dropdown-item {
            padding-left: 4px;
        }
    }

    #loginGroup,
    #predictionsGroup,
    #youtubeGroup,
    #settingsGroup {
        position: absolute;
        width: 170px;
        height: 40px;
        border: 1px dotted antiquewhite;
        cursor: pointer;
    }

    #loginGroup {
        top: -1px;
    }

    #settingsGroup {
        top: 40px;
    }

    #youtubeGroup {
        top: 80px;
    }

    #predictionsGroup {
        top: 120px;
    }

    #loginLinkGroup {
        top: 7px;
        left: 6px;
        right: unset;
        line-height: 20px;
    }

    #loginText {
        position: absolute;
        /*left: 38.5px;*/
        left: 42px;
        font-size: 18px;
        color: #cfd8e1;
        color: #e7e9eb;
        color: #f5f5f5;
        text-shadow: -1px 2px 0px rgb(0 0 0 / 80%);
    }

    .onlyNow {
        font-size: 24px;
    }

    #youtubeLinkText,
    #settingsLinkText {
        position: absolute;
        left: 45px;
    }

    #predictionsLinkText {
        font-size: 18px;
    }

    #youtubeHeaderImg:hover {
        filter: unset;
    }

    #loginGroup:hover,
    #settingsGroup:hover,
    #youtubeGroup:hover,
    #predictionsGroup:hover {
        filter: brightness(1.12) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
        background-color: #007bff;
        /*background-color: #2d9732;*/
        /*background-color: #2661e5;*/
        background: linear-gradient(to right, #007bff, #58a7fc);
        background: linear-gradient(to left, #0060c7, #bfdeff);
    }

    #predictionsLinkGroup {
        top: 6px;
        left: 5px;
        right: unset;
        line-height: 18px;
        background-color: unset;
    }

    #youtubeHeaderImg {
        top: 9px;
        left: 7px;
    }

    #settingsHeaderImg {
        top: 9px;
        left: 11px;
    }

    #predictionsLinkGroup::after,
    #loginLinkGroup::after,
    #settingsLinkGroup::after,
    #youtubeLinkGroup::after,
    #leagueLogoTooltip::after,
    #teamLogoTooltip::after,
    #fromSeasonLogoTooltip::after,
    #toSeasonSwitchTooltip::after,
    #toSeasonLogoTooltip::after,
    #venueLogoTooltip::after,
    #outcomeLogoTooltip::after {
        z-index: -1;
    }

    #outcomeLogoTooltip::after {
        left: 269px;
        width: 59px;
    }

    #fromSeasonLogoTooltip::after {
        left: 112px;
        width: 122px;
        top: 34px !important;
    }

    #fromSeasonLogoTooltip::after,
    #toSeasonSwitchTooltip::after,
    #toSeasonLogoTooltip::after {
        top: 34px !important;
    }

    #toSeasonSwitchTooltip::after {
        left: 177px;
        width: 252px;

    }

    #toSeasonLogoTooltip::after {
        left: 274px;
        width: 59px;
    }

    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #venueLogoTooltip.tooltipLowered::after {
        top: 109px !important;
    }

    #gamesSection:after {
        top: 55px;
        left: 26px;
        z-index: -1;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 599px) {
    .oddsRangeTable {
        width: 800px !important;
    }

    .oddsRangeTable th:first-child {
        width: 42px !important;
    }

    .oddsRangeTable td,
    .oddsRangeTable th:not(:first-child) {
        width: 82px !important;
    }

    .leftRowSpan {
        left: 13px;
    }

    .rightRowSpan {
        right: 13px;
    }

    .header {
        padding: 8px 0;
    }

    #headerLines {
        position: absolute;
        left: 20px;
    }

    #hamburgerGroup {
        top: 5px !important;
        right: -7px;
        width: 70px;
        height: 74px;
        box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    #hamburgerImage {
        left: 2px;
        top: 2px;
        width: 64px;
        height: 70px;
        background-image: url('../img/TueOdds-Logo-64x70.png');
        filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.7));
    }

    #hamburgerMenuCollector {
        top: 86px;
    }

    #trueOddsLogoContainer {
        display: none;
    }

    #seasonSection {
        top: 78px;
        height: 35px;
    }

    #seasonLogo {
        top: -1px;
    }

    #fromSeason {
        top: 1px;
    }

    #toSeasonSwitch {
        top: 3px;
    }

    #toSeason {
        top: 1px;
    }

    #teamLogo {
        top: 40px;
    }

    #team-dropdown {
        top: 42px;
    }

    #venueSection {
        top: 32px;
    }

    #seasonRangeGroup {
        top: 9.5px;
    }

    #gamesSection {
        top: 56.5px;
        top: 58px;
    }

    #seasonRangeGroup[data-pressed='true'] {
        transform: translateY(5px);
    }

    #hamburgerGroup[data-pressed='true'] {
        transform: translateY(1px);
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after,
    #outcomeLogoTooltip::after,
    #venueLogoTooltip::after {
        top: 78px;
    }

    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #venueLogoTooltip.tooltipLowered::after {
        top: 113px !important;
    }
}

@media (max-width: 850px) and (min-height: 780px) {
    #gamesSection:after {
        top: 106px !important;
        left: 23px;
    }
}

@media (max-width: 760px) and (min-height: 780px) {
    #gamesSection:after {
        top: 55px !important;
        left: 26px;

    }
}

@media (max-width: 550px) {

    #league-dropdown,
    #team-dropdown {
        width: 193px;
        width: 187px;
    }

    #league-dropdown {
        z-index: 20000;
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after {
        left: 131px;
        width: 170px;
    }

    #outcomeLogoTooltip,
    #venueLogoTooltip {
        display: none;
    }

    #venueSection {
        top: 69px;
        left: -1px;
    }

    #stadiumLogo {
        left: 1px;
    }

    #outcomeSection {
        top: 78px;
        left: 159px;
        z-index: 0;
    }

    #gamesSection {
        left: 37px;
        top: 132px;
    }

    #gamesDropdown {
        width: 77px;
    }

    #gamesDropdown .dropdown-item {
        text-indent: 8px;
    }

    #toSeason .dropdown-item {
        text-indent: 7px;
    }

    #fromSeason .dropdown-header,
    #fromSeason .dropdown-item,
    #toSeason .dropdown-header,
    #toSeason .dropdown-item {
        justify-content: center;
    }

    #fromSeason .selected-item,
    #toSeason .selected-item {
        padding-left: 0px !important;
        margin-left: 0px;
    }

    #fromSeason .dropdown-header,
    #fromSeason .dropdown-item,
    #toSeason .dropdown-header,
    #toSeason .dropdown-item {
        justify-content: center;
    }

    #gamesDropdownLabel {
        top: 25px;
        left: -36px;
        font-size: 9px;
    }

    #seasonSection {
        height: 109px;
        /* 35px + 37px*/
        width: 312px;

        left: -20px;
        padding-left: 25px;
    }

    #seasonLogo {
        left: 10px;
    }

    #seasonRangeGroup {
        /*left: 200px;*/
        left: 248px;
        top: 5px !important;
        height: 58px;
        width: 58px;
    }

    #seasonRangeGroup[data-pressed='true'] {
        transform: translateY(1px);
    }

    #fromSeasonLogoTooltip,
    #toSeasonSwitchTooltip,
    #toSeasonLogoTooltip {
        position: absolute;
        top: 37px !important;
        left: 15px;
    }

    #fromSeason,
    #toSeason,
    #venue-dropdown,
    #outcome-dropdown,
    #gamesDropdown {
        width: 109px;
    }

    #toSeasonSwitch {
        left: 156px;
    }

    #toSeason {
        left: 204px;
    }

    #gamesDropdown .dropdown-list.show {
        max-height: calc(100vh - 189px);
    }

    #fromSeason .dropdown-list.show,
    #toSeason .dropdown-list.show {
        max-height: calc(100vh - 152px);
    }

    #gamesSection:after,
    #fromSeasonLogoTooltip:after,
    #toSeasonLogoTooltip:after,
    #venueLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after {
        width: 91px;
    }

    #gamesSection:after {
        left: 55px;
    }

    #fromSeasonLogoTooltip:after,
    #toSeasonSwitchTooltip:after,
    #toSeasonLogoTooltip:after {
        top: 72px !important;
    }

    #fromSeasonLogoTooltip:after {
        left: 96px;
    }

    #toSeasonSwitchTooltip:after {
        left: 178px;
    }

    #toSeasonLogoTooltip:after {
        left: 259px;
    }

    #venueLogoTooltip.tooltipLowered::after {
        top: 187px !important;
        left: 92px;
    }

    #outcomeLogoTooltip.tooltipLowered::after {
        top: 187px !important;
        left: 254px;
    }

    #leagueLogoTooltip.tooltipLowered::after {
        top: 187px !important;
        left: 92px;
    }

    #teamLogoTooltip.tooltipLowered::after {
        top: 187px !important;
        left: 92px;
    }

    #seasonRangeImage {
        left: 1px;
        top: 3px;
        height: 52px;
        width: 52px;
        background-image: url('../img/filters-button-58x58.png');
    }
}

@media (max-width: 450px) {

    #league-dropdown,
    #team-dropdown {
        width: calc(187px - (450px - 100vw));
        max-width: 187px;
        min-width: 140px;
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after {
        width: calc(169px - (450px - 100vw));
        min-width: 122px;
        position: fixed;
        left: 150px;
        left: calc(150px - (450px - 100vw)/2);
        top: 86px;
    }

    #seasonRangeGroup {
        left: calc(248px - (450px - 100vw));
    }

    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #venueLogoTooltip.tooltipLowered::after {
        position: absolute !important;
        min-width: unset;
    }
}



/* For popup */
/*@media (max-width: 500px) {*/
#match-details-tooltip {
    padding-top: 36px;
}

.close-button {
    top: 4px;
    right: -2px;
    width: 55px;
    height: 37px;
}

.pin-button {
    right: 67px;
    top: -6px;
    font-size: 21px;
    padding: 4px 4px;
    background-color: #fff4e6a8;
    border-radius: 6px;
}

.pin-button {
    right: 67px;
    top: 8px;
    font-size: 18px;
    border-bottom: 3px solid;
    padding: 4.5px 4.5px;
    background-color: #f9eb33cf;
    border-radius: 300px;
}

.pin-button.pinned {
    padding-left: 10px;
}

.date-pushed-by-popup-controls {
    padding-right: 0px;
}

.popup-controls {
    top: -7px !important;
    right: 2px;
    padding: 4px;
    width: calc(100% - 10.5px);
    height: 36px;
    background: linear-gradient(to bottom, #607D8B, darkgray);
}

.match-details-popup-header-text {
    font-family: "DarumadropOne", sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    padding-left: 10px;
    padding-top: 2px;
}

.match-details-popup-header-text-big {
    font-size: 22px;
}

.match-details-popup-header-text-winner {
    color: rgb(33 255 33);
}

.match-details-popup-header-text-all {
    color: rgb(221, 210, 0);
}

/*}*/

@media (max-width: 439px) {

    .team-cell,
    .score-cell {
        font-size: 12px !important;
    }

    .match-table .team-cell {
        width: 125px;
    }

    .match-table .score-cell {
        padding-right: 10px;
        min-width: 26px;
        max-width: 26px;
    }

    .match-table .odds-cell {
        min-width: 50px;
        max-width: 50px;
        font-size: 14px;
    }

    .close-button {
        width: 51px;
    }

    .pin-button {
        right: 61px;
    }
}

/* For popup */
@media (max-width: 389px) {

    .team-cell,
    .score-cell {
        font-size: 11px !important;
    }

    .match-table .team-cell {
        width: 105px;
    }

    .match-table .score-cell {
        min-width: 20px;
        max-width: 20px;
    }

    .match-table .odds-cell {
        min-width: 45px;
        max-width: 45px;
        font-size: 13px;
    }

    .close-button {
        width: 46px;
    }

    .pin-button {
        right: 53px;

    }

    .match-details-popup-header-text {
        font-size: 18px;
        padding-top: 4px;
    }

    .match-details-popup-header-text-big {
        font-size: 20px;
    }
}

/* For popup */
@media (max-width: 348px) {

    .team-cell,
    .score-cell {
        font-size: 11px !important;
    }

    .team-cell,
    .score-cell {
        font-family: LivesportFinderLatin, Adjusted Arial Fallback, Arial, sans-serif;
        font-size: 10px !important;
    }

    .match-table .team-cell {
        padding-left: 3px;
        width: 95px;
        min-width: 95px;
    }

    .match-table .score-cell {
        min-width: 15px;
        max-width: 15px;
        padding-right: 8px;
    }

    .match-table .odds-cell {
        min-width: 40px;
        max-width: 40px;
        font-size: 13px;
    }

    .popupTeamLogo {
        padding-left: 0px;
    }

    .match-table .logo-cell {
        width: 20px;
    }

    .close-button {
        width: 41px;
    }

    .pin-button {
        right: 46px;

    }

    .match-details-popup-header-text {
        font-size: 16px;
        padding-top: 7px;
        padding-left: 5px;
    }

    .match-details-popup-header-text-big {
        font-size: 17px;
    }
}

.match-table .logo-cell {
    border-left: 1px solid white;
}

@media (max-width: 403px) {

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after {
        left: 127px;
    }
}

@media (max-width: 400px) {
    #seasonRangeGroup {
        left: 198px;
    }
}

@media (max-width: 390px) {
    #hamburgerGroup {
        top: 13px !important;
        width: 54px;
        height: 58px;
    }

    #hamburgerImage {
        width: 54px;
        height: 52px;
    }

    #headerRightSection {
        width: 12px;
    }

    .header-centered {
        left: -15px;
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after {
        left: 112px;
    }
}

@media (max-width: 365px) {
    #seasonRangeGroup {
        top: 14px !important;
        height: 40px;
        width: 40px;
    }

    #seasonRangeImage {
        left: 0px;
        top: 1px;
        height: 38px;
        width: 38px;
    }
}

@media (max-width: 342px) {
    #hamburgerGroup {
        top: 20px !important;
        width: 44px;
        height: 44px;
    }

    #hamburgerImage {
        left: 2px;
        top: 2px;
        width: 40px;
        height: 40px;
    }

    #seasonRangeGroup {
        left: 190px;
        top: 4px !important;
        height: 60px;
        width: 40px;
    }

    #seasonRangeImage {
        left: 0px;
        top: 1px;
        height: 58px;
        width: 38px;
        background-image: url('../img/filters-button-38x58.png');
    }

    #venue-dropdown {
        z-index: 0;
    }
}

@media (max-width: 330px) {
    #hamburgerGroup {
        right: -10px;
    }

    #seasonSection {
        width: 303px;
    }

    #fromSeason,
    #toSeason,
    #venue-dropdown,
    #outcome-dropdown,
    #gamesDropdown {
        width: 105px;
    }

    #toSeasonSwitch {
        left: 152px;
    }

    #toSeason {
        left: 200px;
    }

    #outcomeSection {
        left: 155px;
    }

    #gamesSection:after,
    #fromSeasonLogoTooltip:after,
    #toSeasonLogoTooltip:after,
    #venueLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after {
        width: 87px;
    }

    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after,
    #venueLogoTooltip.tooltipLowered::after {
        left: 90px;
    }

    #fromSeasonLogoTooltip:after {
        left: 94px;
    }

    #gamesSection:after {
        left: 53px;
    }

    #outcomeLogoTooltip.tooltipLowered::after {
        left: 248px;
    }

    #toSeasonSwitchTooltip::after {
        left: 174px;
        width: 244px;
    }

    #toSeasonLogoTooltip:after {
        left: 253px;
    }
}

@media (max-width: 319px) {
    #hamburgerGroup {
        right: -14px;
    }

    #seasonRangeGroup {
        left: 185px;
    }

    #seasonSection {
        width: 283px;
    }

    #fromSeason,
    #toSeason,
    #venue-dropdown,
    #outcome-dropdown,
    #gamesDropdown {
        width: 95px;
    }

    #toSeasonSwitch {
        left: 142px;
    }

    #toSeason {
        left: 190px;
    }

    #outcomeSection {
        left: 145px;
    }

    #gamesSection:after,
    #fromSeasonLogoTooltip:after,
    #toSeasonLogoTooltip:after,
    #venueLogoTooltip.tooltipLowered::after,
    #outcomeLogoTooltip.tooltipLowered::after,
    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after {
        width: 77px;
    }

    #leagueLogoTooltip.tooltipLowered::after,
    #teamLogoTooltip.tooltipLowered::after,
    #venueLogoTooltip.tooltipLowered::after {
        left: 85px;
    }

    #fromSeasonLogoTooltip:after {
        left: 89px;
    }

    #gamesSection:after {
        left: 48px;
    }

    #outcomeLogoTooltip.tooltipLowered::after {
        left: 233px;
    }

    #toSeasonSwitchTooltip::after {
        left: 164px;
        width: 226px;
    }

    #toSeasonLogoTooltip:after {
        left: 238px;
    }
}

#notAlways-1,
#whenItsNeeded,
#whenItsNeeded2 {
    display: none;
}

/* For Footer */
@media (max-width: 659px) {
    #notAlways-1 {
        display: block;
    }

    .footer {
        height: 673px;
    }
}

@media (max-width: 460px) {
    /*
    #whenItsNeeded2 {
        display: block;
    }
*/

    .FooterLineText {
        margin: 0px 15px;
    }


    .footer {
        height: 693px;
    }
}

@media (max-width: 395px) {
    /*
    #whenItsNeeded2 {
        display: none;
    }
*/

    .FooterLineText {
        margin: 0px 10px;
    }


    .FooterIcon {
        height: 70px;
        width: 70px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .footerInch {
        height: 85px;
        width: 85px;
    }

    .footer {
        height: 673px;
    }
}

@media (max-width: 350px) {
    #whenItsNeeded {
        display: block;
    }

    .footer {
        height: 693px;
    }
}

@media (max-width: 320px) {
    .FooterIcon {
        height: 60px;
        width: 60px;
        margin-left: 12px;
        margin-right: 12px;
    }

    .footerInch {
        height: 75px;
        width: 75px;
    }

    .footer {
        height: 673px;
    }
}

.oddsRangeHeader .oddsrange-tooltip-text,
.trueOddsHeader .trueodds-tooltip-text,
.occurrencesHeader .occurrences-tooltip-text,
.profitHeader .profit-tooltip-text {
    position: absolute;
    visibility: visible;
    width: max-content;
    max-width: 200px;
    padding: 6px 15px;
    transform: translateX(-50%);
    opacity: 0;
    display: none;
    transition: opacity 0.2s;
    background: rgb(155 83 8 / 85%);
    border-radius: 4px;
    text-align: center;
    font-family: "DarumadropOne", sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    z-index: 1;
}

.oddsRangeHeader .oddsrange-tooltip-text {
    margin-left: 90px;
    margin-top: -1px;
}

.trueOddsHeader .trueodds-tooltip-text {
    margin-left: 77px;
}

.occurrencesHeader .occurrences-tooltip-text {
    margin-left: 129.5px;
}

.profitHeader .profit-tooltip-text {
    margin-left: 71px;
}

/* Arrow */
.oddsRangeHeader .oddsrange-tooltip-text::after,
.trueOddsHeader .trueodds-tooltip-text::after,
.occurrencesHeader .occurrences-tooltip-text::after,
.profitHeader .profit-tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    /* Position arrow on the left edge of tooltip */
    transform: translateY(-50%);
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent rgb(155 83 8 / 85%) transparent transparent;
}





/*
.trueOddsTableImg,
.occurrancesTableImg,
.profitTableImg {
    position: absolute;
    display: none;
    top: 2px;
}
*/
.oddsRangeHeader {
    padding-top: 0px;
    padding-bottom: 0px;
}

.occurrancesTableImg,
.profitTableImg {
    height: 26px;
}

.profitTableImg {
    height: 26px;
}

.riskThermoImg {
    position: relative;
    top: 2.5px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    height: 26.5px;
    width: 12px;
    background-image: url(/img/Thermometer-14x33.png);
}

.oddsRangeHeader,
.leftSideHeader,
.riskThermoImg,
.trueOddsTableImg,
.occurrancesTableImg,
.profitTableImg {
    transition: none;
}

#occurrancesTableImg-4-out {
    display: none;
}

@media (min-width: 930px) {
    .oddsRangeTable th:first-child {
        width: 162px;
    }

    .oddsRangeHeader,
    .leftSideHeader {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .pushedHeaderText {
        position: relative;
        padding-left: 0px;
        display: inline-block;
        vertical-align: top;
        padding-top: 4px;
    }

    .oddsRangeHeader .pushedHeaderText {
        top: 2.5px;
        left: 9.5px;
    }

    .trueOddsHeader .pushedHeaderText {
        top: 0.5px;
        left: 3.5px;
    }

    .occurrencesHeader .pushedHeaderText {
        top: 0px;
        left: 9.5px;
        padding-right: 20px;
    }

    .profitHeader .pushedHeaderText {
        top: 0.5px;
        left: 8.5px;
    }

    .tableHeaderText {
        display: inline-block;
    }

    .trueOddsTableImg,
    .occurrancesTableImg,
    .profitTableImg {
        display: inline-block;
    }

    .riskThermoImg {
        left: -17.5px;
    }

    .trueOddsTableImg {
        position: relative;
        top: 2px;
        left: -22.5px;
        width: 24px;
    }

    .occurrancesTableImg {
        position: relative;
        top: 2.5px;
        left: -6.5px;
        height: 22px;
        width: 32px;
    }

    .profitTableImg {
        position: relative;
        top: 2px;
        left: -36.5px;
        height: 22px;
    }

    .tooltip-text-main {
        z-index: 1000000;
    }
}

#tableContainer {
    z-index: 1;
}

@media (min-width: 880px) and (max-width: 930px) {
    .table-wrapper {
        display: contents;
    }
}

/*
@media (min-width: 930px) and (max-width: 1020px) {
    .riskThermoImg {
        left: calc(50vw - 401px);
    }

    .trueOddsTableImg {
        left: calc(50vw - 407px);
    }

    .occurrancesTableImg {
        left: calc(50vw - 413px);
    }

    .profitTableImg {
        left: calc(50vw - 402px);
    }
}

@media (min-width: 930px) and (min-height: 780px) {
    .riskThermoImg {
        margin-top: 46px;
    }

    .trueOddsTableImg,
    .occurrancesTableImg,
    .profitTableImg {
        margin-top: 47px;
    }
}
*/

@media (max-width: 929px) {
    .table-wrapper {
        overflow-x: auto;
        width: calc(100vw - 20px);
    }

    .trueOddsTableImg,
    .occurrancesTableImg,
    .profitTableImg {
        position: relative;
        top: 2px;
    }

    .profitTableImg {
        top: 3px;
    }

    .tableHeaderText {
        display: none;
    }

    .leftSideHeader {
        top: 1px;
    }

    .riskThermoImg {
        position: relative;
        top: 2px;
    }

    .trueOddsTableImg,
    .occurrancesTableImg,
    .profitTableImg {
        display: inline-block;
    }

    .stat-button {
        top: 3px;
    }

    .oddsRangeTable th:first-child {
        width: 50px;
        padding-bottom: 3.5px;
    }

    .trueOddsHeader,
    .occurrencesHeader,
    .profitHeader {
        padding-bottom: 4px !important;
    }

    .oddsRangeHeader,
    .trueOddsHeader,
    .occurrencesHeader,
    .profitHeader {
        cursor: help;
    }

    .oddsRangeHeader:hover .oddsrange-tooltip-text,
    .trueOddsHeader:hover .trueodds-tooltip-text,
    .occurrencesHeader:hover .occurrences-tooltip-text,
    .profitHeader:hover .profit-tooltip-text {
        visibility: visible;
        opacity: 1;
        display: inline;
    }

    #occurrancesTableImg-4-out {
        display: inline-block;
    }
}

@media (max-width: 880px) {

    .left-body-shadow,
    .right-body-shadow {
        display: none;
    }
}


@media (min-height: 0px) and (max-height: 559px) and (min-width: 783px) {
    /*
    body {
        background-color: rgb(230, 212, 173);
    }
        */

    .footer {
        height: 475px;
    }

    .footer-centered {
        top: 20px;
    }

    #FooterLineContainer {
        margin-bottom: 10px;
    }

    #KolosWorksFooter {
        margin-top: 15px;
    }

}

@media (min-height: 780px) and (min-width: 950px) {
    #predictionsLinkGroup::after {
        top: 50px;
    }

    #loginLinkGroup::after {
        top: 85px;
    }

    #leagueLogoTooltip::after,
    #teamLogoTooltip::after,
    #venueLogoTooltip::after,
    #outcomeLogoTooltip::after {
        top: 90px;
    }

    #fromSeasonLogoTooltip::after,
    #toSeasonSwitchTooltip::after,
    #toSeasonLogoTooltip::after,
    #youtubeLinkGroup::after,
    #settingsLinkGroup::after {
        top: 95px;
    }

    #gamesSection:after {
        top: 86px;
    }
}

@media (min-height: 780px) and (max-height: 849.99px) and (min-width: 950px) {
    .header {
        height: 75px;
        padding: 15px 0;
    }

    #headerLine2 {
        top: 4px;
    }

    #headerRightSection {
        top: 10px;
    }

    #hamburgerMenuCollector {
        top: 105px;
    }

    .body-centered {
        padding: 30px 0px;
        margin-bottom: 25px;
    }

    .oddsRangeTable {
        margin: 10px 0;
    }

    #match-details-tooltip {
        max-height: calc(100vh - 165px);
    }
}

/*From js now so no conflict*/
@media (min-height: 850px) and (min-width: 950px) {
    .header {
        height: 75px;
        padding: 15px 0;
    }

    #headerLine2 {
        top: 4px;
    }

    #headerRightSection {
        top: 10px;
    }

    #hamburgerMenuCollector {
        top: 105px;
    }

    .body-centered {
        padding: 40px 0px;
        margin-bottom: 25px;
    }

    .oddsRangeTable {
        margin: 15px 0;
    }

    .body-centered {
        min-height: calc(100vh - 144px - 560px);
    }

    #match-details-tooltip {
        max-height: calc(100vh - 165px);
    }
}





.menu {
    display: none;
    flex-direction: column;
    width: 150px;
    background: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
}

.menu div {
    padding: 10px;
    background: #ddd;
    margin: 5px 0;
    text-align: center;
    cursor: pointer;
}

.menu div:hover {
    background: #bbb;
}

.hamburger {
    width: 40px;
    cursor: pointer;
}

.sureVisible {
    display: block !important;
    opacity: 1 !important;
}

.header,
.header-centered,
.headerLines {
    max-width: 100vw !important;
}