/* addon.css */

/* Target only tables with the class "t1" and "t2" */
table.t1 {
    border-collapse: collapse; /* Ensure no gaps between cells */
    width: 100%; /* Set table width to 100% */
    
}
table.t2 {
    font-size: 0.9em;
    border-collapse: collapse; /* Ensure no gaps between cells */
    width: 100%; /* Set table width to 100% */
    
}


.TblFrame {
    border: 1px solid #732C10;
}

/* Other styles remain the same */
.fixture-container {
    font-size: 0.8em; /* Adjust font size for better readability on mobile */
    width: 100%;
    margin-bottom: 5px;
}

.fixbox {
    width: 100%;
    height: auto; /* Adjust height dynamically */
    box-sizing: border-box;
    color: #F9F9F9;
    padding: 10px; /* Padding remains */
    text-align: center;
}

.fixbox-date, .fixbox-type {
    text-align: center;
    padding: 5px;
    background-color: #527942;
    margin: 0;
    width: 100%; /* Set to 100% */
}

.fixbox-details {
    background-color: #DDDDFF;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    margin: 0;
    width: 100%; /* Set to 100% */
}

.fixbox-details .fix-item {
    flex: 1;
    background-color: #E3E3E3;
    color: #000000;
    text-align: center;
    margin: 0;
}

.fixbox-details .fix-item.result {
    background-color: #FFB90F;
    padding: 2px 0;
    margin: 0;
}

.fixbox-report {
    background-color: #DB0000;
    text-align: center;
    padding: 10px;
    margin: 0;
}

.fixbox p {
    margin: 0;
}

.TblRowL td, .TblRowD td, .TblTitle td {
    color: #262626;
    font-size: 0.7em;
    font-weight: bold; 
    padding: 2px; /* Adjust padding if needed */
}

.TblRowL td {
    background: #CEE3C6;
}

.TblRowD td {
    background: #ADCFA5;
}

.TblTitle td {
    color: #732C10;
    font-size: 0.8em;
    font-weight: bold; 
    background: #CE8639;
}

/* Add TblTop styling with padding */
.TblTop td {
    color: #FFFFCC;
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 0; /* 3px padding for top and bottom */
    background: #732C10 url(content/images/brownbg.png) repeat;
    text-align: center; /* Ensure text is centered */
}

/* Remove the global width setting for other tables */
.Frame {
    background: #8CAE7B;
    border: 2px solid #527942;
    padding: 3px;
    text-align: center;
}

.BrownOne td {
    color: #FFFFCC;
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 0; /* 3px padding for top and bottom */
    background: #732C10 url(content/images/brownbg.png) repeat;
}

/* Increased specificity for CreamOne and CreamTwo */
table.t1 .CreamOne td, 
table.t1 .CreamTwo td {
    color: #732C10;
    font-size: 0.8em;
    font-weight: bold; 
    background: #D6CFAD;
    margin: 0;
    text-align: center; /* Center text within CreamOne */
    padding: 3px 0; /* Match padding with TblTop */
    
}

.GrayOne, .GreenOne, .GoldOne { 
    font-size: 0.7em;
    font-weight: bold;
    border-bottom: 1px solid #8B8378;
    margin: 0;
    padding: 0;
}

.GrayTwo, .GreenTwo, .GoldTwo {
font-size: 0.7em;
    font-weight: bold;
    border-bottom: 1px solid #8B8378;
    margin: 0;
    padding: 4px;
}

.GrayOne {
    background: #E3E3E3 url(content/images/graybg.gif) repeat;
}

.GreenOne {
    background: #527942 url(content/images/greenbg.gif) repeat;
    color: #FFFFCC;
}

.GoldOne {
    background: #FFB90F url(content/images/goldbg.jpg) repeat;
    color: #000000;
}

.GrayTwo {
    background: #E3E3E3;
}

.GreenTwo {
    background: #527942;
    color: #FFFFCC; 
}

.GoldTwo {
    background: #FFB90F;
}

.Tbl td {
    background: #732C10;
    padding: 2px 0;
    margin: 0;
}

#mainlevel a:link, #mainlevel a:visited {
    font-size: 0.7em;
    display: block;
    background: url(content/images/bg.png) no-repeat;
    color: #000000;
    text-align: center;
    height: 17px;
    text-decoration: none;
    margin: 3px 12px;
}

#mainlevel a:hover {
    background-position: 0px -17px;
    color: #732C10;
}

.onthisday {
    font-size: 0.8em;
    width: 100%;
    max-width: 100%;
    border: 1px solid #C60000;
    margin-bottom: 4px;
    height: 160px;  /* Set fixed height */
    overflow-y: auto;  /* Enable vertical scrolling */
}

.articles {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.scroll-container {
        height: 160px; /* Set your desired height */
        overflow-y: scroll; /* Enable vertical scrolling */
        position: relative; /* Optional */
        scroll-behavior: smooth; /* Smooth scrolling effect */
}

.event {
        padding: 0px;
}
/* Poll */

        .poll-container {
            max-width: 100%;
            margin: 0 auto;
            background-color: #FFFFFF;
            border-radius: 8px;
            padding: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .poll-options-container {
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 5px;
            background-color: #fafafa;
        }

        .poll-option {
            margin: 5px 0;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            padding: 5px;
            border-radius: 8px;
            background-color: #fff;
            transition: background-color 0.3s;
        }

        .poll-option:hover {
            background-color: #f0f0f0;
        }

        .poll-option label {
            font-size: 0.7em;
            cursor: pointer;
        }

        .poll-option input {
            margin-right: 10px;
        }

        .poll-button {
            width: 100%;
            background-color: #C60000;
            color: #ddd;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

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

        .result-bar {
            height: 5px;
            color: white;
            text-align: center;
            line-height: 5px;
            border-radius: 2px;
        }

        .poll-result {
            margin: 5px 0;
        }

        .no-poll {
            text-align: center;
            font-size: 18px;
            color: #999;
        }

        /* New Monthly Results Table Styling */
        .monthly-results-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.7em;
            margin: 5px auto;
        }

        .monthly-results-table th, .monthly-results-table td {
            padding: 4px;
            border: 1px solid #C60000;
            text-align: left;
            margin: 5px auto;
        }

        .monthly-results-table th {
            background-color: #f2f2f2;
        }

       .monthly-results-table tr:nth-child(odd) {
            background-color: #FFE4E4;
}

      .monthly-results-table th {
            background-color: #f2f2f2;
}

      .message {
    box-sizing: border-box;
    display: block;
    width: 100%; /* Set a fixed width for better visibility */
    max-width: 100%; 
    background-color: #FFE4E4;
    font-size: 0.7em;
    border: 1px solid #C60000;
    padding: 10px; /* Increased padding for better spacing */
    margin: 5px auto; /* Increased margin for spacing */
    color: #000000; /* Make sure the text is dark enough for contrast */
    overflow: hidden; /* Prevents any overflow from showing */
}
.error {
   box-sizing: border-box;
   display: block;
   font-size: 0.8em;
   width: 35%;
   max-width: 35%;
   margin: auto;
   margin-top: 5px;
   color: #000000;
   background-color: #FFE4E4;
   border: 1px solid #C60000;
   padding: 5px;
   text-align: center;
} 

.success {
   box-sizing: border-box;
   display: block;
   font-size: 0.8em;
   width: 35%;
   max-width: 35%;
   margin: auto;
   margin-top: 5px;
   color: #000000;
   background-color: #B6FFBB;
   border: 1px solid #31906E;
   padding: 5px;
   text-align: center;
}