/* @import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); */

* {
    font-family: sans-serif;
    /* font-family: 'Roboto'; */
}

body {
    background-color: #f9f9f9;
    overflow-y: scroll;  /* always show scroll bar so that the page layout does not shift irregardless of content overflow */
}

/* Authentication (ie. Login & Sign-up) Pages */

.btn-footyquant {
    background-color: #41b779;
    color: #ffffff;
    width: 100%;
}

.btn-footyquant:hover, .btn-footyquant:focus, .btn-footyquant:disabled {
    background-color: #359763;
    color: #ffffff;
    width: 100%
}

.auth-bg-overlay {
    background-color: #41b779;
}

.auth-card {
    max-width: 600px;
    width: 100%;
    color: #595959;
}

.auth-title, .auth-forgot-pw, .auth-signup-redirect, .auth-login-redirect {
    text-align: center;
}

.auth-error-message {
    font-size: 12px;
    color: #dc3545;
    padding: 2px 0px 0px 0px;
}

.auth-error-message-banner {
    border: solid 1px #dc3545;
    background-color: #fbe9eb;
    border-radius: 4px;
    padding: 5px 20px 5px 20px;
}

.auth-error-message-server {
    font-size: 14px;
    color: #dc3545;
}

.auth-warning-message-banner {
    border: solid 1px #999900;
    background-color: #ffffcc;
    border-radius: 4px;
    padding: 5px 20px 5px 20px;
}

.auth-warning-message-server {
    font-size: 14px;
    color: #999900;
}

.auth-success-message-banner {
    border: solid 1px #41b779;
    background-color: #ecf8f2;
    border-radius: 4px;
    padding: 5px 20px 5px 20px;
}

.auth-success-message-server {
    font-size: 14px;
    color: #41b779;
}

.show-password-toggle label {
    font-size: 14px;
    padding: 2px 2px 2px 4px;
}

.legal-agreement-text {
    color: #808080;
    font-size: 15px;
}

.email-verification-icon, .password-reset-icon {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* NOTE: THIS CLASS IS ACTUALLY USED FOR THE H0N3YP@T FIELD */
.optional-input-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Navigation Bar for Main Pages (ie. Explore, Screener, Watchlist) */

.upgrade-cta-banner {
    background-color: #8a00e6;
    color: #ffffff;
    padding: 5px 8px 5px 8px;
    text-align: center;
}

.upgrade-cta-banner a {
    color: #ffffff;
}

.upgrade-cta-banner a:hover {
    color: #81b3fe;
}

.navbar {
    background-color: #41b779;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-link {
    color: #ffffff;
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.nav-link:hover, .nav-link-current {
    color: #ffffff;
    background-color: #359763;
    border-radius: 8px;
}

.navbar-user svg {
    border-radius: 50%;
}

.navbar-user svg:hover {
    box-shadow: 0 0 0 5px #359763;
}

.navbar-toggler {
    border: 1px solid white;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-collapse {
    text-align: center;
}


/* Main Pages (ie. Explore, Screener, Watchlist) */

.welcome-container {
    max-width: 800px;
}

.welcome-container ul {
    max-width: 700px;
}

.welcome-free-trial-note {
    color: #8a00e6;
}

.match-container-info-components {
    max-width: 900px;
    width: 100%;
    color: #737373;
    font-size: 16px;
}

.match-card {
    max-width: 900px;
    width: 100%;
    color: #595959
}

#finished-watchlist-tab .match-card {
    background-color: #d9d9d9;
}

#finished-watchlist-tab .match-card a {
    color: #666666;
}

#finished-watchlist-tab .match-card a:hover {
    color: #000000;
}

.match-star-icon {
    font-size: 25px;
    cursor: pointer;
}

.match-star-icon-saved {
    color: #ffcc00;
}

/* .match-datetime {
    margin-top: auto;
    margin-bottom: auto;
    align-self: start;
} */

.match-team-name {
    font-weight: 600;
    font-size: 15px;
}

.match-form-heading, .match-o25-heading {
    /* text-decoration: underline; */
    padding: 2px;
}

.form-result, .o25-result {
    font-size: 12px;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin: 3px 2px 3px 2px;
    text-align: center;
    border: solid #595959 1px;
    border-radius: 2px;
}

.form-result-win, .o25-result-yes {
    border: solid #3caa6f 1px;
    background-color: #3caa6f;  /* one shade darker than our primary color */
    color: #ffffff;
}

.form-result-lose, .o25-result-no {
    border: solid #ff4d4d 1px;
    background-color: #ff4d4d;
    color: #ffffff;
}

.form-result-draw {
    border: solid #ffb31a 1px;
    background-color: #ffb31a;
    color: #ffffff;
}

.form-result-upcoming, .o25-result-upcoming {
    border: solid #cccccc 1px;
    background-color: #cccccc;
    color: #ffffff;
}

.live-match-status {
    --bs-spinner-animation-speed: 1.5s;
    width: 12px;
    height: 12px;
}

/* .col-filter-sidebar {
    border-right: solid 1px #bfbfbf;
} */

/* .col-filter-container {
    border: solid 1px #595959;
} */

.filter-category {
    width: 95%;
}

.filter-category-menu .btn {
    border: solid 1px #333333; 
    /* border-radius: 0%; */
    background-color: #e6f6ed;
    color: #333333;
    font-weight: 600;
    font-size: 14px;
}

.filter-category-menu .btn:hover {
    background-color: #b4e4c9;
}

.filter-collapse-icon {
    transition: transform 0.2s ease-in-out;
}

.filter-category-menu .btn[aria-expanded="true"] .filter-collapse-icon {
    transform: rotate(-180deg); /* Rotate the arrow to point downwards */
}

.filter-category-menu .btn {
    position: relative;
}

.filter-category-menu .btn .indicator-circle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    opacity: 0.6;
    border-radius: 50%;
    display: none;  /* hidden by default */
}

.filter-container-collapse-icon {
    transition: transform 0.2s ease-in-out;
}

.filter-container-toggle-btn .btn[aria-expanded="true"] .filter-container-collapse-icon {
    transform: rotate(-180deg); 
}

.filter-tooltip {
    background-color: transparent;
    border: none;
    color: #999999;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

.filter-tooltip-text {
    --bs-tooltip-bg: #fff7e6;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-color: #333333;
    --bs-tooltip-max-width: 350px;
    --bs-tooltip-arrow-width: 0px;
    --bs-tooltip-arrow-height: 0px;
}

.filter-tooltip-text .tooltip-inner {
    text-align: left;
    border: solid 1px #cccccc;
    margin-top: 4px;
}

.filter-category-content-container {
    padding: 10px 20px 20px 20px;
}

.filter-container-toggle-btn .btn {
    background-color: #41b779;
    color: #ffffff;
}

.filter-container-toggle-btn .btn:hover {
    background-color: #359763;
}

.filter-card {
    border: solid 2px #68ca96;
    box-shadow: 0 4px 12px #8ed7b0;
}

.filter {
    display: flex;
    justify-content: end;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0px 10px 0px 10px;
}

.filter-label {
    text-align: end;
}

.filter .form-label {
    font-size: 14px;
    font-weight: 600;
}

.filter select {
    font-size: 14px;
    text-align: center;
    height: 21px;
    width: 100%;
    max-width: 110px;
    /* margin-left: 10px */
}

.filter label {
    font-size: 13px;
}

.filter .league-checkboxes-container {
    border: solid 1px #767676;
    border-radius: 4px;
    width: 100%;
    max-width: 220px;
    height: 125px;
    overflow-y: hidden;
}

.filter .league-checkboxes {
    padding: 4px 6px 4px 6px;
    height: 100%;
    overflow-y: auto;
}

.league-checkboxes .checkbox-option {
    padding-left: 6px;
    padding-right: 6px;
}

.league-checkboxes .disabled-checkbox {
    background-color: #e6e6e6;
}

.league-checkboxes label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.filter-category-menu .btn[aria-expanded="true"] {
    /* text-decoration: underline; */
    background-color: #7bd1a3;
    pointer-events: none;
}

.modal-dialog {
    max-width: 700px;
    width: 97%;  /* for some reason, setting the margin explicitly causes weird behaviour on small screens */
}

.team-logo {
    width: 80px;
    height: 80px;
    padding: 10px;
}

.team-logo-sm {
    width: 24px;
    height: 24px;
    padding: 2px;
    margin-right: 6px;
}

.country-logo-sm {
    width: 24px;
    height: 18px;
    padding: 2px;
    margin-right: 6px;
}

.accordion-button:hover {
    background-color: #e6e6e6;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button[aria-expanded="true"] {
    background-color: #e6e6e6;
}

.accordion-body {
    max-height: 400px;
    overflow-y: auto;
}

.accordion-item {
    scroll-margin-top: 55px;
}

td {
    font-size: 14px;  /* 13-14px seems okay */
}

/* League standings table columns width (small screens) */
.league-standings-table-position-col  { width: 11%; }
.league-standings-table-team-col  { width: 43%; }
.league-standings-table-played-col  { width: 11%; }
.league-standings-table-win-col  { width: 0%; }
.league-standings-table-draw-col  { width: 0%; }
.league-standings-table-lose-col  { width: 0%; }
.league-standings-table-gf-ga-col  { width: 22%; }
.league-standings-table-gd-col  { width: 0%; }
.league-standings-table-total-pts-col  { width: 13%; }

/* League standings table columns width (medium screens and above) */
@media (min-width: 768px) {
    .league-standings-table-position-col  { width: 6%; }
    .league-standings-table-team-col  { width: 40%; }
    .league-standings-table-played-col  { width: 6.5%; }
    .league-standings-table-win-col  { width: 6.5%; }
    .league-standings-table-draw-col  { width: 6.5%; }
    .league-standings-table-lose-col  { width: 6.5%; }
    .league-standings-table-gf-ga-col  { width: 12%; }
    .league-standings-table-gd-col  { width: 8%; }
    .league-standings-table-total-pts-col  { width: 8%; }
}

.odds-selection {
    border: solid 1px #999999;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 5px;
    margin: 5px;
    font-size: 14px;
    flex-basis: 0px;
}

.odds-selection:hover {
    background-color: #c7ebd6;
}

.stats-name {
    white-space: nowrap;
}

.stats-name, .stats-value {
    font-size: 15px;
}

.stats-charts .col-6 {
    padding-left: 5px;
    padding-right: 5px;
}

.stats-bar-base {
    width: 100%;
    height: 14px;
    border: solid 1px #999999;
    border-radius: 4px;
}

.stats-bar-fill {
    width: 0%;  /* to be updated at runtime via javascript */
    height: 100%;
    border: 0px;
    border-radius: 2px;
    background-color: #999999;
}

.stats-bar-better {
    background-color: #3caa6f;
}

.team-stats-tab-button, .league-standings-tab-button {
    border: solid 1px #999999;
    background-color: #f5f5f5;
    width: 120px;
    margin-left: 5px;
    margin-right: 5px;
}

.watchlist-tab-button {
    border: solid 1px #999999;
    background-color: #ffffff;
    width: 140px;
    margin-left: 10px;
    margin-right: 10px;
}

.team-stats-tab-button:hover, .league-standings-tab-button:hover, .watchlist-tab-button:hover {
    border: solid 1px #999999;
    background-color: #e6e6e6;
}

.team-stats-tab-button[aria-pressed="true"], .league-standings-tab-button[aria-pressed="true"], .watchlist-tab-button[aria-pressed="true"] {
    border: solid 1px #999999;
    background-color: #b4e4c9;
    pointer-events: none;
}

.h2h-shared-stats {
    height: 24px;
    border: solid 1px #999999;
    border-radius: 4px;
}

/* NOT IN USE CURRENTLY */
.h2h-shared-stats-poor {
    background-color: #ffcccc;
}

/* NOT IN USE CURRENTLY */
.h2h-shared-stats-average {
    background-color: #ffeecc;
}

/* NOT IN USE CURRENTLY */
.h2h-shared-stats-good {
    background-color: #daf1e4;
}

.h2h-results-breakdown-base, .h2h-goals-breakdown-base {
    width: 100%;
    height: 16px;
    background-color: #e6e6e6;
}

.h2h-results-breakdown-fill, .h2h-goals-breakdown-fill {
    width: 0%;
    height: 16px;
}

#h2h-results-breakdown-home-win-bar, #h2h-goals-breakdown-home-bar {
    background-color: #4d94ff;
}

#h2h-results-breakdown-away-win-bar, #h2h-goals-breakdown-away-bar {
    background-color: #ffa64d;
}

.explore-table-card {
    max-width: 800px;
    width: 100%;
    color: #595959;
}

.explore-table-card .card-header {
    background-color: #2e8456;
    color: #ffffff;
}

.explore-table-card .card-body {
    max-height: 375px;
    overflow-y: auto;
    overflow-x: auto;
}

.card-header-note {
    font-size: 12px;
    font-weight: lighter;
}

.table-data-subtext {
    font-size: 12px;
    font-weight: lighter;
    color: #595959;
}

.table-data-tbu-note {
    font-size: 12px;
    font-weight: lighter;
    font-style: italic;
}

.explore-table {
    table-layout: fixed;
    width: 100%;
}

/* 'Explore' table columns width (small screens) */
.explore-table-rank-col  { width: 30px; }
.explore-table-team-col  { width: 155px; }
.explore-table-string-col   { width: 187.5px; }
.explore-table-metric-col   { width: 71px; }
.explore-table-next-match-col   { width: 125px; }
.explore-table-odds-col { width: 71px; }

/* 'Explore' table columns width (medium screens and above) */
@media (min-width: 768px) {
    .explore-table-rank-col   { width: 5%; }
    .explore-table-team-col  { width: 25%; }
    .explore-table-string-col   { width: 32.5%; }
    .explore-table-metric-col   { width: 10%; }
    .explore-table-next-match-col  { width: 17.5%; }
    .explore-table-odds-col  { width: 10%; }
}

.featured-matches-container {
    max-width: 1000px;
    width: 100%;
}

.featured-match-card {
    font-size: 14px;
    padding: 4px 8px 4px 8px;
    margin: 4px 6px;
    max-width: 250px;
    width: 100%;
}

.featured-match-card:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

.featured-match-datetime {
    padding-top: 4px;
    font-size: 12px;
    font-weight: lighter;
    color: #595959;
}

.featured-matches-container-card {
    max-width: 300px;
    width: 100%;
}

.featured-matches-container-card .card-header {
    background-color: #919100;
    color: #ffffff;
}

.featured-matches-container-card .featured-match-card {
    background-color: #f9f9f9;
}

.featured-matches-container-card .featured-match-card:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

.num-upcoming-matches-card {
    max-width: 300px; 
    width: 100%; 
    background: linear-gradient(135deg, #804000, #ff8000); 
    border: solid 1px #804000;
}

.num-upcoming-matches-subtext {
    font-size: 14px;
    color: #ffffff;
}

.num-upcoming-matches-value {
    font-size: 40px;
    color: #ffffff;
}

.num-upcoming-matches-card-upgrade-cta {
    background-color: #333333; 
    color: #ffffff;
    width: 100%;
}

.num-upcoming-matches-card-upgrade-cta:hover {
    background-color: #1a1a1a; 
}

.page-number {
    padding-left: 15px;
    padding-right: 15px;
}

.pagination-btn {
    width: 40px;
    height: 24px;
    border: solid 1px #595959;
    border-radius: 4px;
}

.pagination-btn:disabled {
    border: solid 1px #cccccc;
}

.pagination-btn:not(:disabled):hover {
    background-color: #e6e6e6;
}

/* Profile Page */

.profile-card {
    max-width: 700px;
    width: 100%;
    color: #595959;
}

.profile-card.premium-user-card {
    background: linear-gradient(135deg, #fffbe6, #eed490, #fffbe6);
    background-size: 100% 140%;
    background-position: 50% 0%;
    color: #333333;
}

.user-icon-initials {
    width: 65px;
    height: 65px;
    font-size: 35px;
    background-color: #cc5200;
    color: #ffffff;
    border-radius: 50%;
}

.user-fullname {
    font-size: 28px;
}

.user-email {
    font-size: 18px;
}

.profile-nav-link {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    height: 40px;
    border: none;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
    color: #000000;
    text-decoration: none;
}

.profile-nav-link:hover {
    background-color: #f2f2f2;
}

.profile-card.premium-user-card .profile-nav-link:hover {
    background-color: rgb(0,0,0,0.1);
}

.profile-back-nav-card {
    max-width: 700px;
    width: 100%;
    border: none;
    background-color: transparent;
}

.profile-back-nav {
    font-size: 20px;
    color: #808080;
    text-decoration: none;
}

.profile-back-nav:hover {
    text-decoration: underline;
}

.profile-btn {
    width: 80px;
}

.profile-btn-lg {
    width: 120px;
}

.subscription-upgrade-text {
    color: #359763;
}

.subscription-plan-card {
    background-color: #f0f5ff;
}

.subscription-plan-card .card-header {
    color: #ffffff;
    background-color: #808080;
    border-bottom: solid 1px #cccccc;
}

.subscription-plan-card .card-body {
    padding: 10px 16px;
}

.subscription-plan-card .card-body:hover {
    background-color: #e6eeff;
    border-radius: 4px;
    cursor: pointer;
}

.subscription-plan-card-body-content {
    height: 50px;
}

.subscription-plan-price {
    min-width: 85px;
}

.subscription-plan-price .yearly-rate {
    font-size: 14px;
}

.subscription-savings-badge {
    background-color: #9900ff;
}

.subscription-plan-price .spinner-border {
    width: 24px;
    height: 24px;
    margin-right: 8px; 
}