/* Common */
[class^="theme"] ::-webkit-scrollbar-track,
[class^="theme"] #txtNew,
[class^="theme"] #areaPinNotes li,
[class^="theme"] #areaListNotes li,
[class^="theme"] #areaListLists input,
[class^="theme"] #areaListLists input.active.hidden,
[class^="theme"] input[type='checkbox'],
[class^="theme"] #areaListNotes input[type='text'],
[class^="theme"] #areaPinNotes input[type='text'],
[class^="theme"] .modal {
  background-color: transparent;
}
[class^="theme"] #panelList li.sortable-fallback,
[class^="theme"] #panelNote li.sortable-fallback,
[class^="theme"] #areaPinNotes li.edit > .noteContent,
[class^="theme"] #areaListNotes li.edit > .noteContent,
[class^="theme"] #areaListLists li.edit input,
[class^="theme"] #listAdd #listAddName.active {
  background-color: #ffffff99;
}
[class^="theme"] #panelNote,
[class^="theme"] #areaListLists .listRemove:hover,
[class^="theme"] span.appIcon:hover {
  background-color: #ffffff66;
}
[class^="theme"] #panelList .sortable-chosen,
[class^="theme"] ::-webkit-scrollbar-thumb,
[class^="theme"] ::-webkit-scrollbar-thumb:hover {
  background-color: #00000033;
}
[class^="theme"] #areaSettings #btnSettings {
  color: #ffffff99;
}
[class^="theme"] #btnFilter.active,
[class^="theme"] #filterCompleted.active,
[class^="theme"] #filterIncompleted.active,
[class^="theme"] #txtNew:focus + #btnNew:hover,
[class^="theme"] #areaSettings #btnSettings:hover,
[class^="theme"] #areaSettings.active #btnSettings {
  color: #ffffffee;
}
[class^="theme"] #areaListLists input.active,
[class^="theme"] #listAdd #listAddName.active {
  color: #000;
}
[class^="theme"] #listAdd #listAddName {
  color: #00000099;
}

/* mode-dark */
/* .theme-dark #titlebar, */
.theme-dark .panelsContainer,
.theme-dark #panelList,
.theme-dark #panelList li.sortable-fallback,
.theme-dark #panelNote li.sortable-fallback {
  background-color: var(--dark);
}
.theme-dark #panelList .sortable-chosen,
.theme-dark #panelNote .sortable-chosen,
.theme-dark #listAdd #listAddName.active,
.theme-dark #filterbar.active {
  background-color: #00000099;
}
.theme-dark #panelNote,
.theme-dark #areaPinNotes li.edit > .noteContent,
.theme-dark #areaListNotes li.edit > .noteContent,
.theme-dark #areaListLists li.edit input,
.theme-dark #titlebar .appIcon:hover {
  background-color: #00000066;
}
.theme-dark input[type="checkbox"]::before,
.theme-dark .icon:hover,
.theme-dark #btnNew:hover,
.theme-dark #btnFilter:hover,
.theme-dark #btnFilter.active {
  background-color: #ffffffcc;
}
.theme-dark ::-webkit-scrollbar-thumb,
.theme-dark ::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff33;
}
.theme-dark #txtNew:focus {
  background-color: transparent;
}
.theme-dark #listAdd #listAddName {
  color: #00000099;
}
.theme-dark #listAdd #listAddName:hover,
.theme-dark .icon:hover,
.theme-dark #areaPinNotes .notePin,
.theme-dark #btnNew:hover,
.theme-dark #btnFilter:hover,
.theme-dark #txtNew:focus + #btnNew:hover,
.theme-dark #btnFilter.active,
.theme-dark #filterCompleted.active,
.theme-dark #filterIncompleted.active {
  color: #000000ee;
}
.theme-dark #txtNew,
.theme-dark #areaPinNotes li:hover input[type='text'],
.theme-dark #areaListNotes li:hover input[type='text'] {
  color: #fff;
}
.theme-dark #brand,
.theme-dark #areaListLists input.active,
.theme-dark #listAdd #listAddName.active,
.theme-dark #areaListNotes input[type='text'],
.theme-dark #areaListNotes li span.noteMoment,
.theme-dark #areaListLists li span,
.theme-dark #areaPinNotes input[type='text'],
.theme-dark #areaPinNotes li span.noteMoment,
.theme-dark .modal-section,
.theme-dark .modal-section-title,
.theme-dark #areaSettings.active #btnSettings,
.theme-dark #areaSettings #btnSettings:hover {
  color: #ffffff99;
}
.theme-dark #btnNew, 
.theme-dark #btnFilter,
.theme-dark #areaListLists input {
  color: #ffffff66;
}
.theme-dark #areaSettings #btnSettings,
.theme-dark #areaPinNotes li.completed input[type='text'],
.theme-dark #areaListNotes li.completed input[type='text'] {
  color: #ffffff33;
}
.theme-dark,
.theme-dark #areaNew,
.theme-dark #areaPinNotes li,
.theme-dark #areaListNotes li {
  border-color: var(--dark-cc);
}
.theme-dark #areaNew:hover,
.theme-dark #areaNew:has(#txtNew:focus),
.theme-dark #areaPinNotes li:last-child {
  border-color: #ffffff66;
}
.theme-dark #titlebar,
.theme-dark #filterbar.active,
.theme-dark input[type='checkbox'],
.theme-dark #areaListNotes li.edit > input[type='text'], 
.theme-dark #areaPinNotes li.edit > input[type='text'] {
  border-color: #666;
}
.theme-dark #areaPinNotes li:hover input[type='checkbox'],
.theme-dark #areaListNotes li:hover input[type='checkbox'] {
  border-color: #999;
}
.theme-dark input[type="range"] {
  accent-color: var(--dark);
}
.theme-dark .noteCollapse.show {
  filter: invert(.6);
}
.theme-dark span.appIcon,
.theme-dark .noteCollapse.show:hover {
  filter: invert(.9);
}
.theme-dark #panelNote {
  box-shadow: -1px 0px 6px #000000cc;
}
.theme-dark #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px #000000;
}
#web.theme-dark {
  background-image: radial-gradient(var(--dark-cc), #000);
}
#web.theme-dark .panelsContainer {
  box-shadow: 0 0 10px #000;
}

/* blue */
.theme-blue .panelsContainer,
.theme-blue #panelList,
.theme-blue #panelNote .sortable-chosen,
.theme-blue #areaListNotes li.completed input[type="checkbox"]::before,
.theme-blue #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--blue);
}
.theme-blue #areaPinNotes .notePin {
  background-color: var(--blue-33);
}
.theme-blue #filterbar.active {
  background-color: var(--blue-66);
}
.theme-blue #btnFilter.active,
.theme-blue #filterCompleted.active,
.theme-blue #filterIncompleted.active,
.theme-blue #txtNew:focus + #btnNew:hover {
  background-color: var(--blue-stroke-66);
}
.theme-blue,
.theme-blue input[type='checkbox'] {
  border-color: var(--blue);
}
.theme-blue #areaNew,
.theme-blue #areaPinNotes li,
.theme-blue #areaListNotes li {
  border-color: var(--blue-66);
}
.theme-blue #areaNew:hover,
.theme-blue #areaNew:has(#txtNew:focus),
.theme-blue #areaPinNotes li:hover input[type='checkbox'],
.theme-blue #areaListNotes li:hover input[type='checkbox'],
.theme-blue #areaPinNotes li.edit > input[type='text'],
.theme-blue #areaListNotes li.edit > input[type='text'] {
  border-color: var(--blue-cc);
}
.theme-blue .noteCollapse:hover,
.theme-blue .noteCollapse.active {
  border-color: var(--blue-stroke);
}
.theme-blue #titlebar,
.theme-blue #areaPinNotes li:last-child,
.theme-blue .noteCollapse {
  border-color: var(--blue-stroke-66);
}
.theme-blue #btnNew:hover,
.theme-blue #btnFilter:hover,
.theme-blue #filterbar.active,
.theme-blue #filterCompleted:hover, 
.theme-blue #filterIncompleted:hover,
.theme-blue #txtNew:focus + #btnNew,
.theme-blue #areaListLists input.active,
.theme-blue #areaSettings.active,
.theme-blue .modal-section button,
.theme-blue select {
  border-color: var(--blue-stroke-cc);
}
.theme-blue #panelNote {
  box-shadow: -1px 0px 6px var(--blue-stroke-66);
}
.theme-blue #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--blue-stroke);
}
.theme-blue #btnNew,
.theme-blue #btnFilter {
  color: var(--blue-ee);
}
.theme-blue #btnFilter:hover,
.theme-blue #filterCompleted:hover, 
.theme-blue #filterIncompleted:hover,
.theme-blue #areaNew:hover #btnNew,
.theme-blue #txtNew:focus + #btnNew,
.theme-blue #txtNew:focus + #btnNew:hover,
.theme-blue .icon,
.theme-blue #areaListLists input,
.theme-blue #areaListLists .listRemove:hover,
.theme-blue #areaPinNotes input[type='text'],
.theme-blue #areaListNotes input[type='text'],
.theme-blue #areaPinNotes li span.noteMoment,
.theme-blue #areaListNotes li span.noteMoment {
  color: var(--blue-stroke);
}
.theme-blue #filterCompleted, 
.theme-blue #filterIncompleted,
.theme-blue #areaPinNotes li.completed input[type='text'],
.theme-blue #areaListNotes li.completed input[type='text'] {
  color: var(--blue-stroke-66);
}
.theme-blue input[type="range"] {
  accent-color: var(--blue);
}
#web.theme-blue {
  background-image: radial-gradient(var(--blue-66), var(--blue));
}
#web.theme-blue .panelsContainer {
  box-shadow: 0 0 10px var(--blue-stroke);
}

/* red */
.theme-red .panelsContainer,
.theme-red #panelList,
.theme-red #panelNote .sortable-chosen,
.theme-red #areaListNotes li.completed input[type="checkbox"]::before,
.theme-red #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--red);
}
.theme-red #areaPinNotes .notePin {
  background-color: var(--red-33);
}
.theme-red #filterbar.active {
  background-color: var(--red-66);
}
.theme-red #btnFilter.active,
.theme-red #filterCompleted.active,
.theme-red #filterIncompleted.active,
.theme-red #txtNew:focus + #btnNew:hover {
  background-color: var(--red-stroke-66);
}
.theme-red,
.theme-red input[type='checkbox'] {
  border-color: var(--red);
}
.theme-red #areaNew,
.theme-red #areaPinNotes li,
.theme-red #areaListNotes li {
  border-color: var(--red-66);
}
.theme-red #areaNew:hover,
.theme-red #areaNew:has(#txtNew:focus),
/* .theme-red #areaPinNotes li:last-child, */
.theme-red #areaPinNotes li:hover input[type='checkbox'],
.theme-red #areaListNotes li:hover input[type='checkbox'],
.theme-red #areaPinNotes li.edit > input[type='text'],
.theme-red #areaListNotes li.edit > input[type='text'] {
  border-color: var(--red-cc);
}
.theme-red .noteCollapse:hover,
.theme-red .noteCollapse.active {
  border-color: var(--red-stroke);
}
.theme-red #titlebar,
.theme-red #areaPinNotes li:last-child,
.theme-red .noteCollapse {
  border-color: var(--red-stroke-66);
}
.theme-red #btnNew:hover,
.theme-red #btnFilter:hover,
.theme-red #filterbar.active,
.theme-red #filterCompleted:hover, 
.theme-red #filterIncompleted:hover,
.theme-red #txtNew:focus + #btnNew,
.theme-red #areaListLists input.active,
.theme-red #areaSettings.active,
.theme-red .modal-section button,
.theme-red select {
  border-color: var(--red-stroke-cc);
}
.theme-red #panelNote {
  box-shadow: -1px 0px 6px var(--red-stroke-66);
}
.theme-red #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--red-stroke);
}
.theme-red #btnNew,
.theme-red #btnFilter {
  color: var(--red-ee);
}
.theme-red #btnFilter:hover,
.theme-red #filterCompleted:hover, 
.theme-red #filterIncompleted:hover,
.theme-red #areaNew:hover #btnNew,
.theme-red #txtNew:focus + #btnNew,
.theme-red #txtNew:focus + #btnNew:hover,
.theme-red .icon,
.theme-red #areaListLists .listRemove:hover,
.theme-red #areaPinNotes input[type='text'],
.theme-red #areaListNotes input[type='text'],
.theme-red #areaPinNotes li span.noteMoment,
.theme-red #areaListNotes li span.noteMoment {
  color: var(--red-stroke);
}
.theme-red #filterCompleted, 
.theme-red #filterIncompleted,
.theme-red #areaPinNotes li.completed input[type='text'],
.theme-red #areaListNotes li.completed input[type='text'] {
  color: var(--red-stroke-66);
}
.theme-red input[type="range"] {
  accent-color: var(--red);
}
#web.theme-red {
  background-image: radial-gradient(var(--red-66), var(--red));
}
#web.theme-red .panelsContainer {
  box-shadow: 0 0 10px var(--red-stroke);
}

/* orange */
.theme-orange .panelsContainer,
.theme-orange #panelList,
.theme-orange #panelNote .sortable-chosen,
.theme-orange #areaListNotes li.completed input[type="checkbox"]::before,
.theme-orange #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--orange);
}
.theme-orange #areaPinNotes .notePin {
  background-color: var(--orange-33);
}
.theme-orange #filterbar.active {
  background-color: var(--orange-66);
}
.theme-orange #btnFilter.active,
.theme-orange #filterCompleted.active,
.theme-orange #filterIncompleted.active,
.theme-orange #txtNew:focus + #btnNew:hover {
  background-color: var(--orange-stroke-66);
}
.theme-orange,
.theme-orange input[type='checkbox'] {
  border-color: var(--orange);
}
.theme-orange #areaNew,
.theme-orange #areaPinNotes li,
.theme-orange #areaListNotes li {
  border-color: var(--orange-66);
}
.theme-orange #areaNew:hover,
.theme-orange #areaNew:has(#txtNew:focus),
/* .theme-orange #areaPinNotes li:last-child, */
.theme-orange #areaPinNotes li:hover input[type='checkbox'],
.theme-orange #areaListNotes li:hover input[type='checkbox'],
.theme-orange #areaPinNotes li.edit > input[type='text'],
.theme-orange #areaListNotes li.edit > input[type='text'] {
  border-color: var(--orange-cc);
}
.theme-orange .noteCollapse:hover,
.theme-orange .noteCollapse.active {
  border-color: var(--orange-stroke);
}
.theme-orange #titlebar,
.theme-orange #areaPinNotes li:last-child,
.theme-orange .noteCollapse {
  border-color: var(--orange-stroke-66);
}
.theme-orange #btnNew:hover,
.theme-orange #btnFilter:hover,
.theme-orange #filterbar.active,
.theme-orange #filterCompleted:hover, 
.theme-orange #filterIncompleted:hover,
.theme-orange #txtNew:focus + #btnNew,
.theme-orange #areaListLists input.active,
.theme-orange #areaSettings.active,
.theme-orange .modal-section button,
.theme-orange select {
  border-color: var(--orange-stroke-cc);
}
.theme-orange #panelNote {
  box-shadow: -1px 0px 6px var(--orange-stroke-66);
}
.theme-orange #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--orange-stroke);
}
.theme-orange #btnNew,
.theme-orange #btnFilter {
  color: var(--orange-ee);
}
.theme-orange #btnFilter:hover,
.theme-orange #filterCompleted:hover, 
.theme-orange #filterIncompleted:hover,
.theme-orange #areaNew:hover #btnNew,
.theme-orange #txtNew:focus + #btnNew,
.theme-orange #txtNew:focus + #btnNew:hover,
.theme-orange .icon,
.theme-orange #areaListLists .listRemove:hover,
.theme-orange #areaPinNotes input[type='text'],
.theme-orange #areaListNotes input[type='text'],
.theme-orange #areaPinNotes li span.noteMoment,
.theme-orange #areaListNotes li span.noteMoment {
  color: var(--orange-stroke);
}
.theme-orange #filterCompleted, 
.theme-orange #filterIncompleted,
.theme-orange #areaPinNotes li.completed input[type='text'],
.theme-orange #areaListNotes li.completed input[type='text'] {
  color: var(--orange-stroke-66);
}
.theme-orange input[type="range"] {
  accent-color: var(--orange);
}
#web.theme-orange {
  background-image: radial-gradient(var(--orange-66), var(--orange));
}
#web.theme-orange .panelsContainer {
  box-shadow: 0 0 10px var(--orange-stroke);
}

/* amber */
.theme-amber .panelsContainer,
.theme-amber #panelList,
.theme-amber #panelNote .sortable-chosen {
  background-color: var(--amber);
}
.theme-amber #areaPinNotes .notePin {
  background-color: var(--amber-33);
}
.theme-amber #filterbar.active {
  background-color: var(--amber-66);
}
.theme-amber #btnFilter.active,
.theme-amber #filterCompleted.active,
.theme-amber #filterIncompleted.active,
.theme-amber #txtNew:focus + #btnNew:hover {
  background-color: var(--amber-stroke-66);
}
.theme-amber #areaListNotes li.completed input[type="checkbox"]::before,
.theme-amber #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--amber-stroke-cc);
}
.theme-amber,
.theme-amber input[type='checkbox'] {
  border-color: var(--amber-stroke-66);
}
.theme-amber #areaNew,
.theme-amber #areaPinNotes li,
.theme-amber #areaListNotes li {
  border-color: var(--amber-66);
}
.theme-amber #areaNew:hover,
.theme-amber #areaNew:has(#txtNew:focus),
/* .theme-amber #areaPinNotes li:last-child, */
.theme-amber #areaPinNotes li:hover input[type='checkbox'],
.theme-amber #areaListNotes li:hover input[type='checkbox'],
.theme-amber #areaPinNotes li.edit > input[type='text'],
.theme-amber #areaListNotes li.edit > input[type='text'] {
  border-color: var(--amber-cc);
}
.theme-amber .noteCollapse:hover,
.theme-amber .noteCollapse.active {
  border-color: var(--amber-stroke);
}
.theme-amber #titlebar,
.theme-amber #areaPinNotes li:last-child,
.theme-amber .noteCollapse {
  border-color: var(--amber-stroke-66);
}
.theme-amber #btnNew:hover,
.theme-amber #btnFilter:hover,
.theme-amber #filterbar.active,
.theme-amber #filterCompleted:hover, 
.theme-amber #filterIncompleted:hover,
.theme-amber #txtNew:focus + #btnNew,
.theme-amber #areaListLists input.active,
.theme-amber #areaSettings.active,
.theme-amber .modal-section button,
.theme-amber select {
  border-color: var(--amber-stroke-cc);
}
.theme-amber #panelNote {
  box-shadow: -1px 0px 6px var(--amber-stroke-66);
}
.theme-amber #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--amber-stroke);
}
.theme-amber #btnNew,
.theme-amber #btnFilter {
  color: var(--amber-ee);
}
.theme-amber #btnFilter:hover,
.theme-amber #filterCompleted:hover, 
.theme-amber #filterIncompleted:hover,
.theme-amber #areaNew:hover #btnNew,
.theme-amber #txtNew:focus + #btnNew,
.theme-amber #txtNew:focus + #btnNew:hover,
.theme-amber .icon,
.theme-amber #areaListLists .listRemove:hover,
.theme-amber #areaPinNotes input[type='text'],
.theme-amber #areaListNotes input[type='text'],
.theme-amber #areaPinNotes li span.noteMoment,
.theme-amber #areaListNotes li span.noteMoment {
  color: var(--amber-stroke);
}
.theme-amber #filterCompleted, 
.theme-amber #filterIncompleted,
.theme-amber #areaPinNotes li.completed input[type='text'],
.theme-amber #areaListNotes li.completed input[type='text'] {
  color: var(--amber-stroke-66);
}
.theme-amber input[type="range"] {
  accent-color: var(--amber);
}
#web.theme-amber {
  background-image: radial-gradient(var(--amber-66), var(--amber));
}
#web.theme-amber .panelsContainer {
  box-shadow: 0 0 10px var(--amber-stroke);
}

/* green */
.theme-green .panelsContainer,
.theme-green #panelList,
.theme-green #panelNote .sortable-chosen,
.theme-green #areaListNotes li.completed input[type="checkbox"]::before,
.theme-green #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--green);
}
.theme-green #areaPinNotes .notePin {
  background-color: var(--green-33);
}
.theme-green #filterbar.active {
  background-color: var(--green-66);
}
.theme-green #btnFilter.active,
.theme-green #filterCompleted.active,
.theme-green #filterIncompleted.active,
.theme-green #txtNew:focus + #btnNew:hover {
  background-color: var(--green-stroke-66);
}
.theme-green,
.theme-green input[type='checkbox'] {
  border-color: var(--green);
}
.theme-green #areaNew,
.theme-green #areaPinNotes li,
.theme-green #areaListNotes li {
  border-color: var(--green-66);
}
.theme-green #areaNew:hover,
.theme-green #areaNew:has(#txtNew:focus),
/* .theme-green #areaPinNotes li:last-child, */
.theme-green #areaPinNotes li:hover input[type='checkbox'],
.theme-green #areaListNotes li:hover input[type='checkbox'],
.theme-green #areaPinNotes li.edit > input[type='text'],
.theme-green #areaListNotes li.edit > input[type='text'] {
  border-color: var(--green-cc);
}
.theme-green .noteCollapse:hover,
.theme-green .noteCollapse.active {
  border-color: var(--green-stroke);
}
.theme-green #titlebar,
.theme-green #areaPinNotes li:last-child,
.theme-green .noteCollapse {
  border-color: var(--green-stroke-66);
}
.theme-green #btnNew:hover,
.theme-green #btnFilter:hover,
.theme-green #filterbar.active,
.theme-green #filterCompleted:hover, 
.theme-green #filterIncompleted:hover,
.theme-green #txtNew:focus + #btnNew,
.theme-green #areaListLists input.active,
.theme-green #areaSettings.active,
.theme-green .modal-section button,
.theme-green select {
  border-color: var(--green-stroke-cc);
}
.theme-green #panelNote {
  box-shadow: -1px 0px 6px var(--green-stroke-66);
}
.theme-green #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--green-stroke);
}
.theme-green #btnNew,
.theme-green #btnFilter {
  color: var(--green-ee);
}
.theme-green #btnFilter:hover,
.theme-green #filterCompleted:hover, 
.theme-green #filterIncompleted:hover,
.theme-green #areaNew:hover #btnNew,
.theme-green #txtNew:focus + #btnNew,
.theme-green #txtNew:focus + #btnNew:hover,
.theme-green .icon,
.theme-green #areaListLists .listRemove:hover,
.theme-green #areaPinNotes input[type='text'],
.theme-green #areaListNotes input[type='text'],
.theme-green #areaPinNotes li span.noteMoment,
.theme-green #areaListNotes li span.noteMoment {
  color: var(--green-stroke);
}
.theme-green #filterCompleted, 
.theme-green #filterIncompleted,
.theme-green #areaPinNotes li.completed input[type='text'],
.theme-green #areaListNotes li.completed input[type='text'] {
  color: var(--green-stroke-66);
}
.theme-green input[type="range"] {
  accent-color: var(--green);
}
#web.theme-green {
  background-image: radial-gradient(var(--green-66), var(--green));
}
#web.theme-green .panelsContainer {
  box-shadow: 0 0 10px var(--green-stroke);
}

/* teal */
.theme-teal .panelsContainer,
.theme-teal #panelList,
.theme-teal #panelNote .sortable-chosen,
.theme-teal #areaListNotes li.completed input[type="checkbox"]::before,
.theme-teal #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--teal);
}
.theme-teal #areaPinNotes .notePin {
  background-color: var(--teal-33);
}
.theme-teal #filterbar.active {
  background-color: var(--teal-66);
}
.theme-teal #btnFilter.active,
.theme-teal #filterCompleted.active,
.theme-teal #filterIncompleted.active,
.theme-teal #txtNew:focus + #btnNew:hover {
  background-color: var(--teal-stroke-66);
}
.theme-teal,
.theme-teal input[type='checkbox'] {
  border-color: var(--teal);
}
.theme-teal #areaNew,
.theme-teal #areaPinNotes li,
.theme-teal #areaListNotes li {
  border-color: var(--teal-66);
}
.theme-teal #areaNew:hover,
.theme-teal #areaNew:has(#txtNew:focus),
/* .theme-teal #areaPinNotes li:last-child, */
.theme-teal #areaPinNotes li:hover input[type='checkbox'],
.theme-teal #areaListNotes li:hover input[type='checkbox'],
.theme-teal #areaPinNotes li.edit > input[type='text'],
.theme-teal #areaListNotes li.edit > input[type='text'] {
  border-color: var(--teal-cc);
}
.theme-teal .noteCollapse:hover,
.theme-teal .noteCollapse.active {
  border-color: var(--teal-stroke);
}
.theme-teal #titlebar,
.theme-teal #areaPinNotes li:last-child,
.theme-teal .noteCollapse {
  border-color: var(--teal-stroke-66);
}
.theme-teal #btnNew:hover,
.theme-teal #btnFilter:hover,
.theme-teal #filterbar.active,
.theme-teal #filterCompleted:hover, 
.theme-teal #filterIncompleted:hover,
.theme-teal #txtNew:focus + #btnNew,
.theme-teal #areaListLists input.active,
.theme-teal #areaSettings.active,
.theme-teal .modal-section button,
.theme-teal select {
  border-color: var(--teal-stroke-cc);
}
.theme-teal #panelNote {
  box-shadow: -1px 0px 6px var(--teal-stroke-66);
}
.theme-teal #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--teal-stroke);
}
.theme-teal #btnNew,
.theme-teal #btnFilter {
  color: var(--teal-ee);
}
.theme-teal #btnFilter:hover,
.theme-teal #filterCompleted:hover, 
.theme-teal #filterIncompleted:hover,
.theme-teal #areaNew:hover #btnNew,
.theme-teal #txtNew:focus + #btnNew,
.theme-teal #txtNew:focus + #btnNew:hover,
.theme-teal .icon,
.theme-teal #areaListLists .listRemove:hover,
.theme-teal #areaPinNotes input[type='text'],
.theme-teal #areaListNotes input[type='text'],
.theme-teal #areaPinNotes li span.noteMoment,
.theme-teal #areaListNotes li span.noteMoment {
  color: var(--teal-stroke);
}
.theme-teal #filterCompleted, 
.theme-teal #filterIncompleted,
.theme-teal #areaPinNotes li.completed input[type='text'],
.theme-teal #areaListNotes li.completed input[type='text'] {
  color: var(--teal-stroke-66);
}
.theme-teal input[type="range"] {
  accent-color: var(--teal);
}
#web.theme-teal {
  background-image: radial-gradient(var(--teal-66), var(--teal));
}
#web.theme-teal .panelsContainer {
  box-shadow: 0 0 10px var(--teal-stroke);
}

/* violet */
.theme-violet .panelsContainer,
.theme-violet #panelList,
.theme-violet #panelNote .sortable-chosen,
.theme-violet #areaListNotes li.completed input[type="checkbox"]::before,
.theme-violet #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--violet);
}
.theme-violet #areaPinNotes .notePin {
  background-color: var(--violet-33);
}
.theme-violet #filterbar.active {
  background-color: var(--violet-66);
}
.theme-violet #btnFilter.active,
.theme-violet #filterCompleted.active,
.theme-violet #filterIncompleted.active,
.theme-violet #txtNew:focus + #btnNew:hover {
  background-color: var(--violet-stroke-66);
}
.theme-violet,
.theme-violet input[type='checkbox'] {
  border-color: var(--violet);
}
.theme-violet #areaNew,
.theme-violet #areaPinNotes li,
.theme-violet #areaListNotes li {
  border-color: var(--violet-66);
}
.theme-violet #areaNew:hover,
.theme-violet #areaNew:has(#txtNew:focus),
/* .theme-violet #areaPinNotes li:last-child, */
.theme-violet #areaPinNotes li:hover input[type='checkbox'],
.theme-violet #areaListNotes li:hover input[type='checkbox'],
.theme-violet #areaPinNotes li.edit > input[type='text'],
.theme-violet #areaListNotes li.edit > input[type='text'] {
  border-color: var(--violet-cc);
}
.theme-violet .noteCollapse:hover,
.theme-violet .noteCollapse.active {
  border-color: var(--violet-stroke);
}
.theme-violet #titlebar,
.theme-violet #areaPinNotes li:last-child,
.theme-violet .noteCollapse {
  border-color: var(--violet-stroke-66);
}
.theme-violet #btnNew:hover,
.theme-violet #btnFilter:hover,
.theme-violet #filterbar.active,
.theme-violet #filterCompleted:hover, 
.theme-violet #filterIncompleted:hover,
.theme-violet #txtNew:focus + #btnNew,
.theme-violet #areaListLists input.active,
.theme-violet #areaSettings.active,
.theme-violet .modal-section button,
.theme-violet select {
  border-color: var(--violet-stroke-cc);
}
.theme-violet #panelNote {
  box-shadow: -1px 0px 6px var(--violet-stroke-66);
}
.theme-violet #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--violet-stroke);
}
.theme-violet #btnNew,
.theme-violet #btnFilter {
  color: var(--violet-ee);
}
.theme-violet #btnFilter:hover,
.theme-violet #filterCompleted:hover, 
.theme-violet #filterIncompleted:hover,
.theme-violet #areaNew:hover #btnNew,
.theme-violet #txtNew:focus + #btnNew,
.theme-violet #txtNew:focus + #btnNew:hover,
.theme-violet .icon,
.theme-violet #areaListLists .listRemove:hover,
.theme-violet #areaPinNotes input[type='text'],
.theme-violet #areaListNotes input[type='text'],
.theme-violet #areaPinNotes li span.noteMoment,
.theme-violet #areaListNotes li span.noteMoment {
  color: var(--violet-stroke);
}
.theme-violet #filterCompleted, 
.theme-violet #filterIncompleted,
.theme-violet #areaPinNotes li.completed input[type='text'],
.theme-violet #areaListNotes li.completed input[type='text'] {
  color: var(--violet-stroke-66);
}
.theme-violet input[type="range"] {
  accent-color: var(--violet);
}
#web.theme-violet {
  background-image: radial-gradient(var(--violet-66), var(--violet));
}
#web.theme-violet .panelsContainer {
  box-shadow: 0 0 10px var(--violet-stroke);
}

/* purple */
.theme-purple .panelsContainer,
.theme-purple #panelList,
.theme-purple #panelNote .sortable-chosen,
.theme-purple #areaListNotes li.completed input[type="checkbox"]::before,
.theme-purple #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--purple);
}
.theme-purple #areaPinNotes .notePin {
  background-color: var(--purple-33);
}
.theme-purple #filterbar.active {
  background-color: var(--purple-66);
}
.theme-purple #btnFilter.active,
.theme-purple #filterCompleted.active,
.theme-purple #filterIncompleted.active,
.theme-purple #txtNew:focus + #btnNew:hover {
  background-color: var(--purple-stroke-66);
}
.theme-purple,
.theme-purple input[type='checkbox'] {
  border-color: var(--purple);
}
.theme-purple #areaNew,
.theme-purple #areaPinNotes li,
.theme-purple #areaListNotes li {
  border-color: var(--purple-66);
}
.theme-purple #areaNew:hover,
.theme-purple #areaNew:has(#txtNew:focus),
/* .theme-purple #areaPinNotes li:last-child, */
.theme-purple #areaPinNotes li:hover input[type='checkbox'],
.theme-purple #areaListNotes li:hover input[type='checkbox'],
.theme-purple #areaPinNotes li.edit > input[type='text'],
.theme-purple #areaListNotes li.edit > input[type='text'] {
  border-color: var(--purple-cc);
}
.theme-purple .noteCollapse:hover,
.theme-purple .noteCollapse.active {
  border-color: var(--purple-stroke);
}
.theme-purple #titlebar,
.theme-purple #areaPinNotes li:last-child,
.theme-purple .noteCollapse {
  border-color: var(--purple-stroke-66);
}
.theme-purple #btnNew:hover,
.theme-purple #btnFilter:hover,
.theme-purple #filterbar.active,
.theme-purple #filterCompleted:hover, 
.theme-purple #filterIncompleted:hover,
.theme-purple #txtNew:focus + #btnNew,
.theme-purple #areaListLists input.active,
.theme-purple #areaSettings.active,
.theme-purple .modal-section button,
.theme-purple select {
  border-color: var(--purple-stroke-cc);
}
.theme-purple #panelNote {
  box-shadow: -1px 0px 6px var(--purple-stroke-66);
}
.theme-purple #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--purple-stroke);
}
.theme-purple #btnNew,
.theme-purple #btnFilter {
  color: var(--purple-ee);
}
.theme-purple #btnFilter:hover,
.theme-purple #filterCompleted:hover, 
.theme-purple #filterIncompleted:hover,
.theme-purple #areaNew:hover #btnNew,
.theme-purple #txtNew:focus + #btnNew,
.theme-purple #txtNew:focus + #btnNew:hover,
.theme-purple .icon,
.theme-purple #areaListLists .listRemove:hover,
.theme-purple #areaPinNotes input[type='text'],
.theme-purple #areaListNotes input[type='text'],
.theme-purple #areaPinNotes li span.noteMoment,
.theme-purple #areaListNotes li span.noteMoment {
  color: var(--purple-stroke);
}
.theme-purple #filterCompleted, 
.theme-purple #filterIncompleted,
.theme-purple #areaPinNotes li.completed input[type='text'],
.theme-purple #areaListNotes li.completed input[type='text'] {
  color: var(--purple-stroke-66);
}
.theme-purple input[type="range"] {
  accent-color: var(--purple);
}
#web.theme-purple {
  background-image: radial-gradient(var(--purple-66), var(--purple));
}
#web.theme-purple .panelsContainer {
  box-shadow: 0 0 10px var(--purple-stroke);
}

/* pink */
.theme-pink .panelsContainer,
.theme-pink #panelList,
.theme-pink #panelNote .sortable-chosen,
.theme-pink #areaListNotes li.completed input[type="checkbox"]::before,
.theme-pink #areaPinNotes li.completed input[type="checkbox"]::before {
  background-color: var(--pink);
}
.theme-pink #areaPinNotes .notePin {
  background-color: var(--pink-33);
}
.theme-pink #filterbar.active {
  background-color: var(--pink-66);
}
.theme-pink #btnFilter.active,
.theme-pink #filterCompleted.active,
.theme-pink #filterIncompleted.active,
.theme-pink #txtNew:focus + #btnNew:hover {
  background-color: var(--pink-stroke-66);
}
.theme-pink,
.theme-pink input[type='checkbox'] {
  border-color: var(--pink);
}
.theme-pink #areaNew,
.theme-pink #areaPinNotes li,
.theme-pink #areaListNotes li {
  border-color: var(--pink-66);
}
.theme-pink #areaNew:hover,
.theme-pink #areaNew:has(#txtNew:focus),
/* .theme-pink #areaPinNotes li:last-child, */
.theme-pink #areaPinNotes li:hover input[type='checkbox'],
.theme-pink #areaListNotes li:hover input[type='checkbox'],
.theme-pink #areaPinNotes li.edit > input[type='text'],
.theme-pink #areaListNotes li.edit > input[type='text'] {
  border-color: var(--pink-cc);
}
.theme-pink .noteCollapse:hover,
.theme-pink .noteCollapse.active {
  border-color: var(--pink-stroke);
}
.theme-pink #titlebar,
.theme-pink #areaPinNotes li:last-child,
.theme-pink .noteCollapse {
  border-color: var(--pink-stroke-66);
}
.theme-pink #btnNew:hover,
.theme-pink #btnFilter:hover,
.theme-pink #filterbar.active,
.theme-pink #filterCompleted:hover, 
.theme-pink #filterIncompleted:hover,
.theme-pink #txtNew:focus + #btnNew,
.theme-pink #areaListLists input.active,
.theme-pink #areaSettings.active,
.theme-pink .modal-section button,
.theme-pink select {
  border-color: var(--pink-stroke-cc);
}
.theme-pink #panelNote {
  box-shadow: -1px 0px 6px var(--pink-stroke-66);
}
.theme-pink #gutter:hover + #panelNote {
  box-shadow: -1px 0px 6px var(--pink-stroke);
}
.theme-pink #btnNew,
.theme-pink #btnFilter {
  color: var(--pink-ee);
}
.theme-pink #btnFilter:hover,
.theme-pink #filterCompleted:hover, 
.theme-pink #filterIncompleted:hover,
.theme-pink #areaNew:hover #btnNew,
.theme-pink #txtNew:focus + #btnNew,
.theme-pink #txtNew:focus + #btnNew:hover,
.theme-pink .icon,
.theme-pink #areaListLists .listRemove:hover,
.theme-pink #areaPinNotes input[type='text'],
.theme-pink #areaListNotes input[type='text'],
.theme-pink #areaPinNotes li span.noteMoment,
.theme-pink #areaListNotes li span.noteMoment {
  color: var(--pink-stroke);
}
.theme-pink #filterCompleted, 
.theme-pink #filterIncompleted,
.theme-pink #areaPinNotes li.completed input[type='text'],
.theme-pink #areaListNotes li.completed input[type='text'] {
  color: var(--pink-stroke-66);
}
.theme-pink input[type="range"] {
  accent-color: var(--pink);
}
#web.theme-pink {
  background-image: radial-gradient(var(--pink-66), var(--pink));
}
#web.theme-pink .panelsContainer {
  box-shadow: 0 0 10px var(--pink-stroke);
}