@charset "UTF-8";

:root {
  --primary: #222831;
  --primary-dark: #122228;
  --secondary: #30475e;
  --secondary-light: #3a5a7a;
  --error: #f05454;
  --neutral: #dddddd;
  --inactive-text-color: #cccccc;
  --card-color: #2a3039;
  --card-hover-color: #404654;
  --card-divider-color: #666666;
  --btn-text-color: #dddddd;
  --appbar-color: var(--primary);
  --appbar-height: 48px;
  --appbar-padding-vertical: 7.5px;
  --appbar-padding-horizontal: 10px;
  --navrail-color: #18242d;
  --navrail-width: 48px;
  --navrail-padding: 7.5px;
  --card-text-color: var(--neutral);
  --card-text-color-secondary: var(--inactive-text-color);
  --card-padding: 7.5px;
  --card-bottom-padding: 7.5px;
  --gap-tag: 7.5px;
  --gap: 15px;
  --gap-panel-x: 10px;
  --gap-panel-y: 2px;
  --bottomsheet-padding: 20px;
  --bottomsheet-title-color: var(--inactive-text-color);
  --bottomsheet-label-color: var(--inactive-text-color);
  --dialog-padding: 25px;
  --listtile-leading-width: 40px;
  --listtile-trailing-width: 40px;
  --listtile-main-padding: 7.5px;
  --iconbutton-padding: 7.5px;
  --fill-width: 100svw;
  --fill-height: 100svh;
  --nodata-text-color: var(--inactive-text-color);
  --description-color: var(--primary-dark);
  --search-input-color: var(--primary);
  --search-icon-color: var(--inactive-text-color);
  --content-header-height: 40px;
  --progress-bar-color: var(--primary-dark);
  --progress-value-color: var(--secondary);
  /* --tag-color-open: #dddddd;
  --tag-color-close: #aaaaaa; */
  --color-scheme: dark;

  --red: #ff1744;
  --red-alpha: rgba(255, 23, 68, 0.3);
  --pink: #ff4081;
  --pink-alpha: rgba(255, 64, 129, 0.3);
  --purple: #ab47bc;
  --purple-alpha: rgba(171, 71, 184, 0.3);
  --deeppurple: #7e57c2;
  --deeppurple-alpha: rgba(126, 87, 194, 0.3);
  --indigo: #536dfe;
  --indigo-alpha: rgba(83, 109, 254, 0.3);
  --blue: #448aff;
  --blue-alpha: rgba(68, 138, 255, 0.3);
  --lightblue: #00b0ff;
  --lightblue-alpha: rgba(0, 176, 255, 0.3);
  --cyan: #26c6da;
  --cyan-alpha: rgba(38, 198, 218, 0.3);
  --teal: #26a69a;
  --teal-alpha: rgba(38, 166, 154, 0.3);
  --green: #43a047;
  --green-alpha: rgba(67, 160, 71, 0.3);
  --lightgreen: #7cb342;
  --lightgreen-alpha: rgba(124, 179, 66, 0.3);
  --lime: #afb42b;
  --lime-alpha: rgba(175, 180, 43, 0.3);
  --yellow: #fbc02d;
  --yellow-alpha: rgba(251, 192, 45, 0.3);
  --amber: #ffb300;
  --amber-alpha: rgba(255, 179, 0, 0.3);
  --orange: #ff9100;
  --orange-alpha: rgba(255, 145, 0, 0.3);
  --deeporange: #ff5722;
  --deeporange-alpha: rgba(255, 87, 34, 0.3);
  --brown: #8d6e63;
  --brown-alpha: rgba(141, 110, 99, 0.3);
  --grey: #9e9e9e;
  --grey-alpha: rgba(158, 158, 158, 0.3);
  --bluegrey: #78909c;
  --bluegrey-alpha: rgba(120, 144, 156, 0.3);

  font-size: 16px;
}

@media (prefers-color-scheme: light) {
  :root {
    --primary: #e6e6e6;
    --primary-dark: #d4d4d4;
    --neutral: #333333;
    --inactive-text-color: #666666;
    --card-color: #f8f8f8;
    --card-hover-color: #f0f0f0;
    --card-divider-color: #d0d0d0;
    --color-scheme: light;
    --appbar-color: var(--primary);
    --card-text-color: var(--neutral);
    --card-text-color-secondary: var(--inactive-text-color);
    --bottomsheet-title-color: var(--inactive-text-color);
    --bottomsheet-label-color: var(--inactive-text-color);
    --nodata-text-color: var(--inactive-text-color);
    --description-color: var(--primary-dark);
    --search-input-color: var(--primary);
    --search-icon-color: var(--inactive-text-color);
    --progress-bar-color: var(--primary-dark);
    --progress-value-color: var(--secondary);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #222831;
    --primary-dark: #122228;
    --neutral: #dddddd;
    --inactive-text-color: #aaaaaa;
    --card-color: #2a3039;
    --card-hover-color: #404654;
    --card-divider-color: #666666;
    --color-scheme: dark;
    --appbar-color: var(--primary);
    --card-text-color: var(--neutral);
    --card-text-color-secondary: var(--inactive-text-color);
    --bottomsheet-title-color: var(--inactive-text-color);
    --bottomsheet-label-color: var(--inactive-text-color);
    --nodata-text-color: var(--inactive-text-color);
    --description-color: var(--primary-dark);
    --search-input-color: var(--primary);
    --search-icon-color: var(--inactive-text-color);
    --progress-bar-color: var(--primary-dark);
    --progress-value-color: var(--secondary);
  }
}

:root [data-theme='light'] {
  --primary: #e6e6e6;
  --primary-dark: #d4d4d4;
  --neutral: #333333;
  --inactive-text-color: #666666;
  --card-color: #f8f8f8;
  --card-hover-color: #f0f0f0;
  --card-divider-color: #d0d0d0;
  --color-scheme: light;
  --appbar-color: var(--primary);
  --card-text-color: var(--neutral);
  --card-text-color-secondary: var(--inactive-text-color);
  --bottomsheet-title-color: var(--inactive-text-color);
  --bottomsheet-label-color: var(--inactive-text-color);
  --nodata-text-color: var(--inactive-text-color);
  --description-color: var(--primary-dark);
  --search-input-color: var(--primary);
  --search-icon-color: var(--inactive-text-color);
  --progress-bar-color: var(--primary-dark);
  --progress-value-color: var(--secondary);
}

:root [data-theme='dark'] {
  --primary: #222831;
  --primary-dark: #122228;
  --neutral: #dddddd;
  --inactive-text-color: #aaaaaa;
  --card-color: #2a3039;
  --card-hover-color: #404654;
  --card-divider-color: #666666;
  --color-scheme: dark;
  --appbar-color: var(--primary);
  --card-text-color: var(--neutral);
  --card-text-color-secondary: var(--inactive-text-color);
  --bottomsheet-title-color: var(--inactive-text-color);
  --bottomsheet-label-color: var(--inactive-text-color);
  --nodata-text-color: var(--inactive-text-color);
  --description-color: var(--primary-dark);
  --search-input-color: var(--primary);
  --search-icon-color: var(--inactive-text-color);
  --progress-bar-color: var(--primary-dark);
  --progress-value-color: var(--secondary);
}

* {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  color: var(--neutral);
  background-color: var(--primary);
  min-height: var(--fill-height);
  height: var(--fill-height);
}

h1,
h2 {
  font-weight: 500;
}

h1 {
  font-size: 1.15rem;
}

h2 {
  font-size: 1.1rem;
}

a {
  color: var(--neutral);
  text-decoration: none;
}

li {
  list-style: none;
}

progress {
  appearance: none;
  width: 95%;
  height: 100%;
}

progress::-webkit-progress-bar {
  background-color: var(--progress-bar-color);
}

progress.pink::-webkit-progress-value {
  background-color: var(--pink);
}

input {
  color-scheme: var(--color-scheme);
}

.container {
  width: fit-content;
  height: fit-content;
}

.ma {
  margin: var(--gap);
}

.mx {
  margin-left: var(--gap);
  margin-right: var(--gap);
}

.my {
  margin-top: var(--gap);
  margin-bottom: var(--gap);
}

.ml {
  margin-left: var(--gap);
}

.mr {
  margin-right: var(--gap);
}

.mt {
  margin-top: var(--gap);
}

.mb {
  margin-bottom: var(--gap);
}

.pa {
  padding: var(--gap);
}

.px {
  padding-left: var(--gap);
  padding-right: var(--gap);
}

.py {
  padding-top: var(--gap);
  padding-bottom: var(--gap);
}

.pl {
  padding-left: var(--gap);
}

.pr {
  padding-right: var(--gap);
}

.pt {
  padding-top: var(--gap);
}

.pb {
  padding-bottom: var(--gap);
}

.fab {
  position: absolute;
  right: 30px;
  bottom: 30px;
  padding: 13px;
  border-radius: 100%;
  border: none;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  color: var(--btn-text-color);
  background-color: var(--secondary-light);
  z-index: 10;
}

.flex {
  display: flex;
}

.flex_col {
  flex-direction: column;
}

.flex_wrap {
  flex-wrap: wrap;
}

.space_between {
  justify-content: space-between;
}

.justify_end {
  justify-content: end;
}

.align_items_center {
  align-items: center;
}

.pre_wrap {
  white-space: pre-wrap;
}

.gap {
  gap: var(--gap-panel-y) var(--gap-panel-x);
}

.gap_tag {
  padding-top: var(--gap-tag);
  gap: var(--gap-tag) var(--gap-tag);
}

.tag {
  font-size: 0.6rem;
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--btn-text-color);
  font-weight: 500;
}

.outline {
  color: var(--neutral);
  border: 1px solid var(--neutral);
}

/* .open {
  color: var(--tag-color-open);
}

.close {
  color: var(--tag-color-close);
} */

.owner {
  background-color: firebrick;
}

.free {
  background-color: olive;
}

.basic {
  background-color: teal;
}

.business {
  background-color: dodgerblue;
}

.opacity_0 {
  opacity: 0;
}

.opacity_7 {
  opacity: 0.7;
}

.opacity_10 {
  opacity: 1;
}

.card {
  background-color: var(--card-color);
  color: var(--card-text-color);
}

.card_main {
  padding: var(--card-padding);
  width: 100%;
  transition: all 0.3s;
}

.card_bottom {
  width: 100%;
  border-top: 0.1px solid var(--card-divider-color);
  padding: var(--card-bottom-padding) 20px var(--card-bottom-padding) 12px;
  align-items: center;
  justify-content: space-between;
}

.card_bottom_action_icon span {
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: var(--card-divider-color);
  cursor: pointer;
}

.card_bottom_action_text span {
  font-size: 0.8rem;
  line-height: 1.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.3s;
}

.card_bottom_text span {
  font-size: 0.8rem;
  line-height: 1.5rem;
  opacity: 0.7;
}

.card_bottom_icon {
  height: 1.5rem;
}

@media (hover: hover) {
  .card_bottom_action_text span:hover {
    opacity: 1;
  }
}

@media (hover: none) {
  .card_bottom_action_text span:active {
    opacity: 1;
  }
}

.waxing {
  border-radius: 5px 5px 0 0;
}

.waning {
  border-radius: 0 0 5px 5px;
}

.title {
  font-size: 1rem;
  color: var(--card-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--card-text-color-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item_content {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--card-text-color-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description_text {
  white-space: pre-wrap;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--card-text-color-secondary);
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--fill-width);
  height: var(--fill-height);
  background-color: black;
  opacity: 0.7;
  z-index: 100;
}

.transparent {
  opacity: 0;
}

.invisible {
  display: none;
}

.visible {
  display: block;
}

.user_menu_invisible {
  display: none;
}

.user_menu_visible {
  display: contents;
}

.popup_invisible {
  height: 0;
}

.popup_visible {
  height: 200px;
}

dialog {
  background-color: var(--primary);
  padding: var(--dialog-padding);
  color: var(--card-text-color);
  border: none;
  min-width: 240px;
}

dialog::backdrop {
  background-color: rgb(0, 0, 0, 0.7);
}

dialog[open],
dialog[open]::backdrop {
  animation: anm-dialog-open 0.3s ease-out;
}

dialog.hide,
dialog.hide::backdrop {
  animation: anm-dialog-close 0.3s ease-out;
}

@keyframes anm-dialog-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes anm-dialog-close {
  to {
    opacity: 0;
  }
}

.dialog_message {
  display: block;
  height: 30px;
}

.bottomsheet_invisible {
  height: 0;
}

.bottomsheet_visible {
  height: 95svh;
}

.circle {
  border-radius: 100%;
}

.nav_rail {
  width: var(--navrail-width);
  height: var(--fill-height);
  /* border-right: 1px solid var(--secondary); */
  background-color: var(--navrail-color);
  padding: var(--navrail-padding);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
}

.nav_rail_brand {
  padding-bottom: var(--navrail-padding);
  /* border-bottom: 1px solid var(--secondary); */
}

.nav_rail_brand .nav_rail_item {
  transition: all 0.3s;
  cursor: pointer;
}

.nav_rail_brand .logo {
  padding: 5px 2px;
}

@media (hover: hover) {
  .nav_rail_brand .nav_rail_item:hover {
    filter: brightness(1.5);
  }
}

@media (hover: none) {
  .nav_rail_brand .nav_rail_item:active {
    filter: brightness(1.5);
  }
}

.nav_rail_item {
  display: flex;
  width: calc(var(--navrail-width) - (var(--navrail-padding) * 2) - 1px);
  height: calc(var(--navrail-width) - (var(--navrail-padding) * 2) - 1px);
  justify-content: center;
  align-items: center;
  color: var(--secondary-light);
}

.nav_rail_item_tooltip {
  display: none;
  background: black;
  color: #eeeeee;
  padding: 3px 10px;
  font-size: 0.8rem;
  border-radius: 5px;
  position: absolute;
  left: var(--navrail-width);
  z-index: 12;
  width: max-content;
}

.nav_rail_item_icon {
  pointer-events: none;
}

.nav_rail_items {
  margin-top: var(--navrail-padding);
}

.nav_rail_items .nav_rail_item {
  margin-top: var(--navrail-padding);
  margin-bottom: calc(var(--navrail-padding) * 2);
  transition: all 0.3s;
  border-radius: 0px;
  cursor: pointer;
}

.nav_rail_items .nav_rail_item_active {
  background-color: var(--secondary-light);
  color: var(--btn-text-color);
}

@media (hover: hover) {
  .nav_rail_items .nav_rail_item:hover {
    background-color: var(--secondary-light);
    color: var(--btn-text-color);
  }

  .nav_rail_item:hover .nav_rail_item_tooltip {
    display: inline-block;
  }
}

@media (hover: none) {
  .nav_rail_items .nav_rail_item:active {
    background-color: var(--secondary-light);
    color: var(--btn-text-color);
  }
}

.app_bar {
  width: calc(var(--fill-width) - var(--navrail-width));
  height: var(--appbar-height);
  border-bottom: 0.5px solid var(--secondary);
  background-color: var(--appbar-color);
  position: absolute;
  top: 0;
  left: var(--navrail-width);
  justify-content: space-between;
  padding: var(--appbar-padding-vertical) var(--appbar-padding-horizontal);
  z-index: 11;
}

.app_bar p {
  line-height: calc(var(--appbar-height) - (var(--appbar-padding-vertical) * 2) - 1px);
  vertical-align: middle;
  padding: 0;
}

.app_bar img.avatar {
  height: calc(var(--appbar-height) - (var(--appbar-padding-vertical) * 2) - 5px);
  cursor: pointer;
  margin: 2px 0;
}

.app_bar .popup_user_menu {
  width: 200px;
  transition: all 0.3s;
  background-color: var(--card-color);
  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 0.1));
  position: absolute;
  top: var(--appbar-padding-vertical);
  right: var(--appbar-padding-horizontal);
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  z-index: 101;
}

.app_bar .popup_user_menu_item {
  padding: 10px;
}

.bottomsheet {
  width: 100%;
  transition: all 0.3s;
  background-color: var(--primary);
  position: absolute;
  left: 0;
  bottom: 0px;
  align-items: center;
  overflow: hidden;
  padding: var(--bottomsheet-padding);
  z-index: 101;
}

.bottomsheet_item {
  position: relative;
  margin: 20px 0;
  width: 95%;
}

.bottomsheet_item label {
  color: var(--bottomsheet-label-color);
  position: absolute;
  height: 24px;
  line-height: 24px;
  top: 0;
  left: 0px;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
}

.bottomsheet_item label.active {
  top: -20px;
  left: 0;
  font-size: 0.7rem;
}

.bottomsheet_item input,
.bottomsheet_item textarea {
  width: 100%;
  padding: 0;
  font-size: 1rem;
  background-color: var(--primary);
  color: var(--neutral);
  border: none;
  outline: none;
  border-bottom: 1px solid var(--secondary);
  transition: border 0.3s;
  line-height: 24px;
  border-radius: 0;
}

.bottomsheet_item input {
  height: 1.8rem;
  padding-bottom: 5px;
}

.bottomsheet_item textarea {
  overflow-y: scroll;
  resize: none;
  display: block;
}

.bottomsheet_item input:focus,
.bottomsheet_item textarea:focus {
  border-bottom: 1px solid var(--secondary-light);
}

.bottomsheet_item input.has_error,
.bottomsheet_item textarea.has_error {
  border-bottom: 1px solid var(--error);
}

.bottomsheet_item .input_error {
  color: var(--error);
  font-size: 0.8rem;
  height: 0.8rem;
  display: block;
  padding-top: 5px;
}

.bottomsheet_item .counter span {
  font-size: 0.8rem;
  color: var(--bottomsheet-label-color);
}

.bottomsheet_delete {
  width: 95%;
  height: 100%;
}

.color_picker {
  gap: 3px 3px;
  margin-top: 5px;
}

.color_picker_container {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
}

.color_picker_radio {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.color_picker_radio * {
  pointer-events: none;
}

.color_picker_tile {
  width: 100%;
  height: 100%;
  color: var(--btn-text-color);
}

.color_picker_check {
  opacity: 0;
  font-size: 1.8rem;
}

.color_picker_radio:checked ~ * .color_picker_check {
  opacity: 1;
}

.content {
  margin-top: var(--appbar-height);
  margin-left: var(--navrail-width);
  padding: 0 var(--appbar-padding-horizontal);
  width: calc(var(--fill-width) - var(--navrail-width));
  height: calc(var(--fill-height) - var(--appbar-height));
  overflow-y: auto;
}

.content p,
.content span,
.content dd {
  overflow-wrap: anywhere;
}

.content_header {
  position: absolute;
  top: var(--appbar-height);
  left: var(--navrail-width);
  padding: var(--appbar-padding-vertical) var(--appbar-padding-horizontal) 0;
  width: calc(var(--fill-width) - var(--navrail-width));
  z-index: 9;
  background-color: var(--primary);
}

.content_header_nav {
  width: calc(100% - 30px);
}

.with_header {
  margin-top: calc(var(--appbar-height) + 40px);
  height: calc(var(--fill-height) - var(--appbar-height) - 40px);
}

.with_fab {
  padding-bottom: 85px;
}

.center_middle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

.icon_text {
  display: inline-block;
  vertical-align: middle;
}

img.icon_text {
  margin: 0 10px 0 0;
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon24 {
  width: 24px;
  height: 24px;
}

.fab,
.btn,
.btn_before,
.btn_setting {
  cursor: pointer;
  transition: all 0.3s;
  color: var(--btn-text-color);
  will-change: filter;
}

.btn {
  padding: 5px 15px;
  width: fit-content;
  height: fit-content;
  background-color: var(--secondary);
  border-radius: 5px;
  border: 1px solid var(--secondary-light);
  font-size: 0.9rem;
}

.btn span {
  font-size: 0.9rem;
}

.btn * {
  pointer-events: none;
}

@media (hover: hover) {
  .btn:hover {
    background-color: var(--secondary-light);
  }
}

@media (hover: none) {
  .btn:active {
    background-color: var(--secondary-light);
  }
}

.btn_signin {
  background-color: var(--secondary);
  font-size: 1rem;
}

.btn_before {
  font-size: 1.6rem;
  color: var(--neutral);
}

.btn_setting {
  border-radius: 100%;
  background-color: var(--secondary);
  font-size: 0.8rem;
  padding: 3.5px;
  margin: 3px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}

.btn_open_all {
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.btn_open_back {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 20px;
  background-color: var(--primary);
}

.btn_open_front {
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 20px;
  background-color: var(--primary);
}

@media (hover: hover) {
  .fab:hover,
  .btn_before:hover,
  .btn_setting:hover,
  .btn_open_all:hover {
    filter: brightness(1.4);
  }
}

@media (hover: none) {
  .fab:active,
  .btn_before:active,
  .btn_setting:active,
  .btn_open_all:active {
    filter: brightness(1.4);
  }
}

.textbtn {
  border: none;
  cursor: pointer;
  display: flex;
  transition: all 0.3s;
}

.textbtn * {
  pointer-events: none;
}

.gap_textbtn {
  gap: 0 30px;
}

.textbtn_delete {
  background: transparent;
}

.textbtn_delete * {
  font-size: 0.9rem;
  color: var(--error);
}

.textbtn_delete *.material-icons {
  font-size: 1.2rem;
}

.textbtn_modal {
  font-size: 0.9rem;
  background: transparent;
  color: var(--card-text-color);
  opacity: 0.7;
}

@media (hover: hover) {
  .textbtn_modal:hover {
    opacity: 1;
  }
}

@media (hover: none) {
  .textbtn_modal:active {
    opacity: 1;
  }
}

.btn_star {
  transition: all 0.1s;
}

.selectable_card {
  cursor: pointer;
}

.listtile_icon {
  display: flex;
  padding: var(--iconbutton-padding);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.icon_btn {
  transition: all 0.3s;
  color: var(--card-text-color);
  opacity: 0.7;
  cursor: pointer;
  border-radius: 5px;
}

@media (hover: hover) {
  .selectable_card:hover {
    background-color: var(--card-hover-color);
  }
  .icon_btn:hover {
    opacity: 1;
    background-color: #666666;
  }
}

@media (hover: none) {
  .selectable_card:active {
    background-color: var(--card-hover-color);
  }
  .icon_btn:active {
    opacity: 1;
    background-color: #30475e;
  }
}

.nodata {
  font-size: 0.9rem;
  color: var(--nodata-text-color);
}

.description {
  border-radius: 0px;
  background: var(--description-color);
}

.caption_page {
  color: var(--neutral);
  font-size: 1rem;
  line-height: 1.6rem;
  vertical-align: middle;
  height: 1.6rem;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search_box {
  position: relative;
  width: 100%;
}

.search_icon {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--search-icon-color);
  font-size: 1.1rem;
  padding: 6px 0 6px 5px;
}

select.dropdown {
  appearance: none;
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  background-color: var(--search-input-color);
  color: var(--neutral);
  padding: 0 40px 0 10px;
  width: fit-content;
  border: none;
  outline: 1px solid var(--secondary);
  border-radius: 0;
}

select.dropdown:focus {
  outline: 2px solid var(--secondary-light);
}

select.dropdown_bottomsheet {
  font-size: 1rem;
  padding: 0 40px 0 0;
  outline: none;
  border-bottom: 1px solid var(--secondary);
  border-radius: 0;
}

select.dropdown_bottomsheet:focus {
  outline: none;
  border-bottom: 1px solid var(--secondary-light);
}

.dropdown_container {
  position: relative;
  width: fit-content;
}

.dropdown_container::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--secondary-light);
  content: '';
  position: absolute;
  right: 9px;
  top: calc(50% - (6px / 2));
  width: 0;
  pointer-events: none;
}

input[type='search'] {
  height: 30px;
  line-height: 30px;
  font-size: 0.8rem;
  background-color: var(--search-input-color);
  border-radius: 0;
  color: var(--neutral);
  appearance: textfield;
  padding: 5px 5px 5px 30px;
  width: calc(100% - 1px);
  outline: 1px solid var(--secondary);
  border: none;
}

input[type='search']:focus {
  outline: 2px solid var(--secondary-light);
}

input[type='search']::-webkit-search-cancel-button {
  color: var(--neutral);
  appearance: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}

.listtile_main {
  width: 100%;
  padding: var(--listtile-main-padding);
}

.listtile_main_with_leading {
  width: calc(100% - var(--listtile-leading-width));
  padding: var(--listtile-main-padding);
}

.listtile_main_with_trailing {
  width: calc(100% - var(--listtile-trailing-width));
  padding: var(--listtile-main-padding);
}

.listtile_trailing {
  width: var(--listtile-trailing-width);
}

.listtile_active {
  background-color: var(--card-hover-color);
}

.list_invitation {
  justify-content: space-between;
  align-items: center;
}

.list_invitation_main {
  width: calc(100% - 200px);
}

.list_invitation_trailing {
  width: fit-content;
}

.list,
.tile {
  width: 100%;
}

@media screen and (min-width: 640px) {
  .tile {
    width: calc((100% - var(--gap-panel-x)) / 2);
  }
}

@media screen and (min-width: 1280px) {
  .tile {
    width: calc((100% - (var(--gap-panel-x) * 2)) / 3);
  }
}

.item_meta dt {
  color: var(--nodata-text-color);
  font-size: 0.75rem;
}

.task_progress_wrapper {
  height: 40px;
}

.task_cnt {
  width: 50px;
}

.task_cnt_done {
  font-size: 0.8rem;
}

.task_cnt_per {
  width: 50%;
  border: 0.5px solid var(--card-text-color);
}

.task_cnt_total {
  font-size: 0.8rem;
}

.task_progress {
  width: calc(100% - 50px);
  height: 10px;
}

input.due_date {
  font-size: 1rem;
  width: 125px;
}

input.due_time {
  font-size: 1rem;
  width: 125px;
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

input[type='date']::-webkit-inner-spin-button,
input[type='date']::-webkit-clear-button,
input[type='time']::-webkit-inner-spin-button,
input[type='time']::-webkit-clear-button {
  -webkit-appearance: none;
}

.checkbox_wrap {
  display: block;
  position: relative !important;
  padding-left: 30px;
  margin: 4px 0 8px 0;
  cursor: pointer;
  font-size: 14px;
  width: fit-content;
  user-select: none;
}

.checkbox_wrap input {
  display: none;
}

.checkbox_wrap .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background: var(--secondary);
  border: 1px solid var(--secondary-light);
  border-radius: 3px;
  box-sizing: border-box;
}

.checkbox_wrap .checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox_wrap input:checked + .checkmark {
  background-color: var(--secondary-light);
}

.checkbox_wrap input:checked + .checkmark:after {
  display: block;
}

.loading {
  display: inline-block;
  height: 70px;
  width: 70px;
  animation: anm-TL-move2 2s infinite linear;
}

.loading::before {
  content: '';
  left: 5px;
  position: absolute;
  height: 0;
  width: 0;
  border-top: 50px solid var(--secondary-light);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  animation: anm-TL-move1 2s infinite linear;
}

@keyframes anm-TL-move1 {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes anm-TL-move2 {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(360deg);
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: var(--primary);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary);
}
::-webkit-scrollbar-corner {
  background: var(--primary);
}

.red {
  background-color: var(--red);
}
.pink {
  background-color: var(--pink);
}
.purple {
  background-color: var(--purple);
}
.deeppurple {
  background-color: var(--deeppurple);
}
.indigo {
  background-color: var(--indigo);
}
.blue {
  background-color: var(--blue);
}
.lightblue {
  background-color: var(--lightblue);
}
.cyan {
  background-color: var(--cyan);
}
.teal {
  background-color: var(--teal);
}
.green {
  background-color: var(--green);
}
.lightgreen {
  background-color: var(--lightgreen);
}
.lime {
  background-color: var(--lime);
}
.yellow {
  background-color: var(--yellow);
}
.amber {
  background-color: var(--amber);
}
.orange {
  background-color: var(--orange);
}
.deeporange {
  background-color: var(--deeporange);
}
.brown {
  background-color: var(--brown);
}
.grey {
  background-color: var(--grey);
}
.bluegrey {
  background-color: var(--bluegrey);
}
.red_alpha {
  background-color: var(--red-alpha);
  color: var(--neutral);
}
.pink_alpha {
  background-color: var(--pink-alpha);
  color: var(--neutral);
}
.purple_alpha {
  background-color: var(--purple-alpha);
  color: var(--neutral);
}
.deeppurple_alpha {
  background-color: var(--deeppurple-alpha);
  color: var(--neutral);
}
.indigo_alpha {
  background-color: var(--indigo-alpha);
  color: var(--neutral);
}
.blue_alpha {
  background-color: var(--blue-alpha);
  color: var(--neutral);
}
.lightblue_alpha {
  background-color: var(--lightblue-alpha);
  color: var(--neutral);
}
.cyan_alpha {
  background-color: var(--cyan-alpha);
  color: var(--neutral);
}
.teal_alpha {
  background-color: var(--teal-alpha);
  color: var(--neutral);
}
.green_alpha {
  background-color: var(--green-alpha);
  color: var(--neutral);
}
.lightgreen_alpha {
  background-color: var(--lightgreen-alpha);
  color: var(--neutral);
}
.lime_alpha {
  background-color: var(--lime-alpha);
  color: var(--neutral);
}
.yellow_alpha {
  background-color: var(--yellow-alpha);
  color: var(--neutral);
}
.amber_alpha {
  background-color: var(--amber-alpha);
  color: var(--neutral);
}
.orange_alpha {
  background-color: var(--orange-alpha);
  color: var(--neutral);
}
.deeporange_alpha {
  background-color: var(--deeporange-alpha);
  color: var(--neutral);
}
.brown_alpha {
  background-color: var(--brown-alpha);
  color: var(--neutral);
}
.grey_alpha {
  background-color: var(--grey-alpha);
  color: var(--neutral);
}
.bluegrey_alpha {
  background-color: var(--bluegrey-alpha);
  color: var(--neutral);
}
.red_color {
  color: var(--red) !important;
}
.pink_color {
  color: var(--pink) !important;
}
.purple_color {
  color: var(--purple) !important;
}
.deeppurple_color {
  color: var(--deeppurple) !important;
}
.indigo_color {
  color: var(--indigo) !important;
}
.blue_color {
  color: var(--blue) !important;
}
.lightblue_color {
  color: var(--lightblue) !important;
}
.cyan_color {
  color: var(--cyan) !important;
}
.teal_color {
  color: var(--teal) !important;
}
.green_color {
  color: var(--green) !important;
}
.lightgreen_color {
  color: var(--lightgreen) !important;
}
.lime_color {
  color: var(--lime) !important;
}
.yellow_color {
  color: var(--yellow) !important;
}
.amber_color {
  color: var(--amber) !important;
}
.orange_color {
  color: var(--orange) !important;
}
.deeporange_color {
  color: var(--deeporange) !important;
}
.brown_color {
  color: var(--brown) !important;
}
.grey_color {
  color: var(--grey) !important;
}
.bluegrey_color {
  color: var(--bluegrey) !important;
}
.red_border {
  border-left: 10px solid var(--red);
}
.pink_border {
  border-left: 10px solid var(--pink);
}
.purple_border {
  border-left: 10px solid var(--purple);
}
.deeppurple_border {
  border-left: 10px solid var(--deeppurple);
}
.indigo_border {
  border-left: 10px solid var(--indigo);
}
.blue_border {
  border-left: 10px solid var(--blue);
}
.lightblue_border {
  border-left: 10px solid var(--lightblue);
}
.cyan_border {
  border-left: 10px solid var(--cyan);
}
.teal_border {
  border-left: 10px solid var(--teal);
}
.green_border {
  border-left: 10px solid var(--green);
}
.lightgreen_border {
  border-left: 10px solid var(--lightgreen);
}
.lime_border {
  border-left: 10px solid var(--lime);
}
.yellow_border {
  border-left: 10px solid var(--yellow);
}
.amber_border {
  border-left: 10px solid var(--amber);
}
.orange_border {
  border-left: 10px solid var(--orange);
}
.deeporange_border {
  border-left: 10px solid var(--deeporange);
}
.brown_border {
  border-left: 10px solid var(--brown);
}
.grey_border {
  border-left: 10px solid var(--grey);
}
.bluegrey_border {
  border-left: 10px solid var(--bluegrey);
}
progress.progress_red::-webkit-progress-bar {
  background-color: var(--red-alpha);
}
progress.progress_pink::-webkit-progress-bar {
  background-color: var(--pink-alpha);
}
progress.progress_purple::-webkit-progress-bar {
  background-color: var(--purple-alpha);
}
progress.progress_deeppurple::-webkit-progress-bar {
  background-color: var(--deeppurple-alpha);
}
progress.progress_indigo::-webkit-progress-bar {
  background-color: var(--indigo-alpha);
}
progress.progress_blue::-webkit-progress-bar {
  background-color: var(--blue-alpha);
}
progress.progress_lightblue::-webkit-progress-bar {
  background-color: var(--lightblue-alpha);
}
progress.progress_cyan::-webkit-progress-bar {
  background-color: var(--cyan-alpha);
}
progress.progress_teal::-webkit-progress-bar {
  background-color: var(--teal-alpha);
}
progress.progress_green::-webkit-progress-bar {
  background-color: var(--green-alpha);
}
progress.progress_lightgreen::-webkit-progress-bar {
  background-color: var(--lightgreen-alpha);
}
progress.progress_lime::-webkit-progress-bar {
  background-color: var(--lime-alpha);
}
progress.progress_yellow::-webkit-progress-bar {
  background-color: var(--yellow-alpha);
}
progress.progress_amber::-webkit-progress-bar {
  background-color: var(--amber-alpha);
}
progress.progress_orange::-webkit-progress-bar {
  background-color: var(--orange-alpha);
}
progress.progress_deeporange::-webkit-progress-bar {
  background-color: var(--deeporange-alpha);
}
progress.progress_brown::-webkit-progress-bar {
  background-color: var(--brown-alpha);
}
progress.progress_grey::-webkit-progress-bar {
  background-color: var(--grey-alpha);
}
progress.progress_bluegrey::-webkit-progress-bar {
  background-color: var(--bluegrey-alpha);
}
progress.progress_red::-webkit-progress-value {
  background-color: var(--red);
}
progress.progress_pink::-webkit-progress-value {
  background-color: var(--pink);
}
progress.progress_purple::-webkit-progress-value {
  background-color: var(--purple);
}
progress.progress_deeppurple::-webkit-progress-value {
  background-color: var(--deeppurple);
}
progress.progress_indigo::-webkit-progress-value {
  background-color: var(--indigo);
}
progress.progress_blue::-webkit-progress-value {
  background-color: var(--blue);
}
progress.progress_lightblue::-webkit-progress-value {
  background-color: var(--lightblue);
}
progress.progress_cyan::-webkit-progress-value {
  background-color: var(--cyan);
}
progress.progress_teal::-webkit-progress-value {
  background-color: var(--teal);
}
progress.progress_green::-webkit-progress-value {
  background-color: var(--green);
}
progress.progress_lightgreen::-webkit-progress-value {
  background-color: var(--lightgreen);
}
progress.progress_lime::-webkit-progress-value {
  background-color: var(--lime);
}
progress.progress_yellow::-webkit-progress-value {
  background-color: var(--yellow);
}
progress.progress_amber::-webkit-progress-value {
  background-color: var(--amber);
}
progress.progress_orange::-webkit-progress-value {
  background-color: var(--orange);
}
progress.progress_deeporange::-webkit-progress-value {
  background-color: var(--deeporange);
}
progress.progress_brown::-webkit-progress-value {
  background-color: var(--brown);
}
progress.progress_grey::-webkit-progress-value {
  background-color: var(--grey);
}
progress.progress_bluegrey::-webkit-progress-value {
  background-color: var(--bluegrey);
}