.body{
    display: flex;
    flex-direction: row;

}
.sec1{
    display: flex;
    flex-direction:column;
    border: 1px solid;   
}
a{
    
    margin-left: 10px;
    margin-right: 10px;
    color: rgb(234, 234, 243);
}
.sec2{
    margin-top:15px ;
    max-height: 900px; /* Set the maximum height for the form */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border to make the area more distinguishable */
    padding: 10px; 
    background-color: green;
} 
.sec2 thead th {
    position: sticky; 
    top: 0; 
    background:green; 
    z-index: 1; 
    
}
.sec2 form {
    max-height: 500px; 
    overflow-y: auto; 
    border: 1px solid #ccc; 
    padding: 0px; 
    position: relative; 
    background-color: aliceblue;
   
}
table {
    width: 100%;
    border-collapse: collapse;
    height: 50%;
    margin-top: 0px;
}

table th {
    background-color: green;
    padding: 1px;
    text-align:center;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    
    color: #f9f9f9;
    font-size: 12px;
    
}

table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: small;
    font-weight: bold;
    
}
td[class*="oddft"] {
    color:blue; 
}
td[class*="bkft"] {
    color:rgb(233, 24, 69); 
}
table tr:last-child td {
    border-bottom: none;
    
}


.sec1 {
    padding: 15px;
    background-color:green;
    border-bottom: 1px solid #ccc;
}

.filter-row {
    margin-bottom: 10px;
}

.filter-row select, .filter-row input {
    margin-right: 10px;
    background-color: rgb(204, 239, 181);
}

#addFilterBtn {
    margin-top: 10px;
    background-color: rgb(16, 152, 89);
    font-weight: bold;
} 
button{
    background-color: blue;
    color: aliceblue;
    font-weight: bold;
    border-color: aliceblue;
    border-radius: 5px;
}

.caut{
    background-color: green;
}
.calculation {
    display: flex;
    
    margin-top: 20px;
    background-color: green;
}
.calcha, .calcdr{
    display: flex;
    
    width: 50%;
    border: 1px solid;
}
.teams-h, .teams-a {
    display: flex;
    flex-direction: column;
    align-items: left;
    flex: 1;
    
}
.teams-h span, .teams-a span {
    display: block;
    margin-bottom: 10px;
    color: aliceblue;
    
}
.unexp,.unexp-value, .unexpdr,.unexpdr-value{
    color: greenyellow;
    font-weight: bold;
}
.surp{
    margin-top: 15px;
    font-family: sans-serif;
    background-color: rgb(232, 241, 241);
    color: rgb(2, 12, 3);
    font-size: 14px;
}
p {
    margin-top: 3px; /* Adjust as needed */
    margin-bottom: 3px; /* Adjust as needed */
}
.expl{
    margin-top: 15px;
    background-color: rgb(232, 241, 241);
    color: rgb(2, 12, 3);
    font-family: sans-serif;
    font-size: 14px;

}
.odds-calc{
    display: flex;
    margin-top: 10px;
    background-color: green;
    align-items:center;
    justify-content: center;

}
form#expG {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 600px; /* Adjust this width as needed */
    margin: auto;
}
.expG {
    flex: 1 0 30%; /* Adjust the flex-basis percentage as needed */
    margin: 5px;
    box-sizing: border-box;
}
.button-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
}
.button-container button {
    flex: 1 0 48%; /* Adjust the flex-basis percentage as needed */
    margin: 5px;
}
.xGhome, .xGaway {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}
.xGhome {
    background-color: lightblue; /* Example styling */
}
.xGaway {
    background-color: lightcoral; /* Example styling */
}
.over{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
   
    
}

.bestov15,.bestov25,.bestht05,.bestgg,.bestft1,.bestft2 {
    background-color:aliceblue;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    
}
.airec{
    display: flex ;
    
    
}
#bestFt15,#bestFt25{
    flex-direction: row;
    background-color:aliceblue;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}


.surpel{
    background-color: #f9f9f9;
}
.sticky-date,
.sticky-championship,
.sticky-home,
.sticky-away {
    position: sticky;
    left: 0;
    background-color: white; /* Ensures the cells are readable */
    z-index: 2; /* Ensures these cells are above other cells */
}

.sticky-championship {
    left: 80px; /* Adjust according to your column width */
}

.sticky-home {
    left: 180px; /* Adjust according to your column width */
}

.sticky-away {
    left: 280px; /* Adjust according to your column width */
}



/* Mobile styles */
@media (max-width: 1200px) {
    .body {
        flex-direction: column; /* Stack items vertically */
        width: 100%;
    }

    .sec1 {
        flex-direction: column; /* Stack items vertically */
    }

    .calcha, .calcdr {
        width: 100%;
    }

   .over {
        flex-direction: column; /* Stack items vertically */
    }

    
   .tablesb{
    flex-direction: column;
   }
    table {
        width: 100%;
        height: auto;
    }

    table th, table td {
        font-size: 10px; /* Adjust the font size for smaller screens */
        padding: 5px; /* Adjust padding for smaller screens */
    }

    .teams-h, .teams-a {
        align-items: flex-start;
    }

    
}