@import url("config.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Work Sans", Arial, sans-serif;
    /* font-weight: 300; */
    font-size: 14px;
    line-height: 1.6;
}

.main-container{
    /* position: absolute; */
    width: 100%;
    height: 100%;
}

footer {
    height: auto; /* .push must be the same height as .footer */
}

footer{
    background-color: var(--primeGreen);
    padding: 10px 0px;
    /* font-weight: bold; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;
}

footer a{
    text-decoration: none;
    color: white;
    padding: 5px 10px;
}

footer .links{
    margin: 0px 10px;
}

footer a:hover{
    border-bottom: 2px solid var(--primeBlue);
}

li{
    list-style-type: none;
    display: flex;
    align-items: center;
}

body, html{
    height: 100%;
    padding-top: 5px;
    background: url("../media/background.jpg") no-repeat center center fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.logo{
    margin: 10px;
}

.logo img{
    max-width: 100px;
    height: auto;
}

nav{
    background-color: var(--primeGreen);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.nav-items-search{
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.dropdown-content input[type="submit"]{
    border: none;
    background-color: 1px solid var(--primeBlue);
}

.menu-icon{
    display: block;
    align-self: flex-end;
}

.dropbtn {
    background-color: var(--primeBlue);
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    float: left;
}

.dropdown {
    position: relative;
    align-self: flex-end;
    display: inline-block;
}

.dropdown-content {
    top: 35px;
    right: 0;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    transition: var(--mainTransition);
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: var(--primeGreen);
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

@media only screen and (min-width: 800px) {
    .dropdown-content a {
        display: inline-block;
    }

    .dropbtn{
        display: none;
    }

    .dropdown-content{
        top: 0;
        display: block;
        position: relative;
    }

    .dropdown{
        padding-bottom: 17px;
        position: relative;
    }

    .nav-items-search{
        flex-direction: row;
        align-items: baseline;
    }
}

.search-form{
    padding: 10px 0px;
}

form.search-form input[type=text] {
    padding: 10px;
    float: left;
    width: 80%;
    background: #f1f1f1;
    border: 1px solid var(--primeGreen);
    border-radius: 5px 0px 0px 0px;
}

/* Style the submit button */
form.search-form button {
    transition: var(--mainTransition);
    float: left;
    width: 20%;
    padding: 10px;
    background: var(--primeBlue);
    color: white;
    border: 1px solid var(--primeGreen);
    border-left: none; /* Prevent double borders */
    cursor: pointer;
    border-radius: 0px 5px 0px 0px;
}

form.search-form button:hover {
    background: var(--primeGreen);
}

  /* Clear floats */
form.search-form::after {
    content: "";
    clear: both;
    display: table;
}

.content{
    margin: 5px 0px;
}

.content-nav{
    background-color: var(--primeBgColor);
    padding: 20px;
    display: flex;
    justify-content: center;
    overflow-x: scroll;
}

.content-nav a {
    transition: var(--mainTransition);
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    /* display: block; */
}

.content-nav a:hover {
    background-color: var(--primeGreen);
    color: black;
}

a.content-nav-active{
    color: var(--primeBlue);
}

.all-content{
    display: flex;
    flex-direction: column;
    margin: 5px 0px;
}

.success-message{
    color: var(--primeGreen);
}

.error-message{
    color: red;
}

.all-content h4{
    text-align: center;
    text-transform: uppercase;
    background-color:  var(--primeGreen);
    padding: 10px 5px;
    border-radius: 5px 5px 0px 0px ;
    color: white;
    font-weight: bold;
}

#league-standing-result{
    color: #3e8e41;
}

.item-name{
    text-align: center;
    text-transform: uppercase;
    background-color:  none !important;
    /* padding: 10px 5px; */
    /* border-radius: 5px 5px 0px 0px ; */
    /* color: white; */
    font-weight: bold;
    font-size: 18px;
}

.edit-btn, .delete-btn, .add-btn{
    text-decoration: none;
    cursor: pointer !important;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    transition: var(--mainTransition);
}

.edit-btn:hover, .delete-btn:hover, .add-btn:hover{
    background-color: var(--primeGreen);
}

.add-btn{
    background-color: green;
}

.edit-btn{
    background-color: var(--primeBlue);
}

.delete-btn{
    background-color: #cb2222;
}

.right-content{
    padding: 5px;
    width: 100%;
    order: 2;
    background-color: var(--primeBgColor);
}

.right-content li, .left-content li{
    padding-bottom: 5px;
}

.main-content{
    padding: 5px;
    order: 3;
    width: 100%;
    background-color: var(--primeBgColor);
}

.left-content{
    padding: 5px;
    width: 100%;
    order: 1;
    background-color: var(--primeBgColor);
}

.top-leagues, .top-teams{
    display: none;
}

.left-content .fa-caret-up,
.right-content .fa-caret-up
{
        display: none;
}

@media only screen and (min-width: 800px) {
    .content{
        margin: 5px 0px;
    }

    .all-content{
        flex-direction: row;
    }

    .right-content{
        width: 20%;
        order: 3;
        margin-left: 5px;
    }

    .main-content{
        order: 2;
        width: 60%;
    }

    .left-content{
        order: 1;
        width: 20%;
        margin-right: 5px;
    }

    .left-content .fa-caret-up,
    .left-content .fa-caret-down,
    .right-content .fa-caret-down,
    .right-content .fa-caret-up{
        display: none;
    }

    .top-leagues, .top-teams{
        display: block;
    }
}

.top-leagues, .top-teams{
    transition: var(--mainTransition);
}

.p-logo{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.posted-by p{
    display: flex;
    align-items: center;
}

.post{
    /*background-color: var(--mainGrey);*/
    margin: 10px 5px;
    padding: 5px;
}

.post-media img{
    max-width: 400px;
    max-height: 200px;
}

.post-reactions{
    padding:10px  5px;
}

.post-reactions ul{
    display: flex;
    justify-content: space-between;
}

.post-reactions li{
    display: inline;
}

.post-comment input[type=text]{
    background-color: aliceblue;
}

.tabular-menu, .fixtures-tab-menu, .goals-tab-menu, .players-tab-menu, .requests-tab-menu, .match-requests-tab-menu, .league-requests-tab-menu{
    width: 100%;
}

.tabular-menu ul, .fixtures-tab-menu ul, .goals-tab-menu ul, .players-tab-menu ul, .requests-tab-menu ul, .match-requests-tab-menu ul, .league-requests-tab-menu ul{
    background-color: var(--primeBgColor);
    padding: 3px;
    background-color: #f1f1f1;
    width: 100%;
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    justify-content: space-evenly;
}

.tabular-menu li, .fixtures-tab-menu li, .goals-tab-menu li, .players-tab-menu li, .requests-tab-menu li, .match-requests-tab-menu li, .league-requests-tab-menu li{
    width: 100%;
    display: inline-block;
    transition: var(--mainTransition);
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.tabular-menu li.active, .fixtures-tab-menu li.active-btn, .goals-tab-menu li.goals-active-btn, .players-tab-menu li.players-active-btn, .requests-tab-menu li.request-active-btn, .match-requests-tab-menu li.match-request-active-btn, .league-requests-tab-menu li.league-request-active-btn{
    color: white;
    background-color: var(--primeBlue);
}

.tabular-menu li:hover, .fixtures-tab-menu li:hover, .goals-tab-menu li:hover, .players-tab-menu li:hover, .requests-tab-menu li:hover, .match-requests-tab-menu li:hover, .league-requests-tab-menu  li:hover{
    background-color: var(--primeGreen);
    color: black;
    cursor: pointer;
}

.top-leagues-header:hover, .top-teams-header:hover {
    cursor: pointer;
}

@media only screen and (min-width: 800px) {
    .top-leagues-header:hover, .top-teams-header:hover {
        cursor: auto;
    }

    .top-leagues-header, .top-teams-header{
        pointer-events: none;
    }
}

.all-items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2px;
    /* padding: 2px; */
    /*background-color: var(--mainGrey);*/
    /* border-radius: 5px; */
    border: 1px solid var(--primeGreen);
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

/*buttons for the match requests*/
.deny-mr-btn, .deny-lr-btn, .accept-mr-btn, .accept-lr-btn, .delete-mr-btn, .delete-lr-btn, .edit-mr-btn{
    border: none;
    text-transform: uppercase;
    margin: 3px 0px;
    padding: 5px;
    border: 1px solid var(--primeGreen);
    transition: var(--mainTransition);
    cursor: pointer;
    border-radius: 5px;
}

.deny-mr-btn, .deny-lr-btn, .delete-mr-btn , .delete-lr-btn{
    background-color: red;
}

.accept-mr-btn, .accept-lr-btn{
    background-color: green;
}

.deny-mr-btn:hover, .accept-mr-btn:hover, .deny-lr-btn:hover, .accept-lr-btn:hover{
    background-color: var(--primeBlue);
    cursor: pointer;
}


.welcome a{
    text-decoration: none;
}

.form-success{
    color: green;
}

.home-buttons{
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.home-buttons button{
    margin: 5px 0px;
}

.report-table{
    border-collapse: collapse;
    width: 100%;
}

.report-table tr{
    border-bottom: 1px solid var(--primeGreen);
}

.report-table td{
    vertical-align: middle;
    text-align: left;
}

.report-table thead th{
    font-weight: bold;
    text-align: left;
}

.report-table td{
    padding: 5px;
    text-align: left;
}

#admin-content{
    width: 100%;
}

#admin-content .item-box{
    width: 45%;
    padding: 10px;
    height: 50px;
}

.report-buttons{
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/*.report-print, .report-cancel{*/
/*    padding: 5px;*/
/*    border-radius: 5px;*/
/*}*/

.report-cancel{
    text-decoration: none;
}

.report-table{
    overflow-x: scroll;
}

.how-to ul{
    list-style-type: disc !important;
}

.how-to h5{
    text-align: center;
    background-color:  var(--primeBlue);
    padding: 10px 5px;
    border-radius: 5px 5px 0px 0px ;
    color: white;
    font-weight: bold;
}

.my-teams table, .my-leagues table {
    width: 100%;
}

thead th{
    font-weight: bold;
    text-align: center;
}

.fixture h3, .fixture-section h3{
    text-align: center;
    padding: 3px;
    font-weight: bold;
}

.fixture-section.LIVE > p,
.fixture-section.HALFTIME > p,
.fixture-section.EXTRA_TIME > p,
.fixture-section.PENALTY_SHOOTOUT > p,
.fixture.LIVE > p,
.fixture.HALFTIME > p,
.fixture.EXTRA_TIME > p,
.fixture.PENALTY_SHOOTOUT > p
{
    color: red !important;
    font-weight: bold;
}

.fixture-section.LIVE .home-score,
.fixture-section.HALFTIME .home-score,
.fixture-section.EXTRA_TIME .home-score,
.fixture-section.PENALTY_SHOOTOUT .home-score,
.fixture.LIVE .home-score,
.fixture.HALFTIME .home-score,
.fixture.EXTRA_TIME .home-score,
.fixture.PENALTY_SHOOTOUT .home-score,

.fixture-section.LIVE .away-score,
.fixture-section.HALFTIME .away-score,
.fixture-section.EXTRA_TIME .away-score,
.fixture-section.PENALTY_SHOOTOUT .away-score,
.fixture.LIVE .away-score,
.fixture.HALFTIME .away-score,
.fixture.EXTRA_TIME .away-score,
.fixture.PENALTY_SHOOTOUT .away-score
{
    color: red !important;
    border: 1px solid red;
}

.fixture-section.DELAYED > p,
.fixture-section.POSTPONED > p,
.fixture-section.INTERRUPTED > p,
.fixture-section.PAUSED > p,
.fixture-section.CANCELED > p,
.fixture-section.ABANDONED > p,
.fixture-section.UNKNOWN > p,
.fixture-section.INACTIVE > p,
.fixture.DELAYED > p,
.fixture.POSTPONED > p,
.fixture.INTERRUPTED > p,
.fixture.PAUSED > p,
.fixture.CANCELED > p,
.fixture.UNKNOWN > p,
.fixture.INACTIVE > p
{
    color: yellow !important;
    font-weight: bold;
}

.fixture-section.FINISHED > p,
.fixture-section.COMPLETED > p,
.fixture-section.ENDED > p,
.fixture-section.FT > p,
.fixture.FINISHED > p,
.fixture.COMPLETED > p,
.fixture.ENDED > p,
.fixture.FT > p
{
    color: black !important;
    font-weight: bold;
}

.fixture:hover, .fixture-section:hover, .leagueStanding:hover, .league-item-box, .team-item-box, .player-item-box {
    cursor: pointer;
}

.fixture p, .fixture-section p{
    text-align: center;
}

.top-leagues .league-item-box, .top-teams .team-item-box{
    width: 100% !important;
}

.PROMOTION{
    background-color: blue !important;
    color: white !important;
    border-radius: 5px;
}

.PROMOTION_1{
    background-color: maroon !important;
    color: white !important;
    border-radius: 5px;
}

.PROMOTION_2 {
    background-color: yellow !important;
    color: white !important;
    border-radius: 5px;
}

.PLAY_OFFS{
    background-color: grey !important;
    color: white !important;
    border-radius: 5px;
}

.RELEGATION{
    background-color: red !important;
    color: white !important;
    border-radius: 5px;
}

.logo-container {
    display: flex;
    justify-content: center; /* Centers logos horizontally */
    align-items: center; /* Aligns logos vertically */
    gap: 15px; /* Space between logos */
    flex-wrap: wrap; /* Ensures responsiveness */
    margin-top: 30px;
}

/* Style for logos inside links */
.logo-container a img {
    max-width: 100px; /* Default size for large screens */
    height: auto;
}

.league-standing-team{
    display: flex;
    justify-content: left;
    font-size: small;
    width: auto;
}

/* Adjust size on small screens */
@media (max-width: 768px) {
    .logo-container a img {
        max-width: 50px; /* Smaller size for small screens */
    }

    .league-standing-team {
        max-width: 110px !important;
        overflow-x: hidden; /* Prevent horizontal overflow */
        white-space: normal; /* Allows text to wrap */
        word-wrap: break-word; /* Ensures long words break onto the next line */
        overflow-wrap: break-word; /* Additional support for wrapping */
    }
}

.display-image {
    width: auto; /* Default to full width */
    max-width: 50%;
}

.display-image img{
    width: auto;
    height: auto;
    max-height: 100%;
}

@media screen and (max-width: 1024px) { /* Applies to large screens */
    .display-image {
        width: 50%; /* Restrict width to 50% on large screens */
    }
}

.item-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.item-box:hover {
    background-color: #eaeaea;
}

.p-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.item-name {
    font-size: 18px;
    font-weight: bold;
}

.share-icon {
    margin-left: auto;
    font-size: 20px;
    color: #007bff;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.share-icon:hover {
    color: #0056b3;
}

.item-box:hover {
    background-color: #eaeaea;
}

.item-box, .player-item-box{
    overflow: visible; /* Ensures all content is shown */
    white-space: normal; /* Allows text wrapping */
    word-wrap: break-word; /* Prevents words from breaking layout */
    display: flex; /* Ensures items inside adjust dynamically */
    flex-wrap: wrap; /* Wraps items instead of overflowing */
    max-width: 100%; /* Prevents content from exceeding container width */
}

.league-standings, .searched-league-standings {
    position: relative;
    max-width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling if needed */
    display: block;
}

.league-standings table, .searched-league-standings table {
    width: auto; /* Allows the table to adjust based on content */
    table-layout: auto; /* Lets columns resize dynamically */
    border-collapse: collapse; /* Prevents unnecessary gaps */
}

.league-standings td, .league-standings th, .searched-league-standings td, .searched-league-standings th {
    white-space: nowrap; /* Prevents line breaks that could cause overflow */
    word-wrap: break-word; /* Ensures text breaks naturally */
}

.league-standings .p-logo, .searched-league-standings .p-logo{
    max-width: 25px !important;
    max-height: 25px !important;
}


/* @media (max-width: 768px) {
    .league-standings, .searched-league-standings {
        overflow-x: auto; 
    }
} */

.btn{
    cursor: pointer;
}

.responsive-banner {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.responsive-banner img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
}