:root {
  --my-primary: #397097;
  --my-secondary: #4f7fa2;
  --my-tertiary: #326183;
  --my-white: #ffffff;
}
html,
body {
  margin: 0;
  background-color: var(--my-primary);
  height: 100%;
  color: var(--my-white);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1em;
  overflow: hidden;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--my-tertiary);
  padding: 0.5rem 1rem;
  font-weight: 500;
}
.navbar-brand,
.navbar-end {
  display: flex;
  align-items: center;
}
.navbar-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 1rem;
}
.navbar-item i.fas {
  margin-right: 0.5rem;
  font-size: 1rem;
}
.navbar-item:hover {
  background-color: var(--my-primary);
}
.navbar-item i {
  color: var(--my-white);
  font-size: 1.5rem;
}

.navbar-item .icon-text span:not(.icon) {
  display: inline; /* Sørger for at teksten vises på større skjermer */
}

/* Skjuler teksten på mindre skjermer */
@media (max-width: 768px) {
  .navbar-item .icon-text span:not(.icon) {
    display: none; /* Skjuler teksten når skjermen er smalere enn 768px */
  }
}

.modal.is-active {
  display: block;
}
.navbar-brand img {
  max-height: 1.875rem;
}
.delete {
  transition: background-color 0.3s;
  border: none;
  border-radius: 5%;
  background-color: transparent;
  cursor: pointer;
  padding: 0.75em 1.563em;
  font-weight: bold;
}
.delete:hover {
  background-color: #ccc;
}
.theme-swatch {
  display: inline-block;
  margin: 0.3125rem;
  border: 0.125em solid var(--my-white);
  border-radius: 50%;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
}
.theme-swatch:hover {
  border-color: var(--my-secondary);
}
.section {
  padding-top: 2.5rem;
}
.buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  gap: 0.625rem;
}
.timer-display {
  display: flex;
  justify-content: center;
}
.timer-display .title {
  margin: 2rem auto 2.5rem;
  font-size: 10vw;
  font-weight: 800;
}
.progress-bar-container {
  margin: 1.25rem auto 2.5rem;
  border-radius: 0.313em;
  background-color: var(--my-tertiary);
  width: 80%;
  height: 0.625rem;
}
.progress-bar {
  transition: width 0.3s ease-in-out;
  background-color: var(--my-secondary);
  width: 0%;
  height: 100%;
}
div > .control {
  display: flex;
  justify-content: center;
  margin-top: 1.25em;
  gap: 0.938em;
}
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 1.25em;
  margin-bottom: 6.25em;
  gap: 0.938em;
}
.button {
  transition: background-color 0.3s;
  border: none;
  border-radius: 5%;
  background-color: var(--my-tertiary);
  cursor: pointer;
  padding: 0.75em 1.563em;
  color: var(--my-white);
  font-weight: bold;
}
.button:hover {
  background-color: var(--my-secondary);
}

#timer-settings .timer-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-top: 0.9375rem;
  color: #aaaaaa;
}
#longBreakInterval {
  width: 5rem;
}
#timer-settings .timer-setting {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  margin: 0 0.625em;
}
#timer-settings .timer-setting .input {
  margin-top: 0.313em;
  width: 100%;
}
.input {
  transition: border-color 0.4s, box-shadow 0.4s;
  outline: none;
  border: 0.063em solid #efefef;
  border-radius: 0.313em;
  background-color: #efefef;
  padding: 0.5rem 0.125rem;
  width: calc(100% - 1rem);
  text-align: left;
  text-indent: 0.3125rem;
}
.input:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0.188em #2196f3;
}
.select select:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0.188em #2196f3;
}
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  border-radius: 0.5em;
  box-shadow: 0 0.25em 0.625em rgba(0, 0, 0, 0.5);
  background-color: white;
  width: 90%;
  max-width: 37.5rem;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  color: #2a2a2a;
  font-weight: bold;
}

@media (max-width: 768px) {
  .modal {
    width: 80%; /* Øker bredden for å utnytte mer av skjermens plass */
    max-height: 95vh; /* Øker maksimal høyde for å gi mer plass til innhold */
  }
}

.modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(10, 10, 10, 0.86);
  width: 100vw;
  height: 100vh;
}

.modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 1em 1em;
}

.modal-card-title {
  margin: 0;
  color: #2a2a2a;
  font-weight: bold;
}

.settings-columns {
  display: flex;
  flex-direction: row; /* Holder kategoriene på venstre side for store skjermer */
  width: 100%; /* Sørger for at settings-columns tar full bredde */
}
.settings-menu {
  padding-right: 0.313em;
  width: 100%; /* Setter full bredde for settings-menu */
  min-width: 12.5em;
  max-width: 15.625em;
}
.settings-content {
  padding: 0.625em;
  width: 75%; /* Standardbredde for større skjermer */
  height: auto; /* Tilpasser høyden basert på innhold */
  overflow-y: auto; /* Tillater vertikal scrolling innenfor innholdsdelen */
}
.settings-section {
  display: none;
}
.settings-section.is-active {
  display: block;
}
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25em;
  padding: 0.313em 0;
}
.settings-item .label,
.settings-item .select {
  flex-basis: 50%; /* Justerer flex-basis for label og select */
}

@media (max-width: 768px) {
  .settings-columns {
    flex-direction: column; /* Stabler menyen over innholdet */
    width: 100%;
  }

  .settings-menu {
    display: flex; /* Bruker flexbox for å ordne elementene horisontalt */
    flex-direction: row; /* Setter retningen til en horisontal rad */
    justify-content: space-around; /* Fordeler elementene jevnt i tilgjengelig plass */
    flex-wrap: wrap; /* Lar elementene bryte til neste linje om nødvendig */
    width: 100%; /* Setter bredde til 100% for å fylle tilgjengelig plass */
    padding-bottom: 0.5em; /* Legger til litt plass under menyen for separasjon */
    max-width: 100%;
  }

  .settings-menu ul {
    display: flex; /* Sørger for at listen også benytter seg av flexbox */
    width: 100%; /* Full bredde for å holde menyelementene i en linje */
    padding: 0; /* Fjerner standard liste-padding */
    margin: 0; /* Fjerner standard liste-margin */
    list-style-type: none; /* Fjerner punkttegn */
  }

  .menu-list {
    display: flex;
    flex-direction: row; /* Ordner elementene horisontalt */
    flex-wrap: wrap; /* Tillater elementene å bryte til en ny linje om nødvendig */
    justify-content: center; /* Sentrerer elementene for bedre estetikk */
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%; /* Sørger for at listen tar full bredde */
    font-size: 0.8em;
  }

  .settings-menu ul li {
    flex: 1; /* Lar hvert menyelement vokse for å fylle tilgjengelig plass */
    text-align: center; /* Sentrerer teksten inne i hvert menyelement */
  }

  .settings-content {
    width: 95%; /* Setter bredde til 100% for å fylle tilgjengelig plass */
    font-size: 0.9em;
  }
}

.select {
  display: inline-block;
  position: relative;
  border: 0.063em solid #ccc;
  border-radius: 0.25em;
  overflow: hidden;
}
.select select {
  box-sizing: border-box;
  margin: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0.5em 2em 0.5em 0.5em;
  width: 100%;
  font-size: 1em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.select:after {
  display: flex;
  position: absolute;
  top: 0;
  right: 0.5em;
  bottom: 0;
  align-items: center;
  width: 1.25em;
  color: #888;
  font-size: 1em;
  content: '\25BC';
  pointer-events: none;
}
.menu-list {
  padding: 0;
  list-style-type: none;
}
.menu-list li a {
  display: block;
  border-left: 0.188em solid transparent;
  padding: 0.625em 1.25em;
  text-decoration: none;
  color: #333;
}
.menu-list li a.is-active,
.menu-list li a:hover {
  border-left-color: var(--my-primary);
  background-color: #f0f0f0;
}
.modal-card-foot {
  border-top: 0.063em solid #ddd;
  padding: 0.625em 1.25em;
  text-align: right;
}
.settings-section#general-settings .field {
  margin-bottom: 1.25em;
}
.settings-section#general-settings .select {
  width: 100%;
}
.settings-section#general-settings .label {
  margin-bottom: 0.625em;
}
.switch {
  display: inline-block;
  position: relative;
  width: 3.75em;
  height: 2.125em;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: 0.4s;
  border-radius: 2.125em;
  background-color: #ccc;
  cursor: pointer;
}
.slider:before {
  position: absolute;
  bottom: 0.25em;
  left: 0.25em;
  transition: 0.4s;
  border-radius: 50%;
  background-color: var(--my-white);
  width: 1.625em;
  height: 1.625em;
  content: '';
}
input:checked + .slider {
  background-color: var(--my-primary);
}
input:focus + .slider {
  box-shadow: 0 0 0.063em var(--my-primary);
}
input:checked + .slider:before {
  transform: translateX(1.625em);
}
.volumeBar {
  transition: opacity 0.2s;
  opacity: 0.7;
  outline: none;
  border-radius: 0.313em;
  background: #ccc;
  width: 60%;
  height: 0.313em;
}
.volumeBar::-webkit-slider-thumb {
  transition: background 0.2s;
  border-radius: 50%;
  background: var(--my-primary);
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-appearance: none;
  appearance: none;
}
.volumeBar:hover {
  opacity: 1;
}
.volumeBar::-webkit-slider-thumb:hover {
  background: var(--my-primary);
}
.volumeBar::-moz-range-thumb {
  border-radius: 50%;
  background: var(--my-primary);
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
}
.volumeBar::-ms-thumb {
  border-radius: 50%;
  background: var(--my-primary);
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
}
.volume-value {
  margin-right: 0.625em;
  color: #aaaaaa;
  font-weight: bold;
}
#aboutPomodoroModal .modal-card {
  transition: max-width 0.3s ease-in-out;
  border-radius: 8px;
  width: auto; /* Gir en standard bredde for større skjermer */
  max-width: 100%;
  font-weight: 500;
}

#aboutPomodoroModal h2 {
  position: relative;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #333;
  font-size: 24px; /* Kan justeres for mindre skjermer */
  font-weight: bold;
}

#aboutPomodoroModal h2::after {
  display: block;
  position: absolute;
  bottom: -8px;
  left: 0;
  background: var(--my-primary);
  width: 50px;
  height: 3px;
  content: '';
}

#aboutPomodoroModal li,
#aboutPomodoroModal p {
  /* La til p for å inkludere avsnitt */
  margin-bottom: 10px;
  line-height: 1.6;
  color: #555;
  font-size: 16px; /* Kan justeres for mindre skjermer */
}

strong {
  color: var(--my-primary);
}

#aboutPomodoroModal li {
  list-style-type: disc;
  list-style-position: inside;
}

#aboutPomodoroModal ul {
  margin-left: 20px;
  padding-left: 0;
}

#aboutPomodoroModal .modal-card-foot {
  border-bottom: 1px solid #eee;
  background: #fafafa;
  padding: 16px 24px;
}

#aboutPomodoroModal .modal-card-body {
  background: #fff;
  max-height: 60vh;
  overflow-y: auto; /* Endret til auto for å tillate scrolling når nødvendig */
  padding: 20px;
  padding-top: 0;
}

@media (max-width: 768px) {
  #aboutPomodoroModal .modal-card {
    max-width: 100%; /* Bruker mesteparten av skjermen for å vise modalen */
    min-width: 250px; /* Tilpasset til mindre skjermbredder */
  }

  #aboutPomodoroModal .modal-card-head {
    padding: 10px;
    padding-bottom: 0px;
  }

  #aboutPomodoroModal h2 {
    font-size: 1em; /* Justert for bedre lesbarhet */
    margin-top: 15px; /* Redusert toppmarg for å spare plass */
    margin-bottom: 10px; /* Redusert bunnmarg for å spare plass */
  }

  #aboutPomodoroModal li,
  #aboutPomodoroModal p {
    font-size: 0.7em; /* Justert for konsistens og lesbarhet */
  }

  #aboutPomodoroModal .modal-card-body {
    padding: 15px; /* Redusert padding for å utnytte plassen bedre */
    padding-top: 0px;
    max-height: 50vh; /* Justert maksimal høyde for å tillate mer innhold */
  }

  #aboutPomodoroModal .modal-card-foot {
    padding: 5px 18px; /* Redusert padding for å spare plass */
  }

  #aboutPomodoroButton {
    font-size: 15px;
  }
}

.pushable {
  position: relative;
  transition: filter 250ms;
  outline-offset: 0.25em;
  outline-color: var(--my-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0em;
  width: auto;
  height: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0.125em);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  border-radius: 0.5em;
  background: var(--my-white);
  width: 100%;
  height: 100%;
  filter: blur(0.25em);
  will-change: transform;
}
.edge {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.5em;
  background: linear-gradient(to right, var(--my-secondary) 0%, var(--my-primary) 8%, var(--my-secondary) 92%, var(--my-tertiary) 100%);
  width: 100%;
  height: 100%;
}
.front {
  display: block;
  position: relative;
  transform: translateY(-0.25em);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  border-radius: 0.5em;
  background: var(--my-white);
  padding: 1.875em 3.125em;
  text-transform: uppercase;
  letter-spacing: 0.094em;
  color: var(--my-primary);
  font-size: 1.5rem;
  font-weight: 800;
}
.pushable:hover {
  filter: brightness(110%);
}
.pushable:hover .front {
  transform: translateY(-0.375em);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .front {
  transform: translateY(-0.125em);
  transition: transform 34ms;
}
.pushable:hover .shadow {
  transform: translateY(0.25em);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.pushable:active .shadow {
  transform: translateY(0.063em);
  transition: transform 34ms;
}
.pushable:focus:not(:focus-visible) {
  outline: none;
}
@media (max-width: 600px) {
  .pushable {
    width: 120px;
    height: 40px;
  }
  .front {
    padding: 10px 16px;
    font-size: 0.6rem;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .pushable {
    width: 180px;
    height: 50px;
  }
  .front {
    padding: 12px 24px;
    font-size: 1.2rem;
  }
}
.app-container {
  margin: 0 auto;
  box-shadow: 0 0.125em 0.313em rgba(0, 0, 0, 0.2);
  background-color: var(--my-secondary);
  padding: 0;
  position: fixed; /* Holder containeren fast nederst */
  bottom: 0; /* Plasserer containeren ved bunnen av skjermen */
  left: 0; /* Sørger for at containeren starter fra venstre kant */
  right: 0; /* Sørger for at containeren strekker seg til høyre kant */
  max-width: 37.5em; /* Maksimal bredde for containeren */
  max-height: 45vh; /* Maksimal høyde satt til 90% av viewport-høyden */
  overflow-y: auto; /* Aktiverer scrollbar ved behov */
  overflow-x: hidden;
  width: 90%; /* Standard bredde */
}

.dropdown-content {
  right: 10px; /* Justerer posisjoneringen litt for estetikk */
}
.todo-fixed-top-wrapper {
  width: 95%;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--my-secondary);
  padding: 1em;
  padding-bottom: 1px;
}

@media (max-width: 768px) {
  .app-container {
    max-height: 45%; /* Justert maksimal høyde */
    width: 90%; /* Justert bredde for å utnytte tilgjengelig bredde */
  }

  .todo-fixed-top-wrapper {
    padding: 0.5em;
    font-size: 80%;
    height: 100%;
  }
  .dropdown-content {
    right: 10px; /* Justerer posisjoneringen litt for estetikk */
  }

  .section {
    padding-top: 0.5em;
  }

  .total-cycles {
    margin-top: 0px;
  }
  .timer-display .title {
    margin: 10px;
  }

  #progressBarContainer {
    margin-bottom: 20px;
    margin-top: 10px;
    height: 5px;
  }
  #modeButtons {
    font-size: 0.8em;
  }
}

@media (max-height: 600px) {
  .app-container {
    max-height: 50%; /* Justert maksimal høyde */
  }

  .todo-fixed-top-wrapper {
    font-size: 70%; /* Justert skriftstørrelse for mindre skjermhøyde */
  }

  .dropdown-content {
    right: 10px; /* Beholdt for estetikk */
  }

  /* Justeringer for lavere skjermhøyder */
  .section,
  .total-cycles,
  .timer-display .title,
  #progressBarContainer {
    padding-top: 0.25em; /* Redusert padding for 'section' */
    margin: 2px auto;
    height: auto; /* Gjort 'progressBarContainer' høyde auto for fleksibilitet */
  }

  #modeButtons {
    font-size: 0.5em;
  }

  .navbar {
    padding: 0px;
    font-size: 0.5em;
  }

  .navbar-item {
    font-size: 1em;
  }

  .total-cycles,
  .total-cycles p {
    margin: 0px;
    padding: 0px;
  }
}

/* Style scrollbaren for .app-container */
.app-container::-webkit-scrollbar {
  width: 12px; /* Bredde på scrollbaren */
}

.app-container::-webkit-scrollbar-track {
  background: var(--my-secondary); /* Farge på sporet scrollbaren beveger seg langs */
  border-radius: 6px; /* Runde hjørner på sporet */
}

.app-container::-webkit-scrollbar-thumb {
  background-color: var(--my-primary); /* Farge på scrollbaren */
  border-radius: 6px; /* Runde hjørner på scrollbaren */
  border: 3px solid var(--my-secondary); /* Border for å skape et gap mellom sporet og scrollbaren */
}

/* Støtte for Firefox */
.app-container {
  scrollbar-width: thin; /* "auto" eller "thin" */
  scrollbar-color: var(--my-primary) var(--my-secondary); /* Første farge er for scrollbaren, andre farge er for sporet */
}

.app-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25em;
}
.app-header {
  margin: 0;
  color: var(--my-white);
}
.list-selector-container {
  display: flex;
  align-items: center;
}
#listSelector {
  border: 0.063em solid var(--my-tertiary);
  border-radius: 0.313em;
  padding: 0.313em 0.625em;
  font-size: 1rem;
}
.todo-input-container {
  display: flex;
  margin-bottom: 1.25em;
  gap: 0.625em;
}
#newTaskInput {
  flex-grow: 1;
  border: 0.063em solid var(--my-tertiary);
  border-radius: 0.313em;
  padding: 0.625em;
  font-size: 1rem;
}
#addTaskButton {
  transition: background 0.3s ease;
  border: none;
  border-radius: 0.313em;
  background-color: var(--my-tertiary);
  cursor: pointer;
  padding: 0.625em 1.25em;
  color: white;
  font-size: 1rem;
}
#addTaskButton:hover {
  background-color: var(--my-primary);
}
#todoList {
  padding: 0;
  list-style: none;
  color: var(--my-white);
}
#newTaskInput,
#listSelector {
  border: 0.125em solid var(--my-tertiary);
  box-shadow: 0 0.125em 0.313em rgba(0, 0, 0, 0.1);
}
#newTaskInput:focus,
#listSelector:focus {
  outline: none;
  border-color: var(--my-primary);
}
.hidden {
  display: none;
}
.completed-circle {
  background-color: var(--my-tertiary);
}
.completed .task-text {
  text-decoration: line-through;
}
.check-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.625em;
  border-radius: 50%;
  background-color: var(--my-tertiary);
  padding: 0.125em;
  width: 1.5em;
  height: 1.5em;
}
.task-text {
  flex-grow: 1;
}
#todoList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.938em;
  border-bottom: 0.063em solid var(--my-tertiary);
  padding: 0.625em;
  font-weight: 600;
}
.todo-item:last-child {
  border-bottom: none;
}
.action-buttons {
  display: flex;
  gap: 0.313em;
}
li button {
  margin-left: 0.625em;
  border: none;
  border-radius: 0.313em;
  cursor: pointer;
  padding: 0.313em 0.625em;
}
li button:hover {
  opacity: 0.8;
}
.edit-button {
  background-color: var(--my-tertiary);
  color: white;
}
.delete-button {
  background-color: var(--my-tertiary);
  color: white;
}
.edit-input {
  border: 0.063em solid var(--my-tertiary);
  border-radius: 0.313em;
  box-shadow: 0 0.125em 0.313em rgba(0, 0, 0, 0.1);
  padding: 0.313em;
  width: 70%;
}
#deleteTasksButton {
  cursor: pointer;
  font-size: 1.125em;
}
.dropbtn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 30%;
  background-color: transparent;
  cursor: pointer;
  padding: 0.625em;
  color: var(--my-white);
}
.dropbtn:hover {
  background-color: var(--my-primary);
}
.dropbtn::before {
  color: var(--my-white);
  font-size: 1.25em;
  content: '\2022 \2022 \2022';
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  box-shadow: 0em 0.5em 1em 0em rgba(0, 0, 0, 0.2);
  background-color: #f9f9f9;
  min-width: 10em;
}
.dropdown-content a {
  display: block;
  float: none;
  padding: 0.75em 1em;
  text-decoration: none;
  color: black;
}
.dropdown-content.show {
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.notification-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transition: opacity 0.5s ease;
  opacity: 0;
  border-radius: 5px;
  background-color: green;
  padding: 10px;
  color: white;
}
#sendFeedback {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  text-decoration: none;
}
.undo-popup {
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 50%;
  align-items: center;
  transform: translateX(-50%);
  z-index: 1000;
  border-radius: 5px;
  background-color: #323232;
  padding: 10px;
  color: #fff;
}
.undo-popup.hidden {
  display: none;
}
.undo-popup button {
  margin-left: 10px;
  border: none;
  border-radius: 3px;
  background-color: #f44336;
  cursor: pointer;
  padding: 5px 10px;
  color: white;
}
.modal-content {
  background-color: #fff;
  margin: 0px auto;
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
}

.close-button {
  color: white;
  float: right;
  font-size: 24px;
}

.modal-actions button {
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#confirmDeleteAll {
  background-color: #a72828;
  color: white;
}

#cancelDeleteAll {
  background-color: #6c757d;
  color: white;
}

.modal-actions button:hover {
  opacity: 0.9;
}

#pomodoro,
#shortBreak,
#longBreak {
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1em;
  font-weight: 500;
}

#pomodoro:hover,
#shortBreak:hover,
#longBreak:hover {
  background-color: var(--my-secondary);
  border-color: #999;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#pomodoro:active,
#shortBreak:active,
#longBreak:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

.is-selected {
  background-color: var(--my-secondary);
  color: var(--my-white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.total-cycles {
  text-align: center;
  margin-top: 10px;
  color: var(--my-white);
  font-size: 0.8rem;
}

.drag-handle-button {
  border: none;
  background: none;
  cursor: grab;
}

.drag-handle-button:active {
  cursor: grabbing;
}

.todo-item {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.todo-item.dragging {
  opacity: 0.4;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.todo-item:not(.dragging) {
  transition: transform 0.2s ease-in-out, background-color 0.3s ease;
}

.insertion-marker {
  height: 4px;
  background-color: var(--my-secondary);
  margin: 0 auto;
  width: 50%;
  border-radius: 2px;
}