body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Change from center to flex-start */
    min-height: 100vh;
    background-color: #f8f9fa;
    margin: 0; /* Ensure no margin around the body */
  }
  .container {
    margin-top: 20px; /* Added margin-top to the container */
  }
  .timer-container, .fasting-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
  }
  .timer-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #343a40;
  }
  #countdown {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 20px;
  }
  #fasting-countdown {
    font-size: 2em;
    color: #28a745;
    margin-bottom: 20px;
  }
  .todo-list, .quote-list {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  .todo-list h3, .quote-list h3 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #343a40;
  }
  .todo-list ul {
    list-style-type: none;
    padding: 0;
  }
  .todo-list ul li {
    font-size: 1.5em;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .todo-list ul li.finished {
    text-decoration: line-through;
    color: #6c757d;
  }

  .finished {
    text-decoration: line-through;
    color: #6c757d;
  }
  .todo-list input[type="text"] {
    width: calc(100% - 90px);
    padding: 10px;
    font-size: 1.2em;
    margin-right: 10px;
  }
  .image-container img {
    width: 100%;
    max-width: 600px;
    height: 350px; /* Set maximum height to 250px */
    object-fit: cover; /* Ensure the image covers the area */
    display: none;
    margin-bottom: 20px;
  }
  .image-container img.active {
    display: block;
    animation: fadeInOut 5s infinite;
  }
  @keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }
  .quote-container {
    font-size: 1.5em;
    color: #495057;
    text-align: center;
  }
  .quote {
    display: none;
  }
  .quote.active {
    display: block;
    animation: fadeInOut 10s infinite;
  }

  .clock {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
  }

  .clock-title {
    font-size: 1.5em;
    color: #343a40;
  }

  .clock-time {
    font-size: 2em;
    color: #007bff;
    margin-top: 10px;
  }

  .custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg, #4caf50 0%, #2196f3 100%);
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
    border-radius: 10px;
  }

  .custom-slider:hover {
    opacity: 1;
  }

  .custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 2px solid #2196f3;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out;
  }

  .custom-slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 2px solid #2196f3;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-in-out;
  }

  .custom-slider::-webkit-slider-thumb:hover {
    background-color: #4caf50;
  }

  .custom-slider::-moz-range-thumb:hover {
    background-color: #4caf50;
  }

  .custom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
  }

  .custom-slider::-moz-range-track {
    width: 100%;
    height: 15px;
    cursor: pointer;
  }

  /* Style untuk nilai yang ditampilkan */
  .saving-target p,
  .income-target p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
  }

  /* Style untuk judul slider */
  .saving-target h3,
  .income-target h3 {
    color: #2196f3;
    margin-bottom: 20px;
  }

   /* Custom Styles */
   .tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}
.tabcontent.active {
    display: block;
}