/* :root{
    --header-color:#39425C;
    --background-color: #EAEAEA;
    --foreground-color:#FAFAFA;
    --splitter-color: #D1D1D1;
    --foreforeground-color:#FAFAFA;
    --white-text: #efefef;
    --black-text: #4F4F4F;
    --grey-text: #8E93A2;
    --home-color: #5EA9FF;
    --away-color: #FF5E5E;
} */

:root{
    --header-color:#191E2C;
    --underheader-color:#57648A;
    --underunderheader-color:#6f7fad;
    --background-color: #141824;
    --foreground-color:#1a1e2b;
    --splitter-color:#11131c;
    --foreforeground-color:#11131c;
    --white-text: #efefef;
    --black-text: #b8b8b8;
    --grey-text: #8E93A2;
    --home-color: #5EA9FF;
    --away-color: #FF5E5E;
}


body {
    font-family: "Bebas Neue", sans-serif;
    background-color: var(--background-color);
    max-width: 100%;
    overflow-x: hidden;
}

a {
    cursor: pointer;
}

.header {
    background-color: var(--header-color);
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
}

.underheader{
    display: none;
}

.timemenu{
    display: none;
}

.wrapper {
    margin: 5px;
    display: flex;
    justify-content: center;
    position: relative; /* Add position relative for correct modal positioning */
    height: 100%;
}

.button {
    width: 90px;
    height: 90px;
    line-height: 90px;
    color: var(--white-text);
    text-align: center;
}

.collapsiblebutton {
    width: 90px;
    height: 90px;
    line-height: 90px;
    color: var(--white-text);
    text-align: center;
}


.match_overview {
    width: 40%;
    height: 90px;
    color: var(--white-text);
    text-align: center;
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
}

.matchstats {
    height: 800px;
    width: 360px;
    display: grid;
    gap: 0px;
    grid-template-columns: auto auto;
    grid-auto-rows: 70px;
}

.statnumber {
    font-size: 70px;
    text-align: center;
    line-height: 70px;
    height: 56px;
    width: 56px;
    margin: 5px;
}

.tablebox {
    width: 1000px;
    height: 100%;
    font-size: 20px;
    margin-left: 5px;
    text-align: center;
    line-height: 42px;
    border-radius: 5px;
    position: relative; /* Add position relative for correct modal positioning */
}

.headerbox {
    background-color: var(--home-color);
}

table {
    background-color: var(--foreground-color);
    width: 100%;
    border-radius: 5px;
}

th {
    color: var(--white-text);
    height: 45px;
    cursor: default;
    background-color: var(--home-color);
}

tr {
    height: 40px;
    border-bottom: 3px solid var(--splitter-color);
    cursor: pointer;
}

table tr:nth-child(even) {
    background-color: var(--foreground-color);
}

table tr:hover {
    background-color: var(--splitter-color);
}

table tr:first-child {
    border-bottom: 0px;
}

table tr:last-child {
    border-bottom: 0px;
}

#statbuttonleft {
    font-size: 18px;
    height: 70px;
    width: 180px;
    background-color: var(--foreground-color);
    color: var(--black-text);
    padding: 0px 0px 0px 30px;
    border-bottom: 3px solid;
    border-right: 2px solid;
    border-color: var(--splitter-color);
    display: flex;
    justify-content: space-between;
    line-height: 70px;
}

#statbuttonright {
    font-size: 18px;
    height: 70px;
    width: 180px;
    background-color: var(--foreground-color);
    color: var(--black-text);
    padding: 0px 30px 0px 0px;
    border-bottom: 3px solid;
    border-left: 2px solid;
    border-color: var(--splitter-color);
    display: flex;
    text-align: right;
    justify-content: space-between;
    line-height: 70px;
}

#scoretext {
    font-size: 70px;
    padding: 0px 25px 25px;
}

#greytext {
    color: var(--grey-text);
    font-size: 25px;
    padding: 25px;
    align-self: center;
}

#live {
    font-size: 25px;
    align-self: center;
}

#logo {
    width: 50px;
    height: 50px;
    align-self: center;
}

#back {
    margin: 0px 90px 0px;
}

#blue {
    color: var(--home-color);
}

#red {
    color: var(--away-color);
}

/* Modal Styling */
.modal {
    display: none;
    position: absolute; /* Use absolute to overlay over the parent element */
    top: 399px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Cover the width of the parent element (e.g., the table) */
    height: 800px;
    z-index: 2000; /* Set a high value to ensure it appears above other content */    
}

.modal-content {
    background-color: var(--foreground-color);
    padding: 20px;
    border: 0px;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    color: var(--black-text);
}

.close {
    position: absolute;
    top: 0px;
    right: 15px;
    color: var(--black-text);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Player Grid Styling */
.player-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.player-card {
    background-color: var(--foreforeground-color);
    color: var(--white-text);
    padding: 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.player-card:hover {
    background-color: #2d364a;
}

.player-card.selected {
    background-color: #FF6F6F; /* Highlight selected players */
}

#Match_ingame_time{
    color: var(--button-color);
}

        /* Styles for the collapsible timeline */
        .collapsible {
            background-color: var(--header-color);
            color: var(--button-color);
            cursor: pointer;
            padding: 10px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 18px;
        }

        .collapsible:hover {
            background-color: #2d364a;
        }

        .content {
            padding: 10px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.5s ease;
            background-color: var(--foreground-color);
            opacity: 0;
            display: none;
            position: absolute;
            width: 100%;
            border: 1px;
            border-color: var(--foreground-color);
            top: 0px;
            z-index: 10; /* Ensure it appears on top of the tablebox */
        }

        .content.visible {
            opacity: 1;
            display: block;
        }

        .timeline-event {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .timeline-event .event-home {
            text-align: right;
            color: var(--home-color); /* Matches the blue for home stats */
            margin-right: 10px; /* Reduce the space between home text and time */
        }

        .timeline-event .event-time {
            text-align: center;
            color: var(--grey-text);
            width: 70px; /* Adjust width as needed */
        }

        .timeline-event .event-away {
            text-align: left;
            color: var(--away-color); /* Matches the red for away stats */
            margin-left: 10px; /* Reduce the space between time and away text */
        }

        .home-event {
            text-align: left;
            color: var(--home-color); /* Matches the blue for home stats */
        }

        .away-event {
            text-align: right;
            color: var(--away-color); /* Matches the red for away stats */
        }

        .wrapper {
            position: relative;
        }

        .min{
            border-radius: 0px 5px 0px 0px;
        }

        th::before {
            content: attr(fullname);
        }

        .applybutton{
            background-color: var(--away-color);
            width: 100px;
            border-radius: 5px;
            color: var(--splitter-color);
        }

        .twomin{
            border-radius: 0px 5px 0px 0px;
            width: 125px;
        }

        td{
            color: var(--black-text);
        }

        .yellow_card{
            width: 125px;
        }

        .percantage{
            width: 125px;
        }

        .shot{
            width: 125px;
        }

        .goal{
            width: 125px;
        }

        .scpr{
            width: 125px;      
        }

        .Playername{
            text-align: left;
            padding-left: 50px;
        }

        .toggle-container {
            display: inline-block;
            position: relative;
            width: 50px;
            height: 24px;
        }

        .toggle-checkbox {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--underheader-color);
            transition: 0.4s;
            border-radius: 24px;
        }

        .toggle-slider::before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: var(--white-text);
            transition: 0.4s;
            border-radius: 50%;
        }

        .toggle-checkbox:checked + .toggle-slider {
            background-color: var(--home-color);
        }

        .toggle-checkbox:checked + .toggle-slider::before {
            transform: translateX(26px);
        }
        
        .ownerbox{
            display: flex;
            flex-direction: column;
            width: 120px;
            justify-content: center;
            align-items: center;
            color: var(--white-text);
        }

        .timemenu{
            display: none;
        }



        @media (max-width: 1200px){
            .button {
                display: none;
            }

            .settings {
                line-height: 51px;
            }
        
            #greytext {
                color: var(--grey-text);
                font-size: 25px;
                padding: 25px;
                align-self: center;
            }

            .underheader{
                position: relative;
                display: flex;
                height: 40px;
                background-color: var(--underheader-color);
                border-radius: 0px 0px 5px 5px;
                justify-content: space-evenly;
                color: var(--white-text);
                z-index: 1;
            }

            .match_overview {
                width: 90%;
            }

            .tablebox {
                font-size: 15px;
            }

            .twomin{
                border-radius: 0px 5px 0px 0px;
                width: 80px;
            }
    
            .yellow_card{
                width: 80px;
            }
    
            .percantage{
                width: 80px;
            }
    
            .shot{
                width: 80px;
            }
    
            .goal{
                width: 80px;
            }
    
            .Playername{
                text-align: left;
                padding-left: 50px;
            }

            .timemenu {
                position: relative;
                display: flex;
                height: 50px;
                background-color: var(--underunderheader-color);
                border-radius: 0px 0px 5px 5px;
                justify-content: space-evenly;
                color: var(--white-text);
                z-index: 1;
                margin-top: -5px;
            }

            .collapsiblebutton{
                margin-right: 25px;
            }
            
            .matchstats{
                height: 650px;
            }

            .modal {
                top: 0px;
                height: 600px;
                transform: translate(0%, 0%);
                left: 0;
            }

            .timemenu{
                margin-top: -2px;
                height: 40px;
            }
        }

        @media (max-width: 768px){

        }

        @media (max-width: 600px){
            
            .header {
                background-color: var(--header-color);
                width: 100%;
                height: 90px;
                display: flex;
                justify-content: center;
                font-size: 20px;
            }

            .underheader{
                position: relative;
                display: flex;
                height: 50px;
                background-color: var(--underheader-color);
                border-radius: 0px 0px 5px 5px;
                justify-content: space-evenly;
                color: var(--white-text);
                z-index: 1;
            }

            .timemenu{
                position: relative;
                display: flex;
                height: 50px;
                background-color: var(--underunderheader-color);
                border-radius: 0px 0px 5px 5px;
                justify-content: space-evenly;
                color: var(--white-text);
                z-index: 1;
                margin-top: -5px;
            }

            .headerbox{
                background-color: var(--home-color);
            }

            .wrapper{
                flex-direction: column;
            }

            #scoretext {
                font-size: 40px;
                padding: 20px 25px 25px;
            }
            
            #greytext {
                color: var(--grey-text);
                font-size: 12px;
                padding: 10px;
                align-self: center;
            }
            
            #live {
                font-size: 20px;
                align-self: center;
            }
            
            #logo {
                width: 25px;
                height: 25px;
                align-self: center;
            }
            
            #back {
                margin: 0px 0px 0px;
            }

            .button {
                display: none;
            }

            .collapsiblebutton {
                display: none
            }

            .match_overview {
                width: 100%;
                justify-content: space-around;
            }
            
            .matchstats{
                width: 100%;
                height: 635px;
            }

            #statbuttonleft {
                width: 100%;
            }
            
            #statbuttonright {
                width: 100%;
            }

            .tablebox{
                width: 100%;
                font-size: 15px;
                margin-left: 0px;
                height: 100%;
            }

            #Non_import{
                display: none;
            }

            .yellow_cards{
                display: none;
            }

            .two_min_penalties{
                display: none;
            }
            .scpr{
                border-radius: 0px 5px 0px 0px;
                width: 35px;      
            }

            th::before {
                content: attr(shortname);
            }

            .Playername{
                text-align: left;
                padding-left: 20px;
            }

            .player-card {
                padding: 10px;
            }
            
            th{
                padding: 0px 2px;
                background-color: var(--home-color);
                color: var(--white-text);
            }
            
            .modal{
                position: absolute;
                transform: translate(0px, -800px);
                height: 800px;
                left: 0;
                top: 165px
            }

            .player-grid{
                grid-template-columns: repeat(1, 1fr);
                gap: 10px;
            }

            .settings{
                line-height: 51px;
            }

            .yellow_card{
                display: none;
            }

            .percantage{
                width: 25px;
                margin-right: 20px;
            }
    
            .shot{
                width: 25px;
            }
    
            .goal{
                width: 25px;
            }

            #ownershipStatus{
                padding: 5px;
                font-size: 11px;
            }

            .toggle-container {
            display: inline-block;
            position: relative;
            width: 50px;
            height: 24px;
            }

            .toggle-checkbox {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: var(--underheader-color);
                transition: 0.4s;
                border-radius: 24px;
            }

            .toggle-slider::before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 3px;
                bottom: 3px;
                background-color: var(--white-text);
                transition: 0.4s;
                border-radius: 50%;
            }

            .toggle-checkbox:checked + .toggle-slider {
                background-color: var(--home-color);
            }

            .toggle-checkbox:checked + .toggle-slider::before {
                transform: translateX(26px);
            }
            
            .ownerbox{
                display: flex;
                flex-direction: column;
                width: 70px;
                justify-content: center;
                align-items: center;
                color: var(--white-text);
            }

        }