<style>
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling on the main page */
    height: 100%;
}

               /* Menu Container */
    .menu-container {
      position: relative;
      width: 100%;
      height: 100vh;
      transition: transform 0.5s ease;
    }

               /* Side Menu Styles */
    .side-menu {
      height: 100vh;
      width: 100%;
      background: #005bea;
      background: -webkit-linear-gradient(bottom, #005bea, #00c6fb); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(bottom, #005bea, #00c6fb); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(bottom, #005bea, #00c6fb); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to top, #005bea, #00c6fb); /* Standard syntax */
      padding-top: 20px;
      position: absolute;
      left: 0;
      overflow-y: auto;
    }

    .side-menu a {
      padding: 19px 20px;
      text-decoration: none;
      font-size: 24px;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Add a drop shadow */
      display: block;
      transition: all 0.3s;
    }

    .side-menu a:hover {
      background-color: #575757;
    }

            /* Hidden Menu Items */
    .side-menu .hidden {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }

  .icon-container {
     display: inline-flex;
     width: 40px;  /* Size of the sphere */
     height: 40px;
     border-radius: 50%;  /* Creates the circular shape */
     background: linear-gradient(135deg, #00c6fb, #005bea);  /* Gradient background */
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Add depth with shadow */
     border: 2px solid rgba(255, 255, 255, 0.3);  /* Faint white border */
     transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;  /* Smooth hover transitions */
   }

  .icon-container:hover {
     transform: scale(1.1);  /* Slightly enlarge on hover */
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);  /* Stronger shadow on hover */
     border: 2px solid rgba(255, 255, 255, 0.5);  /* Darker border on hover */
  }

  .icon-container i {
     font-size: 1.2em;  /* Size of the icon inside the sphere */
     color: #ffffff;  /* Icon color */
  }

  .side-menu-button {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
     color: white;  /* Color for the button text */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Add a drop shadow */
     font-size: 1.2em;
  }

  .side-menu-button .icon-container {
     margin-right: 10px;  /* Space between icon and text */
  }

  .firstBtn {  
     text-decoration-line: underline !important;
     color: white !important;
     font-size: 1.6em !important;
  }

  .image-button {
     display: flex;
     align-items: center;
     padding: 10px 15px;
     color: white;
     text-decoration: none;
     border-radius: 5px;
     transition: background-color 0.3s ease;
  }

  .button-icon {
     width: 80px !important; /* Control the icon size */
     height: 80px !important;
  }

  .image-button:hover {
     background-color: #eb9100;
  }

            /* Profile Button slides up similar to Jobs */
  .profile-slide-up {
     transform: translateY(-85px); /* Slide the Profile button up */
     transition: transform 0.5s ease;
  }



            /* Profile options container */
.profile-options {
  position: relative;
  opacity: 0;
  top: 395px;
  transform: translateX(-100%); /* Hidden by default */
  transition: opacity 0.5s ease, transform 0.5s ease;
  margin-top: -405px;
  margin-left: 80px;
  z-index: 10;
  background-color: transparent;
  visibility: hidden;
  pointer-events: none; /* Disables all mouse interactions */
}

/* Hidden profile options */
.hide-profile-options {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%); /* Move off-screen */
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
  pointer-events: none; /* Disables all mouse interactions */
}

/* Shown profile options */
.show-profile-options {
  opacity: 1;
  visibility: visible;
  transform: translateX(0); /* Slide into view */
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
  pointer-events: auto; /* Enable mouse interactions */
}

            /* Account options container */
.account-options {
  position: relative;
  opacity: 0;
  visibility: hidden; /* Default hidden */
  z-index: 10;
  background-color: transparent;
  transform: translateX(-100%);
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
   margin-left: 80px;
}

/* Hidden options */
.hide-account-options {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  pointer-events: none; /* Disables all mouse interactions */
}

/* Shown options */
.show-account-options {
  opacity: 1 !important;
  visibility: visible !important; /* Ensure visibility */
  transform: translateX(0) !important; /* Move into view */
  pointer-events: auto; /* Enable mouse interactions */
}

         /* Jobs slides to the top */
  .jobs-slide-up {
     transform: translateY(-72px);
     transition: transform 0.5s ease;
  }

/* Job buttons animations */
   .job-buttons {
      visibility: hidden;
      opacity: 0;
      transition: all 0.5s ease;
      margin-top: -390px;
  }

   .job-buttons a {
      transform: translateX(-100%);
      transition: transform 0.5s ease;
      padding-left: 120px;
   }

    /* Show job buttons */
    .show-job-buttons .job-buttons {
      visibility: visible;
      opacity: 1;
    }

    /* Show job buttons */
    .hide-job-buttons {
      opacity: 0 !important;
      transform: translateX(-100%) !important; /* Slide out to the left */
      transition: opacity 0.5s ease, transform 0.5s ease !important;
    }


    .show-job-buttons .job-buttons a {
      transform: translateX(0);
    }

/* Hide job buttons (slides them out to the left) */
.hide-job-buttons {
  opacity: 0 !important;
  transform: translateX(-100%) !important; /* Slide out to the left */
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}


/* Parent container for titles (relative to job buttons) */
#titlesContainer {
    position: absolute;
    top: 290px; /* Test a fixed position */
    left: 0px; /* Test a fixed position */
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Reset any unintended translations */
    transition: all 0.5s ease;
}

/* Titles buttons hidden initially */
.titles-buttons {
    visibility: hidden;
    opacity: 0;
    transform: translateY(0); /* No static margin-top */
    transition: all 0.5s ease;
}

/* Each title slides in */
.titles-buttons a {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    padding-left: 80px;
    top: 300px; /* Test a fixed position */
}

/* Show titles */
.show-titles-buttons {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* No static margin-top */
    transition: all 0.5s ease;
}

/* Titles sliding in */
.show-titles-buttons a {
    transform: translateX(0);
}

/* Hide titles (when needed) */
.hide-titles-buttons {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-100%) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* Selected title styling */
.selected-title {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}



/* Floating back button styles with enhanced 3D effect */
.back-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9800, #ff7300); /* 3D gradient effect */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), /* Stronger outer shadow */
              inset 0 -6px 12px rgba(255, 255, 255, 0.4), /* Inner shadow for depth */
              inset 0 6px 10px rgba(0, 0, 0, 0.2); /* Inner highlight */
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
}

/* Hover effect for enhanced 3D */
.back-button:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), /* More prominent outer shadow on hover */
              inset 0 -8px 14px rgba(255, 255, 255, 0.5), /* Stronger inner shadow */
              inset 0 8px 12px rgba(0, 0, 0, 0.3); /* Stronger inner highlight */
  transform: translateY(-8px); /* Lift more on hover */
}


/* Hidden back button */
.hide-back-button {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Shown back button */
.show-back-button {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

/* Font Awesome icon inside the back button */
.back-button i {
  font-size: 24px; /* Size of the icon */
  line-height: 60px; /* Vertically center the icon */
  color: white;
}

/* Style for disabled back button */
.back-button.disabled {
    pointer-events: none; /* Prevent clicks */
    opacity: 0.5; /* Dim the button visually */
    cursor: not-allowed; /* Show a "disabled" cursor */
}


    /* Back button styles for the week dates */
    .week-back-button {
      opacity: 0;
      visibility: hidden;
      position: fixed;
      top: -60px;
      left: 0;
      width: 100%;
      text-align: center;
      padding: 15px 0;
      background-color: #444;
      color: white;
      z-index: 300;
      transition: top 0.5s ease, opacity 0.5s ease;
    }

    .show-week-back-button {
      top: 0;
      opacity: 1;
      visibility: visible;
    }

    /* Fading out other jobs */
    .fade-out {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease !important;
    }

    /* Move selected job to the top using translateY */
    .selected-job {
      position: relative;
      z-index: 1;
      transition: transform 0.5s ease; /* Smooth animation */
    }

    /* Job options container */
    .job-options {
      position: absolute;
      opacity: 0;
      width: 90%;
      transform: translateX(-100%);
      transition: opacity 0.5s ease, transform 0.5s ease;
      top: 340px;
      margin-left: 100px;
      z-index: 10;
      background-color: transparent;
    }

    /* Job option links (initially off-screen and invisible) */
    .job-options a {
      opacity: 0;
      transform: translateX(-100%);
      transition: opacity 0.5s ease, transform 0.5s ease;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Add a drop shadow */
      padding: 10px;
      margin-bottom: 5px;
    }

    /* When the job options are shown */
    .show-job-options .job-options {
      opacity: 1 !important;
      transform: translateX(0) !important; /* Slide in */
    }

    /* Sliding job options out to the left */
    .hide-job-options {
      opacity: 0 !important;
      transform: translateX(-100%) !important; /* Slide out to the left */
      transition: opacity 0.5s ease, transform 0.5s ease !important;
    }

    /* Hidden Date List at the bottom */
    .date-list {
      position: fixed;
      transform: translateX(-100%);
      left: 0;
      right: 0;
      height: 50%;
      font-size: 24px !important;
      width: 90%;
      background-color: white;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
      transition: bottom 0.6s ease;
      overflow-y: auto;
      padding: 20px;
      z-index: 100;
    }

   /* Show the date list */
    .hide-date-list {
      visibility: hidden;
    }

    /* Show the date list */
    .show-date-list {
      bottom: 0;
    }
    
    /* Initial state - off-screen to the left */
#weekDateList {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.5s ease;
  position: absolute;
  left: 0;
  font-size: 24px !important;
  top: 20px;
  padding: 0;
  background: #fff;
  width: 90%;
  height: auto;
}

/* When it is shown - slides into place */
.show-week-date-list {
  opacity: 1;
  transform: translateX(0);
}

    /* Hide Button for the date list */
    .hide-button {
      background-color: #555;
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
      font-size: 20px;
    }

    /* Date buttons */
    .day-button {
      display: block;
      width: 90%;
      padding: 10px;
      margin-bottom: 10px;
      border: 0px solid #ddd;
      background-color: white;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
    }

    .day-button:hover {
      background-color: #ddd;
    }

    /* Side Menu Sliding Out */
    .slide-out {
      transform: translateX(-100%); /* Slide the menu out to the left */
    }
    
    /* Hidden Distro List */
.distro-list {
  position: absolute;
  bottom: -800px; /* Initially hidden below view */
  left: 0;
  right: 0;
  height: 60%;
  width: 100%;
  font-size: 24px !important;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  transition: bottom 0.6s ease;
  overflow-y: auto;
  padding: 0;
  z-index: 100;
   display: none; /* Hidden initially */
}



.hide-distro-list {
  bottom: -800px; /* Hidden state */
}

.show-distro-list {
  bottom: 0;
  transition: all 0.5s ease !important; /* Add animation if needed */
}


/* Iframe container (initially hidden) */
.iframe-container {
  position: fixed;
  top: 0;
  left: 100%; /* Start off-screen */
  width: 100%;
  height: 100vh !important;
  background-color: white;
  z-index: 200;
  transition: left 0.5s ease; /* Smooth sliding animation */
  overflow: hidden; /* Prevent scrolling inside container */
}

/* When the iframe container is shown */
.show-iframe-container {
  left: 0; /* Slide into view */
}


#iframeContainer {
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Prevent scrolling inside container */
}

iframe {
    width: 100%;
    height: 100%; /* Match parent container */
    border: none;
}

/* Back button for the iframe view */
.iframe-back-button {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: -60px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 15px 0;
  background-color: #444;
  color: white;
  z-index: 300;
  transition: top 0.5s ease, opacity 0.5s ease;
}

/* Show the iframe back button */
.show-iframe-back-button {
  top: 0;
  opacity: 1;
  visibility: visible;
}

.distro-item {
  display: block;
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.distro-item:hover {
  background-color: #e0e0e0;
}
.hide-arrow {
  background-color: #555;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}

.hide-arrow:hover {
  background-color: #444;
}


.add-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}

.add-button:hover {
  background-color: #444;
}


.submitted {
  background-color: #f0ad4e; /* Orange for 'started' */
}

.started {
  background-color: #5bc0de; /* Blue for 'submitted' */
}

.approved {
  background-color: #5cb85c; /* Green for 'approved' */
}

.date-button {
  color: white;
  text-align: left;
  margin-bottom: 10px;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  font-size: 16px;
}

  .container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

        label {
            font-size: 1.2em;
        }

        input, select {
            width: 100%;
            padding: 10px;
            font-size: 1.1em;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .submit-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            font-size: 1.2em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #45a049;
        }

        .hidden {
            display: none;
        }

        .meal-btn {
            background-color: #008CBA;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 80%;
            text-align: center;
        }

        .meal-btn:hover {
            background-color: #007B9E;
        }

        .reset-btn {
            background-color: #FF6347;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 18%;
        }

        .reset-btn:hover {
            background-color: #FF4500;
        }

        .meal-container {
            display: flex;
            gap: 10px;
            visibility: hidden;
            height: 0; /* Ensure the hidden container takes up no vertical space */
            margin-top: 0; /* Prevent extra space when hidden */
            margin-bottom: 0;
        }

        .conditional-fields {
            display: none; /* Hide the rest of the fields initially */
        }

        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay fixed in the viewport */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Background overlay */
            justify-content: center;
            align-items: center;
            z-index: 1000; /* Ensures it appears above other content */
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            width: 300px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Add some shadow for focus */
        }

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent grey */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10; /* Make sure it overlays everything else */
}

.modal-overlay .overlay-text {
  color: white;
  font-size: 36px;
  font-weight: bold;
}

.modal-overlay.active {
  display: flex; /* Show overlay when active */
}
        

#viewButton {
    position: absolute; /* Make sure it's positioned relative to the modal */
    bottom: 20px; /* Adjust this value to place it where you want */
    left: 75%; /* Center the button horizontally */
    transform: translateX(-50%); /* Correct centering */
    z-index: 20; /* Ensure the z-index is higher than the overlay */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ff9800; /* Red background for visibility */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#viewButton:hover {
    background-color: #e68900; /* Darken button on hover */
}


#weekButton {
    position: absolute; /* Make sure it's positioned relative to the modal */
    bottom: 20px; /* Adjust this value to place it where you want */
    left: 25%; /* Center the button horizontally */
    transform: translateX(-50%); /* Correct centering */
    z-index: 20; /* Ensure the z-index is higher than the overlay */
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0000ff; /* Red background for visibility */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#weekButton:hover {
    background-color: #1e90ff; /* Darken button on hover */
}

.modal-overlay {
    z-index: 10; /* Ensure the overlay has a lower z-index */
}


/* DateList font size */
.date-list button {
  font-size: 24px !important; /* Larger font for DateList buttons */
  padding: 10px;
}

/* weekDateList font size */
#weekDateList button {
  font-size: 24px !important; /* Larger font for weekDateList buttons */
  padding: 10px;
}

#weekDateList h2 {
  font-size: 22px!important; /* Larger font for job name in weekDateList */
}

/* DistroList font size */
.distro-list a {
  font-size: 28px !important; /* Larger font for DistroList items */
  padding: 10px;
}

        /* Timesheet container styles */
#timesheetContainer {
  position: absolute;
  top: 0;
  right: 0;
   width: calc(100% - 40px); /* Adjust the width to account for left and right padding */
  height: 100%;
  background-color: white;
  z-index: 300; /* Ensure it is on top of the weekDateList */
  padding: 0 20px; /* Add 20px padding to the left and right */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
  opacity: 0; /* Hidden initially */
  transform: translateY(100%); /* Positioned off-screen to the bottom */
  transition: all 0.5s ease; /* Smooth sliding transition */
  display: none; /* Hidden initially */
  pointer-events: auto !important;/* Disable interactions initially */
}

#timesheetContainer.active {
  pointer-events: auto; /* Enable pointer events when visible */
  opacity: 1;
  transform: translateY(0); /* Slide it into view */
}

/* When timesheetContainer is visible */
.show-timesheet {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Slides it into view */
}

/* When timesheetContainer is hidden (slide down) */
.hide-timesheet {
  opacity: 0;
  transform: translateY(100%); /* Slides it out of view */
}


/* Modal container */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal content */
.modal-content {
  background-color: #fff;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Circular close button */
.close-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;/* Higher z-index than the overlay */
  width: 40px !important;
  height: 40px !important;
  background-color: #ff5a5f !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  color: white !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.3s ease !important;

.close-btn:hover {
  background-color: #ff2a2f !important;
}

.close-btn:focus {
  outline: none !important;
}

.slide-in-animation {
    transform: translateX(0); /* or translateY depending on the slide */
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

.email-link {
    background: none;
    border: none;
    color: blue; /* Adjust color to your preference */
    text-decoration: underline;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.email-link:hover {
    color: darkblue; /* Change color on hover */
}

/* Bottom bar styling */

/* Bottom bar styling */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #007BFF;
    height: 90px;
    border-top: 1px solid #ccc;
    transform: translateY(0); /* Start ON the screen */
    opacity: 1;
    visibility: visible;
    transition: transform .3s ease, opacity .3s ease !important;
}

/* Button bar slides off */
.hide-bottom-bar {
    transform: translateY(100%) !important; /* Slide off the screen */
    opacity: 0;
}

/* Button bar slides back on */
.show-bottom-bar {
    transform: translateY(0) !important; /* Slide back to visible */
    opacity: 1;
    visibility: visible;
}

/* Button styling */
.bottom-button {
    flex: 1;
    border: none;
    background-color: black;
    color: white;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.bottom-button i {
    font-size: 34px;
}

.bottom-button span {
    font-size: 20px;
    font-weight: bold;
}

.bottom-button:hover {
    background-color: #0056b3;
}
  </style>