/* Outermost div */ 
.year-details-container {
    width: 100%;
    height: 1000px;
    position: relative;
}

/* Button to Hide/Show custom tabs */
.custom-tabs-container-btn {
    position: absolute;
    border: 5px solid #10612f;
    background-color: white;
    border-radius: 8px 0 0 8px;
    font-family: "Gill Sans MT";
    height: 70px;
    width: 40px;
    left: -35px;
    font-size: 30px;
    color: #10612f;
    font-weight: bold;
    cursor: pointer;
}

/* Arrow within the button */
.tall-arrow {
    display: inline-block;
    transform: scaleY(2.5); /* Stretches it to 250% height */
    transform-origin: center; /* Ensures it stretches from the middle */
    font-family: "Gill Sans MT";
}

@media (max-width: 1000px){
    .year-details-container {
        width: 98%;
        height: 780px;
        position: relative;
        padding-left: 20px;
    }
    .custom-tabs-container-btn {
        margin-left: 20px;
    }
}






/* Next inner div (still encompasses everything) */
.custom-tabs-container {
    display: flex; /* This creates the left/right split */
    border: 5px solid #10612f;
    background-color: white;
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
    font-family: "Gill Sans MT";
    width: 100%;
    height: 100%;
}


/* Nav class (encompasses left section)*/
.tab-list {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    width: max(20%, 200px);
    border-right: 1px solid #ddd;
    overflow-y: scroll;
    height: 1000px;
}

/* Button class (per year button)*/
.tab-button {
    padding: 15px;
    border: none;
    background: none;
    text-align: center;
    cursor: pointer;
    font-size: 30px;
    color: #10612f;
    transition: 0.3s;
    font-weight: bold;
}


/*.tab-button:hover { background-color: #ddd; }*/
.tab-button.active { background-color: rgba(16, 97, 47, 0.2); font-weight: bold; }


/* Div class for text area (encompasses right section) */
.tab-content-area {
    /* Formatting css */
    color: black;
    font-size: 20px;
    list-style-type: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    
    /* Container css */
    flex-grow: 1; /* Makes the panel take up the remaining space */
    height: 100%;
    overflow-y: scroll;
    width: 100%;
}

.tab-content-area ul {
    list-style-type: none;
}

.tab-content-area li {
    margin-top: 10px;
}


.tour-report {
    user-select: none;
}





/* Listing the year's officers */

/* Make officer titles bold and right aligned */
.officers-li:nth-child(odd) { 
    text-align:right; 
    font-weight:bold;
}
/* For ordering the officers in a list (4 columns for big screens) */
.officers-li {
    width:24%;
    padding-bottom: 10px;
    margin-left: 4px;
}
.officers-ul {
    display:flex;
    flex-wrap:wrap;
    padding-left: 0;
}


/* Makes two officer column - for small screens */
@media (max-width:1100px)
{
  .officers-li {
      width:48%;
      vertical-align: top;
  }
  .officers-li:nth-child(odd) {
      text-align:right; 
      font-weight:bold;
  }
}

/* Makes one officer columns - for even smaller screens (mobile) */
@media (max-width:600px)
{
  .officers-li {
      width:98%;
      margin-bottom: -10px;
      margin-top: -5px;
  }
  .officers-li:nth-child(odd) {
      text-align:left; 
      font-weight:bold;
      margin-top: 20px;
  }
  .officers-li:nth-child(1) {
      margin-top: 0;
  }
}





/* Photo Slider CSS */
.gallery-wrapper { max-width: 800px; margin: auto; }

.main-slider { margin-bottom: 10px; height: 400px; }
.main-slider img { width: 100%; height: 100%; object-fit: contain; }

.thumb-slider {
    /*background-color: red;*/
    
}

.thumb-slider .swiper-slide {
    /*background-color: blue;*/
    width: auto;
    opacity: 0.4;
    cursor: pointer;
    
}

.thumb-slider .swiper-slider img {
    object-fit: contain;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.thumb-slider .swiper-slide-thumb-active {
    opacity: 1;
}

/* This highlights the "active" thumb */
/*.thumb-slider .swiper-slide-thumb-active { opacity: 1; border: 2px solid #0073aa; }*/




/** MAP CSS **/


/*body{*/
/*	font:75%/140% Verdana, Arial, Helvetica, sans-serif;*/
/*	text-align:center;*/
/*	background:#BAFE96;<!--#9ADE76-->;*/
/*}*/

/*a:link{*/
/*text-decoration: none;*/
/*color:#900;*/
/*}*/

/*a:hover{*/
/*text-decoration: underline;*/
/*color:#700;*/
/*}*/


/*.bl {background: url(bl.gif) 0 100% no-repeat #7AD14B;}*/
/*.br {background: url(br.gif) 100% 100% no-repeat}*/
/*.tl {background: url(tl.gif) 0 0 no-repeat}*/
/*.tr {background: url(tr.gif) 100% 0 no-repeat; padding:15px;}*/

/*h1,*/
/*h2{*/
/*	color:#900;*/
/*}*/

/*h1{*/
/*text-align: center;*/
/*font-size:200%;*/
/*}*/

/*dd{*/
/*	margin-left:0;*/
/*}*/

/* ====== Begin editing below this line =====*/

/*.hidden-navigation,*/
/*#navigations h2,*/
/*#foot h2{*/
/*	width:1px;*/
/*	position:absolute;*/
/*	left:-9999px;*/
/*}*/

/*#wrap{*/
/*	background:#BAFE96;<!--#9ADE76-->;*/
/*	width:770px;*/
/*	margin:0 auto;*/
/*	text-align:left;*/
/*}*/

/*#header{*/
/*background:#7AD14B;*/
/*}*/

/*#main-content{*/
/*display:inline;*/
/*background:#7AD14B;*/
/*width:585px;*/
/*float:left;*/
/*margin-left:185px;*/
/*margin-top:10px;*/
/*margin-bottom:10px;*/
/*}*/


/*#navigations{*/
/*display:inline;*/
/*background:#7AD14B;*/
/*width:175px;*/
/*float:left;*/
/*margin-left:-770px;*/
/*margin-top:10px;*/
/*margin-bottom:10px;*/
/*}*/

/*#foot{*/
/*clear:both;*/
/*background:#7AD14B;*/
/*}*/

.center_selection {
    display: flex;
}

/* Update button for the map */
.UpdateButton {
    background-color: white;
    border: solid;
    color: black;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border-width: 2px;
    font-family: "Gill Sans MT";
    font-weight: bold;
    height: 30px;
    align-self: center;
    margin-top: 31px;
}

/* Changes the dropdown of the years for the tours on the map */
.MapYearDropdown {
    font-family: "Gill Sans MT";
    font-size: 16px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 5px;
    height: 30px;
    text-align: center;
}

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

.tour-grid-container {
    display: flex;
    width: 70%;
    align-content: center;
    margin: 0 auto;
}

.tour-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 5px;
}

.tour-section {
    display: flex;
    flex-direction: column;
}

.tour-title {
    font-weight: bold;
    padding-bottom: 5px;
}

.year-section {
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    padding-right: 30px;
}

.update-section {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-content: center;
}

.year-title {
    font-weight: bold;
    padding-bottom: 5px;
}

.year-row {
    display: flex;         
    flex-direction: row;   
    align-items: center;   
    gap: 10px;
}

.TourLabel{
    align-self: center;
}

.and {
    text-align: center;
    align-self: center;
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
    .tour-grid-container {
        width: 95%;
        flex-direction: column;
    }
    .tour-section {
        align-self: center;
        justify-self: center;
    }
    .year-section {
        align-self: center;
        justify-self: center;
    }
    .year-row {
        justify-self: center
    }
    .update-section {
        justify-self: center;
        align-self: center;
    }
    .tour-title {
        text-align: center;
        justify-self: center;
        align-self: center;
        margin-bottom: 5px;
    }
    .year-title {
        text-align: center;
        justify-self: center;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .UpdateButton {
        margin-top: 20px;
        width: 80px;
    }
}

.stacking-div {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: flex;
    width: 100%;
    margin-top: 10px;
  }

.inner-div {
    padding-bottom: 10px;
}







#map {
    height: 75%;
    width: 100%;
}

@media (max-width: 768px) {
    #map {
        height: 60%;
        width: 100%;
    }
}

#map .popup {
      position: absolute;
      background-color: white;
      -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #cccccc;
      bottom: 10px;
      left: -50px;
      min-width: 150px;
    }
#map .popup::after, .popup::before {
      top: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
#map .popup::after {
      border-top-color: white;
      border-width: 10px;
      left: 48px;
      margin-left: -10px;
    }
#map .popup::before {
      border-top-color: #cccccc;
      border-width: 11px;
      left: 48px;
      margin-left: -11px;
    }
#map .popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }
#map .popup-closer::after {
      content: "✖";
    }