.new-tab {
	height: 1em;
	margin-left: 0.2em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: Open Sans, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 12pt;
  background-color: #f2f5f8;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

main {
  flex: 1;
}


#top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00205B;
  width: 100%;
  color: #fff;
}

#top-menu {
  align-items: center;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding: 16px;
}

.nisra-logo-container {
  display: flex;
  justify-content:space-between;
  align-items: center
}

#top-menu-nisra-logo {
  width: 220px;
  padding-top: 10px;
  margin-bottom: 10px;
  filter: brightness(0) invert(1);
}

#teo-logo {
  width: 250px;
  margin-bottom: 0;
}

#dashboard-title-container {
  display: flex;
  flex-direction:column;
  align-items: end;
}

#dashboard-title a {
  font-size: 2.75rem;
  font-weight: normal;
  color: #ffffff;
  line-height: 1em;
  margin-bottom: 10px;
  text-decoration: none;
}

#top-menu-items {
  margin-top: 10px;
  width: 550px;
  justify-content: center;
}

h1 {
  font-weight: bold;
  color: white;
  font-size: 40px;
}

.top-menu-item {
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  color: #ffffff;
  font-size: 14pt;
  cursor: pointer;
  border-radius: 2px;
  border-width: 0px;
  background-color: #00205B;
}

.top-menu-item:hover {
  background-color: #ffffff55;
}

.top-menu-item.selected-item {
  color: #142062;
  background-color: white;
}

.selected-icon {
    filter: brightness(0) saturate(100%) invert(12%) sepia(94%) saturate(1827%) hue-rotate(221deg) brightness(82%) contrast(101%);
}

h2 {
    font-size: 26pt;
    color: #363636;
}

h3, h4, h5 {
    color: #2e2e2e;
    font-weight: normal;
}

.footer-header {
  color: #fff;
  font-weight: 500;
  font-size: 1.25rem;
  padding: 0;
 /*  margin-bottom: .5rem; */
}

.accordion-header {
  display: inline;
}

#main-content {
    padding: 0px;
    width: 100%
}

aside {
  background-color: #fff;
  padding: 1rem;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  width: 20vw;
  height: 100vh;
  position: sticky;
  top: 5px;
  left: 1vw;
  display: flex;
  flex-direction: column;
}


a {
	color: #006edb;
    /* text-decoration: unset; */
    text-decoration: underline;
}

a:hover {
  color: #b400f0;
  text-decoration: underline;
}

.survey-link {
  text-decoration: underline;
  color: #00205B;
}

.survey-link:hover {
  text-decoration-color: white;
}


/* a:visited {
	color: purple;
} */

#domains-grid-container {
    width: 800px;
    margin-left: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#domain-info-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.blue-label {
    background-color: #142062;
    color: #ffffff;
    border-radius: 25px;
    font-size: 14pt;
    text-align: center;
    margin-left: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#domain-title {
    cursor: pointer;
}

.white-box {
    background-color: white;
    padding: 10px;
    color: #000;
    border-radius: 25px;
    font-size: 12pt;
    text-align: left;
    margin: 10px;
    width: 860px;
    display: flex;
    align-items: center;
}

.box-container {
    width: 400px;
}

.grey-box {
    width: 100%;
    background-color: #e8e8e8;
    padding: 10px;
    border-radius: 25px;
}

.red-box {
    background-color: #ff3131;
    color: white;
    margin-top: 15px;
    padding: 5px 10px 0px;
    text-align: center;
    border-radius: 40px;
}

#desc-container {
    display: flex;
    align-items: center;
}

#click-to-see {
    width: 150px;
    text-align: center;
    margin-top: 20px;
    margin-left: 50px;
}

.hex {
    height: 200px;
    width: 200px;
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-color: #142062;
    color: #ffffff;
    position: relative;
    cursor: pointer;
    padding: 0px;
    border: 0px;
  }

  .hex .hex-inner {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #008675;
    width: 190px;
    height: 190px;
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    font-size: 20pt;
    line-height: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }

.intro {
    text-align: center;
    margin-top: 10px;
    width: 100%;
    text-align: left;
}

#indicator-intro {
    display: none;
}

.shake-hex:hover {
    animation: shake 0.5s;
    animation-iteration-count: one;
    filter: saturate(70%);
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -1px) rotate(-1deg); }
    50% { transform: translate(-1px, 0px) rotate(1deg); }
    75% { transform: translate(1px, 1px) rotate(0deg); }
    100% { transform: translate(1px, -1px) rotate(1deg); }
}

.ind-hex-container {
   height: 180px;
   width: 180px;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   text-align: center;
   cursor: pointer;
   border: 0px;
   padding: 0px;
   background-color: #ffffff00;
}

button:focus {
    outline: none;
    border: none
}

.ind-hex-container:hover {
    filter: saturate(75%);
}

.ind-hex {
    height: 180px;
    width: 180px;
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-color: #FF6200;
    color: #ffffff44;
    font-size: 120px;
  }

.ind-hex.positive {
    background-color: #00A857;
}

.ind-hex.negative {
    background-color: #ff3131;
}

.ind-hex-label {
    position: absolute;
    color: #ffffff;
    font-size: 14pt;
    line-height: 1em;
    padding: 5%;
    font-weight: bold;
    text-shadow: -2px -2px 0 #FF6200,
                2px -2px 0 #FF6200,
                -2px 2px 0 #FF6200,
                2px 2px 0 #FF6200;
}

.ind-hex-label.positive {
    text-shadow: -2px -2px 0 #00A857,
                2px -2px 0 #00A857,
                -2px 2px 0 #00A857,
                2px 2px 0 #00A857;
}

.ind-hex-label.negative {
    text-shadow: -2px -2px 0 #ff3131,
                2px -2px 0 #ff3131,
                -2px 2px 0 #ff3131,
                2px 2px 0 #ff3131;
}

#indicator-title {
    margin-left: 20px;
    margin-top: 8px;
}

#indicator-hexes {
    margin-left: 50px;
}

.key-text {
    font-size: 12pt;
}

.key-hex {
    height: 50px;
    width: 50px;
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    background-color: #FF6200;
    color: #ffffff44;
    font-size: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-right: 5px;
  }

.key-hex.positive {
    background-color: #00A857;
}

.key-hex.negative {
    background-color: #ff3131;
}


.row {
    margin-left: 0px;
    margin-right: 0px;
    align-items: center;
}

.pxwidget-canvas-wrapper {
    height: 500px !important;
    width: 700px;
}

#overall-click {
    display: flex;
    justify-content: center;
}

.overall-label {
    width: 150px;
    margin-left: 15px;
    margin-right: 15px;
    height: 86px;
    font-size: 14pt;
    display: flex;
    align-items: center;
    padding: 15px 15px 15px 15px;
    color: #ffffff;
    border-radius: 15px;
    text-align: left;
}

.label-container {
    margin-top: 20px;
}

#improving-label {
    background-color: #00A857;
}

#no-change-label {
    background-color: #FF6200
}

#worsening-label {
    background-color: #ff3131;
}

.overall-container {
    max-width: 1050px;
    margin-top: 20px
}

#loading-img, #loading-img-2, #loading-img-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 450px;
}

#loading-img-3 {
    height: 842px;
}

#not-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

iframe {
    border: none;
}

#cookie-banner {
	top: 0;
	left: 0;
	width: 100%;
	background-color:#142062;
	color:#FFF;
	padding: 10px;
	text-align: left;
}

#cookie-banner.hidden {
  visibility: hidden;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.cookies-infobar {
    color: #fff;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px;
    text-align: left;
}

/*.cookies-infobar.cookies-infobar_accepted {
    display: none;
}*/

.cookies-infobar_wrapper {
    margin: 10px;
}

.cookies-infobar a {
    color: inherit;
}

.cookies-infobar_btn {
  display: inline-block;
  padding: 5px 10px;
  background: #0f8243;
  text-decoration: none;
  color: #fff;
  text-transform: none;
  font-size: 1.2em;
}

a.cookies-infobar_btn, a.cookies-infobar_btn_reject, a.cookiesbarlink {
	color: #fff !important;
}

.cookies-infobar_btn_reject {
  display: inline-block;
  padding: 5px 10px;
  background: #6d6e72;
  text-decoration: none;
  border-radius: 3px;
  color: #fff;
  text-transform: none;
  font-size: 1.2em;
}

.warning {
    color: white;
    background-color: #3878c5;
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 1.1em;
    font-weight: normal;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .nisrafooter ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
	font-size: 14pt;
	font-weight:700;
}


.nisrafooter li {
	margin-right: 18px;
    display: inline-block;
	color: #FFFFFF;
	font-size: 18px;
}

.nisrafooter a {
	color: #FFFFFF !important;
}

.cc-li a {
	color: #FFFFFF !important;
}

/*.flex-list-footer {
	position: relative;
  margin: 20px 0em 0em 0em;
	display:block;
  overflow: hidden;
}*/

.cc-li {
	flex-grow: 1;
    flex-basis: auto;
    margin: 0.25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    font-size: 14pt;
    list-style-type: none;
}

footer {
    color: #ffffff;
    background-color: #00205B;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    flex-shrink: 0;
}

#footer-container {
    width: 1300px;
}

#teo-logo-container {
    height: 210px;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    width: 635px;
    max-width: 1200px;
    min-width: 250px;
}

#footer-teo-logo {
    width: 250px;
    filter: brightness(0) invert(1);
}

#line-chart-container {
    width: 750px;
    height: 553px;
    display: flex;
    justify-content: center;
}

.canvas-container {
    height: 500px;
    min-width: 680px;
    max-width: 90%;
 }

.y-label {
    font-size: 9pt;
    color: #666;
    width: 70px;
    line-height: 1.2;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: center;
}

 .chart-date {
    font-size: 10pt;
    padding-left: 25px;
    padding-top: 5px;
    color: #666;
 }

 .map-date {
    font-size: 10pt;
    padding-left: 25px;
    margin-top: 380px;
    color: #666;
 }


 .chart-title {
    width: 100%;
    text-align: center;
 }

 .map {
    height: 450px;
    width: 700px;
    position: relative;
    z-index: 0
 }

 select {
    width: 250px;
 }

 #map-container {
    height: 500px;
 }

 #chart-title {
    margin-top: 15px;
 }

 path.leaflet-interactive:focus {
    outline: none;
}

.colour-block {
    height: 25px;
    width: 25px;
}

.legend-min {
    width: 50%;
    font-size: 10pt;
    padding-left: 7.5px;
    font-weight: bold;
}

.legend-max {
    width: 50%;
    text-align: right;
    font-size: 10pt;
    padding-right: 7.5px;
    font-weight: bold;
}

.map-legend {
    width: 160px;
    background-color: #ffffff77;
    padding: 10px;
    border-radius: 25px;
    margin-top: -440px;
    margin-left: 520px;
    position: relative;
    z-index: 1;
}

#map-load {
    width: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a {
    color: #ffffff;
    text-underline-offset: 3px;
}

footer a:hover {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

.footer-links { list-style: none; padding-left: 0; }
.footer-links .list-inline-item { margin: 0 .5rem; }

/* More vertical spacing in vertical lists */
.footer ul.list-unstyled li { margin-bottom: 0.5rem; }

/* Social icon hover */
.footer .list-inline-item img {
  transition: box-shadow 0.2s ease, border 0.2s ease;
}
.footer .list-inline-item img:hover {
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

.img-50 { width: 50px; height: 50px; }

#prototype {
    color: #fff;
    background-color: #3878c5;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 5px;
    font-weight: bold;
}

#map-boxes {
    margin-left: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#further-expander, #further-expander-map  {
   cursor: pointer
}

.further-info-text, #further-info-map {
    max-height: 0px;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -ms-transition: max-height 1s;
    -o-transition: max-height 1s;
    transition: max-height 1s;
    overflow: hidden;
}

.separator {
    width: 96%;
    height: 5px;
    background-color: #142062;
    margin-top: 20px;
    border-radius: 5px;
    padding-left: 2%;
    padding-right: 2%;
}

.user-guide-link {
    color: #007bff;
    cursor: pointer;
}

.user-guide-link:hover {
    text-decoration: underline;
}

#worsening-hexes {
    margin-bottom: 20px;
}

.button-row {
    color: #ffffff;
    background-color: #69729B;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 12pt;
}

.nav-btn {
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    border-radius: 25px;
    width: fit-content;
    background-color: #69729B;
    border: 0px;
    color: #ffffff;
}

#forward-btn {
    text-align: right;
}

.nav-btn:hover {
    background-color: #5C5F8A;
}

#map-link {
    margin-left: 15px;
    background-color: #e8e8e8;
    padding: 15px;
    border-radius: 25px;
    margin-top: 15px;
    width: 100%
}

#AA-link, #LGD-link, .eq-link {
    color: #142062;
    margin-left: 15px;
    cursor: pointer;
    margin-bottom: 10px;
    border: 0px;
    padding: 0px;
    background-color: #e8e8e8;
}

.eq-link {
    margin-bottom: 0px;
    font-weight: normal;
}

#eq-col-1, #eq-col-2 {
    width: 50%
}

#chart-link {
    text-align: center;
    color: #142062;
    background-color: #e8e8e8;
    cursor: pointer;
    border: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 25px;
}

#chart-link:hover {
    color: #008675;
}

#AA-link:hover, #LGD-link:hover, .eq-link:hover {
    color: #008675;
}

#assembly-logo, #council-logo {
    width: 35px;
    filter: brightness(0) saturate(100%) invert(12%) sepia(94%) saturate(1827%) hue-rotate(221deg) brightness(82%) contrast(101%);
    margin-right: 10px;
}

#see-maps, #see-eq {
    font-weight: bold;
}

#button-left {
    width: 600px;
    display: flex;
    justify-content: end;
}

#button-right {
    width: 600px;
    display: flex;
    justify-content: baseline;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 300px;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #008675;
    cursor: pointer;
  }

  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #008675;
    cursor: pointer;
  }

  #date-display {
    width: 300px;
    text-align: center;
  }

  #map-label-4 {
    margin-bottom: 0px;
  }

  .autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
  }
  input {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
    color: #fff;
  }
  input[type=text] {
    background-color: #00867500;
    width: 100%;
    margin-left: 5px;
  }



  ::placeholder{
    color: #ffffff
  }

  .autocomplete-items {
    position: absolute;
    /* border: 1px solid #d4d4d4; */
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
  }
  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
  }
  .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #142062 !important;
    color: #ffffff;
  }


.btn.selected {
  border: 2px solid #00205B;
  background-color: #fff;
  color: #00205b;
}

.btn.selected:hover {
  background-color: #fff;
  color: #00205B
}


  .btn {
    border: 2px solid #00205B;
    background-color: #3878c5;
    color: #fff;
    border-radius: 2px;
  }

  .btn:hover {
    background-color: #2F65A7;
    color: #fff;
    border: 2px solid #00205B;
  }

  .btn:focus,
  #top-buttons-container button:focus,
  #downloadButton:focus,
  #copyTextButton:focus,
  #copyTextButton2:focus {
    border: 2px solid #00205B;
    background-color: #fff;
    color: #000;
  }

  .btn.inactive {
    background-color:#3878c5;;
    color: #fff;
  }

  .btn.inactive:hover {
    background-color: #2F65A7; /* hover color for active state */
  }

  .close-on-mobile {
    background-color: #7767C1;
    border: 2px solid #00205B;
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
  }

  .close-on-mobile:hover {
    background-color: #614EB7;
  }


  #search-box {
    border: 2px solid #ffffff;
    border-radius: 2px;
  }

  #framework-container, #subpop-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #subpop-container {
    overflow: auto;
  }

  .overall-text {
    margin-left: 10px;
    margin-bottom: 0px;
  }

  #pop-up-chart {
    padding-bottom: 15px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    border-radius: 25px;
    box-shadow: 10px 10px 8px 2px #00000011;
  }

  #pop-up-container {
    width: 80%;
    height: 553px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #close-pop-up {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #142062;
    margin-top: -15px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #close-pop-up:hover {
    background-color: #ff3131
  }

  #pop-up-title {
    margin-left: 25px;
  }

  #tableView, #chartView {
    display: none;
  }

  #chartView.active, #tableView.active {
    display: block;
    width: 100%;
  }

  .dest-table {
    width: 100%;
    max-width: 100%;
    /* margin-left: auto; */
    /* margin-right: auto; */
    font-size: 12pt;
    margin-top: 20px;
    border-collapse: collapse;
    table-layout: auto;
  }

  table {
    width: 100%;
    /* margin-left: auto; */
    /* margin-right: auto; */
    font-size: 12pt;
    margin-top: 20px;
    border-collapse: collapse;
  }

  .wrap-cell {
    white-space: normal;   /* allow wrapping */
    word-wrap: break-word; /* older name, still useful */
    overflow-wrap: anywhere; /* modern, breaks long words/URLs */
  }

  td, th {
    border: 1px solid black;
    font-size: 12pt;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
  }

  th {
    background-color: #00205B;
    color: #ffffff;
    cursor: default;
    position: sticky;
    top: 0;
  }

  tr:hover {
    background-color: #ccc;
    cursor: pointer;
  }

  td a {
    color: #000000
  }

  td a:hover {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
  }

  .framework-column {
    width: 50%;
  }

  /* create some space around columns */
  .col-sm-6 {
    padding: 20px
  }

  /* Clear floats after the columns */
 .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Responsive layout for 2 col structure for trend charts */
  @media screen and (max-width: 600px) {
    .col-sm-6 {
        width: 100%
    }
  }
/* chart container that allows us to position download button relative to chart */
.chart-container {
    width: 100%;
    height: auto;
    margin: 15px 0px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

  /* format download button for charts */
  #downloadButton {
    position: absolute;
    top: -53px;
    right: 0px;
    /* padding: 8px 12px; */
    border: 2px solid #00205B;
    border-radius: 2px;
    background-color: #3878c5;
  }

  #downloadButton:hover {
    background-color: #2F65A7;
  }

  #downloadButton:active {
    background-color: #00205B;
    color: #fff;
  }

  /* table container that allows us to position button relative to table */
.table-container {
    position: relative;
    display: inline-block;
}

/* format download button for table */
.copy-button, .copy-buttons {
  position: absolute;
  /* top: -33px; */
  right: 0%;
  z-index: 10; /*ensures button is above table*/
  border: 2px solid #00205B;
  background-color: #7767C1;
  color: #fff;
  border-radius: 2px;
}

.copy-button:hover {
  background-color: #614EB7;
}

.copy-button:active {
  background-color: #00205B;
  color: #fff
}

.copy-button:focus {
  background-color: #fff;
  color: #000;
}

.copy-button.inactive {
  background-color:#3878c5;;
  color: #fff;
}

.copy-button.inactive:hover {
  background-color: #2F65A7; /* hover color for active state */
}

#copyTextButton, #copyTextButton2 {
  background-color: #7767C1;
}

#copyTextButton:hover, #copyTextButton2:hover {
  background-color: #614EB7;
}

.mtb {
    margin-top: 20px;
    margin-bottom: 20px;
}

.accordion-button {
  background-color: #fff;
  color: #404040;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 100%;
  text-align: left;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  outline: none;
  border: none;
  transition: 0.4s;
  position: relative;
}

.active, .accordion-button:hover {
  background-color: #fff;
}


.panel {
  padding: 0 18px;
  background-color: white;
  /* display: none; */
  max-height: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: max-height 0.5s ease-out;
}

#notes_in_measure{
  white-space: pre-line;
}

#notes_in_group{
  white-space: pre-line;
}

#selection-form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; /* Prevents content overflow */
}

#selection-form button {
  background-color: #3878c5;
  color: #fff;
  margin: 2px;
}

#selection-form button:hover {
  background-color: #2F65A7;
  color: #fff;
}

#top-buttons-container {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  gap: 5px;
}

#top-buttons-container button {
  text-align: center;
  padding-left: 10px;
  min-width: 30%; /* Allows buttons to adjust dynamically */
  border-radius: 2px;
}

#key-metrics-container {
  flex-grow: 1;
  width: 100%;
  overflow-y: auto;
  /* border: 1px solid #ccc; */
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
  align-content: flex-start;
  border-radius: 5px; /* Adds rounded corners */
  background-color: #f6f9fb; /* Light background for contrast */
}

#key-metrics-container button {
  border: none;
  background-color: #eee;
  color: #0064c8;
  margin: 4px;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  flex: 1 1 calc(50% - 10px);
  text-align: center;
  min-width: 100px;
}

/* Custom Scrollbar Styling */
#key-metrics-container::-webkit-scrollbar {
  width: 10px; /* Adjusts scrollbar width */
}

#key-metrics-container::-webkit-scrollbar-track {
  background: #e0e0e0; /* Light grey track */
  border-radius: 10px; /* Rounded track */
}

#key-metrics-container::-webkit-scrollbar-thumb {
  background: #888; /* Darker scrollbar */
  border-radius: 10px; /* Rounded scrollbar */
}

#key-metrics-container::-webkit-scrollbar-thumb:hover {
  background: #555; /* Darker shade on hover */
}

#pathways-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  grid-auto-rows: min-content; /* Ensures rows take only the space they need */
  gap: 20px;
  min-height: 20vh; /* Starts compact */
  max-height: 40vh; /* Allows expansion, but prevents excessive growth */
  padding: 40px 20px 20px 20px;
  box-sizing: border-box;
  transition: max-height 0.3s ease-in-out; /* Smooth expansion */
}


#key-metrics-container-inter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 40vh; /* Ensures a reasonable minimum height */
  height: auto; /* Let it expand naturally */
}

.category-grp{
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.category-grp h3{
  text-align: center;
  margin-bottom: 20px;
}

.category-grp-btn{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 20px;
}

#selection-form-measure button.cen-theme:hover {
  background: #00205b;
  color: white;
  border-color: #cedc20 !important;
}

#selection-form-measure button.doh-theme:hover {
  background: #0193a6;
  color: white;
}

#selection-form-measure button.doe-theme:hover {
  background: #ca2c92;
  color: white;
}

#selection-form-measure button.dfi-theme:hover {
  background: #ffb81c;
  color: black;
}

#selection-form-measure button.dfc-theme:hover {
  background: #7d55c7;
  color: white;
}

#selection-form-measure button.dfe-theme:hover {
  background: #0072ce;
  color: white;
}

#selection-form-measure button.teo-theme:hover {
  background: #3b80ae;
  color: white;
}

#selection-form-pathway, #selection-form-75group, #selection-form-depart, #selection-form-measure{
  display: contents; /* Makes the form behave like it's not there */
}

#selection-form-pathway button,
#selection-form-depart button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3878c1;
  border: 2px solid #00205B;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  min-height: 50px;
  outline:none;
  position :relative;
  border-radius: 2px;
}

#toggle-group-btn,
#selection-form-measure button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 17px;
  color: #000;
  background: transparent;
  border: none;
  cursor: pointer;
  min-height: 60px;
  outline: none;
  transition: 0.3s ease-in-out;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
}

/* Base button look (applies to all sizes) */
.s75-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3878c5;
  border: 2px solid #00205B;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  outline: none;
  position: relative;
  border-radius: 2px;
  font-size: 13px;
  min-height: 50px;
  /* No fixed min-height/min-width here → mobile/tablet remain flexible */
}

#toggle-group-btn {
  background: #2F65A7;
  color: white;
  border-radius: 999px;
}

#toggle-group-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #2F65A7;
  border-radius: 999px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  box-sizing: border-box;
}

#selection-form-measure button::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #2F65A7;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  box-sizing: border-box;
}

#toggle-group-btn:hover::before,
#selection-form-measure button:hover::before {
  border-width: 4px;
  border-color: #00205B;
}

#selection-form-measure button:hover {
  background: #2F65A7;
  color: white;
}

#toggle-group-btn:hover {
  background: transparent;
  color: #000;
}

#selection-form-pathway button:hover,
#selection-form-75group button:hover,
#selection-form-depart button:hover{
  background: #2F65A7;
  color: white;
  padding: 0 16px;
}

#selection-form-pathway button svg,
#selection-form-75group button svg,
#selection-form-depart button svg,
#selection-form-measure button svg {
  position: absolute;
  left: 0;
  right: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 0.3s ease-in-out;
}

#selection-form-pathway button:hover svg,
#selection-form-75group button:hover svg,
#selection-form-depart button:hover svg,
#selection-form-measure button:hover svg  {
  stroke-dashoffset: -480;
}

.chart-legend {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 20px;
  width: 100%;
}

#home-btn button {
  border: none;
  background-color: #eee;
  color: #0064c8;
  margin: 2px;
  border-radius: 5px;
  text-align: center;
  font-size: 23px;
  align-self: center;
}

#home-btn button:hover {
  background-color: #2F65A7;
  color: #fff;
}


#cookie-banner {
	top: 0;
	left: 0;
	width: 100%;
	background-color:#142062;
	color:#FFF;
	padding: 10px;
	text-align: left;
}

.cookies-infobar {
    color: #fff;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    padding: 10px;
    text-align: left;
}

.cookies-infobar.cookies-infobar_accepted {
    display: none;
}

.cookies-infobar_wrapper {
    margin: 10px;
}

.cookies-infobar a {
    color: inherit;
}

.cookies-infobar_btn {
  display: inline-block;
  padding: 5px 10px;
  background: #0f8243;
  text-decoration: none;
  color: #fff;
  text-transform: none;
  font-size: 1.2em;
}

a.cookies-infobar_btn, a.cookies-infobar_btn_reject {
	color: #fff !important;
}

a.cookiesbarlink {
    color: #2990FF;
}

.cookies-infobar_btn_reject {
  display: inline-block;
  padding: 5px 10px;
  background: #6d6e72;
  text-decoration: none;
  border-radius: 3px;
  color: #fff;
  text-transform: none;
  font-size: 1.2em;
}

.cookies-infobar_accepted {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  padding: 0;
}

.breadcrumb-about-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#dest_about_button{
  position: relative;
  top: -15px; /* move UP 5px */
}

.url-has-key .breadcrumb-about-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: -2.3rem;
}

.search-container button:hover {
  background: #3878c5;
}

.about-content{
  padding: 30px;
}

@keyframes staggerFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.staggered-entry {
  opacity: 0;
  animation: staggerFade 0.4s ease forwards;
  animation-delay: var(--delay, 0ms);
}

/*###################################################*/
/*###################################################*/
/* S75 MEASURES PAGE BUTTON GRID LAYOUT AND NESTING */
/*###################################################*/
/*###################################################*/

.child-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 per row */
  grid-gap: 8px;                         /* spacing between buttons */
}

.btn-block+.btn-block {
  margin-top: 0; /* Remove top margin default styling from bootstrap btn-block*/
}

/* Optional: make it 1 per row on very small screens */
@media (max-width: 400px) {
  .child-grid { grid-template-columns: 1fr; }
}

.masonry-cols {
  display: flex;
  align-items: flex-start;
  margin-left: -8px;   /* gutters */
  margin-right: -8px;
}
.masonry-col {
  flex: 1 1 0;
  padding: 0 8px;      /* gutters */
}
.masonry-item {
  width: 100%;
  margin-bottom: 16px; /* vertical spacing between cards */
}

/* Optional: make headers look like BS5-ish accordion buttons */
.card-header .btn {
  border-radius: 2px;
}
.card {
  border: 0;
}

.btn-accordion {
  position: relative;
  padding-right: 2rem; /* room for caret */
}

.dropdown-toggle::after,
.btn-accordion::after,
.accordion-button::after {
  content: "";
  position: absolute;
  right: .75rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .4s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* White-stroke outline arrowhead (URL-encoded #fff) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='8 4 16 12 8 20' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .95;
  border: none;
}

.btn-accordion::after {
  width: 1rem;
  height: 1rem;
}

.accordion-button::after {
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  /* White-stroke outline arrowhead (URL-encoded #fff) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='8 4 16 12 8 20' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dropdown-toggle[aria-expanded='true']::after,
.dropdown-toggle.show::after,
.dropdown.open > .dropdown-toggle::after,
.btn-group.show > .dropdown-toggle::after,
.btn-accordion[aria-expanded='true']::after,
.accordion-button[aria-expanded='true']::after {
  transform: translateY(-50%) rotate(-90deg);
}

.btn-accordion:hover {
  background-color: #2F65A7;
}

.breadcrumb {
    background: none;       /* Removes grey box */
    border: none;           /* Removes border */
    padding: 0;             /* Removes extra spacing */
    margin: -12px 0 24px 0px; /* Top, Right, Bottom, Left spacing */
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.breadcrumb a {
  text-decoration: underline;
  color: #006edb;
  margin-right: 5px;
}

.breadcrumb a:hover {
  text-decoration: underline;
  color: #7767C1;
}

.breadcrumb span {
  margin-right: 5px;
}

.layout-container {
  font-family: Arial, sans-serif;
  width: 75rem;
  margin: 0 auto;
  min-height: 85vh;
}

.layout-container-inter {
  font-family: Arial, sans-serif;
  margin: 0 auto;
  min-height: 85vh;
}

.sidebar {
  width: 250px;
  background-color: white;
  color: white;
  padding: 20px;
}

.sidebar h3 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin: 10px 0;
}

.main-body {
  flex: 1;
  padding: 20px;
}

.sidebar {
  width: 250px;
  background-color: white;
  color: white;
  padding: 20px;
}

.sidebar h4 {
  margin-top: 30px;
  margin-bottom: 32px;
  color: white;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin: 10px 0;
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  gap: 27px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 30px;
}

.toggle-container button,
.form-group button {
  margin-bottom: 10px; /* Adds space between buttons */
  font-size: 20px;
}

/* Hide the page until the page is fully rendered */
body{visibility: hidden;}

#search-results button {
  display: block;
  margin: 5px 0;
  padding: 8px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-item {
  padding: 8px;
  cursor: pointer;
}
.dropdown-item:hover {
  background-color: #f0f0f0;
}



#top-container {
  position: relative;
  overflow: visible; /* Allow dropdown to extend beyond */
  z-index: 1;
}


#dropdown {
  position: absolute;
  top: 100%; /* Position below the search bar */
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000; /* Ensure it's above other elements */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: subtle shadow */
}

#dropdown {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  position: absolute;
  background-color: white;
  width: 100%;
  z-index: 1000;
}


/*******************************/
/*******************************/
/*opens in new window/tab icon*/
/*******************************/
/*******************************/

 main a[target="_blank"]::after {
  content: "";
  width: 14px; height: 11px;
  margin: 5px; vertical-align: text-bottom; display: inline-block;

  /* Use the SVG as a mask; then color it with Bootstrap’s variable */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11"><g fill="none" stroke="%23000" stroke-width="1"><path d="M0 3h2V0h12v8h-2v3H0zm13-2H3v6h10zM2 4H1v4h1zm-1 6h10V8H1z"/></g></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11"><g fill="none" stroke="%23000" stroke-width="1"><path d="M0 3h2V0h12v8h-2v3H0zm13-2H3v6h10zM2 4H1v4h1zm-1 6h10V8H1z"/></g></svg>') no-repeat center / contain;
  background-color: var(--bs-secondary-color, #6c757d); /* follows Bootstrap’s text-secondary */
}

/* Footer/nav uses masked icon with white stroke and white fill background
   so it can appear on dark footer backgrounds while reusing same structure */
footer a[target="_blank"]::after,
nav a[target="_blank"]::after {
  content: "";
  width: 14px; height: 11px;
  margin: 0 5px;
  display: inline-block;
  vertical-align: text-top;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11"><g fill="none" stroke="white" stroke-width="1"><path d="M0 3h2V0h12v8h-2v3H0zm13-2H3v6h10zM2 4H1v4h1zm-1 6h10V8H1z"/></g></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11"><g fill="none" stroke="white" stroke-width="1"><path d="M0 3h2V0h12v8h-2v3H0zm13-2H3v6h10zM2 4H1v4h1zm-1 6h10V8H1z"/></g></svg>') no-repeat center / contain;
  background-color: #fff;
}




/* Hide the caret */
.multiselect .caret {
    display: none !important;
}

/* Change background color of selected items */
.multiselect-container li.active > a {
    background-color: #e9ecef !important; /* Light grey */
    color: #000 !important; /* Keep text readable */
}

/* Align text in dropdown items to the left */
.multiselect-container li > a {
    text-align: left !important;
}

#dropdown {
  max-width: 100%; /* Ensure it doesn't exceed container width */
  word-wrap: break-word; /* Break long words */
  white-space: normal; /* Allow wrapping */
  overflow-wrap: break-word; /* Modern equivalent for word-wrap */
}

#dropdown .dropdown-item {
  padding: 0.5rem 1rem;
  white-space: normal; /* Important for wrapping */
  word-break: break-word; /* Break long words if needed */
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* aligns top edges */
  gap: 40px; /* space between left and center sections */
}

.left-section {
  display: flex;
  flex-direction: column; /* stack header and button vertically */
  align-items: flex-start; /* keep them left-aligned */
}

.left-section h4 {
  font-size: 20px; /* Change to any size you want */
  font-weight: bold; /* Optional: make it bold */
}

.left-section h3 {
  font-size: 20px; /* Change to any size you want */
  font-weight: bold; /* Optional: make it bold */
}

.center-section {
  text-align: left; /* Align text to the left */
  flex: 1; /* Take remaining space */
  padding-left: 60px; /* Optional: adds some space from the left edge */
}

.navy-dot {
  background-color: #142062;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  margin: auto;
}



/* backdrop that sits over page but under the panel */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 1040;
}

/* floating panel containing child buttons */
.nested-overlay-panel {
  position: absolute;
  z-index: 1050;
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: .75rem;
}

/* optional: nicer spacing for child buttons */
.nested-overlay-panel .btn {
  text-align: left;
}

.measures-header {
  font-size: 1.25rem;
  margin: 0.5rem 0 1rem;
  line-height: 1.4;
}

.measures-header-all-meas {
  font-size: 1.25rem;
  margin: 0.5rem 0 1rem;
  line-height: 1.4;
}

#home_about_button {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
}

/* Apply to all buttons */
button:focus-visible {
  outline: none;                 /* Remove default outline */
  box-shadow: 0 0 0 3px #000;    /* Black ring without changing layout */
}

/* If using Bootstrap buttons */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #000;
}

/* Keep your existing look, just ensure blocks size naturally */
.home-side { display: grid; grid-auto-rows: min-content; gap: 1rem; }


/* Ensure home-side and home-main stack properly */
.home-main, .home-side {
  width: 100%;
  box-sizing: border-box;
}

/* make first two right‑col boxes at least 120px tall (include the one inside the form) */
#rightCol .home-side > .div-style-bar:first-child,
#rightCol .home-side > form > .div-style-bar {
  min-height: 147px;
}

#rightCol .home-side > .div-style-bar:first-child {
  padding-left: 2rem !important;
}

/* centre the single button vertically in its container */
#all-meas-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: remove any fixed widths from parent containers */
#home-scrn {
  width: 100%;
}

/* S75 button look – keep or adapt */
#selection-form-75group { display: contents; }

/* Your existing styles for search and utility bars can remain unchanged */

/* --- Search block: unchanged visuals (kept from your existing CSS) --- */
.search-container {
  background: white;
  padding: 10px 20px;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  width: 83%;
  border: 2px solid #000;
}

.search-container input[type="text"] {
  border: none;
  outline: none;
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border-radius: 50px;
  color: black;
}

.search-container button {
  background: #00205B;
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.search-container button:hover {
  background: #3878c5;
}

#search-container {
  position: relative;
  width: 300px;
}

#search-bar {
  background-color: white;
  color: black;
  padding: 8px;
  height: 24px;
  width: 100%;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-size: 20px;
}

/* (You had duplicate #search-bar rules; keeping final visual state) */
#home_about_button {
  display: flex;
  justify-content: flex-end; /* Aligns content to the right */
}

/* --- Utility bars / buttons: unchanged visuals (kept) --- */
.div-style-bar {
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  margin-top: 20px;
  padding: 1rem;
}

.div-style-line {
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  padding: 0.2rem;
}

/* --- Generic .grid utility: unchanged (do NOT apply to #s75-groups-container) --- */
.grid {
  display: grid;
  width: 100%;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr); /* Max 3 columns */
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  justify-content: stretch;
  page-break-inside: avoid;
  margin-bottom: 20px;
}

/* Ensure buttons behave predictably if global styles conflict */
#buttonRow .btn {
  white-space: normal;       /* allow wrapping inside button text */
  text-align: center;        /* center text inside */
}

/* If you previously used negative margins, prefer Bootstrap spacing utilities */
.toggle-container .container {
  padding-left: 0 !important; /* replaces style="margin-left:-15px" */
}

/* Optional: equal heights across a row (if you put more content inside) */
#buttonRow > [class*="col-"] {
  display: flex;
}

#buttonRow > [class*="col-"] > .btn {
  flex: 1 1 auto;
}


#s75-groups-container > .col-12,
#s75-groups-container > .col-md-6,
#s75-groups-container > .col-lg-4 {
  margin-bottom: 1rem; /* Adjust as needed */
}

@media (max-width: 576px) {
  /* Remove fixed widths */
  .home-grid,
  #footer-container,
  #top-menu,
  .nisra-logo-container,
  .search-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 10px; /* Add safe padding */
    box-sizing: border-box;
  }

  /* Make footer columns stack */
  footer .row > [class*="col-"] {
    width: 100% !important;
    display: block;
    margin-bottom: 1rem;
  }

  /* Ensure buttons and boxes fit */
  .div-style-bar {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Logo scaling */
  #top-menu-nisra-logo {
    max-width: 150px;
    height: auto;
  }
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#dest-scrn, #s75-measure-scrn {
  flex: 1;
  flex-direction: column;
}


#content-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

#dest-scrn,
#content-centre,
.content-wrapper,
#main-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}



/* Make the desktop sidebar fill the column vertically */
@media (min-width: 992px) {
  #sidebar.offcanvas-lg {
    visibility: visible !important; /* ensure visible when offcanvas disabled */
    transform: none !important;     /* no translate animation on desktop */
  }
}

/* Make the trigger visible on all screens. If you prefer Bootstrap utilities, keep them too. */
.mobile-only {
  display: inline-block; /* or use d-inline-flex in HTML */
}

/* Sidebar off-canvas (global) */
#sidebar {
  display: block;             /* stays block */
  position: fixed;
  top: 0;
  left: 0;

  /* Size: desktop-friendly defaults */
  width: min(90vw, 360px);    /* you can increase to e.g. 420px if desired */
  height: 100dvh;

  background: #fff;
  z-index: 1050;

  /* Hidden by default: start off-canvas */
  transform: translateX(-100%);
  transition: transform 0.25s ease;

  overflow-y: auto;
  padding: 1rem;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}

/* Open state: slide in */
#sidebar.open {
  transform: translateX(0);
}

/* Backdrop (global) */
#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
  overflow: hidden;
}

/* (Optional) Disable animation for a programmatic 'auto-open' */
.offcanvas-no-anim .offcanvas {
  transition: none !important;
}


.accordion-button {
  display: block;               /* So width applies */
  inline-size: min(100%, 48rem);/* Full width on small screens, capped on larger ones */
  box-sizing: border-box;       /* Include padding in width */
  white-space: normal;          /* Allow wrapping (important if text is long) */
  text-align: left;             /* Keeps the accordion arrow alignment natural */
  padding: clamp(0.75rem, 1rem + 0.5vw, 1.25rem);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.3;
}

/* If the <h3> inside is oversized, gently normalize it without changing your markup */
.accordion-button .accordion-header {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

#content-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

#main-container {
    width: 75rem; 
    display: flex;
    margin-bottom: 20px;
}

#dest-scrn, #s75-measure-scrn {
  flex: 1;
  flex-direction: column;
}

/* 1) Root container: fixed max on laptop, fluid on small screens */
#main-container {
  /* Width shrinks to 100% on small screens, but never exceeds the laptop size you already like */
  inline-size: min(100%, 72rem);  /* 72rem ≈ 1152px – set this to your current laptop width */
  margin-inline: auto;
  /* Fluid side padding: tighter on phones, comfortable on larger screens */
  padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  box-sizing: border-box;
}

/* 2) Keep nested wrappers from re-introducing fixed widths */
#content-centre,
.content-wrapper,
#main-content {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

/* 3) Prevent overflow from common culprits */
#main-container .chart-container,
#main-container .table-container,
#main-container canvas,
#main-container table,
#main-container img,
#main-container video,
#main-container svg {
  max-inline-size: 100%;
  inline-size: 100%;
  box-sizing: border-box;
}




/* 5) Flex/grid children: allow shrinking (prevents accidental overflow) */
#main-container * {
  min-inline-size: 0;  /* fixes flex/grid overflow with long content */
}

/* 6) Accordion button and content fit naturally */
#main-container .accordion-button {
  inline-size: 100%;
  /* Optional: fluid padding & font size without media queries */
  padding: clamp(0.6rem, 3.5vw, 1rem);
  font-size: clamp(1rem, 2.8vw, 1.125rem);
}

/* Optional: canvas height handling if Chart.js sets rigid sizes */
#main-container .chart-container {
  position: relative;
  inline-size: 100%;
}
#main-container canvas {
  height: auto !important; /* lets it scale by width; Chart.js will adapt if responsive is true */
}

#main-container .row {
  margin-inline: 0;   /* safe, scoped, and doesn’t hurt laptop view because container caps the width */
}
#main-container .row > [class*="col-"] {
  padding-inline: clamp(0.5rem, 3vw, 0.75rem);
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#dest-scrn, #s75-measure-scrn {
  flex: 1;
  flex-direction: column;
}

#content-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

#dest-scrn,
#content-centre,
.content-wrapper,
#main-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}



.accordion-button {
  display: block;               /* So width applies */
  inline-size: min(100%, 48rem);/* Full width on small screens, capped on larger ones */
  box-sizing: border-box;       /* Include padding in width */
  white-space: normal;          /* Allow wrapping (important if text is long) */
  text-align: left;             /* Keeps the accordion arrow alignment natural */
  padding: clamp(0.75rem, 1rem + 0.5vw, 1.25rem);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.3;
}

/* If the <h3> inside is oversized, gently normalize it without changing your markup */
.accordion-button .accordion-header {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

#content-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

#main-container {
    width: 75rem; 
    display: flex;
    margin-bottom: 20px;
}

#dest-scrn, #s75-measure-scrn {
  flex: 1;
  flex-direction: column;
}

/* Let the table compute consistent column widths (MG) */
  #dataTable {
    table-layout: fixed;   /* Recommended so max-width is respected */
    width: 100%;
  }

  /* Default: keep single line for shorter headers (optional) */
  th.measure_title_table {
    white-space: nowrap;
    text-overflow: ellipsis;  /* only visible if overflow hidden is added */
    overflow: hidden;         /* optional if you want ellipsis for short headers */
  }

  /* When long: wrap and set a comfortable width (MG) */ 
  th.measure_title_table.wrap-when-long {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 60ch; /* roughly 60 characters wide */
    overflow: visible;
    text-overflow: unset;
  }




/* ===============================
   MOBILE POPUP SIDEBAR
   =============================== */

@media (max-width: 991.98px) {

  /* Sidebar hidden by default on mobile */
  #sidebar {
    display: block; /* must stay block, but */
    position: fixed;
    top: 0;
    left: 0;

    width: min(90vw, 360px);
    height: 100dvh;

    background: #fff;
    z-index: 1050;

    transform: translateX(-100%); /* ⬅️ HIDDEN */
    transition: transform 0.25s ease;

    overflow-y: auto;
    padding: 1rem;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
  }

  /* Open state */
  #sidebar.open {
    transform: translateX(0); /* ⬅️ SHOWN */
  }

  /* Backdrop */
  #sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  #sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Lock scroll */
  body.sidebar-open {
    overflow: hidden;
  }

  /* Show trigger button on mobile */
  .mobile-only {
    display: inline-block;
  }
}

#open-filters {
  padding: 0.5rem 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;  
  margin-bottom: 1.85rem;   /* adds white space below */
  margin-top: .6rem;
}

/* Automatically switches between 1 column (narrow) and 2 columns (wide) */

#chartContainer.grid{
  display: grid;
  gap: 12px;
  /* Key change: min(100%, 420px) prevents the min from exceeding container width */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  /* Selects container that has exactly one direct .div-style-line child */
  #chartContainer:has(> .div-style-line:first-child:last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;      /* optional cap so it doesn’t over-stretch on ultrawide */
    margin-inline: auto;    /* keep it centred */
  }
}
/* Give each chart wrapper a stable height so Chart.js doesn't squash */
#chartContainer .div-style-line{
  height: clamp(260px, 35vh, 360px);
  padding: 10px;
  border-radius: 10px;
  background: #fff;      /* optional */
  overflow: hidden;
}

/* Make canvas fill the wrapper */
#chartContainer .div-style-line canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Only on small screens: make all measure buttons the same height */
@media (max-width: 767.98px) { /* < md */
  #buttonRow .btn {
    min-height: 97px;          /* tweak this number */
    display: flex;
    align-items: center;       /* vertical centre */
    justify-content: center;   /* horizontal centre */
    white-space: normal;       /* allow wrapping */
    text-align: center;
    line-height: 1.2;
  }
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}

.measures-scope button {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically (helpful if multi-line) */
  width: 100%; 
  white-space: normal;
  overflow-wrap: anywhere;   
  word-break: normal;         
}

.measures-scope button > * {
  margin: 0 auto;
  text-align: center;
}

.btn-accordion {
    /* position: relative; */
    padding-right: 2rem;
}

.text-left {
    text-align: center !important;
}

/* Make header-row responsive */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;         /* ← allows stacking on small screens */
  gap: 1rem;               /* space between sections */
}

/* Left section (filter + select) */
.left-section {
  flex: 1 1 clamp(200px, 50%, 400px);  /* auto-resizes; never too wide */
  min-width: 200px;                    /* prevents squashing */
}

/* Center title section */
.center-section {
  flex: 1 1 clamp(250px, 100%, 600px); /* full width on small screens */
  text-align: center;                  /* looks good when stacked */
}

.center-section h2 {
  padding-left: 0 !important;   /* remove the 7rem desktop padding on small screens */
  margin: 0;
}

.center-section h5 {
  margin: 0.25rem 0;
}

@media (min-width: 992px) {
  .center-section h2#selection-heading {
    margin-left: -480px; /* tweak: -4px, -8px, -12px */
  }
}
/* Fix for the multiselect box */
#departmentSelect {
  width: 100%;                /* fills container */
  max-width: 100%;            /* prevents overflow */
}

#main-container {
    width: 75rem; 
    display: flex;
    margin-bottom: 20px;
}

aside {display:none}

/* Keep your existing look, just ensure blocks size naturally */
.home-main {
  padding: 15px 30px 0 0;
  box-sizing: border-box;
}

/* simple note shown below line charts when present */
.chart-note {
  margin-top: 0.25rem; /* slight gap from charts or container */
  font-style: italic;
}

.home-side { display: grid; grid-auto-rows: min-content; gap: 1rem; }/* S75 button look – keep or adapt */

#selection-form-75group { display: contents; }


#home_about_button {  
  display: flex;  
  justify-content: flex-end; 
}

.div-style-bar {  
  background-color: #ffffff;  
  border-radius: 2px;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
  margin-top: 20px;  
  padding: 1rem;
}

.div-style-line {  
  background-color: #ffffff;  
  border-radius: 2px;  
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
  padding: 0.2rem;
}

.all-measures-btn {    
  font-size: 20px;
}

.about-btn {
  background-color: #7767C1; 
  font-size: 1rem;
  padding: 6px 12px;
}

.about-btn:hover {
  background-color: #614EB7;
}

.grid {  
  display: grid;  
  width: 100%;  
  grid-gap: 10px;  
  grid-template-columns: repeat(3, 1fr);  
  grid-template-rows: 1fr;  
  grid-auto-rows: 1fr;  
  justify-content: stretch;  
  page-break-inside: avoid;  
  margin-bottom: 20px;
}

/* Mobile only (Bootstrap sm breakpoint is 576px) */
@media (max-width: 575.98px) {
  .s75-btn {
    height: 94px;               /* pick a height that fits 1–2 lines */
    display: grid;              /* easy centering */
    place-items: center;        /* vertical + horizontal centering */
    text-align: center;
    padding: .5rem .75rem;      /* adjust as needed */
    line-height: 1.2;
    white-space: normal;        /* allow wrapping */
    word-break: break-word;     /* break long words if needed */
    overflow: hidden;           /* hide overflow beyond the fixed height */
    font-size: 15px;
  }
}

@media (min-width: 992px) {
  .col-lg-left {
    flex: 0 0 72%;
    max-width: 72%;
  }
  .col-lg-right {
    flex: 0 0 28%;
    max-width: 28%;
  }
}

.custom-header {
  font-size: 25px;
  padding-bottom: 10px;
}

.custom-header2 {
  font-size: 31px;
}

@media (min-width: 692px) {
  .s75-btn {
    min-height: 100px;
    min-width: 200px;
    font-size: 20px;
  }
}

nav.warning a {
  text-decoration-color: white;
  text-underline-offset: 3px;
}

nav.warning a:hover {
    color: #ffffff;
    text-decoration-thickness: 2px;
}


/* --- Toolbar layout --- */
.button-toolbar {
  display: flex;
  flex-wrap: wrap;            /* allow the right group to wrap under on small screens */
  align-items: center;
  gap: .5rem 1rem;
  width: 100%;
}

/* groups */
.button-toolbar-left,
.button-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Large screens: right group flush-right, single row */
@media (min-width: 992px) {
  .button-toolbar { flex-wrap: nowrap; }
  .button-toolbar-right { margin-left: auto; text-align: right; }
}

/* Small screens: force right group onto next line under the left group */
@media (max-width: 991.98px) {
  .button-toolbar-right { flex-basis: 100%; }
}

/* IMPORTANT:
   Inside the toolbar only, neutralise the absolute positioning from the global rules:
   #downloadButton { position:absolute; top:-53px; right:0 }
   .copy-button   { position:absolute; top:-33px; right:0 }  */
.button-toolbar-right #downloadButton,
.button-toolbar-right .copy-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* Utility: quick visibility toggle */
.is-hidden { display: none !important; }

@media (min-width: 992px) {
  .button-toolbar-right { margin-left: auto; }
}

.button-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.button-toolbar-left,
.button-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* large screens → right aligned */
@media (min-width: 992px) {
  .button-toolbar { flex-wrap: nowrap; }
  .button-toolbar-right { margin-left: auto; }
}

/* small screens → wraps under */
@media (max-width: 991.98px) {
  .button-toolbar-right { flex-basis: 100%; }
}

#downloadButton {
  position: absolute;
  top: -53px;
  right: 0;
}

.copy-button {
  position: absolute;
  top: -33px;
  right: 0;
}

.button-toolbar-right #downloadButton,
.button-toolbar-right .copy-button {
  position: static !important;
}


@media (min-width: 992px) {
  .button-toolbar {
    display: flex;
    flex-wrap: nowrap;
  }
  .button-toolbar-right {
    margin-left: auto;       /* pushes to the far right */
  }
}
/* Toolbar layout */
.button-toolbar {
  display: flex;
  flex-wrap: wrap;          /* allow wrap on small screens */
  align-items: center;
  gap: .5rem 1rem;
  width: 100%;
}

.button-toolbar-left,
.button-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Large screens: single row, right group flush-right */
@media (min-width: 992px) {
  .button-toolbar { flex-wrap: nowrap; }
  .button-toolbar-right { margin-left: auto; text-align: right; }
}

/* Small screens: right group occupies next line */
@media (max-width: 991.98px) {
  .button-toolbar-right { flex-basis: 100%; }
}

/* Inside the toolbar ONLY, cancel the global absolute positioning */
.button-toolbar-right #downloadButton,
.button-toolbar-right .copy-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* Optional: hide helper class if you decide to use class toggling
   (we'll use inline style per your function, so this is just a utility) */
.is-hidden { display: none !important; }

.table-container {  
  overflow-x: auto;
  overflow-y: auto;   /* allow vertical scrolling */
  max-height: 80vh;   /* optional but recommended */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}

#all-meas-tbl{
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;   /* prevent wrap so horizontal scroll triggers */
  min-width: 640px;      /* adjust as needed */
}

#all-meas-tbl th,
#all-meas-tbl td{
  padding: .5rem .75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

/* Sticky header */
#all-meas-tbl thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  /* height should not be fixed; wrapping determines height */
}


#all-meas-tbl th {
  white-space: normal;   /* Allows text to wrap */
  word-wrap: break-word; /* Break long words if needed */
  text-align: center;    /* Optional: keep header text centered */
  padding: 8px;          /* Adds spacing for readability */
    background-color: #00205B;
  color: #ffffff;
  cursor: default;
  position: sticky;
  top: 0;
}

#all-meas-tbl tr:nth-child(even) {
    background-color: #E0E0E0; /* Light grey */
}

td, th {
  border: 1px solid black;
  font-size: 12pt;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
  white-space: nowrap;
}

#all-meas-tbl{
  table-layout: fixed;
  width: 100%;
  border-collapse: separate; /* safer with sticky columns/headers */
  border-spacing: 0;
}

/* First column fixed width + wrapping (from earlier) */
#all-meas-tbl th:first-child,
#all-meas-tbl td:first-child{
  width: 150px; 
  white-space: normal;
}

/* All other columns fixed width (example) */
#all-meas-tbl th:not(:first-child),
#all-meas-tbl td:not(:first-child){
  width: 110px; 
}

/* Specifically allow THs to wrap (TDs can stay as you set them) */
#all-meas-tbl th{  
  position: sticky;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.home-grid {
  display: flex;
  flex-wrap: wrap;
}

/* Small screens only: reorder blocks for the requested sequence
   1) About/Share
   2) Home buttons (left column)
   3) Search + All measures
   4) Logo
*/


/* Desktop (≥ lg) — pin the About/Share buttons to the top of the sidebar */
@media (min-width: 992px) {
  /* Make the sidebar a positioning context */
  .col-lg-4 .home-side {
    position: relative;
  }

  /* Absolutely position the desktop-visible About/Share block at the top-right */
  .col-lg-4 .home-about-btns.d-lg-flex {
    position: absolute;
    top: 0;              /* stick to the top of the sidebar */
    right: 0;
    left: 0;             /* stretch across the sidebar width */
    z-index: 2;          /* ensure it sits above the cards */
    margin: 0;           /* cancel any margins that add extra vertical space */
    padding-bottom: .25rem; /* tiny breathing room if you like */
  }

  /* Push the first card (Search) down enough to clear the pinned buttons */
  .col-lg-4 .home-side > .div-style-bar:first-of-type {
    margin-top: 48px;    /* adjust this to match the height of your About/Share row */
  }

  .col-lg-8 .home-main {
    margin-top: -68px;    /* adjust this to match the height of your About/Share row */
  }

  .col-lg-4 .home-side {
    margin-top: 40px;    /* adjust this to match the height of your About/Share row */
  }

  .logo-div{
    padding-left: 15px;
    padding-bottom: 15px
  }
}

/* Mobile font sizes for About page */
@media (max-width: 692px) {
  .about-content h2 {
    font-size: 20pt !important;
  }

  .about-content h3 {
    font-size: 14pt !important;
  }

  .about-content p,
  .about-content li {
    font-size: 13pt !important;
  } 
}

.multiselect.dropdown-toggle {
  background-color: #7767C1;  /* default */
  color: white;
}

.multiselect.dropdown-toggle:hover {
  background-color: #614EB7;  /* hover */
  }

h3.text-start {
    font-size: 1.25rem;
}

#all-meas-tbl td:focus-visible{
    background-color: #cfe2ff;   /* same highlight as hover */
    outline: 2px solid #3878c5;  /* optional but recommended */
    cursor: pointer;
}

/* Freeze header row */
#all-meas-tbl th {
    position: sticky;
    top: 0;
    z-index: 5;          /* ensure it stays above the cells */
    background-color: #00205B; /* match your existing header colour */
    color: white;
}

/* Freeze the first column (both th + td) */
#all-meas-tbl th:first-child,
#all-meas-tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;           /* slightly lower than header row */
    background-color: #E0E0E0; /* prevent bleed from underneath */
}

/* Ensure header cell in first column stays above the frozen column */
#all-meas-tbl thead th:first-child {
    z-index: 6;
}

/* Freeze the first column */
#all-meas-tbl th:first-child,
#all-meas-tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
background-color: #00205B;
  color: #ffffff;
}


/* Ensure the first header cell stays above everything */
#all-meas-tbl thead th:first-child {
    z-index: 6;
}

/* Alternating colours ON THE FIRST COLUMN ONLY */
#all-meas-tbl td:first-child:nth-child(1) {
    background-color: #00205B;   /* header is handled separately */
    color: white; /* if you want */
}

/* Even row cells in the first column */
#all-meas-tbl tr:nth-child(even) td:first-child {
    background-color: #E0E0E0; /* light grey */
    color:black
}

/* Odd row cells in the first column */
#all-meas-tbl tr:nth-child(odd) td:first-child {
    background-color: 
    #f2f5f8; 
    color: black
}

/* Make sure sticky keeps its colour when overlapping */
#all-meas-tbl td:first-child {
    background-clip: padding-box;
}

.cell-active {
    background-color: #cfe2ff;
    cursor: pointer;
    outline: 2px solid #3878c5;
}

#versions-table {
  width: 100%;
}

#versions-table .versions-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ccc;
  align-items: start;
}

#versions-table .versions-header {
  font-weight: 700;
}

#versions-table .versions-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  #versions-table .versions-header {
    display: none;
  }

  #versions-table .versions-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    border-radius: 8px;
  }

  #versions-table .versions-cell::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
}

.table-scroll-wrapper {
    width: 100%;
    display: block;
}

.dest-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.dest-table th,
.dest-table td {
    word-break: break-word;
}

.wrap-when-long {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Long measure header gets more room */
.dest-table.measure-col-wide th.measure_title_table,
.dest-table.measure-col-wide td:nth-child(2) {
    width: 45%;
}

.dest-table.measure-col-wide th.eq_grp_name,
.dest-table.measure-col-wide td:nth-child(1) {
    width: 20%;
}

/* Mobile / tablet */
@media (max-width: 900px) {
    .table-scroll-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        display: block;
        -webkit-overflow-scrolling: touch;
    }

    .dest-table {
        width: 900px !important;
        min-width: 900px !important;
        max-width: none !important;
    }
}