/* General Reset */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;statistik
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    max-width: 1000px;
    margin: auto;
    overflow: auto;
}

html {
    background-color:#555;
    scrollbar-gutter: stable both-edges;
}
/* Header Styling */
header {
    text-align: center;
    width: 100%;
    max-width: 1000px;
}
main  {
    padding-top: 10px;
    padding-left: 4px;
    padding-right: 4px;
    /*border-radius: 5px;*/
    border-left: 1px solid #333; 
    border-right: 1px solid #333;
    background-color: #fff;
    min-height: 200px;
}
footer {
    padding-top: 8px;
    border-left: 1px solid #333; 
    border-right: 1px solid #333; 
    border-bottom: 1px solid #333; 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fff;
    font-size: 0.9rem;
}
footer p { 
    margin: 10px 0 10px 0;
    text-align: center;
}
header img {
    width: 100%;
    max-width: 1000px;
    max-height: 82px;
    display: block; /* Removes bottom whitespace caused by inline display */
    margin: 0; /* Ensures no margin around the image */
    padding: 0; /* Removes any padding */
}
/* Navigation Styling */
nav {
    position: relative;
    background: #333;
}

.baneimg {
    object-fit: contain;
    width:70%;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0 10px;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 2px;
    flex-flow: row;
}

.break-column {
    flex-basis: 100%;
    width: 0;
    height: 12px;
  }

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 10px;
    background: #333;
    flex-wrap: wrap;
}

nav ul li {
    margin: 0 15px;
    overflow:hidden;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
}

/* Table Styling */
.season-stats {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.season-stats th, .season-stats td {
    padding: 10px;
    border: 1px solid #ddd;
}

.season-stats-bracket td {
    padding: 4px;
    border: 1px solid #ddd;
    background: #555;
    color: #fff;
}

.season-stats th {
    /*background: #555;*/
    background-color: #007bff;
    color: #fff;
}

.season-stats tr:nth-child(even):not(.season-stats-bracket) {
    /*background: #f9f9f9;*/
    background: #eeebeb;
}
.season-stats td:nth-last-child(1) {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left:none;
    width: 20px;
}
.season-stats td:nth-last-child(2) {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right:none;
}

.season-stats {
    display:inline-table;
    overflow-x:scroll;
}
.season-selector {
    display: flex;
    /*justify-content: left;*/
    gap: 5px;
    margin-top: 0px;
    flex-wrap: wrap;
}
.button {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}
.button:hover {
    background-color: #0056b3;
}
.seasonbutton {
    margin:0;
    padding:0;
    padding: 5px;
    font-size: 1rem;
    vertical-align: middle;
    width:auto;
}

button, select, input {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    margin-top: 2px;
    background-color: #e8e3e3;
}
input[type=submit] {
    background-color: #007bff;
    color: #fff;
}
button {
    background-color: #007bff;
    color: #fff;
}
button:hover {
    background-color: #0056b3;
}
.statistik tr:nth-child(even), .statistik-bracket tr:nth-child(even) {
    background: #f9f9f9;
    background: #eeebeb;
}
.statistik th, .statistik-bracket th {
    background-color: #007bff;
    /*background-color: #555;*/
    color: white;
}
.statistik {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    /*font-size: 0.9rem;*/
}
.statistik-bracket {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 6px;
    /*font-size: 0.9rem;*/
}
.statistik th, .statistik td, .statistik-bracket th, .statistik-bracket td {
    border: 1px solid #ddd;
    text-align: center;
    /*padding: 6px;*/
    padding: 8px;
}
.statistik td, .statistik-bracket td {
    text-align: center;
}
.statistik td:first-child, .statistik-bracket td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seasons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.seasons-container-upcomming {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: left;
}

.season,.view_race {
    background-color: white;
    border: 1px solid #ccc;
    padding: 0px 14px 14px 14px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    width: 250px;
}
.season,.view_race h3 {
    margin-bottom: 10px;
    color: #007bff;
}

.season h3 a,.view_race a {
    color: #007bff;
    text-decoration: none;
}
.season h3 a:hover,.view_race a:hover {
    opacity: 0.8;
}

.season-section h3 {
    margin-bottom: 10px;
}
.season-section h3 a {
    font-size: 0.8rem;
}
.season-regler {
    width: 100%;
    font-size:0.95rem;
    /*text-wrap: wrap;*/
    overflow:auto;
    white-space: normal;
    padding-bottom: 6px;
    /*text-overflow: ;*/
    /*overflow: hidden;*/
    /*word-break:break-all;*/
}
.regler {
    width: 100%;
    /*font-size:0.9rem;*/
    /*text-wrap: wrap;*/
    overflow:auto;
    white-space: normal;
    padding-bottom: 6px;
    font-size: 0.95rem;
    /*text-overflow: ;*/
    /*overflow: hidden;*/
    /*word-break:break-all;*/
}

.frontpage {
    width: 100%;
    font-size:0.95rem;
    overflow:auto;
    white-space: normal;
    padding-bottom: 6px;
}

.frontpage h1 {
    margin-bottom: 24px;
}

.frontpage img {
    /*width:100vh;
    height: auto;*/
    /*max-width: 600px;
    max-height: 291px;
    
    margin-top: 16px;
    object-fit: contain;*/
    margin-top: 24px;
    padding: 0;
    display: block;
    max-height: 291px;
    max-width: 600px;
    width: auto;
    height: auto;
}

/*
FRONT PAGE CONTAINER
*/
/*.fp-container { 
    gap: 10px;
    overflow:scroll;
    flex-wrap: nowrap;
    justify-content: left;
    padding-bottom:8px;
}*/

/*.fp-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}*/

a {
    color: #000;
    text-decoration: underline; 
}

a:hover {
    opacity: 0.8;
}

.driver a,.season-stats a,.stats-section a,.stats-section-bracket a {
    color: #000;
    text-decoration: none;  
}

.driver a:hover, .fp-lastrace h3 a:hover,.season-stats a:hover,.stats-section a:hover,.stats-section-bracket a:hover,.view_race_stats a:hover { 
    opacity: 0.8;
    /*text-decoration:underline;*/
} 

.fp-lastrace h3 a {
    color: #007bff;
    text-decoration: none; 
}

.view_race_stats a {
    color: #000;
    text-decoration: none;   
}

.fp-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: left;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0px 6px 6px 6px;
}

.section_rules p {
    padding: 6px 0px 6px 0px;   
}
.section_rules { 
    font-size:0.9rem;
}
.section_rules p:first-child { 
    font-size:1.05rem;
    text-decoration: solid;
}

.section_rules h2 {
    margin-top: 6px;
}

.fp-lastrace {
    background-color: white;
    border: 1px solid #ccc;
    padding: 0px 14px 14px 14px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    width: 250px;
}
.fp-lastrace h3 {
    margin-bottom: 4px;
    color: #007bff;
}
.fp-lastrace p,.view_race_date {
    margin:0;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.view_race_stats {
    margin:0;
    margin-top: 10px;
    font-size: 0.8rem;
}
/*
END
*/


.top3-box {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 8px;
}

.fp-top3-box {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 2px;
}

.entry {
    display: grid;
    grid-template-columns: 30px auto 60px;
    align-items: center;
    padding: 1px;
    background: #ffffff;
    /*border: 1px solid #ddd;
    border-radius: 5px;*/
}

.position {
    text-align: left;
    font-weight: bold;
    color: #000;
}

.banen {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: visible;
    white-space: nowrap;
    font-size: 12px;
    color: #000;  
}

.driver {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: visible;
    white-space: nowrap;
    font-size: 14px;
    color: #000;
}

.points {
    text-align: right;
    font-weight: bold;
    color: #007bff;
    font-size: 14px;
}

.season_tr td { 
    text-align: left;
}
.season_tr { 
    border: none;
}
.season_tr_nav td, .season_tr td {
    background-color: #007bff;
    color:#fff;
}


.collapsiblec, .collapsiblec_laps, .collapsible_season, .collapsiblec_resume {
	cursor: pointer;
	font-size: 16px;
	font-weight:bold;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.collapsiblec::after, .collapsiblec_laps::after, .collapsible_season::after, .collapsiblec_resume::after {
	content: url("../pic/icon/plus1.png");
	padding-left:6px;
}	

.activee::after {
	content: url("../pic/icon/minus1.png");
	padding-left:6px;
}
.contentc, .contentc_laps {
	cursor:pointer;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.contentc_resume {
	cursor:pointer;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}



/* Responsive Design */
@media (max-width: 768px) {
    footer {
        text-align: center;
        font-size: 14px;
        border: none;
    }
    main {
        border: none;
    }
    nav ul {
        display: none;
        flex-direction: column;
        align-items: center;
        background: #333;
        /*width: 100%;*/
    }
    nav ul.active {
        display: flex;
    }
    nav ul li {
        margin: 6px 0;
    }
    .menu-toggle {
        display: flex;
    }
    html {
        background-color:#fff;
    }

    .statistik {
        font-size: 0.7rem;
    }
    .statistik th, .statistik td {
        padding: 4px;
    }
    .season-stats th, .season-stats td {
        padding: 4px;
    }
    .season-regler {
        /*width: calc(100% + 12px);*/
        /*max-height: 60vh;*/
        overflow: scroll;
        max-height: 100%;
        text-wrap: nowrap;
        /*margin-right: 12px;*/
    }
    .regler {
        /*width: calc(100% + 12px);*/
        max-height: 100%;
        overflow: scroll;
        text-wrap: nowrap;
        font-size: 0.8rem;
        /*margin-right: 12px;*/
    }
    .frontpage {
        font-size: 0.8rem;
    }
    .frontpage img {
        margin-top: 16px;
        padding: 0;
        display: block;
        max-height: auto;
        max-width: 100%;
        width: auto;
        height: auto;
    }
    .section_rules h2 {
        margin-top: 2px;
    }
    .season-regler {
        font-size:0.8rem;
    }
    button, select, input {
        background-color: #eeebeb;
    }
}

@media (max-width: 600px) {
    main {
        font-size: 0.8rem;
        margin: 0 4px 0 4px;
    }

    /*.season-stats {
        font-size: 0.8rem;
    }*/
    /*.season-stats th, .season-stats td {
        padding: 0px;
    }*/
    .points,.driver,.entry { font-size: 0.8rem; }

    .banen {
        font-size: 0.7rem;
    }

    .season h3,.view_race h3 { 
        font-size: 0.9rem;
        margin-bottom: 8px;
    }
    .fp-lastrace h3 {
        margin:0;
        margin-top: 8px;
        padding:0;
        font-size: 0.9rem;
    } 
    .fp-lastrace p {
        margin:0;
        margin-bottom: 8px;
        margin-top:4px;
        font-size: 0.7rem;
    }
    .season,.view_race {
        width: 140px;
        padding: 0px 8px 8px 8px;
    }
    .fp-lastrace {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        padding: 0px 8px 8px 8px;
    }

    .entry { grid-template-columns: 15px auto 40px; }

    .seasons-container,.seasons-container-upcomming { gap: 10px; }
    .fp-container { 
        gap: 10px;
        overflow:scroll;
        flex-wrap: nowrap;
        justify-content: left;
        /*padding-bottom:8px;*/
        padding: 0px 2px 8px 2px;
    }
    .top3-box { 
        gap: 2px;
        overflow: visible;
    }

    .fp-top3-box { 
        gap: 2px;
        overflow: visible;
    }

    .driver a:hover, .fp-lastrace h3 a:hover,.season-stats a:hover,.stats-section a:hover,.stats-section-bracket a:hover { 
        opacity: 1;
    } 
    a:hover {
        opacity: 1;
    }
}



.stats-cal {
    width: 100%;
    overflow-x: auto;
    text-wrap: nowrap;
}
.cal {
    width: 100%;
    min-width:700px;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
}

.cal tr:nth-child(even) {
    background: #f9f9f9;
    background: #eeebeb;
}
.cal th {
    background-color: #007bff;
    /*background-color: #555;*/
    color: white;
}

.cal th, .cal td {
    padding: 10px;
    border: 1px solid #ddd;
}

.cal th {
    /*background: #555;*/
    background-color: #007bff;
    color: #fff;
}

.cal td:nth-last-child(1) {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left:none;
    width: 20px;
}

.cal th, .cal td {
    border: 1px solid #ddd;
    text-align: center;
    /*padding: 6px;*/
    padding: 8px;
}
.cal thead td {
    text-align: left;
}
.cal td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}