/* Centre the div for the whole page and make it flex in a column */
.peals-page-div {
    display:flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}



/* ASSOCIATION SELECTION */

/* div for association_selection */
.associations-div {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    width: 50%;
}
.associations-div h3 {
    text-align: center;
    margin-bottom: -5px;
}

/* grid of associations checkboxes*/
.associations-grid {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    gap: 10px;
    width: 100%;
}

/* Make headers take up the full width of the row */
.grid-header {
    grid-column: span 3;
    margin-bottom: 15px;
}

.grid-item {
    display: flex;
    align-items: center; /* Keeps checkbox and text aligned */
}

/* Indents the first column to make them look less spread out */
.first-col {
    padding-left: 15%; 
}

/* the other associations which are hidden and shown */
#extra-details {
    grid-column: 1 / -1; /* Stretch across all 3 columns */
    display: grid;
    grid-template-columns: subgrid; /* Follow the parent's columns */
    gap: 10px;
}
#extra-details.is-hidden {
    display: none !important; /* need to overwrite above */
}

/* Mobile: Switch to 1 column */
@media screen and (max-width: 1000px) {
    .associations-grid, .grid-contents {
        grid-template-columns: 100%;
    }
    .grid-header {
        grid-column: span 1;
    }
    .grid-item {
        padding-left: 25%; 
    }
    #extra-details {
        grid-template-columns: 100%;
    }
}

/* Button for expanding associations grid */
.ShowDetails {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: inherit;
    border: none;
    padding: 5px 10px;
    color: #31572C;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    font-family: "Gill Sans MT";
    font-weight: bold;
}

/* Changes checkboxes (associations) colour to green when selected */
/* Editor doesn't like it but it works :) */
input[type=checkbox] {
  accent-color: green;
}

.associationCheckbox {
    vertical-align: text-top;
}






/* TABLE OF PEALS */

.peal-table-div {
    padding-left: 2%;
    padding-right: 2%;
}

/* table of peals*/
.peal-table {
    align-self: center;
    width: 100%;
    /*padding-left: 2%;*/
    /*padding-right: 2%;*/
    border-collapse: collapse;
}
.peal-table th {
    text-align: left;
    background-color: green;
    color: white;
}
.peal-table tr:nth-child(even) {
    background-color: rgb(255, 255, 255);
    background-color: rgba(26, 114, 0, 0.1);
    height: 25px;
}
.peal-table tr:nth-child(odd) {
    background-color: rgb(230, 230, 230);
    background-color: rgba(230, 230, 230, 0.5);
    height: 25px;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table td:nth-child(even) {
    padding-left: 3%;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table th:nth-child(even) {
    padding-left: 3%;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table td:nth-child(3) {
    padding-left: 5%;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table th:nth-child(3) {
    padding-left: 5%;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table td:nth-child(1) {
    padding-left: 0.5%;
}
/* Add padding so that when on mobile view, the columns are separated*/
.peal-table th:nth-child(1) {
    padding-left: 0.5%;
}

/* For the row when the association changes in the peals table */
.centered-row {
    text-align: center;
    background-color: rgb(255, 255, 255);
    background-color: rgba(26, 114, 0, 0.3); 
    padding-left: 5%;
    padding-right: 5%;
}

/* For the peal at Flixton, colour the text red */
.flixton-peal {
    color: grey;
}
/* Tooltip container for Flixton peal */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 180px;
  background-color: black;
  background-color: rgb(14, 96, 51);
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
  bottom: 100%;
  left: 50%;
  margin-left: -90px; /* Use half of the width to centre the tooltip */
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* For troubleshooting - adds a border to all the tables */
/*table, th, td {border:1px solid black}*/