body {
  scrollbar-gutter: stable;
}

.form-control {
  padding: 1.3rem .75rem;
  border-radius: .5rem;
}

.navbar-inverse {
  background-color: #1b222d;
  border-color: #080808;
}

.starter-template {
  padding: 15px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.starter-template span {
  font-size: 3vw;
  color: #6d6d6d;
  font-weight: bold;
}

.task-count {
  display: flex;
  -moz-column-gap: 8px;
  column-gap: 10px;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.task-count p {
  margin-bottom: 0;
  color: #575757;
}

.task-count .divider {
  flex-grow: 1;
  height: 1px;
  background-color: #999999;
}

.task-count .label {
  font-weight: bold;
}

.task-count .counter {
  font-weight: bold;
}

@media (max-width: 767px) {
  .starter-template span {
    font-size: 7vw;
  }
}

.timer-label {
  display: none;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-tabs {
  font-size: 1.4em;
}

.pip-icon {
  cursor: pointer;
}

.full-width {
  font-size: 20px;
  padding: 20px;
  border-radius: 10px !important;
}

@media (max-width: 498px) {
  .full-width {
    padding: 14px;
    border-radius: 7px !important;
  }
}

.form-check-input {
  margin-top: 0;
}

.flex-navbar {
  display: flex;
  color: white;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.modal-content a {
  font-weight: bold;
}

.flex-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-notice {
  background-color: #ecf0ff;
  padding: 20px;
  border-radius: 10px;
}

.about-icon-container {
  display: inline-flex;
  gap: 10px;
  float: left;
}

.btn {
  border-radius: 8px;
}

.modal-footer {
  justify-content: space-between;
}

.pip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #7e7d7d;
  font-weight: bold;

  &::after {
    content: "Floating Window is Activated";
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  pointer-events: none; /* Makes overlay non-interactive by default */
  z-index: 10;
  display: none;
}

.navbar-fixed-bottom, .navbar-fixed-top {
  z-index: 9;
}

#pipContainer {
  display: none;
}

.time {
  font-weight: bold;
  letter-spacing: 5px;
}

.brand-title,
.brand-title:hover {
  color: white;
  font-weight: bold;
  font-size: 15px;
}

#time,
#time_short,
#time_long {
  font-size: 10vw;
  margin-top: 0;
}

@media (max-width: 767px) {
  #time,
  #time_short,
  #time_long {
    font-size: 18vw;
  }
}

h1 {
  font-size: 80px;
}

.nav>li>a {
  padding: 5px 5px !important;
  margin-right: 0 !important;
  color: black;
}

.nav-tabs>li {
  /* width = (100 / number of tabs). This example assumes 3 tabs. */
  width: 33.33333%;
  text-align: center;
}

.nav-tabs>li.active>a {
  font-weight: bold;
}

.custom-btn {
  color: #fff;
  border-color: #fff;
}

.btn {
  border-radius: 0;
}

.navbar-brand {
  float: none;
  text-align: center;
}

.card {
  box-shadow: 0 50px 40px #00000003, 0 50px 40px #00000005, 0 20px 40px #0000000d, 0 3px 10px #00000014;
}

#taskContainer {
  display: flex;
  flex-direction: column;
}

.task-list {
  min-height: 1px;
}

.card-body {
  width: 100%;
  position: relative;
}

#activeTaskList .card-body {
  padding-left: 2.1rem;
}

.delete-task {
  text-align: right;
}

.task-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15px;
  text-align: left;
  padding-left: 14px;
  border-radius: 0.7rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  will-change: transform;
}

.btn {
  border-radius: 0.5rem;
}

.task-completed {
  text-decoration: line-through;
  color: gray;
  background-color: #efefef;
  opacity: 0.8;
  background-size: 10px 10px;
  background-image: repeating-linear-gradient(45deg, #dedede 0, #dedede 1px, #fbfbfb 0, #ffffff 50%);
}

.task-completed .task-text {
  color: gray;
}

.task-text {
  cursor: pointer;
  flex-grow: 1;
  margin-left: 10px;
  font-weight: bold;
  color: #3b3b3b;
  font-size: 1rem;
}

.done-separator {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin: 18px 0 14px;
  user-select: none;
}

.done-separator .label {
  margin-bottom: 0;
  color: #575757;
  font-weight: bold;
}

.done-separator .divider {
  flex-grow: 1;
  height: 1px;
  background-color: #999999;
}

.task-drag-handle {
  position: absolute;
  left: -0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 8px;
  min-width: 12px;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  z-index: 2;
  opacity: 0.95;
}

.task-drag-handle:hover {
  cursor: move;
}

.task-drag-handle span {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background-color: #b8b8b8;
}

.task-card:active .task-drag-handle {
  cursor: grabbing;
}

.task-dragging {
  opacity: 0.92;
  transform: scale(0.99);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.16);
}

.task-sort-chosen {
  z-index: 3;
}

.task-sort-ghost {
  opacity: 0.28;
  transform: scale(0.985);
}

.active-empty-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  margin: 4px 0 20px;
  border-radius: 12px;
  color: #7b7b7b;
  font-size: 1.05rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(180deg, #fbfbfb 0%, #f4f4f4 100%);
  border: 1px dashed #dddddd;
}

/* Centered no-tasks message */
#noTasksMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: calc(100vh - 294px);
  min-height: calc(100dvh - 294px);
  color: #6d6d6d;
  font-size: 1.2em;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%22-0.5%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23828282%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M4%208.78998V18.56C4%2019.6209%204.42149%2020.6383%205.17163%2021.3884C5.92178%2022.1386%206.93913%2022.56%208%2022.56H16C17.0609%2022.56%2018.0783%2022.1386%2018.8284%2021.3884C19.5786%2020.6383%2020%2019.6209%2020%2018.56V8.78003%22%20stroke%3D%22%23454545%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%2013.56H15%22%20stroke%3D%22%23454545%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M22%206.56C22%205.49913%2021.5786%204.48171%2020.8284%203.73157C20.0783%202.98142%2019.0609%202.56%2018%202.56H6C4.93913%202.56%203.92178%202.98142%203.17163%203.73157C2.42149%204.48171%202%205.49913%202%206.56C2%207.09043%202.21074%207.59917%202.58582%207.97424C2.96089%208.34932%203.46957%208.56%204%208.56H20C20.5304%208.56%2021.0392%208.34932%2021.4142%207.97424C21.7893%207.59917%2022%207.09043%2022%206.56Z%22%20stroke%3D%22%23454545%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center calc(50% - 30px);
  padding: 60px 20px 20px;
  margin: 20px 0;
  border-radius: 8px;
  border: 2px dashed #e0e0e0;
  font-weight: bold;
}

/* Custom styling for checkboxes */
.task-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #28a745;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkbox checked state */
.task-checkbox:checked {
  background-color: #28a745;
  border-color: #28a745;
}

/* Checkbox checkmark */
.task-checkbox:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
}

.card-body {
  padding: 1.25rem 1.6rem;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  /* Shrink checkbox size and text on small screens */
  .task-checkbox {
    width: 1em;
    height: 1em;
    border-width: 1.5px;
  }

  .task-text {
    font-size: 0.9rem;
  }

  #addTask {
    font-size: 1rem;
  }

  .task-edit-input {
    margin-left: 8px;
  }
}

@media (max-width: 576px) {

  /* Further adjustments for very small screens */
  .task-checkbox {
    width: 1em;
    height: 1em;
    border-width: 1px;
  }

  .task-text {
    font-size: 1rem;
    /* Even smaller text size */
  }

  #addTask {
    font-size: 1rem;
    /* Smaller button size */
  }

  .task-edit-input {
    margin-left: 8px;
  }
}

footer {
  text-align: center;
}

.vertical-center {
  min-height: 100%;
  /* Fallback for vh unit */
  min-height: 90vh;
  /* You might also want to use
                          'height' property instead.
                          
                          Note that for percentage values of
                          'height' or 'min-height' properties,
                          the 'height' of the parent element
                          should be specified explicitly.
    
                          In this case the parent of '.vertical-center'
                          is the <body> element */

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Align the bootstrap's container vertically */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  /* In legacy web browsers such as Firefox 9
       we need to specify the width of the flex container */
  width: 100%;

  /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
       hence the bootstrap's container won't be aligned to the center anymore.
    
       Therefore, we should use the following declarations to get it centered again */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* xs < 768 */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 5em;
  }
}

/* sm */
@media screen and (min-width: 768px) {
  h1 {
    font-size: 5em;
  }

  .navbar-header {
    float: none;
  }
}

/* md */
@media screen and (min-width: 992px) {
  h1 {
    font-size: 5em;
  }
}

/* lg */
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 5em;
  }

}

.affiliate-popup {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
  max-width: 285px;
  border: 1px solid #e0e0e0;
  font-weight: bold;
  font-size: 13px;
  background: radial-gradient(rgb(100, 100, 100) 0.5px, transparent 0.5px) 0px 0px / 20px 20px, radial-gradient(rgb(100, 100, 100) 0.5px, rgb(221, 221, 221) 0.5px) 10px 10px rgb(221, 221, 221);
  padding: 15px 15px 15px 18px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(224, 224, 224);
  border-image: initial;
  background-position: 0px 0px, 10px 10px;
}

.affiliate-popup.show {
  display: block;
  animation: slideIn 0.5s ease-out forwards;
}

.dark .affiliate-popup {
  background: #0d1117;
  border-color: #30363d;
}

.dark .affiliate-content a {
  color: #c9d1d9;
}

.dark .affiliate-content a:hover {
  color: #58a6ff;
}

.dark .close-popup {
  color: #8b949e;
}

.dark .close-popup:hover {
  color: #c9d1d9;
}

.generic-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.affiliate-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.affiliate-content a {
  color: #2c3e50;
  text-decoration: none;
  flex-grow: 1;
}

.affiliate-content a:hover {
  color: #3498db;
}

.close-popup {
  background: none;
  border: none;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

.close-popup:hover {
  color: #333;
}

.modal-content {
  border-radius: .7rem;
}

.task-edit-input {
  margin-left: 10px;
}

@media (min-width: 992px) {
  .container, .container-lg, .container-md, .container-sm {
      max-width: 720px;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Dark mode styles */
.dark {
  background-color: #0b1215;
  color: #dedede;
}

.dark .navbar-inverse {
  background-color: #0d1117;
  border-color: #30363d;
}

.dark .form-control {
  background-color: #21262d;
  border-color: #30363d;
  color: #c9d1d9;
}

.dark .form-control:focus {
  background-color: #21262d;
  border-color: #58a6ff;
  color: #c9d1d9;
  box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

.dark .task-count p {
  color: #c9d1d9;
}

.dark .task-count .divider {
  background-color: #30363d;
}

.dark .task-card {
  background-color: #21262d;
  border: 1px solid #30363d;
}

.dark .done-separator {
  color: #8b949e;
}

.dark .done-separator .label {
  color: #c9d1d9;
}

.dark .done-separator .divider {
  background-color: #30363d;
}

.dark .task-completed {
  background-color: #1a1f29;
  background-image: repeating-linear-gradient(45deg, #2d333b 0, #2d333b 1px, #21262d 0, #21262d 50%);
}

.dark .task-text {
  color: #c9d1d9;
}

.dark .task-completed .task-text {
  color: #8b949e;
}

.dark .task-drag-handle span {
  background-color: #6e7681;
}

.dark .active-empty-message {
  color: #9da7b3;
  background: linear-gradient(180deg, #151b23 0%, #11161d 100%);
  border-color: #30363d;
}

.dark #noTasksMessage {
  color: #8b949e;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%22-0.5%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%238b949e%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-cap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M4%208.78998V18.56C4%2019.6209%204.42149%2020.6383%205.17163%2021.3884C5.92178%2022.1386%206.93913%2022.56%208%2022.56H16C17.0609%2022.56%2018.0783%2022.1386%2018.8284%2021.3884C19.5786%2020.6383%2020%2019.6209%2020%2018.56V8.78003%22%20stroke%3D%22%238b949e%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%2013.56H15%22%20stroke%3D%22%238b949e%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M22%206.56C22%205.49913%2021.5786%204.48171%2020.8284%203.73157C20.0783%202.98142%2019.0609%202.56%2018%202.56H6C4.93913%202.56%203.92178%202.98142%203.17163%203.73157C2.42149%204.48171%202%205.49913%202%206.56C2%207.09043%202.21074%207.59917%202.58582%207.97424C2.96089%208.34932%203.46957%208.56%204%208.56H20C20.5304%208.56%2021.0392%208.34932%2021.4142%207.97424C21.7893%207.59917%2022%207.09043%2022%206.56Z%22%20stroke%3D%22%238b949e%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  border-color: #30363d;
}

.dark .task-checkbox {
  background-color: #21262d;
  border-color: #28a745;
}

.dark .task-checkbox:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.dark .modal-content {
  background-color: #21262d;
  border-color: #30363d;
  color: #c9d1d9;
}

.dark .modal-header {
  background-color: #1a1f29;
  border-bottom-color: #30363d;
}

.dark .modal-footer {
  background-color: #1a1f29;
  border-top-color: #30363d;
}

.dark .modal-body a {
  color: #58a6ff;
}

.dark .about-notice {
  background-color: #1a1f29;
  color: #c9d1d9;
}

.dark .donate-icon svg, .dark .about-icon-container path {
  fill: #cccccc;
}