* {
  box-sizing: border-box;
}

header {
  background-image: url(https://docs.jfkdiffs.com/images/header-4.png);
  background-position: center bottom;
  background-repeat: repeat-x;
  height: 100px;
  width: 100%;
  background-attachment: scroll; /* default behavior */
  position: relative;
  z-index: 2;
}

.jfk-top {
  font-family: system-ui, sans-serif;
  max-width: 1200px;
  margin: auto;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #ffffff;
  position: relative;
  margin-top: -75px;

}

.jfk-top h2 {
  text-align: center;
}

#top-section {
  padding-top: 75px;
}
.subtitle {
  text-align: center;
  line-height: 1.7;
}

#easily {
  margin-top: -15px;
}

.jfk-grid {
  display: flex;
  justify-content: center;
  margin: auto;
}

#color-key {
  margin-top: 5px;
  line-height: 1.6;
}

#bulk-zip {
  margin-top: -10px;

}

.main-bulk-zips {
  border: 1px solid #8afffb;
  padding: 4px;
  line-height: 2;
}

#recommended {
  font-size: 11px;
  color: #d5d5d5;
}

#lq-bulk-zips {
    line-height: 2.2;
}

.jfk-grid h4 {
  margin: 0.5rem 0;
  text-align: center;
  margin-bottom: 5px;
}

.jfk-grid ul {
  margin: 0;
}

.jfk-exception {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 12px;
}

.jfk-exception span {
  background: lightblue;
  padding: 0 4px;
  border-radius: 3px;
  color: #000;
}

#red-key {
  color: #ca3f3f;
  font-weight: bold;
  background-color: #FFF;
  border-radius: 3px;
  padding: 0px 4px 1px 4px;
  cursor: pointer;
}

@keyframes fadeToRed {
  0% {
    color: #000;
  }
  100% {
    color: #ca3f3f;
  }
}


#red-key-diff {
  font-weight: bold;
  color: #000;
  animation: fadeToRed 1s ease forwards;
  animation-delay: .5s;
}

#red-key-secrets {
  font-weight: bold;
  background-color: #FFF;
  border-radius: 3px;
  padding: 0px 4px 1px 4px;
  color: #000;
  animation: fadeToRed 1s ease forwards;
  animation-delay: .5s;

}

#highlight {
  background-color:#FFF;
  color: #000;
  font-weight: bold;
  border-radius:3px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;

}

#blue-key {
  Color: #3ce3fd;
  font-weight: bold;
}

#black-key {
  Color: #000;
  font-weight: bold;
  background-color: #FFF;
  border-radius: 3px;
  padding: 0px 4px 1px 4px;
  
}

.jfk-note {
  padding-top: 0px;
  line-height: 1.5;
}

.jfk-links ul {
  margin: auto;
  padding-left: 1rem;
  text-align: center;
}

.jfk-links p {
  color: #FFF;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;

}

/* Change score message */
#change-score-message {
  color: #FFF;
  font-size: 14px;
  margin: auto;
  text-align: center;
  margin-top: -20px;
  padding-bottom: 10px;
  max-width: 600px;
  line-height: 1.5;
}

.bulk {
  margin: auto;
  text-align: center;
  padding-top: 15px;
}

.bulk h4 {
  margin: 10px;
}

.footer {
  margin: auto;
  text-align: center;
  color: #FFF;
  line-height: 1.5;
  background-image: url(https://docs.jfkdiffs.com/images/1500x500_blue.png);
  border-radius: 30px;
  padding: 20px;
}

.footer-text {
  max-width: 650px;
  text-align: center;
  margin: auto;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #1c1c1c;
}

h1 {
  text-align: center;
}

.table-container {
  max-height: 500px;
  max-width: 690px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #535353;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  background: rgb(55, 55, 55);
  color: #FFF;
  border-radius: 6px;
  transition: max-width 1s;
}
#sticky-top {
  position:sticky;
  top: 0;
  z-index: 0;
}

#top-table {
  background-color: #333;
  z-index: 0;
  top: 0;
  position: relative;
  width: 100%;
}

.table-container.wide {
  max-width: 95vw;
}

#data-container {
  margin: 2rem auto;
}

#spreadsheet-container {
  margin: 2rem auto;
  text-align: center;
}

.th-sheets, .td-sheets {
  padding: 8px 12px;
  border-bottom: 1px solid #545454;
  text-align: center;
  top: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table tr:hover {
  background-color: rgba(255, 255, 255, 0.1); /* or any color you prefer */
}

th, td {
  padding: 8px 12px;
  border-bottom: 1px solid #545454;
  text-align: left;
}

th {
  background-color: #232323;
  position: sticky;
  top: 15%;
  z-index: 2;
}

th:active {
  background-color:#19969f!important;
}

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

a {
  color: #8afffb;
  text-decoration: none;
  cursor: pointer;
}

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

ul {
  list-style-type: none;
}

#up-to-date {
  margin-bottom: -25px;
  padding-top: 10px;
  text-align: center;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

/* Modal Box */
.data-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 1.5rem;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 1000;
}

/* Close Button */
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-header {
  color: #FFF;
  top: 0;
}

/* Default (desktop/tablet) — inline display */
.mobile-break {
  display: inline;
}

.screen-break {
  display: block;
}

.optional-lines {
  display: table-cell;
}

.optional-button {
  display: block;
}

#rifSearch {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #333;
  color: #FFF;
  margin-bottom: 1rem;
  margin-left: 10px;
  vertical-align: center;  
  padding-left: 12px;
  padding-top:6px;
  padding-bottom:6px;
  width: 50%;
  text-align: left;
}

#search-box {
  position: sticky;
  top:0;
  z-index: 3;
  background-color: #333;
}

#rifSearch::placeholder {
  color: #8b8b8b;
  opacity: 1; 
}

#full-data-status {
  font-size: 12px;
  color: #aaa;
  margin: auto;
  text-align: center;

}

.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* INFO BUTTON */

.info-button {
  height: 30px;
  width: 70px;
  cursor: pointer;
  color: #000;
  text-align: center;
}


/* BUTTON */
#button-div {
  text-align: right;
  position: sticky;
  top: 15%;
  z-index: 4;
  
}

.w3-button{
  border:none;
  display:inline-block;
  padding: 8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  width:150px;
  text-align:center;
  margin-right: 32px;
  margin-top: -80px;
  font-size: 15px;

}

.w3-button:hover{
  color:#000;
  background-color:#ccc;
  font-weight: bold;

}

.w3-black,.w3-hover-black:hover{
  color:#fff;
  background-color:#19969f;
}


/* TOOLTIP */

.tooltip-image {
  position: relative;
  display: inline-block;
}

.tooltip-image .hover-image {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  position: absolute;
  right: 70px;
  top: -40px;
  z-index: 9999;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.tooltip-image:hover .hover-image {
  visibility: visible;
  opacity: 1;
}

.tooltip-image .hover-image-2 {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  position: absolute;
  left: 260px;
  top: -110px;
  z-index: 9999;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.3s ease;

}

.tooltip-image:hover .hover-image-2 {
  visibility: visible;
  opacity: 1;
}

#blue-background {
  cursor: pointer;
}

/* PDFJS IFRAME RESIZER */

.ui-resizable-helper {
  border: 3px dotted #2bdae6;
  position: relative;
  left: 500px;

}

#pdf-box {
  display: none;
}

.resizable {
  width: 775px;
  height: 600px;
  padding: 15px;
  border: 2px solid #2bdae6;
  overflow: hidden;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: row;
}
iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  margin: 1rem auto;
}

#iframe-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;

}
.ui-resizable-se {
  width: 10px;
  height: 10px;
  bottom: 0;
  right: 0;
  background: #2bdae6;
  position: absolute;
  cursor: se-resize;
}
/* TOGGLE */

#toggles {
  text-align: center;
  position:sticky;
  margin-bottom: -30px;
  margin-top: 35px;
  display:flex;
  justify-content: center;
  
}

.quality-toggle {
  vertical-align:top;
  top: 2px;
  left: 3px;
  position: relative;
  font-weight: normal;
  font-size: 14px;
}

#toggle-2-label, #toggle-1-label {
  color: #ffffff;
  transition: color 0.3s ease;
}

.toggle-label {
  color: #ffffff;
  font-size: 14px;
}

#toggle-1, #toggle-2 {
  padding: 0px 30px 0px 30px;
  
}



/* Adaptded from Uiverse.io by ErzenXz */ 
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #acacac;
  border-radius: 20px;
  transition: background-color 0.3s ease-in-out;
}

.toggle-switch-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  background-color: #1c1c1c;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.toggle-switch::before {
  content: "";
  position: absolute;
  top: -13px;
  right: -17px;
  font-size: 6px;
  font-weight: bold;
  color: #2bdae6;
  text-shadow: 1px 1px #fff;
  
}

.toggle-switch-background:hover {
  background-color: #FFF;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
  transform: translateX(45px);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
  background-color: #2bdae6;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
  content: "On";
  color: #2bdae6;
  right: -7px;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
  transform: translateX(20px);
}

#sortable-table.show-all .extra-col {
  display: table-cell;
}


.extra-col {
  display: none;
}

#sortable-table.show-all .extra-col {
  display: table-cell;
}

/* DOTS */
#page-jump-bar {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 6px;
  padding: 4px 4px;

  height: 100%;
  max-height: 100%;
  width: 45px;
}

.page-dot {
  padding: 0px;
  min-height: 30px;
  text-align: center;
  border: none;
  border-radius: 14%;
  background-color: #b9221d; /* red-ish */
  color: white;
  cursor: pointer;
}

.page-dot:hover {
  background-color: #22f7f7ab;

}

#page-jump-bar::-webkit-scrollbar {
  width: 9px;
}

#page-jump-bar::-webkit-scrollbar-track {
  background: #444; 
  border-radius: 4px;
}

#page-jump-bar::-webkit-scrollbar-thumb {
  background-color: #2bdae6;
  border-radius: 4px;
  border: 2px solid #444;
}

#page-jump-bar::-webkit-scrollbar-thumb:hover {
  background-color: #49f5f5;
}

.no-wrap {
  white-space: nowrap;
}

/*SCROLL BAR */

/* #data-container::-webkit-scrollbar {
  width: 20px;
}

#data-container::-webkit-scrollbar-track {
  background: #444; 
  border-radius: 4px;
}

#data-container::-webkit-scrollbar-thumb {
  background-color: #2bdae6;
  border-radius: 4px;
  border: 2px solid #444;
}

#data-container::-webkit-scrollbar-thumb:hover {
  background-color: #49f5f5;
}

 */
/* CUSTOM TOOLTIP */
.custom-tooltip {
  cursor: pointer;
}

.custom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; /* place above the element */
  left: 30%;
  transform: translateX(-50%);
  background-color: #000;
  color: #16dae1;
  padding: 8px 8px;
  border-radius: 4px;
  white-space: wrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease-in-out;
}

.custom-tooltip:hover::after {
  opacity: 1;
}


.heatmap-zero {
  background-color: #333; /* blue */
}
.heatmap-lowest {
  background-color: #2981df; /* yellow */
}

.heatmap-low {
  background-color: #f3d171; /* yellow */
  color: #000;
}

.heatmap-mid {
  background-color: #f39c12; /* orange */
  color: #000;
}
.heatmap-high {
  background-color: #e74c3c; /* red */
  color: #FFF;
}


@media only screen and (max-width: 600px) {
  body {
    padding: 0px;
    margin: auto;
  }

  .jfk-top {
    padding: 10px;
    border-radius: 0px;
    margin-top: -100px;
    font-size: 12px;
  }

  .jfk-top h1 {
    font-size: 18px;

  }

  .jfk-exception {
    font-size: 12px;
  }
  .table-container {
    font-size: 12px;
    max-height: 500px;
    max-width: 90vw;
  }

  table {
    width: 100%;
    table-layout: auto;
  }
  td, th {
    white-space: normal;
  }
  .mobile-break {
    display: block;
  }
  .optional-lines {
    display: none;
  }

  .optional-button {
    display: none;
  }

  .extra-col {
    display: none !important;
  }

  #top-table {
    height: 75px;
  }

  #toggles {
    flex-direction: column;
    align-items: center;
  }

  #toggle-1, #toggle-2 {
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  .quality-toggle {
    text-align: left;
    margin-left: 8px;
    margin-top: 0;
    font-size: 13px;
  }

  .resizable {
    width: 95vw;
  }

  .tooltip-image .hover-image,
  .tooltip-image .hover-image-2 {
    display: none !important;
  }
  .info-button {
    height: 30px;
    width: 55px;
    font-size: 11px;
  }

}