.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f8f9fa;
  border-radius: 50%;
  border-top: 16px solid #667eea;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


/* element styles */
* {
  margin: 0;     /* by default, all elements (selector *) have no margin */
}
html {
  width: 100%;                    /* 100% width of parent (root) element */
  height: 100vh;                              /* 100% height of viewport */
  background: rgba(255, 255, 255, 0.1);                            /* 10% black */
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; 
}

body {
  min-height: 100%;
}
section {
  padding: 0.5rem;
  flex-grow: 1;         /* in a flexbox, sections expand along flex axis */
}

div.code {
  white-space: pre;
}

h1 { 
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 24px; font-style: normal; 
  font-variant: normal; 
  font-weight: 700; 
  line-height: 26.4px; 
  padding-bottom: 5px;
} 

h3 { 
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; 
} 

p { 
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 14px; 
  font-style: normal; 
  font-variant: normal; 
  font-weight: 400; 
  line-height: 20px; 
} 

blockquote { 
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 21px; 
  font-style: normal; 
  font-variant: normal; 
  font-weight: 400; 
  line-height: 30px; 
} 

pre { 
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
  font-size: 13px; 
  font-style: normal; 
  font-variant: normal; 
  font-weight: 400; 
  line-height: 18.5714px; 
}

h1 {                                           /* Website name in header */
  font-size: 2.0rem;
  font-weight: normal;
}
h2 {                                                   /* About, Contact */
  font-size: 1.25rem;
  padding-bottom: 5px;
}
h3 {                                                 /* Section headings */
  font-size: 1.2rem;
  padding: 0.5rem;
}
h4 {                                               /* Section item title */
  font-weight: normal;
  padding: 0.5rem;
}
p {                                                 /* Section item body */
  padding: 0.5rem;
}
a:link, a:visited {            /* anchor links, and visited anchor links */
  color: black;
  text-decoration: none;                            /* disable underline */
}
a:hover {                                 /* when anchor link is hovered */
  color: rgb(25, 25, 25);
}
a:active {                                /* when anchor link is clicked */
  color: rgb(96, 96, 96);
}
/* component styles */
#container {
  display: grid;
  height: 100vh;
  grid-template-columns:
    [left] 10rem auto 10rem [right];
  grid-template-rows:
    [top] 5rem auto 5rem [bottom];     /* header height fits its content */
  grid-template-areas:
    "head head head"
    "panleft mainbody panright"
    "foot foot foot";
}
#header {
  grid-area: head;                    /* corresponds to name in template */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;  /* site name and nav item text aligns baseline */
  padding: 1.0rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#panel {                                       /* for element id="panel" */
  display: flex;                     /* this element is a flexbox parent */
  flex-direction: column;          /* its child elements flex vertically */
  padding: 0.5rem;
  background: rgb(0, 0, 0, 0.1);                            /* 10% black */
}
#panel.left {                 /* for element id="panel" and class="left" */
  grid-area: panleft;                  /* this element fills a grid area */
  background-color: #ffffff;
}
#panel.right {
  grid-area: panright;
}
#footer {
  grid-area: foot;
  display: flex;                     /* this element is a flexbox parent */
  flex-direction: column;          /* its child elements flex vertically */
  justify-content: center;           /* horizontal center footer content */
  align-items: center;                 /* vertical center footer content */
  padding: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: aliceblue;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}
#mainbody {                                 /* for element id="mainbody" */
  display: flex;                     /* this element is a flexbox parent */
  flex-direction: column;          /* its child elements flex vertically */
  grid-area: mainbody;
  justify-self: center;          /* fixed-width mainbody always centered */
  width: 100%;
  min-width: 22.5rem;            /* mainbody width can't go < 22.5rem */
}
div#panel,
div#mainbody {                               /* extra space under header */
  padding-top: 0.5rem;
}
#partners, #sections {     /* for element id="partners" or id="sections" */
  display: flex;                     /* this element is a flexbox parent */
  flex-direction: row;           /* its child elements flex horizontally */
  flex-wrap: wrap;           /* its child elements can wrap to next line */
  align-content: flex-start;       /* child elements start in upper left */
}
#partners.wide {           /* for element id="partners" and class="wide" */
  display: none;              /* by default, do not display this element */
}
#menu {
  position: absolute;      /* menu position unaffected by other elements */
  right: 0;                       /* zero pixels from the right boundary */
  background: rgb(239, 239, 239);
  border: 0.15rem solid rgb(0, 0, 0, 0.4);
  visibility: hidden;        /* visibility property supports transitions */
  opacity: 0;      /* opacity + visibility transition = menu fade effect */
  z-index: 1;              /* ensure menu appears over all other content */
}
#menuitems {               /* menu is implemented as a flexbox container */
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
#menuitems h3 {
  border-top: 0.15rem solid rgb(0, 0, 0, 0.1);  /* light horizontal rule */
}
#menuitems .sectrule {
  border-color: rgb(0, 0, 0, 0.25);            /* darker horizontal rule */
}
#menuitems .menuhead {
  border-top: none;
}
#menuitems h3:hover {
  background-color: rgb(0, 0, 0, 0.1);     /* gray of rollover menuitems */
}
.menubutton {
  text-align: right;
  cursor: pointer;            /* indicates it can be clicked like a link */
  user-select: none;            /* user cannot select the button as text */
}
#menuitems .alignright {
  text-align: right;            /* right-aligned menu item text (unused) */
}
#header h1.menubutton {
  display: none;        /* in default view (landscape), hide menu button */
  border: 0.15rem solid rgb(0, 0, 0, 0);   /* (invisible) alignment shim */
}

#header a {
  color:aliceblue;
}

#header .placeholder {    /* this invisible button is rendered when menu */
  color: rgb(0, 0, 0, 0); /* button is hidden, so header height matches. */
  user-select: none;       /* user can't select text of invisible button */
}
.sectionlink, .partnerlink {
  border-radius: 0.5rem;     /* give this element a slight rounded edge */
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.75rem;
  width: 7rem;                            /* fixed width for these items */
  margin-bottom: 1rem;                  /* slight margin for readability */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: aliceblue;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.sectionlink:hover, .partnerlink:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.sectionlink a {
  color: aliceblue;   /* brighten bg on mouse hover */
}

.partnerlink {
  height: 7rem;        /* partner elements are additionally fixed height */
}
.partnerlink.wide {
  margin: 0.5rem 1rem 0.5rem 0;      /* margins for spacing if they wrap */
}
.clickable-area {      /* use whenever a clickable area excludes margins */
  height: 100%;                 /* clickable area spans height of parent */
}
.eventitem, .announceitem, .motditem {
  margin-bottom: 0.5rem;                /* slight margin for readability */
}
.title {                                    /* e.g., "Open for business" */
  font-style: italic;
  font-weight: normal;
  font-size: 1.1rem;
}
.date, .ingredient {                                         /* e.g., January 1, 2021 */
  font-style: italic;
  font-size: 0.9rem;
  padding: 0 0 0.01rem 0.5rem;
  color: rgb(0, 0, 0, 0.5);
}
.navitem {                                             /* About, Contact */
  font-weight: normal;
  padding: 0 0.5rem 0 1rem;
}
.headspace, .panspace, .footspace, .bodyspace {
  flex-grow: 1;      /* these elements expand on flex axis to fill space */
}
/* Enhanced table styles */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

th {
  text-align: left;
  padding: 12px 8px;
  font-weight: 600;
  color: #333;
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

tr {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.2s ease;
}

tr:hover {
  background-color: #f8f9fa;
}

td, th {
  padding: 12px 8px;
  vertical-align: middle;
}

td.price {
  white-space: nowrap;
  font-weight: 500;
  color: #333;
}

td.qty, th.qty {
  text-align: center;
}

span.perunit {
  opacity: 0.6;
  font-size: 13px;
}
/* responsive styles applied in portrait mode */
@media screen and (max-width: 45rem) {      /* if viewport width < 45rem */
  #panel.left {
    grid-column-end: left;         /* panel grid area shrinks to nothing */
  }
  #panel.right {
    grid-column-start: right;      /* panel grid area shrinks to nothing */
  }
  #partners.tall {
    display: none;  /* hide partners in panel (overwrites display: flex) */
  }
  #partners.wide {
    display: flex;   /* show partners in body (overwrites display: none) */
  }
  #panel,                                 /* these disappear from layout */
  #header .placeholder,
  .navitem {
    display: none;
  }
  #mainbody {
    grid-column-start: left;         /* mainbody now starts at left edge */
    grid-column-end: right;           /* mainbody now ends at right edge */
  }
  #header h1.menubutton {              /* display the header menu button */
    display: inline;                         /* overwrites display: none */
  }
}
@import '~js-datepicker/dist/datepicker.min.css';

#fuzzSearch {
  width: 350px;
}
#fuzzNameContainer {
  padding: 4px 10px;
  border: 1px solid #999;
  box-shadow: inset 0 0 2px 0px #333;
  width: 100%;
  cursor: pointer;
}
.fuzzName {
  display: inline-block;
  width: 96%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fuzzArrow {
  display: none;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 7px;
  cursor: pointer;
  position: relative;
  transition: all 0.1s ease-in;
  padding: 0px;
}
.fuzzArrow:hover {
  border-top-color: #888;
}
.fuzzArrow.fuzzArrowUp {
  border-color: transparent transparent #333 transparent;
  top: -11px;
}
#fuzzDropdownContainer {
  display: none;
  width: 100%;
  margin: 0 0 5px 0;
  border: 1px solid #999;
  padding: 12px 4px 4px;
  position: relative;
}
.fuzzMagicBox {
  width: 99%;
  height: 26px;
  margin: 0 auto;
}
.fuzzSearchIcon {
  width: 20px;
  height: 30px;
  position: relative;
  display: inline-block;
  background: transparent;
  top: -20px;
  left: 95%;
}
.fuzzSearchIcon:before, .fuzzSearchIcon:after {
  content: '';
  display: block;
  position: absolute;
  right: 5px;
}
.fuzzSearchIcon:before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #aaa;
}
.fuzzSearchIcon:after {
  height: 7px;
  border-right: 1px solid #aaa;
  top: 9px;
  -webkit-transform: rotate(-32deg);
  -ms-transform: rotate(-32deg);
}
#fuzzResults {
  cursor: pointer;
}
#fuzzResults li:hover {
  color: #aaa;
}
#fuzzResults li.selected {
  color: #aaa;
}
#fuzzResults li {
  list-style: none;
  margin: 20px 0;
}

.download_files_buttons {
  margin-left: 20px;
}

/* Enhanced Search Box Styling */
#search-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

#search-box h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

#search-bar-item {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

#search-bar-item:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Enhanced visibility box */
#visibility-box {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  border-left: 4px solid #667eea;
}

/* Enhanced main body items */
.mainbodyitems {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/*Additional code added to flights table*/
.flight_header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

.flight_row {
  background: #f8f9fa;
  transition: background-color 0.2s ease;
}

.flight_row:hover {
  background: #e9ecef;
}

.flight_row.flight_row_active {
  box-shadow: inset 4px 0 #28a745; /* Green for active flights */
  background-color: #d4edda;
}

.line_item_header {
  background: linear-gradient(135deg, #5c92c4 0%, #4a7ba7 100%);
  color: white;
  font-weight: 500;
}

.line_item_row:nth-child(odd) {
  background: #ffffff;
  /* Pure white */
}

.line_item_row:nth-child(even) {
  background: #f6f7fa;
  /* Soft white/very light gray */
}

.line_item_row td,
.line_item_header,
.flight_header {
  border-right: 1px solid #e0e0e0;
  /* Thin light gray divider */
}

#flights-container {
  width: 90vw;
  height: 75vh;
  overflow-y: auto;
  overflow-x: auto;
  background: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-bottom:20px;
}

#flights {
  width: 100%;
  border-collapse: collapse;
}

.flight_button_column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* space between buttons */
  align-items: left;
  gap: 0.2rem;
}

.flight_button_column button {
  width: 75%;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #ced4da;
  background-color: #ffffff;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.flight_button_column button:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

#conversions_container {
  width: 90vw;
  overflow-x: auto;
  background: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-bottom:20px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: none; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Fade transition */
  z-index: 9999; /* Ensure it's on top */
}

#alertBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
  width: 90%;
}

/* Enhanced Button Styling */
button, input[type="button"] {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin: 5px;
}

button:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

button:focus, input[type="button"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

button:disabled, input[type="button"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary button styling */
#reset_button {
  background-color: #6c757d !important;
  background: #6c757d !important;
}

#reset_button:hover {
  background-color: #5a6268 !important;
  background: #5a6268 !important;
}