/* ensure mobile viewport works correctly (see HTML fix below) */
html, body {
  margin: 0;
  padding: 0;
  background-color: #C40000; /* red page background for header/menu */
  overflow-x: auto;          /* allow horizontal scrolling */
  height: 100%;
}



/* header/menu stay visually red because page/html/body are red */
#header, #menu {
  background-color: transparent; /* let the body/html red show through */
  min-width: inherit;              inherits the expanded width */
}

/* body content area remains white */
#body {
  background-color: #ffffff;
   min-width: max-content;   /* also expand to content width */
    min-height: 100% !important;
}

/* keep header/menu heights as before */
#header { height: 60px; }
#menu { height: 40px; }
#headertext {
    color:white;
    text-shadow: 2px 2px black;
    font-weight:bold;
    font-family:Helvetica;
    font-size:2em;
    padding: 0px;
    }
#headersubtext {
    color:white;
    text-shadow: 2px 2px black;
    font-weight:bold;
    font-family:Helvetica;
    font-size:1em;
    font-style: italic;
    padding: 0px;
    }
    
#headerContent{
    margin: 0 auto; width: 100%;
}
#menuContent {
      font-size:1em;
  }
#menufont {
    font-size:2em;
}
#menu{
    width:100%;
    height:60px;
    margin: auto;
    background-color:#C40000;
}
.button {
     color: white;
     text-decoration: none;
     border: 0px solid red;
     background: #C40000;
     text-decoration: none;
     font-weight:bold;
     font-size: 0.9em;
     vertical-align: middle;
     font-family: Arial, sans-serif;
    }
.buttonfooter {
     color: blue;
     text-decoration: none;
     border: 0px solid white;
     background: #ffffff;
     text-decoration: none;
     font-weight:bold;
     font-size: 0.9em;
     vertical-align: middle;
     font-family: Arial, sans-serif;
    } 
.buttonlink {
     color: red;
     text-decoration: none;
     background: transparent;
     text-decoration: none;
     border: 0px solid white;
     font-weight:bold;
     font-size: 0.9em;
     vertical-align: left;
     font-family: Arial, sans-serif;
    }
.submit-as-text {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;       /* ensures identical font, size & spacing */
    color: #C40000;          /* make it red */
    cursor: pointer;
    text-align: left;    /* aligns exactly like normal text */
}

.submit-as-text-red-bold {
    background: none;
    border: none;
    padding: 0;
    font-weight:bold;
    margin: 0;
    font-size: 1em;       /* ensures identical font, size & spacing */
    color: #C40000;          /* make it red */
    cursor: pointer;
    text-align: left;    /* aligns exactly like normal text */
}

.submit-as-text-report-red-bold {
    background: none;
    border: none;
    padding: 0;
    font-weight:bold;
    margin: 0;
    font-size: 1.4em;       /* ensures identical font, size & spacing */
    color: #C40000;          /* make it red */
    cursor: pointer;
    text-align: left;    /* aligns exactly like normal text */
}




.submit-as-text-white {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;       /* ensures identical font, size & spacing */
    color: white;          /* make it white */
    cursor: pointer;
    text-align: left;    /* aligns exactly like normal text */
}
.submit-as-text-black-bold {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;       /* ensures identical font, size & spacing */
    color: black;          /* make it black */
    cursor: pointer;
    font-weight:bold;
    text-align: left;    /* aligns exactly like normal text */
}

.selectseasonplain {
    background-color: #fff !important;
    color: red !important;
    border: solid 1px black  !important;
    padding: 8px 34px 8px 10px !important;
    border-radius: 6px !important;
    font-weight:bold;
    font-size: 1em;
    font-family: Arial, sans-serif;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

.selectseason {
    background-color: #C40000 !important;
    color: white !important;
    border: solid 1px white  !important;
    padding: 8px 34px 8px 10px !important;
    border-radius: 6px !important;
    font-weight:bold;
    font-size: 0.9em;
    font-family: Arial, sans-serif;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}
.font {
    font-family: Arial, sans-serif;
}





.table-section {
margin-bottom: 30px;
}
        
.table-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
cursor: pointer;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
        
.table-header:hover {
background-color: #e0e0e0;
}
        
.toggle-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.toggle-icon.rotated {
    transform: rotate(90deg);
}
        
.table-title {
font-size: 18px;
font-weight: bold;
margin: 0;
}
        
.table-container {
display: none;
overflow: hidden;
}
        
.table-container.visible {
display: block;
}





.menu-container {
position: relative;
display: inline-block;
}

.menu-button {
background-color: #C40000;
color: white;
padding: 16px 24px;
font-size: 16px;
font-weight:bold;
border: none;
cursor: pointer;
border-radius: 4px;
}

.menu-button:hover {
background-color: #000000;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 4px;
padding: 10px 0;
}

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

.menu-section {
padding: 8px 16px;
}

.menubutton {
background-color: #000000;
color: white;
padding: 8px 8px;
text-align: center;
text-decoration: none;
display: block;
margin: 0px 0;
cursor: pointer;
border: none;
border-radius: 3px;
width: 100%;
}

.menubutton:hover {
background-color: #C40000;
}
.selectseason {
padding: 8px;
margin: 4px 0;
width: 100%;
border-radius: 3px;
border: 1px solid #ccc;
}