:root {
  --close-noti-popup-hover-bg-color: rgb(233, 233, 233);
  --bd-color: rgb(221, 221, 221);
  --text-color: black;
  --input-bg: rgb(232, 232, 232);
  --sidebar-bg: rgba(255, 255, 255, 0.7);
  --btn-bg-color: rgb(212, 212, 212);
  --btn-hover-bg-color: rgb(180, 180, 180);
  --work-areas-bg-color: rgb(232, 232, 232);
  --input-bd-color: rgb(255, 255, 255);
  --task-bg-color: rgb(232, 232, 232);
  --task-hover-bg-color: rgb(255, 255, 255);
  --theme-btn-bg-color: rgb(23, 23, 28);
  --theme-btn-hover-bg-color: rgb(61, 61, 75);
  --task-creation-div-bg-color: rgb(243, 243, 243);
  --ask-for-noti-popup-bg-color: rgba(127, 127, 127, 0.2);
  --task-attribute-separator-color: black;
  --task-options-btn-bg-color: var(--task-bg-color);
  --task-options-btn-hover-bg-color: var(--task-hover-bg-color);
  --timer-progress-ring-color: rgb(95, 125, 153);
  --fc-buttons-bg-color: rgba(255, 255, 255, 0.3);
  --fc-buttons-icon-color: black;
  --fc-daygrid-day-bg-color: rgb(217, 217, 217);
  --fc-daygrid-day-hover-bg-color: oklch(78.577% 0.00009 271.152);
  --fc-border-color: oklch(51.795% 0.09629 20.892);
}

[data-mode="dark"] {
  --close-noti-popup-hover-bg-color: rgb(0, 4, 24);
  --bd-color: rgb(54, 54, 54);
  --text-color: white;
  --input-bg: rgb(23, 23, 28);
  --sidebar-bg: rgba(23, 23, 28, 0.9);
  --btn-bg-color: rgb(37, 37, 37);
  --btn-hover-bg-color: rgb(76, 76, 76);
  --work-areas-bg-color: rgb(23, 23, 28);
  --input-bd-color: rgb(54, 54, 54);
  --task-bg-color: rgb(23, 23, 28);
  --task-hover-bg-color: rgb(61, 61, 75);
  --theme-btn-bg-color: rgb(232, 232, 232);
  --theme-btn-hover-bg-color: rgb(181, 181, 181);
  --task-creation-div-bg-color: rgb(243, 243, 243);
  --ask-for-noti-popup-bg-color: rgba(31, 31, 31, 0.2);
  --task-attribute-separator-color: rgb(255, 255, 255);
  --task-options-btn-bg-color: var(--task-bg-color);
  --task-options-btn-hover-bg-color: var(--task-hover-bg-color);
  --timer-progress-ring-color: rgb(95, 125, 153);
  --fc-buttons-bg-color: rgba(255, 255, 255, 0.3);
  --fc-buttons-icon-color: white;
  --fc-daygrid-day-bg-color: rgb(26, 26, 28);
  --fc-daygrid-day-hover-bg-color: rgb(46, 47, 52);
  --fc-border-color: rgb(0, 4, 24);
}

html {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

body {
  font-family: "Inter";
  display: flex;
  flex-direction: row;
  width: 100vw;
  min-height: 100vh;
  color: var(--text-color);
  align-items: flex-start;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  box-sizing: border-box;
}

h1 {
  font-weight: 400;
}

button {
  font-family: "Inter";
  transition: all 0.1s;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
}

button:hover {
  cursor: pointer;
  transform: scale(1.07);
}

.askForNotifications {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: fixed;
  flex-wrap: nowrap !important;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  padding: 20px 20px;
  background: var(--ask-for-noti-popup-bg-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-color);
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  gap: 6px;
}

.enableNotiMessage {
  text-overflow: ellipsis;
  flex: 1;
}

.enableNotificationsBtn {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  margin: 5px;
  width: 160px;
  height: 36px;
  padding: 8px 15px;
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-color);
}

.enableNotificationsBtn:hover {
  background: rgba(165, 165, 165, 0.2);
  cursor: pointer;
}

.closeNotiPopup {
  border-radius: 20px;
  border: none;
  text-align: center;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-color);
}

.closeNotiPopup:hover {
  transform: scale(1.2);
  background-color: var(--close-noti-popup-hover-bg-color);
}

.notiReminderDiv {
  position: fixed;
  bottom: 0px;
  left: 0px;
  border-radius: 10px;
  margin-bottom: 15px;
  margin-left: 25px;
  transform: translateY(100%);
  z-index: 9999;
}

.notiReminderDiv.show {
  animation: slideFromBottom 0.2s ease-out forwards;
}

.notiReminderText {
  position: sticky;
  padding: 10px 15px;
  background: var(--ask-for-noti-popup-bg-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-color);
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sidebar {
  padding: 15px;
  border: none;
  height: 100vh;
  position: fixed;
  z-index: 9800;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  width: 260px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: white;
  box-sizing: border-box;
  top: 0px;
  left: 0px;
  margin: 0px !important;
  transform: translateX(-100%);
}

.sidebarHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex-direction: column !important;
}

.sidebarHeaderRow1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  position: relative;
  flex-direction: row !important;
}

.sidebarHeaderRow2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex-direction: row !important;
}

@keyframes slideIn {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-110%);
  }
}

.sidebar.show {
  display: flex;
  animation: slideIn 0.2s ease-out forwards;
}

.sidebar.closing {
  animation: slideOut 0.2s ease-in forwards;
}

.sidebarBtns {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.agentIcon,
.decrastinatorIcon {
  width: 30px;
  height: 30px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .agentIcon,
[data-mode="dark"] .decrastinatorIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.dashboardBtn,
.calendarBtn,
.settingsBtn {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  position: relative;
  height: 39px;
  font-size: 1rem;
  color: var(--text-color);
}

.dashboardBtn:hover,
.calendarBtn:hover,
.settingsBtn:hover {
  background-color: var(--btn-bg-color);
  cursor: pointer;
}

.dashboardBtn.active,
.calendarBtn.active,
.settingsBtn.active {
  background-color: var(--btn-bg-color);
}

.dashboardIcon,
.calendarIcon,
.settingsIcon {
  width: 18px;
  height: 18px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .dashboardIcon,
[data-mode="dark"] .calendarIcon,
[data-mode="dark"] .settingsIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.hamburgerBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  height: 39px;
  width: 39px;
  font-size: 1rem;
  z-index: 9999;
}

.hamburgerBtn:hover {
  background-color: var(--btn-bg-color);
  cursor: pointer;
}

.hamburgerIcon {
  width: 20px;
  height: 20px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .hamburgerIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

/* .dashboardHeader,
.miniAnalytics,
.workAreaSplit,
.toDoList,
.focusTimer,
.notes {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
} */

:root.dashboardActive .dashboardHeader,
:root.dashboardActive .workAreaSplit,
:root.dashboardActive .dashboardContent {
  display: flex;
}

.dashboardContent {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s;
  transform: translateX(0);
}

:root.sidebarHidden .dashboardContent {
  transform: translateX(0);
  align-items: center;
  justify-content: center;
  margin-left: auto !important;
}

:root:not(.sidebarHidden) .dashboardContent {
  transform: translateX(140px);
  align-items: flex-end;
}

.header {
  display: flex;
  gap: 15px;
  flex-direction: column;
  border-radius: 20px;
}

.dashboardHeader {
  display: flex;
  align-items: center;
  width: 1160px;
  position: relative;
  padding: 20px;
  height: fit-content;
  border-radius: 20px;
  margin-top: 15px;
  margin-bottom: 0px;
  order: 0;
  background: var(--header-bg-color);
}

:root.calendarView .dashboardHeader,
:root.calendarView .expandMiniAnalyticsBtn,
:root.calendarView .miniAnalytics,
:root.calendarView .whatToFocusOn,
:root.calendarView .workAreaSplit,
:root.calendarView .toDoList,
:root.calendarView .focusTimer,
:root.calendarView .notes {
  display: none;
}

.actualCommands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.searchDiv {
  position: relative;
  width: 280px;
  flex: 1;
  min-width: 150px;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}

.searchDiv.show {
  display: flex;
}

.searchBarWrapper {
  position: relative;
  width: 100%;
  display: inline-block;
  max-width: 400px;
}

.searchBar {
  width: 90%;
  height: 30px;
  border: 2px solid var(--input-bd-color);
  background-color: var(--input-bg);
  color: var(--text-color);
  padding-left: 32px;
  z-index: 9998;
  position: relative;
  border-radius: 8px;
  font-size: 13px;
  left: 20%;
  box-sizing: border-box;
}

.searchBar::placeholder {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.searchBar.fade-out::placeholder {
  opacity: 0;
}

.searchResultsMenu {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 90%;
  z-index: 999;
}

.searchBarIcon {
  position: absolute;
  left: 24%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  width: 15px;
}

[data-mode="dark"] .searchBarIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.searchResultsMenu {
  background-color: var(--work-areas-bg-color);
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  list-style-type: none;
  opacity: 0;
  visibility: hidden;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 90%;
  z-index: 999;
}

.searchResultsMenu.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

.searchResult {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
}

.searchResult:hover {
  background-color: var(--fc-daygrid-day-bg-color);
  cursor: pointer;
}

.matchHighlight {
  background-color: rgb(210, 227, 246);
  color: var(--text-color);
}

[data-mode="dark"] .matchHighlight {
  background-color: rgb(81, 85, 121);
  color: var(--text-color);
}

.searchResultIcon {
  width: 30px;
  height: 30px;
}

.searchResultIcon--task {
  filter: invert(31%) sepia(94%) saturate(4529%) hue-rotate(204deg) brightness(102%) contrast(107%);
  opacity: 0.7;
  transition: 0.2s ease;
}

.searchResultIcon--note {
  filter: invert(88%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(86%) contrast(101%);
  opacity: 0.7;
  transition: 0.2s ease;
}

.searchResultText {
  font-size: 1rem;
  color: var(--text-color);
}

.noSearchResults {
  display: none;
}

.daySummary {
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.currentDate {
  font-size: 1.15rem;
  position: relative;
  width: 300px;
  font-weight: bold;
  color: var(--text-color);
}

.greeting {
  font-size: 1.8rem;
  position: relative;
  width: 100%;
  color: var(--text-color);
  margin: 0px;
}

.agentBtnDiv {
  position: relative;
}

.agentBtn {
  display: flex;
  text-align: center;
  padding: 10px;
  background-color: var(--btn-bg-color);
  border: 3px solid var(--bd-color);
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.agentBtn:hover {
  background-color: rgb(179, 186, 231);
  cursor: pointer;
}

.agentIcon {
  width: 30px;
  filter: brightness(0);
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.agentBtn:hover .agentIcon {
  filter: invert(21%) sepia(50%) saturate(3015%) hue-rotate(222deg) brightness(91%) contrast(93%); 
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .agentIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.aiOptionsDiv {
  display: none;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0);
  background-color: var(--work-areas-bg-color);
  width: fit-content;
  border-radius: 12px;
  position: absolute;
  z-index: 9999;
}

.aiOptionsList {
  list-style-type: none;
  margin: 15px;
  padding: 0px;
}

.aiOptionsList li {
  padding: 10px 15px;
  border-radius: 12px;
}

.aiOptionsList li:hover {
  background-color: var(--task-hover-bg-color);
  cursor: pointer;
}

.aiOptionsDiv.show {
  display: flex;
}

.overlay {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

.aiDiv {
  position: fixed;
  z-index: 1000000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
  padding: 2rem;
  border-radius: 15px;
  width: 450px;
  max-height: 600px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow-y: auto;
}

.aiDiv.show {
  display: flex;
}

.aiName {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 20px;
  color: var(--text-color);
  font-size: 1.2rem;
}

.aiPrioritySuggestionBtn {
  margin: 20px;
  padding: 10px 20px;
  background-color: var(--btn-bg-color);
  color: #00558a;
  font-weight: 600;
  border: none;
  border-radius: 20px;
  width: fit-content;
  align-self: flex-start;
}

.aiPrioritySuggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 20px 20px;
}

.aiResultEntry {
  background-color: var(--task-hover-bg-color);
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aiResultEntry strong {
  font-size: 1rem;
  color: var(--text-color);
}

.aiResultEntry p {
  font-size: 0.85rem;
  color: gray;
  margin: 0px;
}

.decrastinatorBtn {
  display: flex;
  text-align: center;
  padding: 10px;
  background-color: var(--btn-bg-color);
  border: 3px solid var(--bd-color);
  border-radius: 12px;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.decrastinatorBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.decrastinatorIcon {
  width: 24px;
  filter: brightness(0);
}

[data-mode="dark"] .decrastinatorIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.decrastinatorDiv {
  position: fixed;
  z-index: 1000000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 255, 255);
  padding: 2rem;
  border-radius: 15px;
  width: 450px;
  height: 250px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:root.decrastinatorView .decrastinatorDiv {
  display: flex;
}

.decrastinatorName {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 20px;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
}

.closeDecrastinatorBtn {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--btn-bg-color);
  border: none;
  border-radius: 12px;
  padding: 10px 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.closeDecrastinatorBtn:hover {
  cursor: pointer;
  background-color: var(--btn-hover-bg-color);
}

.decrastinatorTaskSelector {
  width: 250px;
  color: var(--text-color);
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 20px;
  position: relative;
  height: 36px;
  background-color: var(--bg-color);
  border: 2px solid var(--bd-color);
  order: 1;
}

.startDecrastinatorBtn {
  display: flex;
  order: 2;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  width: 39px;
  height: 39px;
  text-align: center;
  top: 0px;
  background-color: var(--btn-bg-color);
  align-items: center;
  justify-content: center;
}

.startDecrastinatorBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.startDecrastinatorIcon {
  width: 35px;
}

.decrastinatorMinutesDiv {
  order: 0;
  position: relative;
  z-index: 10;
  font-size: 4.5rem;
  font-weight: 400;
  color: rgb(0, 0, 0);
  z-index: 2;
  margin: 0;
  margin-top: 5px;
  background-color: var(--task-hover-bg-color);
  padding: 20px 40px;
  border-radius: 20px;
  color: var(--text-color);
}

.customizeBtn {
  background-color: var(--btn-bg-color);
  border: 3px solid var(--bd-color);
  border-radius: 12px;
  padding: 10px 5px;
  width: 100px;
  color: var(--text-color);
}

.customizeBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.customizeDiv {
  padding: 15px;
  border: 1px solid var(--bd-color);
  height: 100vh;
  position: fixed;
  z-index: 9990;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
  width: 300px;
  background: var(--work-areas-bg-color);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--text-color);
  box-sizing: border-box;
  bottom: 0px;
  right: 0px;
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.customizeDiv.show {
  display: flex;
  animation: slideInFromLeft 0.3s ease-out;
}

.customizeDiv.closing {
  animation: slideOutToRight 0.3s ease-in forwards;
}

.customizeHeader {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  color: var(--text-color);
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  
}

.closeCustomizeBtn {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--btn-bg-color);
  border: none;
  border-radius: 12px;
  padding: 5px 10px;
  width: 30px;
  height: 30px;
  color: var(--text-color);
}

.closeCustomizeBtn:hover {
  cursor: pointer;
  color: var(--btn-hover-bg-color);
}

.customizeBgHeaderTitle {
  font-size: 1.2rem;
  color: var(--text-color);
}

.customizeBgOptions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 600px;
}

.customizeBgOptions button {
  flex: 0 0 calc(16.66% - 10px); 
  box-sizing: border-box;
  border-radius: 50%;
  aspect-ratio: 1 / 1;          
  text-align: center;     
  overflow: hidden;        
  text-overflow: ellipsis;     
  white-space: nowrap;     
}

.redBgBtn {
  background-color: maroon;
  border: none;
}

.goldBgBtn {
  background-color: rgb(226, 160, 57);
  border: none;
}

.lightGreenBgBtn {
  background-color: lightgreen;
  border: none;
}

.greenBgBtn {
  background-color: forestgreen;
  border: none;
}

.tealBgBtn {
  background-color: rgb(0, 110, 120);
  border: none;
}

.aquaBgBtn {
  background-color: rgb(0, 213, 255);
  border: none;
}

.blueBgBtn {
  background-color: rgb(0, 149, 255);
  border: none;
}

.violetBgBtn {
  background-color: rgb(198, 130, 238);
  border: none;
}

.purpleBgBtn {
  background-color: rgb(142, 0, 185);
  border: none;
}

.pinkBgBtn {
  background-color: pink;
  border: none;
}

.whiteBgBtn {
  background-color: white;
}

.blackBgBtn {
  background-color: black;
}

.miniAnalyticsDiv {
  display: flex;
  position: relative;
  height: 122px;
  gap: 20px;
  margin: 0px;
  top: 0px;
  order: 0;
}

.expandMiniAnalyticsBtn {
  background-color: var(--btn-bg-color);
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  padding: 8px 12px;
  width: 10px;
  height: 142px;
  color: var(--text-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 0;
}

.expandMiniAnalyticsBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.expandMiniAnalyticsIcon {
  width: 16px;
  filter: brightness(0);
}

[data-mode="dark"] .expandMiniAnalyticsIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.expandMiniAnalyticsTooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.expandMiniAnalyticsTooltipText {
  visibility: hidden;
  width: 130px;
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.expandMiniAnalyticsTooltip:hover .expandMiniAnalyticsTooltipText {
  visibility: visible;
}

.miniAnalytics {
  position: relative;
  display: none;
  gap: 20px;
  flex-direction: row;
  order: 1;
}

.miniAnalytics.show {
  display: flex;
}

.miniAnalytic {
  background-color: var(--work-areas-bg-color);
  border: 1px solid var(--bd-color);
  padding: 10px 40px;
  border-radius: 20px;
  position: relative;
  width: 100px;
  height: 122px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.checkmarkImage {
  position: absolute;
  filter: invert(66%) sepia(35%) saturate(1475%) hue-rotate(113deg)
    brightness(97%) contrast(90%);
  opacity: 0.7;
  transition: 0.2s ease;
  width: 205px;
  top: 100px;
  left: 140px;
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  opacity: 15%;
}

.riskReportIcon {
  position: absolute;
  filter: brightness(0) saturate(100%) invert(56%) sepia(35%) saturate(1450%) hue-rotate(318deg) brightness(105%) contrast(102%);
  opacity: 0.7;
  transition: 0.2s ease;
  width: 225px;
  top: 100px;
  left: 140px;
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  opacity: 15%;
}

.lightningImage {
  position: absolute;
  filter: invert(61%) sepia(85%) saturate(1600%) hue-rotate(215deg)
    brightness(101%) contrast(101%);
  opacity: 0.7;
  transition: 0.2s ease;
  width: 225px;
  top: 120px;
  left: 140px;
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  opacity: 15%;
}

.dateImage {
  position: absolute;
  filter: invert(65%) sepia(91%) saturate(2363%) hue-rotate(204deg) brightness(99%) contrast(93%);
  opacity: 0.7;
  transition: 0.2s ease;
  width: 225px;
  top: 120px;
  left: 140px;
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  opacity: 15%;
}

.tasksDoneHeader,
.riskReportHeader,
.momentumHeader,
.freeTimeHeader {
  font-size: 18px;
  color: gray;
  margin: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 20px;
}

.numberOfTasksDone,
.riskReportItems,
.momentumItems,
.numberOfFreeTime {
  font-size: 35px;
  color: var(--text-color);
  margin: 0px;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  width: 90px;
  bottom: 0px;
  gap: 0px;
}

.riskReportItems,
.momentumItems {
  font-size: 1rem;
  left: 60%;
  width: 190px;
  gap: 0px;
}

.numberOfTasksOverdue,
.numberOfTasksDueToday,
.numberOfTasksDone {
  font-size: 1rem;
  left: 60%;
  width: 190px;
  bottom: 0px;
}

.numberOfTasksTotal,
.riskReportFooter,
.momentumDivFooter,
.freeTimeFooter {
  font-size: 16px;
  color: gray;
  margin: 0px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin: 20px;
}

.whatToFocusOn {
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  width: 100%;
  height: 112px;
  background-color: var(--work-areas-bg-color);
  border: 1px solid var(--bd-color);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  order: 2;
  margin: 0px;
}

.whatToFocusOnHeader {
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0px;
  position: relative;
  text-align: left;
  width: 100%;
  height: fit-content;
  margin-bottom: 10px;
}

.focusOnList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
  height: fit-content;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  font-size: 0.8rem;
}

.priorityMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.bottomRowOfHeader {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.mainWorkArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  justify-content: center;
  order: 3;
}

.workAreaSplit {
  position: relative;
  width: 100%;
  border: 1px solid var(--bd-color);
  margin-top: 15px;
  margin-bottom: 25px;
  order: 2;
}

.section1 {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.section2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.toDoList {
  position: relative;
  padding: 20px;
  width: 700px;
  height: 328.5px;
  border: none;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: auto;
  border: 1px solid var(--bd-color);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--work-areas-bg-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

:root.isKanbanView .toDoList {
  height: 750px;
}

.toDoListHeader {
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 75px;
  align-self: flex-start;
}

.toDoListName {
  position: relative;
  bottom: 5px;
  font-size: 1.2rem;
}

.options {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: right;
  bottom: 84px;
  gap: 14px;
  margin-top: 30px;
}

.taskSortSelector {
  position: relative;
  top: 21px;
  display: flex;
  text-align: center;
  align-items: center;
  gap: 4px;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  border: 1px solid var(--bd-color);
  font-weight: 600;
  border-radius: 12px;
  padding: 5px 10px;
  height: 35px;
  width: 130px;
}

.taskSortSelector:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.taskViewSelector {
  position: relative;
  top: 21px;
  display: flex;
  text-align: center;
  align-items: center;
  gap: 4px;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  border: 1px solid var(--bd-color);
  font-weight: 600;
  border-radius: 12px;
  padding: 5px 10px;
  height: 35px;
  width: 150px;
}

.taskViewSelector:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.KanbanBoardIcon {
  width: 18px;
  height: 18px;
  filter: brightness(0);
}

[data-mode="dark"] .KanbanBoardIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.dropZones {
  display: none;
  justify-content: space-around;
  position: relative;
  width: 700px;
  gap: 5px;
}

.toDoDropZone {
  background-color: rgb(241, 241, 241);
  min-height: 650px;
  width: 30%;
  border-radius: 8px;
  padding: 10px;
  gap: 10px;
  border: 1px solid rgb(217, 217, 217);
}

[data-mode="dark"] .toDoDropZone {
  background-color: rgb(57, 57, 67);
}

.inProgressDropZone {
  background-color: rgb(246, 254, 255);
  min-height: 400px;
  width: 30%;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgb(220, 220, 229);
}

[data-mode="dark"] .inProgressDropZone {
  background-color: rgb(62, 62, 79);
}

.allDoneDropZone {
  background-color: rgb(245, 255, 243);
  min-height: 400px;
  width: 30%;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgb(226, 226, 224);
}

[data-mode="dark"] .allDoneDropZone {
  background-color: rgb(59, 59, 67);
}

.addBtn {
  position: relative;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  width: 55px;
  height: 35px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  top: 22px;
}

.addBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.mainToDoListContent {
  overflow-y: auto;
}

.themeBtn {
  position: relative;
  background-color: var(--theme-btn-bg-color);
  color: white;
  width: 40px;
  height: 40px;
  border: none;
  padding: 20px;
  border-radius: 12px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.themeBtn:hover {
  background-color: var(--theme-btn-hover-bg-color);
  cursor: pointer;
}

.themeIcon {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  transition: filter 0.2s ease, opacity 0.2s ease;
  filter: brightness(0) invert(1); 
}

[data-mode="dark"] .themeIcon {
  filter: brightness(0); 
  opacity: 0.75;
}

.toDoListLineSplit {
  position: relative;
  bottom: 60px;
  background-color: var(--bd-color);
  border: none;
  height: 1px;
}

input {
  margin: 5px;
  padding: 10px 15px;
  background-color: var(--input-bg);
  border-radius: 12px;
  font-family: "Inter";
}

input:focus {
  outline: none;
}

.taskCreationDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  margin: 0px;
  margin-bottom: 15px;
  order: 0;
  width: 100%;
  gap: 10px;
  border-radius: 20px;
  padding: 15px;
  padding-right: 15px;
  width: 610px;
  background-color: rgb(250, 250, 250);
}

[data-mode="dark"] .taskCreationDiv {
  background-color: rgb(57, 57, 67);
}

.actualTaskCreation {
  display: flex;
  flex-direction: row;
  width: 700px;
  z-index: 10;
  position: relative;
}

.taskInput {
  width: 440px;
  border: none;
  color: var(--text-color);
}

.taskAttrCreation {
  display: flex;
  flex-direction: row;
  width: 625px;
  position: relative;
  gap: 10px;
  left: 5px;
}

.taskPrioritySelector {
  background-color: var(--input-bg);
  width: fit-content;
  color: var(--text-color);
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 12px;
  position: relative;
  height: 36px;
  left: 0px;
}

.taskPrioritySelector:hover {
  cursor: pointer;
}

.taskDateInput {
  width: 125px;
  font-family: "Inter";
  position: relative;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: none;
  color: var(--text-color);
  height: 15px;
}

.taskDateInput:hover {
  cursor: pointer;
}

.taskTimeInput {
  position: relative;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border: none;
  color: var(--text-color);
  height: 15px;
}

.taskTimeInput:hover {
  cursor: pointer;
}

.taskStatusSelector {
  background-color: var(--input-bg);
  width: fit-content;
  color: var(--text-color);
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 12px;
  position: relative;
  height: 36px;
  left: 0px;
}

.taskStatusSelector:hover {
  cursor: pointer;
}

.taskRecurrenceSelector {
  background-color: var(--input-bg);
  width: fit-content;
  color: var(--text-color);
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 12px;
  position: relative;
  height: 36px;
  left: 0px;
}

.taskRecurrenceSelector:hover {
  cursor: pointer;
}

.blockedByDiv {
  display: none;
  flex-direction: column;
  gap: 15px;
  position: relative;
  left: 5px;
}

.blockedByLabel {
  font-size: 14px;
  color: var(--text-color);
  position: relative;
  top: 8px;
}

.blockedByInput {
  background-color: var(--input-bg);
  color: var(--text-color);
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 12px;
  position: relative;
  height: 36px;
  left: 0px;
  width: 440px;
}

.blockedByInput:hover {
  cursor: pointer;
}

.addAndCancelTaskButtons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  left: 5px;
}

.addTaskBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  height: 36px;
  width: 120px;
  padding: 0px 10px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  position: relative;
}

.addTaskBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.addTaskBtnIcon {
  width: 18px;
  filter: brightness(0);
}

[data-mode="dark"] .addTaskBtnIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.cancelTaskCreationBtn {
  background-color: var(--btn-bg-color);
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  padding: 0px 10px;
  height: 36px;
  width: 75px;
  color: var(--text-color);
  font-weight: bold;
}

.cancelTaskCreationBtn:hover {
  background-color: var(--btn-hover-bg-color);
}

.noTasksYetAlert {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  position: relative;
  text-align: center;
  margin-top: 20px;
}

.noTasksYetIcon {
  width: 150px;
  filter: invert(88%) sepia(0%) saturate(0%) hue-rotate(149deg) brightness(80%)
    contrast(103%);
  opacity: 0.7;
  transition: 0.2s ease;
  position: relative;
}

.noTasksYet {
  position: relative;
  bottom: 57px;
  font-family: "Inter";
  color: rgb(197, 197, 197);
}

.tinyTasksTip {
  font-size: 12px;
  position: relative;
  bottom: 72px;
  color: rgb(197, 197, 197);
  width: 100%;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.taskList {
  position: relative;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  vertical-align: middle;
  margin: 0px;
  overflow-x: hidden;
  order: 1;
}

.listTask {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  color: var(--text-color);
  font-size: 20px;
}

:root.isKanbanView .listTask {
  font-size: 15px;
}

.taskTextAndCheckbox {
  display: flex;
  flex-direction: row;
}

.taskCheckbox {
  appearance: none;
  width: 23px;
  height: 23px;
  border: 2px solid gray;
  border-radius: 20px;
  position: relative;
  padding: 10px;
  vertical-align: middle;
  background-color: var(--work-areas-bg-color);
}

.taskCheckbox:hover {
  cursor: pointer;
  border-color: rgb(70, 190, 140);
}

.taskCheckbox:checked {
  border-color: rgb(70, 190, 140);
}

.taskCheckbox::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 7px;
  height: 12px;
  border: solid rgb(70, 190, 140);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(1);
  opacity: 0;
}

.taskCheckbox:checked::before {
  opacity: 1;
  animation: checkmark 0.3s ease forwards;
}

.subtaskCheckbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid gray;
  border-radius: 20px;
  position: relative;
  padding: 10px;
  vertical-align: middle;
  background-color: var(--work-areas-bg-color);
}

.subtaskCheckbox:hover {
  cursor: pointer;
  border-color: rgb(70, 190, 140);
}

.subtaskCheckbox:checked {
  border-color: rgb(70, 190, 140);
}

.subtaskCheckbox::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid rgb(70, 190, 140);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(1);
  opacity: 0;
}

.subtaskCheckbox:checked::before {
  opacity: 1;
  animation: checkmark 0.3s ease forwards;
}

@keyframes checkmark {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

.mainTask {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: flex-start;
  gap: 10px;
  border: none;
  border-radius: 20px;
  width: 95%;
  padding: 15px;
  background-color: var(--task-bg-color);
  backdrop-filter: blur(5px);
  color: var(--text-color);
  overflow: visible;
  z-index: auto;
}

.mainTask:hover {
  background-color: var(--task-hover-bg-color);
}

.mainTask.dragging {
  opacity: 0.5;
  border: 2px dashed #ccc;
}

.taskTextSpan {
  position: relative;
  text-align: left;
  padding: 5px 10px;
  color: var(--text-color);
}

.taskTextSpan:hover {
  cursor: text;
}

.listTask.completed .taskTextSpan {
  text-decoration: line-through;
  color: gray !important;
  opacity: 0.6;
}

.taskAttributes {
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-size: 15px;
}

.taskPrioritySpan {
  position: relative;
  border-right: 1px solid var(--task-attribute-separator-color);
  padding-right: 10px;
}

.taskDateAndTime {
  display: flex;
  flex-direction: row;
  text-align: center;
  gap: 6px;
}

.taskDateAndTimeSpan {
  position: relative;
  order: 2;
  border-right: 1px solid var(--task-attribute-separator-color);
  padding-right: 10px;
}

.taskDateImg {
  width: 18px;
  order: 1;
}

.taskStatusSpan {
  order: 3;
  position: relative;
  border-right: 1px solid var(--task-attribute-separator-color);
  padding-right: 10px;
}

.taskRecurrenceSpan {
  order: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.taskRecurrenceImg {
  width: 18px;
  order: 1;
  filter: brightness(0);
}

[data-mode="dark"] .taskRecurrenceImg {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.taskRecurrenceText {
  order: 2;
}

.taskOptionsBtnDiv {
  display: flex;
  position: relative;
}

.taskOptionsBtn {
  text-align: center;
  padding: 10px;
  background-color: var(--task-options-btn-bg-color);
  border: none;
  border-radius: 120px;
  position: relative;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
}

.taskOptionsBtn.show {
  opacity: 1;
  pointer-events: auto;
}

.taskOptionsBtn:hover {
  background-color: var(--task-options-btn-hover-bg-color);
  cursor: pointer;
}

.taskOptionsBtnIcon {
  width: 18px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .taskOptionsBtnIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.taskOptions {
  display: none;
  position: absolute;
  top: 100%;
  right: 0px;
  border-radius: 10px;
  padding: 8px 12px;
  flex-direction: column;
  gap: 10px;
  background-color: var(--work-areas-bg-color);
  border: 1px solid var(--bd-color);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: all 0.18s ease;
  z-index: 9999;
  width: fit-content;
  height: fit-content;
  overflow: hidden;
}

.taskOptions.show {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.editOption {
  display: flex;
  opacity: 1;
  align-items: center;
  color: var(--text-color);
  padding: 8px 12px;
}

.addSubtaskOption {
  display: flex;
  opacity: 1;
  align-items: center;
  color: var(--text-color);
  padding: 8px 12px;
}

.subtaskList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
  height: fit-content;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  font-size: 0.8rem;
  order: 1;
}

.subtask {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: flex-start;
  gap: 10px;
  border: none;
  border-radius: 20px;
  padding: 15px;
  background-color: var(--task-bg-color);
  backdrop-filter: blur(5px);
  color: var(--text-color);
  overflow: visible;
  z-index: auto;
}

.subtask:hover {
  background-color: var(--task-hover-bg-color);
}

.deleteOption {
  display: flex;
  opacity: 1;
  align-items: center;
  color: red;
  padding: 8px 12px;
}

.taskOptions div:hover {
  background-color: var(--btn-bg-color);
  cursor: pointer;

}

.taskOptions.show .editOption,
.taskOptions.show .deleteOption {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.focusTimer {
  position: relative;
  padding: 20px;
  width: 400px;
  height: 330px;
  border: var(--bd-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--work-areas-bg-color);
  backdrop-filter: blur(10px);
  overflow: hidden;
  border: 1px solid var(--bd-color);
  z-index: auto;
}

:root.isKanbanView .focusTimer {
  height: 750px;
}

.timerOptionsDropdown {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 20px;
  color: var(--text-color);
  font-size: 1.2rem;
  border: none;
  border-radius: 12px;
  height: 36px;
  padding: 1px 15px;
  padding-right: 5px;
}

.mainTimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 15px;
}

.timerProgressRing {
  fill: none;
  stroke: var(--timer-progress-ring-color);
  opacity: 0.3;
  stroke-width: 5;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  transform: rotate(-90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 2px #82919e);
}

.currentFoocusedTaskDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.taskSelectionDropdown {
  width: 250px;
  color: #1a1a1a !important;
  border: none;
  padding: 1px 15px;
  padding-right: 5px;
  border-radius: 12px;
  position: relative;
  height: 36px;
  margin-bottom: 17px;
  background-color: #ffffff !important;
  border: 2px solid var(--bd-color);
}

.taskSelectionDropdown option {
  color: #1a1a1a !important;
}

.currentFocusedTask {
  display: none;
  color: var(--text-color);
}

.timerMinutesDiv {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.timerMinutesDiv svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.timerMinutes {
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-color);
  position: relative;
  z-index: 2;
  margin: 0;
}

.track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 5;
}

.timerButtons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

.timerLengthOptions {
  display: flex;
  gap: 10px;
}

.timerLengthOptions button {
  display: flex;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  font-weight: 1000;
  height: 35px;
  text-align: center;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
}

.timerControls {
  display: flex;
  gap: 10px;
}

.startTimerBtn {
  display: flex;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  height: 39px;
  text-align: center;
  background-color: var(--btn-bg-color);
}

.startTimerBtnIcon {
  width: 18px;
  height: 18px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .startTimerBtnIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.pauseTimerBtn {
  display: flex;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  height: 39px;
  text-align: center;
  background-color: var(--btn-bg-color);
}

.pauseTimerBtnIcon {
  width: 18px;
  height: 18px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .pauseTimerBtnIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.restartTimerBtn {
  display: flex;
  padding: 10px;
  border: none;
  border-radius: 12px;
  position: relative;
  height: 39px;
  text-align: center;
  background-color: var(--btn-bg-color);
}

.restartTimerBtnIcon {
  width: 18px;
  height: 18px;
  filter: brightness(0);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"] .restartTimerBtnIcon {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.2s ease;
}

.notesAndActivityDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.notes {
  position: relative;
  padding: 20px;
  width: 280px;
  height: 394px;
  border: none;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 1;
  border: 1px solid var(--bd-color);
  background-color: var(--work-areas-bg-color);
}

.notesHeader {
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 75px;
  align-self: flex-start;
}

.notesName {
  position: relative;
  bottom: 5px;
  font-size: 1.2rem;
}

.addBtn2 {
  position: relative;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  width: 55px;
  height: 35px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  top: 22px;
}

.addBtn2:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.notesLineSplit {
  position: relative;
  background-color: var(--bd-color);
  border: none;
  border-top: 1px solid var(--bd-color);
  height: 0;
  bottom: 30px;
  width: 100%;
}

.noNotesYetAlert {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  position: relative;
  text-align: center;
  height: 100%;
  margin-top: 20px;
}

.noNotesYetIcon {
  width: 150px;
  filter: invert(88%) sepia(0%) saturate(0%) hue-rotate(149deg) brightness(80%)
    contrast(103%);
  opacity: 0.7;
  transition: 0.2s ease;
  position: relative;
}

.noNotesYet {
  position: relative;
  bottom: 53px;
  font-family: "Inter";
  color: rgb(197, 197, 197);
}

.tinyNotesTip {
  font-size: 12px;
  position: relative;
  bottom: 70px;
  color: rgb(197, 197, 197);
  width: 100%;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.noteCreationDiv {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  order: 0;
  width: 260px;
  gap: 10px;
  border-radius: 20px;
  padding: 10px;
  background-color: rgb(250, 250, 250);
  z-index: 10;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--bd-color);
}

[data-mode="dark"] .noteCreationDiv {
  background-color: rgb(57, 57, 67);
}

.noteInput {
  width: 190px;
  height: 100px;
  padding: 20px;
  border: 1px solid var(--bd-color);
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
  border-radius: 20px;
  font-family: "Inter";
}

.noteColorOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px solid var(--bd-color);
  order: 0;
  gap: 10px;
  width: fit-content;
  border-radius: 20px;
  padding: 15px;
  background-color: var(--work-areas-bg-color);
}

.noteColorOptions button {
  border-radius: 20px;
  width: 25px;
  height: 25px;
  transition: transform 0.1s ease;
}

.noteColorOptions button:hover {
  cursor: pointer;
  border: 2px solid var(--bd-color);
}

.noteColorOptions button:active {
  transform: scale(1.07);
  border: 2px solid var(--bg-color);
}

.defaultColor {
  background-color: var(--work-areas-bg-color);
  border: 2px solid var(--bd-color);
  position: relative;
  overflow: hidden;
}

.defaultColor:hover {
  cursor: pointer;
  border: 2px solid var(--bd-color);
}

.defaultColor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  background-color: #ff0000;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
}

.yellowColor {
  background-color: rgb(255, 213, 0);
  border: 2px solid rgb(195, 195, 0);
}

.orangeColor {
  background-color: rgb(255, 136, 0);
  border: 2px solid rgb(205, 133, 0);
}

.greenColor {
  background-color: rgb(0, 163, 111);
  border: 2px solid green;
}

.blueColor {
  background-color: rgb(0, 149, 255);
  border: 2px solid rgb(0, 106, 255);
}

.purpleColor {
  background-color: rgb(134, 0, 212);
  border: 2px solid rgb(68, 14, 68);
}

.cancelAndAddNoteButtons {
  display: flex;
  gap: 10px;
}

.cancelNoteCreationBtn {
  position: relative;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 15px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
}

.cancelNoteCreationBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.addNoteBtn {
  position: relative;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 15px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
}

.addNoteBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.mainNotesContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.notesList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.listNote {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-color);
  font-size: 20px;
  flex-shrink: 0;
  width: 100%;
}

.mainNote {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: flex-start;
  gap: 10px;
  width: 235px;
  border: 1px solid var(--bd-color);
  border-radius: 20px;
  padding: 15px;
  backdrop-filter: blur(5px);
  color: var(--text-color);
  font-size: 0.875rem;
}

.mainNoteText {
  position: relative;
  text-align: left;
  padding: 5px 10px;
  color: var(--text-color);
  text-overflow: ellipsis;
}

.noteOptionsDiv {
  display: flex;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 7px;
  margin-right: 7px;
  gap: 3px;
  flex-direction: column;
}

.noteOptionsDiv button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--task-options-btn-bg-color);
  border: none;
  border-radius: 12px;
  position: relative;
  padding: 10px;
  width: 15px;
  height: 15px;
}

.noteOptionsDiv button:hover {
  cursor: pointer;
  filter: brightness(0.2);
}

.noteOptionsDiv button img {
  width: 18px;
  height: 18px;
}

.noteEditDiv {
  position: fixed;
  z-index: 1000000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--work-areas-bg-color);
  padding: 2rem;
  border-radius: 15px;
  width: 450px;
  height: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.noteEditInput {
  width: 190px;
  height: 190px;
  padding: 20px;
  border: 1px solid var(--bd-color);
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
  border-radius: 20px;
  font-family: "Inter";
}

.editNoteOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editNoteOptions button {
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  padding: 10px 15px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
}

.activity {
  position: relative;
  padding: 20px;
  width: 320px;
  height: 530px;
  border: 1px solid var(--bd-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--work-areas-bg-color);
  box-sizing: border-box;
}

.activityName {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 20px;
  color: var(--text-color);
  font-size: 1.2rem;
}

.activityLineSplit {
  position: relative;
  background-color: var(--bd-color);
  border: none;
  border-top: 1px solid var(--bd-color);
  height: 0;
  top: 35px;
  width: 100%;
}

.mainActivityContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}

.activityList {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 30px;
  width: 100%;
  padding: 20px;
  padding-top: 0px;
}

.activityItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0px;
  color: var(--text-color);
  font-size: 0.875rem;
  border-radius: 12px;
  padding: 10px;
  background-color: var(--fc-daygrid-day-bg-color);
  width: 240px;
  box-sizing: border-box;
  gap: 10px;
  text-overflow: ellipsis;
}

.activityIcon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.activityIcon--task {
  filter: invert(31%) sepia(94%) saturate(4529%) hue-rotate(204deg) brightness(102%) contrast(107%);
  opacity: 0.7;
  transition: 0.2s ease;
}

.activityIcon--note {
  filter: invert(88%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(86%) contrast(101%);
  opacity: 0.7;
  transition: 0.2s ease;
}

[data-mode="dark"].activityIcon--note {
  filter: invert(88%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(101%) contrast(101%);
  opacity: 0.7;
  transition: 0.2s ease;
}

.activityIcon--focus {
  filter: invert(47%) sepia(87%) saturate(1518%) hue-rotate(125deg) brightness(96%) contrast(102%);  opacity: 0.7;
  transition: 0.2s ease;
}

.activityIcon--delete {
  filter: invert(24%) sepia(91%) saturate(3474%) hue-rotate(352deg) brightness(91%) contrast(92%);
  opacity: 0.7;
  transition: 0.2s ease;
}

.activityMainContent {
  display: flex;
  flex-direction: column;
}

.activityTime {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

.calendar {
  position: relative;
  padding: 20px;
  width: 817px;
  height: 545px;
  border-radius: 20px;
  border: 1px solid var(--bd-color);
  overflow-y: hidden;
  background-color: var(--work-areas-bg-color);
}

#calendar {
  width: 817px;
  height: 545px;
  overflow-y: hidden;
}

:root.calendarView #calendar,
:root.calendarView .calendar {
  width: 80vw;
  height: 980px;
  margin-top: 0px;
  top: 0px;
  left: 0px;
  margin-right: 0px;
  right: 0px;
}

.fc .fc-toolbar {
  display: flex !important;
  justify-content: flex-end;
}

.fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
  display: flex !important;
  align-items: center;
  gap: 20px;
}

.fc .fc-toolbar-title {
  font-weight: 400;
  position: relative;
  top: 3px;
  font-size: 1.2rem;
  display: inline-block !important;
  margin-left: 0 !important;
}

.fc .fc-button {
  background-color: transparent;
  border: none;
  border-radius: 12px;
  color: var(--text-color);
  padding: 5px 10px;
  backdrop-filter: blur();
}

.fc .fc-today-button {
  display: none;
}

.fc .fc-col-header-cell {
  padding: 5px 0;
  font-weight: 500;
  color: var(--text-color);
  text-transform: capitalize;
  border: none;
}

.fc .fc-scrollgrid {
  border: 1px solid var(--fc-border-color);
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.fc .fc-scrollgrid td:last-child {
  border-right: none;
}

.fc .fc-scrollgrid-section:last-child td {
  border-bottom: none;
}

.fc {
  --fc-border-color: rgba(128, 128, 128, 0.4) !important;
}

.fc .fc-daygrid-day {
  border: 3px solid var(--bg-color);
  background-color: var(--fc-daygrid-day-bg-color);
  border-radius: 15px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, border-color 0.3s
}

.fc .fc-daygrid-day:hover {
  background-color: var(--fc-daygrid-day-hover-bg-color);
  cursor: pointer;
}

.fc .fc-daygrid-day.fc-day-today {
  border-radius: 15px;
  outline: 3.1px solid rgb(129, 140, 248);
  color: rgb(129, 140, 248);
  background-color: var(--fc-daygrid-day-bg-color);
}

.fc .fc-daygrid-day.fc-day-today:hover {
  background-color: var(--fc-daygrid-day-hover-bg-color);
  outline-color: rgb(129, 140, 248);
}

.fc .fc-daygrid-day-number {
  text-align: left;
  flex-grow: 1;
  margin: 10px;
}

.fc-event {
  --urgency: 0;
  position: relative;
  overflow: visible !important;
  animation: pulseUrgency calc(2.4s - var(--urgency) * 1.4s) ease-in-out infinite;
}

.fc-daygrid-event-harness {
  overflow: visible !important;
}

@keyframes pulseUrgency {
  0% {
    box-shadow: 0 0 calc(4px + var(--urgency) * 6px)
      rgba(45, 58, 200, calc(0.1 + var(--urgency) * 0.2));
  }
  50% {
    box-shadow: 0 0 calc(8px + var(--urgency) * 28px)
      rgba(
        calc(45 + var(--urgency) * 210),
        calc(58 - var(--urgency) * 38),
        calc(200 - var(--urgency) * 160),
        calc(0.2 + var(--urgency) * 0.75)
      );
  }
  100% {
    box-shadow: 0 0 calc(4px + var(--urgency) * 6px)
      rgba(45, 58, 200, calc(0.1 + var(--urgency) * 0.2));
  }
}

.fc-daygrid-event-harness {
  overflow: visible !important;
}

.settingsContent {
  position: relative;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin-top: 80px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s;
  transform: translateX(0);
}

.isSettingsView .dashboardContent {
  display: none;
}

.isSettingsView .settingsContent {
  display: flex;
}

html:not([class*="settingsView"]) .personalSection {
  display: flex;
}

.settingsNavigator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.settingsNavList {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  gap: 30px;
}

.settingsNavList a {
  padding: 10px 15px;
  border-radius: 12px;
  color: var(--text-color);
  font-weight: bold;
  text-decoration: none;
}

.settingsNavList a:hover {
  background-color: var(--btn-bg-color);
  cursor: pointer;
}

.settingsNavList a.active {
  background-color: var(--btn-bg-color);
  cursor: pointer;
}

.actualSettings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.personalSection,
.aiSection,
.accessibilitySection,
.aboutSection {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.fullNameInput,
.preferredNameInput {
  width: 300px;
  padding: 10px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
}

.aboutSettingsInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.appName {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-color);
}

.aboutSettingsBtns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.developerInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.developerName a {
  text-decoration: none;
  font-weight: bold;
  color: var(--text-color);
}

.developerName a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.githubIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: rgb(255, 255, 255);
  color: var(--text-color);
  font-weight: 600;
  height: 40px;
  width: 40px;
  border: 1px solid var(--bd-color);
  border-radius: 40px;
}

.githubIcon:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.reportABugBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  height: 40px;
  width: 120px;
  border: 1px solid var(--bd-color);
  border-radius: 40px;
}

.requestAFeatureBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--btn-bg-color);
  color: var(--text-color);
  font-weight: 600;
  height: 40px;
  width: 160px;
  border: 1px solid var(--bd-color);
  border-radius: 40px;
}

.reportABugBtn a,
.requestAFeatureBtn a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
}

.reportABugBtn:hover {
  background-color: var(--btn-hover-bg-color);
  cursor: pointer;
}

.aiToggleDiv {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 15px;
}

.aiToggleBtn {
  background-color: var(--btn-bg-color);
  width: 60px;
  height: 30px;
  border-radius: 200px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}

.aiToggleBtn::before {
  position: absolute;
  content: "";
  background-color: var(--text-color);
  width: 20px;
  height: 20px;
  border-radius: 200px;
  margin: 5px;
  transition: 0.2s;
}

#aiToggle:checked + .aiToggleBtn {
  background-color: rgb(70, 190, 140);
}

#aiToggle:checked + .aiToggleBtn::before {
  transform: translateX(30px);
}

#aiToggle {
  display: none;
}

.aiModelSelect,
.apiKeyInput {
  width: 300px;
  padding: 10px;
  border: 1px solid var(--bd-color);
  border-radius: 12px;
  background-color: var(--work-areas-bg-color);
  color: var(--text-color);
}