/* --- Full page background --- */

:root {
  /* --primary-bg-color: green; */
  --beige: rgba(249, 226, 162, 0.78);
  --favorite: rgba(171, 224, 226, 0.9)
}


html,
body,
.jp-LabShell,
.jp-NotebookPanel,
.jp-Notebook {
  height: 100%;
  /* margin: 6rem 1rem 4rem 1rem; */
  padding: 0;
  position: relative;
  box-sizing: border-box;
  /* background: url("https://t4.ftcdn.net/jpg/03/41/36/71/360_F_341367111_Cghn2q0TSlcsr4IwXmRYxbTJSE6oLLBN.jpg");
  repeat-y center / cover; */
  /* background: url("images/Painted White.jpg"); */
}

/* Optional: remove padding around output wrapper */
/* .jp-MarkdownOutput {
  background: transparent !important;
} */

/* ----- UNIVERSAL MARKDOWN BACKGROUND ----- */
.jp-MarkdownOutput .jp-RenderedHTMLCommon,
.jp-MarkdownOutput,
.jp-RenderedMarkdown,
.jp-Notebook
  .jp-Cell
  .jp-Cell-outputWrapper
  .jp-OutputArea
  .jp-RenderedHTMLCommon,
div.text_cell_render,
.cell.markdown .output,
.output-html,
.output-markdown {
  /* background: rgba(0, 0, 0, 0.1) !/important; */
  background: white;
  color: black !important;
  /* padding: 12px !important; */
  border-radius: 0 !important;
}

/* --- Output area background --- */
.jp-Cell-outputWrapper div div {
  /* background-color: red !important; */
  color: white !important;
  /* padding: 10px; 
    overflow: hidden; */
}

#cell-id=45282e3e {
    margin-top: 12rem;
}

main {
    width: 80%;
    margin: 8rem auto 0 auto;
    background: white;
    border: 1px solid rgb(210, 210, 210);
    /* position: relative;
    z-index: 10; */
    /* background: url("images/Painted White.jpg"); */
  }
  
  main div {
    /* max-width: 700px; */
    /* padding: 0 1rem; */
}

@media (max-width:600px) {
  main {
    width: 100%;
  }

  main div {
    padding: 0;
  }

  h1 {
    font-size: 1.6em !important;
    /* margin: 4px 0 !important; */
  }
  h2 {
    font-size: 1.3em !important;
    margin: 4px 0 !important;
  }
}



h1, h2, h3, h4 {
  font-family: arial;
}

h1 {
  border-bottom: 1px solid #888;
  margin-bottom: 1rem;
  width: fit-content;
}

h2 {
  color: #333;
  font-style: italic !important;
  /* font-size: 1rem; */
}



/* --- Toggle button --- */
.toggle-btn {
  border-radius: 10px !important;
  padding: 4px 10px !important;
  margin: 0 0 2px 0;
  font-size: 13px !important;
  cursor: pointer !important;
  background-color: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}
.toggle-btn:hover {
  background-color: #e0e0e0 !important;
}

/* --- Code transitions --- */
.code-transition {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.35s ease;
}
.code-transition.show {
  max-height: 500px;
  opacity: 1;
}

body {
  margin: 0; /* remove default body margin */
  position: relative;
  z-index: 1;
}

img {
  /* width: 600px; */
}

.jp-RenderedHTMLCommon img {
  max-width: none;
}

#img1-container {
  position: absolute; /* or fixed */
  top: -130px;
  left: 0;
  width: 100%;
  height: 300px;
  overflow: hidden;
  z-index: -1;

}

#img1 {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  opacity: 0.8;
  position: relative;
  z-index: -1;
}

#flight-plan-img {
  width: 1000px;
  height: auto;
  
}

div:has(#flight-plan-img) {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-container {
  display: flex;
  justify-content: start;
  gap: 1rem;
  flex-wrap: wrap;
  /* margin: 0 0 0.5rem 0;   */
  /* padding: 0; */
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  padding: 10px 0;
  scroll-snap-type: x mandatory; /* snap panels into view */
}

@media screen and (max-width: 600px) {
  .panel-container {
    justify-content: start;
  }

  .panel {
    max-width: none !important;
  }

}


.diagonal-stop {
  background: linear-gradient(60deg, var(--beige) 8ch, white 8.05ch);
  color: black;
  padding: 0.2rem 1rem;
  border-radius: 4px 4px 0 0;
  /* border-bottom: 1px solid white; */
  font-weight: 700;
}

.panel:has(.panel-favorite) > .diagonal-stop {
  background: linear-gradient(60deg, var(--favorite) 8ch, white 8.05ch);
  color: black;
}

.panel:has(.panel-red) > .diagonal-stop {
  background: linear-gradient(60deg, #fcafaf 8ch, white 8.05ch);
  color: black;
}

.panel {
    display: flex;
    flex-direction: column;
    height: fit-content;
  /* background: linear-gradient(to right bottom, rgb(55, 55, 55), rgb(84, 84, 84)); */
  /* background-color: rgba(87, 87, 87, 0.7); */
  /* color: white; */
  color: #333;
  /* padding: 0.5rem; */
  border-radius: 0 4px 4px 4px;
  max-width: 240px;
  box-shadow: -8px 8px 24px -22px #999;

  justify-content: center;
  /* margin-top: 4px; */
  /* padding: 1rem; */
  padding-right: 1rem;
}

.panel:has(.panel) {
  padding: 0;
}




.panel-green {
    /* background: linear-gradient(to right bottom, rgb(55, 95, 55), rgb(84, 199, 84)); */
    background: linear-gradient(to right bottom, rgb(191, 244, 191), rgb(222, 255, 222));
}

.panel-yellow {
    background: linear-gradient(to right bottom, rgb(254, 252, 82), rgb(249, 251, 120));
}

.panel-blue {
    /* background: linear-gradient(to right bottom, rgb(55, 55, 95), rgb(84, 84, 200)); */
    background: linear-gradient(to right bottom, rgb(177, 177, 248), rgb(177, 223, 249));
}

.panel-gray {
    background: linear-gradient(to right bottom, rgb(55, 55, 55), rgb(84, 84, 84));
}

.panel-red {
    /* background: linear-gradient(to right bottom, rgb(95, 55, 55), rgb(246, 210, 210)); */
    background: linear-gradient(to right bottom, rgb(252, 199, 199), rgb(250, 215, 215));
    border: 2px solid #fcafaf;
}
/* .subpanel-green {
    border: 1px solid white;
    min-width: 80px;
    max-width: 100px;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: linear-gradient(to right bottom, rgb(55, 95, 55), rgb(84, 199, 84));
} */
/* .subpanel-red {
    border: 1px solid white;
    min-width: 80px;
    max-width: 100px;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: linear-gradient(to right bottom, rgb(95, 55, 55), rgb(200, 84, 84));
} */



.panel-beige {
    background: linear-gradient(to right bottom, rgb(251, 249, 220), rgb(250, 247, 212));
    /* border: 1px dotted #fac43c; */
    border: 2px solid var(--beige);
}

.panel-favorite {
  background: linear-gradient(to right bottom, rgb(230, 244, 246), rgb(235, 251, 247));
  /* border: 1px dotted #5bc0fb ; */
  border: 2px solid var(--favorite);
}
.panel-brown {
    /* background: linear-gradient(to right bottom, rgb(70, 57, 26), rgb(162, 134, 67)); */
    background: linear-gradient(to right bottom, rgb(204, 176, 112), rgb(236, 206, 137));
}

.panel-purple {
    background: linear-gradient(to right bottom, rgb(224, 159, 249), rgb(243, 183, 255));
}

.panel-orange {
    background: linear-gradient(to right bottom, rgb(243, 193, 124), rgb(246, 207, 149));
}

.panel-pink {
    background: linear-gradient(to right bottom, rgb(253, 145, 251), rgb(245, 167, 244));
}

.panel-title {
  font-decoration: bold;
  text-align: center;
  font-size: 1.2rem;
  color: crimson;
  font-weight: 600;
  line-height: 1.2em;
  margin-bottom: 10px;
  border: 1px dotted crimson;
  /* border-top: 1px dotted crimson;
  border-bottom: 1px dotted crimson; */
  width: 30%;
  background-color: white;
  margin: 0 auto;
  padding: 2px 0;
  /* max-width: 160px; */
}

.panel-title > sup {
    font-size: 0.8rem;
}
.panel-date {
    /* color: #c0bebe; */
    color: #555;
    text-align: center;
}
.panel-subtitle,
.panel-group-subtitle {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    width: 100%;
    text-align: center;
}
.panel-group-subtitle {
    border-bottom: 1px solid #999;
}
.panel-subtitle div {
    text-align: center;
}

.panel-values {
    display: flex;
    gap: 1rem;
}

.panel-value,
.panel-group-value {
  font-size: 1.8rem;
  text-align: center;
}

.panel-value-green {
    color: rgb(100, 240, 100)
}

.panel-value-red {
    color: rgb(240, 140, 140)
}


.panel-group-container {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 1rem;

}

.panel-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin: 0.5rem 0; */
}









.panel-footer {
    color: rgb(250,250,250);
    text-align: center;
}



.jp-CodeCell .jp-Cell-inputWrapper
{
    display: none !important;
}

div:has(img) {
  /* overflow: auto; */
  /* padding: 2px; */
}

.jp-OutputArea.jp-Cell-outputArea {
  /* overflow: hidden; */
}

.jp-CodeCell > .jp-Cell-outputWrapper img {
    /* border: 2px solid #999; */
    border-radius: 5px;
    box-shadow: 1px 1px 4px 0px #999;
    box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  
  div:has(img) {
    padding: 0;
  }
  .jp-CodeCell > .jp-Cell-outputWrapper img {
      box-shadow: none;
  }
}
div > div.jp-InputArea.jp-Cell-inputArea > div.jp-RenderedHTMLCommon.jp-RenderedMarkdown.jp-MarkdownOutput p img {
    border-radius: 5px;
    margin-top: 4px;
    box-shadow: 2px 2px 8px 0px #999;

}


.jp-Cell .jp-CodeCell, .jp-mod-noOutputs {
    display: none !important;
}
    
.celltag_remove_cell, .jp-RenderedText {
        display: none !important;    
        }

.jp-OutputPrompt, .jp-OutputArea-prompt, .jp-mod-noOutputs, #cell-id=160525da {
/* , div.jp-InputArea.jp-Cell-inputArea { */
    display: none !important;    
}

/* .jp-OutputArea-prompt {
  display: none;
} */

/* ul {
  list-style-type: none;
}

ul li::marker {
  content: "→ ";
} */

/* ul {
  list-style: disc;
}

ul li::marker {
  content: "▸ ";
  color: crimson;
  font-size: 18px;
  
} */

ul {
  list-style: none;
  padding-left: 0.5em;
}

li {
  list-style: none;
    position: relative;
    line-height: 1.6;
}

li::before {
  /* content: "▸ "; */
  /* content: "→ "; */
  content: "· ";
  /* content: "▫ "; */
  /* content: "▪"; */
  position: absolute;
  left: -0.5em;
  top: -0.4em;
  color: crimson;
  font-size: 1.4rem;
}

li ul li {
  /* list-style-type: disc; */
}

li ul li::before {
  /* content: none; */
  content: "- ";
  position: absolute;
  left: -0.6em;
  top: -0.4em;
  color: crimson;
  font-size: 1.4rem;
}

.jp-RenderedHTMLCommon ul:not(.list-inline) {
  padding-left: 1.2rem !important;
}


/* a {
    font-weight: bold;
}

a:hover, a:focus, a:active {
    text-decoration: none;
    opacity: 0.7;
} */

a {
  font-weight: bold;
  cursor: pointer;
}
/*
a:hover,
a:focus,
a:active {
  scale-y: 0.9;
} */

a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}
/*
.jp-Cell.jp-CodeCell.jp-Notebook-cell {
  border: 2px solid dodgerblue;
  border-radius: 6px;
  margin: 8px 0;
} */


.jp-Notebook-cell.celltag_remove_cell {
    display: none !important;
}


.page-link-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted #999;
}



.back-arrow {
    height: 10px;
    width: 16px;
}

.page-link-btn {
  font-size: 18px;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow, transform;
  background: #eee;
  box-shadow: 0px 0.01em 0.01em rgb(45 35, 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  padding: 6px 12px;
  border-radius: 4px;
  color: #111;
  line-spacing: 6px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.page-link-btn:has(.back-arrow) {
  padding: 8.5px 12px;
  display: flex;
  place-items: center;
}

.page-link-a {
    color: black;
    text-decoration: none;  /* Remove underline */
}

.page-link-btn:hover {
    background-color: #ecebeb;  /* Darker green on hover */
}

@media screen and (max-width: 600px) {
  
  .page-link-container {
    justify-content: start;
  }
  .page-link-btn {
    font-size: 16px;
    padding: 8px 16px;
    /* height: 2em; */
  }

  .page-link-btn:has(.back-arrow) {
    padding: 9.5px 16px;
  }    
}




/* #flights th {
  background-color: #1f2937; 
  color: white; 
  padding: 8px 20px !important;
  width: 100px;
} 
  
#flights td { 
  padding: 6px; 
  border: 1px solid #e5e7eb; 
} 

#flights tr:nth-child(even) { 
  background-color: #f3f4f6; 
} */

.jp-InputPrompt {
  display: none;
}

.celltag_remove_cell {
  display: none !important;
}

/* .jp-Cell-inputWrapper {
  display: none;
} */

/* pre {
  display: none;
} */

div.jp-Cell-outputWrapper > div.jp-OutputArea.jp-Cell-outputArea > div > div.jp-OutputPrompt.jp-OutputArea-prompt {
  display: none;
}

.dataTables-filter:has(label) {
  margin: 0 0 4px 0 !important;
}

div.jp-InputArea.jp-Cell-inputArea {
  padding: 0;
  /* max-width: 600px !important; */
  margin: 0 auto;
}

.jp-InputPrompt,
.jp-OutputPrompt {
    display: none !important;
}

/* Tab System Styles */
.tabs {
  width: 98%;
  margin: 20px auto;
  position: relative;
  overflow: hidden; /* Keep this for tab layout */
}

/* Hide radio buttons */
.tabs input[type="radio"] {
  display: none;
}

/* Tab labels style */
.tabs label {
  padding: 10px 20px;
  background: #eee;
  cursor: pointer;
  margin: 2px 5px 0 0;
  display: inline-block;
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* Hover effect on tabs */
.tabs label:hover {
  background: #ddd;
}

/* Content container style */
.content {
  display: none;        /* Start hidden */
  opacity: 0;
  transform: translateY(15px);  /* Start off-screen */
  transition: opacity 0.35s ease, transform 0.35s ease;
  margin-top: 0;
  padding: 0;
  transition: max-height 0.5s ease, opacity 0.35s ease, transform 0.35s ease;
  border: 1px solid #ccc;
  overflow-y: auto;     /* Ensure scrolling for large content */
  -webkit-overflow-scrolling: touch;
}

/* Active tab content */
#tab-maryville:checked ~ #content-maryville,
#tab-louisville:checked ~ #content-louisville,
#tab-knoxville:checked ~ #content-knoxville {
  display: block;           /* Display active content */
  opacity: 1;               /* Make it visible */
  transform: translateY(0); /* Slide in */
  margin-top: 10px;
  padding: 15px;
  -webkit-overflow-scrolling: touch;
}

/* Active tab label (highlight selected tab) */
#tab-maryville:checked + label,
#tab-louisville:checked + label,
#tab-knoxville:checked + label {
  background: #ccc;  /* Change background color on active tab */
}