/* General Navbar Styling */
header {
    background-color: #1e3a8a; /* Dark blue background */
  }
  
  .logo {
    height: 2.5rem; /* Adjust logo height */
  }
  
  .nav-link {
    background-color: #164e63; ; /* Tailwind's blue-500 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* Tailwind's rounded-md */
    transition: background-color 0.3s;
  }
  
  .nav-link:hover {
    background-color: #164e63; /* Tailwind's blue-600 */
  }
  
  .mobile-nav-link {
    background-color: #164e63; /* Tailwind's blue-800 */
    color: white;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s;
  }
  
  .mobile-nav-link:hover {
    background-color: #164e63; /* Tailwind's blue-700 */
  }
  
  .mobile-nav-button {
    background-color: #ef4444; /* Tailwind's red-600 */
    color: white;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
    transition: background-color 0.3s;
  }
  
  .mobile-nav-button:hover {
    background-color: #dc2626; /* Tailwind's red-700 */
  }
  
  /* Adjust the padding and margin for the header */
  header {
    padding: 0.5rem 1rem;
  }
  
  /* Ensure that the fixed mobile menu has proper padding and alignment */
  .fixed {
    top: 0;
    right: 0;
    width: 100%;
  }


/* Container for profile details */
.profile-container {
    background-color: #1a202c; /* Dark background for contrast */
    color: #e2e8f0; /* Light text color */
    border-radius: 12px; /* Rounded corners for a modern look */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    padding: 24px;
    margin: auto;
    max-width: 700px; /* Adequate width for readability */
    width: 95%; /* Responsive width */
  }
  
  /* Heading styles */
  .profile-heading {
    font-size: 1.75rem; /* Larger heading */
    font-weight: 700; /* Bold heading */
    color: #f6e05e; /* Highlight color */
    border-bottom: 3px solid #f6e05e; /* Bold underline */
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  
  /* Profile details */
  .profile-details p {
    margin: 12px 0; /* Adequate spacing */
    font-size: 1rem; /* Readable font size */
  }
  
  /* Highlighted text */
  .profile-highlight {
    font-size: 1.25rem; /* Larger font size for emphasis */
    color: #f6e05e; /* Highlight color */
  }
  
  /* Button styles */
  .cancel-button {
    background-color: #e53e3e; /* Strong color for attention */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .cancel-button:hover {
    background-color: #c53030; /* Darker shade for hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
  }
  
  .cancel-button:disabled {
    background-color: #a0aec0; /* Disabled color */
    cursor: not-allowed;
  }
  
.main-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .top-section
  {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  

  .bottom-section {
    display: flex;
    justify-content: space-between;
    margin: 8px 0px;
    width: 100%;
 }


  .top-links
 {
    display: flex;
    flex-wrap: wrap; 
    margin-left: 0;
  }

  .button-links {
    display: flex;
    flex-wrap: wrap; 
    margin-left: 5px;
  }

  .links a,
  .location-links a
 {
    margin-right: 4px;
    color: white; 
  }

  .button-links a {
    margin-right: 4px;
    color: white; 
  }
  
  .side-buttons-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 2px;
    border: 1px solid yellow;
  }

  .side-buttons-box img {
    max-width: 100%; 
  }

  .bottom-buttons-box {
    display: flex;
    text-align: center;
    margin: 4px;
    padding: 0px; 
  }

  
  .image-container {
    display: flex;
  }
  
  .image-wrapper {
    flex: 1;
    width: 100%
  }
  
  .image-wrapper img {
    width: 100%;
    height: auto;
  }
  
  .side-links {
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    margin-left: 2px;
  }
  
  .side-links a {
    margin-bottom: 10px;
    color: white; 
  }
  
  .comingsoon-sidelink-style {
    margin-left: 4px;
    margin-right: 4px;
    padding: 4px;
  }

  .right-bottom-corner {
    display: flex;
    flex-direction: column;
    margin-left: 2px;
  }

  .comingsoon-bottomlink-style {
    font-size: 20px; 
    margin-left: 8px;
    margin-right: 8px;
    padding: 4px;
  }

  .button-link {
    display: inline-block;
    padding: 2px 2px;
    margin-right: 5px;
    background-color: #007bff; 
    color: #fff; 
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
  }

  .top-button-link {
    display: inline-block;
    padding: 2px 2px;
    margin-right: 5px;
    background-color: #007bff; 
    color: #fff; 
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .bottom-button-link {
    display: inline-block;
    padding: 2px 2px;
    margin-right: 5px;
    background-color: #007bff; 
    color: #fff; 
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
  }
  

  .button-link:hover {
    background-color: #0056b3; 
  }
  

  .centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .active-code {
    color: green;
  }
  
  .inactive-code {
    color: red;
  }
  
  @media (max-width: 768px) {
    .main-content {
      padding: 0 20px;
    }
    
    .top-section,
    .bottom-section {
      flex-direction: column;
    }
  }
  
.profile-container {
    width: 80%;
    margin: auto;
  }
  
  .profile-form {
    display: flex;
    flex-direction: column;
    margin: 20px;
  }
  
  .profile-input {
    height: 40px; 
    padding-left: 10px;
    /* Add any other styling you need */
  }

  .profile-select {
    width: 100px; /* Ensures the input width adjusts to fit the content */
    padding-left: 10px;
    /* Add any other styling you need */
  }

  .profile-date {
    width: 200px; /* Ensures the input width adjusts to fit the content */
    padding-left: 10px;
    /* Add any other styling you need */
  }

  .profile-form input[type="text"] {
    height: 40px; /* Adjust the height as per your design */
    padding-left: 10px;
  }

  .profile-textarea {
    height: 300px; 
    resize: vertical; 
    background-color: lightgray;
    color: black;
    padding-left: 10px;
  }

  label {
    margin: 10px 0;
  }
  
  .profile-image {
    width: 100px;
    height: 100px;
    margin: 10px 0;
    border: 2px solid #630606;
  }
  
  .button-container {
    display: flex;
    gap: 4px; 
    margin-top: 4px;
    justify-content: flex-end;
  }
  
  
  .update-button{
    width: 150px;
    height: 50px;
    padding: 12px;
    margin-top: 4px;
    cursor: pointer;
    background-color: rgb(0, 255, 106);
    color: black;
    font-size: 16px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cancel-button {
    width: 150px;
    height: 50px;
    padding: 12px;
    margin-top: 4px;
    cursor: pointer;
    background-color: aqua;
    color: black;
    font-size: 16px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  label {
    margin: 10px 0;
  }
  
  input[type="text"] {
    width: 50%; 
  }

  input[type="title"] {
    width: 70%; 
  }

  input[type="email"] {
    width: 80%; 
  }
  
  input[type="tel"] {
    width: 40%; 
  }
  
  input[type="file"] {
    width: 100%; 
  }
  
/* Add responsive styling for small screens */
@media (max-width: 600px) {
    .profile-container {
      width: 100%;
    }
  }
  
/* styles/MessageDisplay.css */
.message-container {
  max-width: 90%;
  margin: auto;
  padding: 20px;
}

.message-heading {
  color: #ffd700; /* Yellow color for heading */
}

.message-form {
  display: flex;
  flex-direction: column;
}

.label {
  display: inline-block;
  margin: 10px 0;
}

.emmail-field{
  height: 2em;
  width: 100%;
}

.input-field {
  height: 2em;
  width: 100%; 
}

.subject-field {
  height: 2em;
  width: 100%; 
}

textarea {
  width: 75%;
  height: 600px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.submit-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 4px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

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


.error-message {
  color: red;
}


.text-to-table-container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

.text-area {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 8px;
}

.convert-button,
.reset-button,
.prompt-button,
.copy-button,
.ai-button,
.database-button,
.analysis-button,
.close-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.reset-button,
.copy-button {
  background-color: #f44336;
}

.result-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.result-table th,
.result-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.result-table th {
  background-color: #4caf50;
  color: white;
}

.json-prompt {
  margin-top: 20px;
  background-color: #f2f2f2;
  padding: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #ddd;
  border-radius: 5px;
}

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

.action-message {
  margin-top: 20px;
  width: 100%; /* Make the text area take full width */
  height: 200px; /* Set a larger height for the text area */
  resize: vertical; /* Allow vertical resizing */
  background-color: #f2f2f2;
  padding: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.editable-text-area {
  width: 100%;
  height: 200px; /* Increased height */
  margin-bottom: 20px; /* Added margin for separation */
  border: 1px solid #ccc;
  padding: 8px;
}

.close-button {
  background-color: #2196f3;
  margin-bottom: 20px; /* Added margin for separation */
}

.close-button:hover {
  background-color: #007bb5;
}

.image-preview {
  height: 200px; 
  width: 356; 
}

.share-message-conatiner {
  display: flex; /* Use flexbox layout */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center-align items horizontally */
  margin-top: 20px;
  color: white;
  border: 4px solid #f1e55b;
  padding: 10px;
}

.share-message-conatiner img {
  width: 256px; /* Limit width to fit within WhatsApp message */
  max-width: 100%; /* Ensure image does not exceed container width */
  height: auto; /* Maintain aspect ratio */
  border: 1px solid #ccc; /* Add a border for clarity */
  border-radius: 5px; /* Add rounded corners */
  margin-bottom: 20px;
}

.share-message-conatiner p {
  font-size: 16px; /* Adjust font size for readability */
  line-height: 1.5; /* Adjust line height for readability */
  max-width: 300px; /* Limit width to fit within WhatsApp message */
  margin-left: 10px; /* Align text to the left */
}


.whatsapp-share-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.whatsapp-share-button:hover {
  background-color: darkgreen;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust column width as needed */
  grid-gap: 10px; /* Adjust gap between images as needed */
}

.gallery img {
  width: 100%;
  height: auto;
  cursor: pointer; /* Add pointer cursor to indicate clickable */
  border-radius: 5px; /* Add rounded corners for aesthetics */
}

.gallery img:hover {
  opacity: 0.8; /* Reduce opacity on hover for visual feedback */
}
/* styles/AboutUs.css */

.about-container {
    max-width: 100%;
    margin: auto;
    padding: 40px;
  }
  
  .about-heading {
    color: #ffd700; /* Yellow color for heading */
  }
  
  .about-description {
    margin-top: 15px;
    line-height: 1.5;
    color: #ffffff;
  }
  
/* styles/TestMyPage.css */

.text-to-table-container {
    max-width: 100%;
    margin: auto;
    padding: 20px;
    text-align: center;
  }
  
  .text-area {
    width: 100%;
    height: 500px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 8px;
  }
  
  .convert-button,
  .reset-button,
  .prompt-button,
  .copy-button,
  .ai-button,
  .database-button,
  .analysis-button,
  .close-button {
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
  
  .reset-button,
  .copy-button {
    background-color: #f44336;
  }
  
  .result-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    color: white;
  }
  
  .result-table th,
  .result-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .result-table th {
    background-color: #4caf50;
    color: white;
  }
  
  .json-prompt {
    margin-top: 20px;
    background-color: #f2f2f2;
    padding: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .button-container {
    margin-top: 20px;
  }
  
  .action-message {
    margin-top: 20px;
    width: 100%; /* Make the text area take full width */
    height: 200px; /* Set a larger height for the text area */
    resize: vertical; /* Allow vertical resizing */
    background-color: #f2f2f2;
    padding: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .editable-text-area {
    width: 100%;
    height: 600px; /* Increased height */
    margin-bottom: 20px; /* Added margin for separation */
    border: 1px solid #ccc;
    padding: 8px;
  }
  
  .close-button {
    background-color: #2196f3;
    margin-bottom: 20px; /* Added margin for separation */
  }
  
  .close-button:hover {
    background-color: #007bb5;
  }
.border-container {
    margin: 2px 2px;
    border: 1px solid #82c0ea;
    border-radius: 8px;
    padding: 10px;
  }

.border-container-gray {
    font-size:larger;
    margin: 4px 4px;
    border: 2px solid #9e9f9f;
    border-radius: 8px;
    padding: 10px;
    /* padding-top: 12px;
    padding-bottom: 12px; */
}

.border-inputbox {
    width: '60px';
    color: 'black';
    margin: '5px 0px';
    border: 1px solid #9e9f9f;
    text-align: 'right';
}

.button-style {
    background-color:  #007bff;
    color: white;
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    flex: 1; /* Equal width for all buttons */
    max-width: 200px; /* Limit maximum width */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for overflowing text */
    margin-right: 10px; /* Adjust spacing between buttons */
    margin-bottom: 10px; /* Adjust spacing between rows */
  }

  .red-button {
    background-color: purple; /* Change background color to red */
  }
  
  .button-style:hover {
    background-color:  #007bff;
  }
  
  .button-style:last-child {
    margin-right: 0; /* Remove right margin for the last button in each row */
  }

  .search-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid gray;
  }
  
  .search-container input,
  .search-container button {
    margin: 5px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .search-row {
    display: flex;
    align-items: center;
  }
  
  .to-label {
    margin: 0 8px;
  }
  
  .small-button {
    padding: 6px 12px;
  }

  .input-container {
    display: flex;
  }
  
  .input-container input {
    margin-right: 10px; /* Adjust margin as needed */
  }

  .date-picker-container {
    display: flex;
    align-items: center;
  }
  
  .date-picker-container .react-datepicker-wrapper {
    margin-right: 10px; /* Adjust margin as needed */
  }

  .tags-input {
    font-size: 12px; /* Adjust font size as needed */
    width: 400px; /* Adjust width as needed */
  }

  .generate-endtime-button {
    font-size: 14px;
    padding: 5px;
  }

  .custom-bullets {
    list-style-type: disc;
    color: rgb(249, 213, 147); /* Change bullet color */
    padding-left: 1.5rem; /* Adjust padding */
  }

  @media screen and (max-width: 600px) {
    .search-container input,
    .search-container button {
      width: calc(50% - 10px);
    }
  }
/* src/components/Dashboard.css */

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    background-color: #164e63; 
    color: #333; 
    z-index: 999;
  }
  
  .group {
    flex: 1;
    margin: 0 10px;
    max-width: 250px;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff; /* Default background color for groups */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .nested-group {
    flex: 1;
    margin: 0 0px;
    max-width: 250px;
    padding: 0px;
    border: 0px solid #ccc;
    border-radius: 0px;
    background-color: #fff; /* Default background color for groups */
    margin-bottom: 0px;
  } 


.group-title {
    color: #fff; /* White text color for title bars */
    background-color: #ddd; /* Background color for titles */
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }

  .group-title-bottom {
    color: #fff; /* White text color for title bars */
    background-color: #ddd; /* Background color for titles */
    padding: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 0;
  } 

 .spotsnap-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #164e63; 
    color: #333; 
    text-align: center;
    width: 100%;
    margin: 0 auto; 
  }
  
  .spotsnap-title {
    color: #fff; /* White text color for title bars */
    background-color: #ddd; /* Background color for titles */
    padding: 8px;
    margin-top: 0;
  }

  /* .spotsnap-title {
    color: #fff; 
    background-color: #ddd; 
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  } */
  
   /* .spotsnap-left {
    display: flex;
    flex-direction: column; 
    flex-grow: 1; 
    padding: 2px;
    background-color: #164e63; 
    color: #333; 
    width: 70%;
  }
  
  .spotsnap-right {
    display: flex;
    flex-grow: 0; 
    align-items: center; 
    justify-content: center;
    padding: 2px;
    background-color: #164e63; 
    color: #333; 
  }
  
  .spotsnap-left-top {
    color: #fff; 
    background-color: #ee2424; 
    padding: 2px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }
  
  .spotsnap-left-bottom {
    color: #0c21bd; 
    background-color: #f2f68e; 
    padding: 2px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 10px; 
  } */

  .nested-group-title {
    color: #fff; 
    background-color: #ddd; 
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }
  
  .learning-group {
    background-color: #8cc9f2; /* Background color for the Learning group */
  }

  .communi-capture-group {
    background-color: #8cc9f2; /* Background color for the Communicapture group */
  }
  
  .why-analysis-group {
    background-color: #91f9bc; /* Background color for the analysis group */
  }

  .connect5-group {
    background-color: #91f9bc; /* Background color for the analysis group */
  }
  
  .life-chronicles-group {
    background-color: #8cc9f2; /* Background color for the Life Chronicle group */
  }

  .agile-dmaic-group {
    background-color: #91f9bc; /* Background color for the Communicapture group */
  }

  .applause-hub-group {
    background-color: #8cc9f2; /* Background color for the applause group */
  }

  .job-board-group {
    background-color: #91f9bc; /* Red background color for the Job, Help, and Pricing group */
  }
  
  .profile-group {
    background-color: #8cc9f2; /* Green background color for the Concerns & Objectives group */
  }

  .group a {
    display: block;
    margin: 0 8px;
    margin-bottom: 8px;
    color: #333; /* Dark text color for links */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
  }
  
  .group a:hover {
    color: #ffffff; /* Blue color on hover for links */
    background-color: #413d3d; 
  }
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
  }
  
  .dashboard-header h3,
  .dashboard-header h2 {
    margin: 0; /* Remove default margin */
  }

  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .dashboard-container {
      flex-direction: column; /* Change to a column layout for smaller screens */
      align-items: center; /* Center items in the column */
    }
  
    .group {
      width: 100%; /* Take up the full width of the column */
      margin: 0 0 20px 0; /* Add space between groups */
    }
  }
  
  /* Add this to your Dashboard.css or your main styles */
.sidebar {
  width: 200px; /* Adjust the width as needed */
  background-color: #333; /* Dark background color */
  color: #fff; /* Light text color */
  padding: 20px;
}

.submenu {
  list-style: none;
  padding: 0;
}

.submenu li {
  margin-bottom: 8px;
}

.submenu a {
  color: #00f; /* Custom color for links */
  text-decoration: none;
  display: block;
}

.submenu a:hover {
  text-decoration: underline; /* Underline on hover */
}

.dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.module-selection {
  margin-top: 1rem; /* Adjust as needed */
  margin-bottom: 1rem; /* Adjust as needed */
}

@media (min-width: 768px) {
  .tabs {
    grid-template-columns: repeat(5, 1fr); /* 5 columns for larger screens */
  }
}

@keyframes spinMedal {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* Clock Container */
.clock {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  margin: 1px auto;
  background-color: white;
}

/* Clock Face */
.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Clock Hands */
.hand {
  width: 50%;
  height: 2px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0%;
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
  border-radius: 2px;
  pointer-events: none;
}

.hour-hand {
  height: 4px;
  background-color: #333;
  animation: rotateHour 43200s infinite linear;
}

.minute-hand {
  height: 3px;
  background-color: #666;
  animation: rotateMinute 3600s infinite linear;
}

.second-hand {
  height: 2px;
  background-color: red;
  animation: rotateSecond 60s infinite linear;
}

/* Keyframe Animations */
@keyframes rotateHour {
  from { transform: rotate(90deg); }
  to { transform: rotate(450deg); }
}

@keyframes rotateMinute {
  from { transform: rotate(90deg); }
  to { transform: rotate(450deg); }
}

@keyframes rotateSecond {
  from { transform: rotate(90deg); }
  to { transform: rotate(450deg); }
}


/* Bounce Animation */
@keyframes bounceIcon {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px); /* Moves the icon upwards */
  }
  60% {
    transform: translateY(-10px); /* Smaller bounce after the big bounce */
  }
}

/* Apply bounce animation to the icon */
.animate-bounce {
  animation: bounceIcon 2s infinite;
}

/* tooltip.css */

.tooltip-container {
    position: relative;
    display: inline-block;
  }
  
  .tooltip-trigger {
    text-decoration: underline;
    cursor: pointer;
  }
  
  .tooltip-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1;
    max-width: 300px; /*25vw; /* Adjust the max-width as needed */
    white-space: normal; /* Allow text to wrap */ /*white-space: nowrap; Prevents content from breaking into multiple lines */
    /*overflow: hidden;*/ /* Prevents content overflow */
  }
  
  .tooltip-container:hover .tooltip-content {
    display: block;
    right: 0; /* Position the tooltip to the right of the trigger text */
    top: 50%; /* Position the tooltip vertically in the middle */
    transform: translateY(-10%); /* Adjust vertical positioning */
  }
  
/* src/components/Dashboard.css */

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    background-color: #164e63; /* Light gray background color for the entire dashboard */
    color: #333; /* Dark text color */
  }
  
  .group {
    flex: 1;
    margin: 0 10px;
    max-width: 250px;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff; /* Default background color for groups */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .nested-group {
    flex: 1;
    margin: 0 0px;
    max-width: 250px;
    padding: 0px;
    border: 0px solid #ccc;
    border-radius: 0px;
    background-color: #fff; /* Default background color for groups */
    margin-bottom: 0px;
  } 


.group-title {
    color: #fff; /* White text color for title bars */
    background-color: #d71515; /* Background color for titles */
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }

  .group-title-bottom {
    color: #fff; /* White text color for title bars */
    background-color: #ddd; /* Background color for titles */
    padding: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 0;
  } 

 .spotsnap-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #164e63; 
    color: #333; 
    text-align: center;
    width: 100%;
    margin: 0 auto; 
  }
  
  .spotsnap-title {
    color: #fff; /* White text color for title bars */
    background-color: #ddd; /* Background color for titles */
    padding: 8px;
    margin-top: 0;
  }

  /* .spotsnap-title {
    color: #fff; 
    background-color: #ddd; 
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  } */
  
   /* .spotsnap-left {
    display: flex;
    flex-direction: column; 
    flex-grow: 1; 
    padding: 2px;
    background-color: #164e63; 
    color: #333; 
    width: 70%;
  }
  
  .spotsnap-right {
    display: flex;
    flex-grow: 0; 
    align-items: center; 
    justify-content: center;
    padding: 2px;
    background-color: #164e63; 
    color: #333; 
  }
  
  .spotsnap-left-top {
    color: #fff; 
    background-color: #ee2424; 
    padding: 2px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }
  
  .spotsnap-left-bottom {
    color: #0c21bd; 
    background-color: #f2f68e; 
    padding: 2px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: 10px; 
  } */

  .nested-group-title {
    color: #fff; 
    background-color: #ddd; 
    padding: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
  }
  
  .learning-group {
    background-color: #8cc9f2; /* Background color for the Learning group */
  }

  .communi-capture-group {
    background-color: #8cc9f2; /* Background color for the Communicapture group */
  }
  
  .why-analysis-group {
    background-color: #91f9bc; /* Background color for the analysis group */
  }

  .connect5-group {
    background-color: #91f9bc; /* Background color for the analysis group */
  }
  
  .life-chronicles-group {
    background-color: #8cc9f2; /* Background color for the Life Chronicle group */
  }

  .agile-dmaic-group {
    background-color: #91f9bc; /* Background color for the Communicapture group */
  }

  .applause-hub-group {
    background-color: #8cc9f2; /* Background color for the applause group */
  }

  .job-board-group {
    background-color: #91f9bc; /* Red background color for the Job, Help, and Pricing group */
  }
  
  .profile-group {
    background-color: #8cc9f2; /* Green background color for the Concerns & Objectives group */
  }

  .group a {
    display: block;
    margin: 0 8px;
    margin-bottom: 8px;
    color: #333; /* Dark text color for links */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
  }
  
  .group a:hover {
    color: #ffffff; /* Blue color on hover for links */
    background-color: #413d3d; 
  }
  
  .dashboard-header {
    display: flex;
    justify-content: space-between;
  }
  
  .dashboard-header h3,
  .dashboard-header h2 {
    margin: 8; /* Remove default margin */
  }

  /* Media query for smaller screens */
  @media (max-width: 768px) {
    .dashboard-container {
      flex-direction: column; /* Change to a column layout for smaller screens */
      align-items: center; /* Center items in the column */
    }
  
    .group {
      width: 100%; /* Take up the full width of the column */
      margin: 0 0 20px 0; /* Add space between groups */
    }
  }
  
  /* Add this to your Dashboard.css or your main styles */
.sidebar {
  width: 200px; /* Adjust the width as needed */
  background-color: #333; /* Dark background color */
  color: #fff; /* Light text color */
  padding: 20px;
}

.submenu {
  list-style: none;
  padding: 0;
}

.submenu li {
  margin-bottom: 8px;
}

.submenu a {
  color: #00f; /* Custom color for links */
  text-decoration: none;
  display: block;
}

.submenu a:hover {
  text-decoration: underline; /* Underline on hover */
}


/* styles/PricingPage.css */

.pricing-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
  }
  
  h2 {
    color: #ffffff; /* Yellow color for heading */
    /*margin-left: 10px;*/ /* Left margin */
  }

  h3 {
    color: #faf60e; /* Yellow color for heading */
  }
  
  .plan {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    color: white; /* White color for text */
  }
  
  .quote-button,
  .subscribe-button {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  
  /* Add more styles as needed */
  
/* styles/Think5WhysHelp.css */

.help-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
  }
  
  .help-heading {
    color: #ffd700; /* Yellow color for heading */
  }
  
  .help-list {
    list-style-type: none;
    padding: 0;
  }
  
  .help-topic {
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: white; /* Set topic heading color to white */
    background-color: #2196f3; /* Set background color for better visibility */
  }
  
  .help-description {
    background-color: #f2f2f2;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
    color: black; /* Set description text color to black */
  }
  
/* BadgePage.css */

.table-container {
  margin: auto;
  max-width: 100%; 
}

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

.icon-table th, .icon-table td {
  border: 0px solid #ddd;
  padding: 4px;
  text-align: center;
}

.icon-table th {
  background-color: #2c3e50;
}

.alert-red {
    padding: 20px;
    background-color: #f44336; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }

  .alert-orange {
    padding: 20px;
    background-color: orange; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }

  .alert-yellow {
    padding: 20px;
    background-color: yellow; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }

  .alert-green {
    padding: 20px;
    background-color: green; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }

  .alert-blue {
    padding: 20px;
    background-color: blue; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }

  .alert-purple {
    padding: 20px;
    background-color: purple; 
    color: white;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative;
  }
  
  .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }
  
  .close-btn:hover {
    color: #ddd;
  }
  
/* Container for the overall change password component */
.container {
  background-color: #2d3748;
  width: 90%; 
  max-width: 400px; 
  margin-top: 24px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Form styling */
.change-password-form {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

/* Label styling */
label {
  margin: 10px 0;
  color: #e2e8f0;
}

/* Input field styling */
.input-field {
  background-color: #1a202c;
  color: #e2e8f0;
  padding: 8px;
  border: 1px solid #4a5568;
  border-radius: 4px;
  width: 100%; 
  margin-bottom: 15px;
  margin-top: 5px;
  max-width: 200px;
  justify-items: center;
}

.input-field::placeholder {
  color: #a0aec0;
}

/* Button container styling */
.button-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

/* Update button styling */
.update-button {
  background-color: #3182ce;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; 
  max-width: 150px; 
  height: 50px; 
}

.update-button:hover {
  background-color: #2b6cb0;
}

.update-button:disabled {
  background-color: #4a5568;
  cursor: not-allowed;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .container {
    width: 95%; /* Increase width for very small screens */
    padding: 15px;
  }

  .update-button {
    width: 100%; /* Full width button on small screens */
    max-width: none; /* Remove max-width constraint */
  }

  input[type="password"] {
    width: 100%; /* Ensure inputs take full width on smaller screens */
  }
}

/* styles/MySubscription.css */

.subscription-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
  }
  
  .subscription-heading {
    color: #ffd700; /* Yellow color for heading */
  }
  
  .subscription-details {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
    color: white; /* White color for text */
  }
  
  .setasapp-button {
    padding: 5px 5px;
    background-color: purple;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;
  }
/* styles/Think5WhysHelp.css */

.spotsnap-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 20px;
      background-color: #164e63; /* Light gray background color for the entire dashboard */
      color: #333; /* Dark text color */
  }

  .spotsnap-group {
    flex: 1;
    margin: 0 10px;
    max-width:100%;
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff; /* Default background color for groups */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .info-group {
    background-color: #06436c; /* Background color for the Learning group */
    color: #ffffff; 
    max-width:100%;
  }

  .image-group {
    background-color: #ffffff; /* Background color for the Learning group */
  }

  .gift-group {
    background-color: rgba(255, 255, 255, 0.1); /* Background color for the Learning group */
    color: #ffffff; 
    margin-top: 8px;
    max-width:100%;
  }
  
  .spotsnap-heading {
    background-color: #e7e254; 
    color: #2c03a5; /* Yellow color for heading */
  }
  
  .spotsnap-list {
    list-style-type: none;
    padding: 0;
  }
  
  .spotsnap-topic {
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: white; /* Set topic heading color to white */
    background-color: #2196f3; /* Set background color for better visibility */
  }
  
  .spotsnap-description {
    background-color: #f2f2f2;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 5px;
    color: black; /* Set description text color to black */
  }
  
  .spotsnap-transparent-div {
    background-color: rgba(255, 255, 255, 0);/* Adjust the alpha value (0.5) as needed */
  }

  .submit-time-container {
    margin-top: 20px; /* Adjust margin as needed */
}

.submit-time-text {
    color: white; /* Text color */
    font-size: 16px; /* Adjust font size as needed */
}

.responsive-image {
  max-width: 100%;
  height: auto;
}


.spotsnap-sidebar {
  flex: 1;
  background-color: #878585;
  padding: 20px;
  width: 20%;
}

.spotsnap-sidebar h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

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

.spotsnap-sidebar ul li {
  margin-bottom: 10px;
}

.spotsnap-sidebar ul li a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
}

.spotsnap-sidebar ul li a:hover {
  color: #007bff; /* Change to your desired hover color */
}

.spotsnap-rightdiv {
  flex: 1;
  padding: 20px;
  width: 80%;
}

@media (max-width: 768px) {
  .responsive-image {
      max-width: 80%;
  }
}

@media (max-width: 576px) {
  .responsive-image {
      max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .spotsnap-sidebar {
      width: 100%; /* Make the sidebar full width */
  }
}
.spotsnap-image-container {
    position: relative;
    overflow: hidden;
    width: 750;
    height: 500;;
    max-width: 600px; 
    margin: 0 auto; 
}

img {
    max-width: 100%;
    height: auto;
}

.scaled-image {
    width: 100%;   
    height: auto; 
    display: block; 
  }

.marker {
    position: absolute;
    width: 20px; /* Adjust marker size as needed */
    height: 20px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.submit-button {
    color: white; /* Text color */
    background-color: rgb(86, 10, 86); /* Background color */
    padding: 10px 20px; /* Adjust padding as needed */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: darkpurple; /* Change color on hover */
}

.submit-button:disabled {
    background-color: gray; /* Change color for disabled state */
    cursor: not-allowed; /* Change cursor for disabled state */
}

/*# sourceMappingURL=main-ef7d455c.2010035abe077b6f2d7c.css.map*/