:root {
  --calendar-accent: #e65d6f;
  --calendar-accent-soft: #f8d9de;
  --calendar-accent-strong: #cf4358;
  --calendar-ink: #30323a;
  --calendar-muted: #6f737b;
  --calendar-line: #e2e4e7;
  --calendar-line-soft: #f0f1f3;
  --calendar-surface: #ffffff;
  --calendar-canvas: #fafbfc;
  --calendar-ribbon: #f7f7f8;
  --calendar-hour-height: 68px;
  --calendar-slot-height: 34px;
}

.outlook-calendar {
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  min-height: 38rem;
  display: flex;
  margin: -0.5rem;
  overflow: hidden;
  color: var(--calendar-ink);
  background: var(--calendar-canvas);
  font-family: "Segoe UI", Arial, sans-serif;
}

.outlook-calendar button,
.outlook-calendar input {
  font: inherit;
}

.calendar-app {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.calendar-ribbon {
  position: relative;
  flex: 0 0 auto;
  background: var(--calendar-ribbon);
  border-bottom: 1px solid #d7d9dc;
  box-shadow: 0 1px 3px rgba(20, 25, 30, 0.1);
  z-index: 130;
}

.calendar-ribbon-tabs {
  height: 2.1rem;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0 0.45rem;
}

.calendar-menu-button,
.calendar-ribbon-tab {
  border: 0;
  background: transparent;
  color: #4d5055;
  cursor: pointer;
}

.calendar-menu-button {
  width: 2.4rem;
  display: grid;
  place-items: center;
}

.calendar-menu-button svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.calendar-ribbon-tab {
  padding: 0 0.75rem;
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
}

.calendar-ribbon-tab.selected {
  color: #1e2025;
  border-bottom-color: var(--calendar-accent);
  font-weight: 600;
}

.calendar-ribbon-actions {
  min-height: 5rem;
  display: flex;
  align-items: stretch;
  padding: 0.4rem 0.65rem 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.calendar-ribbon-actions[hidden] {
  display: none;
}

.calendar-view-ribbon {
  overflow: visible;
}

.calendar-command,
.calendar-command-group {
  position: relative;
  flex: 0 0 auto;
}

.calendar-command {
  min-width: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  padding: 0.2rem 0.45rem 1rem;
  color: #4f5358;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.2rem;
  background: transparent;
  cursor: pointer;
  font-size: 0.69rem;
  line-height: 1.05;
  text-align: center;
}

.calendar-command:hover:not(:disabled),
.calendar-command.selected {
  background: #eceeef;
  border-color: #bfc3c7;
}

.calendar-command:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.calendar-command-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid #a9adb1;
  border-radius: 0.25rem;
  background: #fff;
}

.calendar-command-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-command small,
.calendar-command-group>small {
  position: absolute;
  bottom: 0.05rem;
  left: 50%;
  transform: translateX(-50%);
  color: #8a8e94;
  font-size: 0.54rem;
  white-space: nowrap;
}

.calendar-new-event {
  width: 3.4rem;
  margin-right: 0.55rem;
  border-right: 1px solid #dedfe1;
  border-radius: 0;
}

.calendar-command-group {
  display: flex;
  padding-right: 0.55rem;
  margin-right: 0.45rem;
  border-right: 1px solid #dedfe1;
}

.calendar-command-group .calendar-command {
  min-width: 3rem;
}

.calendar-command-dropdown {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.calendar-command-with-caret {
  padding-bottom: 0.85rem;
}

.calendar-command-caret {
  margin-top: -0.1rem;
  font-size: 0.75rem;
  line-height: 0.7;
}

.calendar-command-menu {
  position: absolute;
  left: 0;
  top: calc(100% - 0.15rem);
  z-index: 140;
  min-width: 12rem;
  padding: 0.25rem 0;
  color: #282b30;
  border: 1px solid #e4e5e7;
  border-radius: 0.15rem;
  background: #fff;
  box-shadow: 0 5px 16px rgba(30, 34, 39, 0.16);
}

.calendar-command-menu[hidden] {
  display: none;
}

.calendar-command-menu button {
  position: relative;
  width: 100%;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem 0.35rem 2.4rem;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.calendar-command-menu button:hover,
.calendar-command-menu button:focus-visible {
  background: #f0f0f1;
  outline: none;
}

.calendar-command-menu button:disabled,
.calendar-event-context-menu button:disabled {
  color: #9aa1a8;
  background: transparent;
  cursor: not-allowed;
}

.calendar-command-menu button.selected::before {
  content: "✓";
  position: absolute;
  left: 0.9rem;
  font-size: 1rem;
}

.calendar-day-menu {
  min-width: 8.5rem;
}

.calendar-day-menu button {
  padding-left: 1.4rem;
}

.calendar-time-scale-menu {
  left: -0.25rem;
  min-width: 24rem;
  font-size: 0.78rem;
}

.calendar-time-scale-menu button {
  min-height: 2.6rem;
}

.calendar-view-arrange-group {
  margin-left: 0.15rem;
}

.calendar-saved-icon {
  color: #a200b8;
}

.calendar-help-ribbon {
  min-height: 5rem;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.calendar-workspace {
  min-height: 0;
  flex: 1;
  display: flex;
  background: var(--calendar-surface);
}

.calendar-sidebar {
  width: 13.5rem;
  flex: 0 0 13.5rem;
  overflow-y: auto;
  padding: 0.55rem 0.8rem 1rem;
  background: #fbfbfc;
  border-right: 1px solid var(--calendar-line);
  transition: margin-left 0.2s ease, visibility 0.2s ease;
}

.calendar-sidebar.collapsed {
  margin-left: -13.5rem;
  visibility: hidden;
}

.mini-calendar header {
  height: 2rem;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
}

.mini-calendar header button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #4c5055;
}

.mini-calendar header>button:not(.mini-calendar-title) {
  font-size: 1.25rem;
}

.mini-calendar-title {
  font-size: 0.78rem;
  font-weight: 650;
}

.mini-calendar-weekdays,
.mini-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.mini-calendar-weekdays {
  padding: 0.2rem 0;
  color: #45494e;
  font-size: 0.63rem;
  font-weight: 600;
}

.mini-calendar-day {
  min-width: 0;
  height: 1.45rem;
  display: grid;
  place-items: center;
  color: #3b3f45;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.64rem;
}

.mini-calendar-day.outside {
  color: #a1a5aa;
}

.mini-calendar-day.in-range {
  color: #2e3035;
  background: var(--calendar-accent-soft);
  border-top: 1px solid var(--calendar-accent);
  border-bottom: 1px solid var(--calendar-accent);
}

.mini-calendar-day.range-start {
  color: #fff;
  background: var(--calendar-accent);
  border-radius: 50% 0 0 50%;
}

.mini-calendar-day.range-end {
  border-radius: 0 50% 50% 0;
}

.mini-calendar-day.selected-day,
.mini-calendar-day.today {
  font-weight: 700;
}

.mini-calendar-day.selected-day:not(.range-start) {
  outline: 1px solid var(--calendar-accent);
  outline-offset: -2px;
  border-radius: 50%;
}

.calendar-add-calendar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0;
  margin-top: 0.4rem;
  color: var(--calendar-accent-strong);
  border: 0;
  border-top: 1px solid #bfc2c6;
  border-bottom: 1px solid #bfc2c6;
  background: transparent;
  cursor: pointer;
  font-size: 0.78rem;
}

.calendar-add-calendar svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-list-section {
  margin-top: 1.6rem;
}

.calendar-list-heading {
  width: 100%;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.78rem;
}

.calendar-chevron {
  font-size: 1rem;
  transition: transform 0.18s ease;
}

.calendar-list-heading[aria-expanded="false"] .calendar-chevron {
  transform: rotate(-90deg);
}

.calendar-list {
  padding: 0.65rem 0;
}

.calendar-list[hidden] {
  display: none;
}

.calendar-list label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.75rem;
}

.calendar-list-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  margin: 0 -0.35rem;
  padding: 0 0.25rem 0 0.35rem;
  border-radius: 0.15rem;
}

.calendar-list-row:hover,
.calendar-list-row:focus-within {
  background: #f0f0f1;
}

.calendar-list-row .calendar-list-label {
  min-width: 0;
  flex: 1;
}

.calendar-list-row .calendar-list-label span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-list-menu-toggle {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #34373b;
  border: 0;
  border-radius: 0.2rem;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
}

.calendar-list-row:hover .calendar-list-menu-toggle,
.calendar-list-row:focus-within .calendar-list-menu-toggle,
.calendar-list-menu-toggle[aria-expanded="true"] {
  opacity: 1;
}

.calendar-list-menu-toggle:hover,
.calendar-list-menu-toggle:focus-visible,
.calendar-list-menu-toggle[aria-expanded="true"] {
  background: #f4c6cf;
  outline: none;
}

.calendar-list input {
  position: absolute;
  opacity: 0;
}

.calendar-color-dot {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--calendar-accent);
}

.calendar-list input:checked+.calendar-color-dot::after {
  content: "✓";
  color: #fff;
  font-size: 0.62rem;
}

.calendar-custom-calendar-menu {
  position: fixed;
  z-index: 120;
  min-width: 18rem;
  padding: 0.25rem 0;
  color: #3b3f44;
  border: 1px solid #d8dadd;
  border-radius: 0.2rem;
  background: #fff;
  box-shadow: 0 9px 24px rgba(25, 30, 35, 0.2);
  font-size: 0.86rem;
}

.calendar-custom-calendar-menu[hidden],
.calendar-custom-calendar-submenu-panel[hidden] {
  display: none;
}

.calendar-custom-calendar-menu button {
  width: 100%;
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 1rem;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.calendar-custom-calendar-menu button:not(:disabled):hover,
.calendar-custom-calendar-menu button:not(:disabled):focus-visible {
  background: #f0f0f1;
  outline: none;
}

.calendar-custom-calendar-menu button:disabled {
  color: #b8bcc1;
  cursor: not-allowed;
}

.calendar-custom-calendar-menu-separator {
  height: 1px;
  margin: 0.25rem 0;
  background: #e1e2e4;
}

.calendar-custom-calendar-submenu-wrap {
  position: relative;
}

.calendar-custom-calendar-submenu-toggle {
  justify-content: space-between;
}

.calendar-custom-calendar-menu-arrow {
  margin-left: auto;
  font-size: 1.1rem;
}

.calendar-custom-calendar-submenu-panel {
  position: absolute;
  left: calc(100% - 0.1rem);
  top: 0;
  z-index: 121;
  min-width: 14rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.25rem;
  border: 1px solid #d8dadd;
  border-radius: 0.2rem;
  background: #fff;
  box-shadow: 0 9px 24px rgba(25, 30, 35, 0.2);
}

.calendar-custom-calendar-color-panel {
  width: 12.5rem;
  min-width: 12.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1.75rem);
  gap: 0.35rem;
}

.calendar-custom-calendar-menu .calendar-custom-calendar-color-choice {
  width: 1.55rem;
  min-height: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--choice-color);
}

.calendar-custom-calendar-menu .calendar-custom-calendar-color-choice:hover,
.calendar-custom-calendar-menu .calendar-custom-calendar-color-choice:focus-visible,
.calendar-custom-calendar-menu .calendar-custom-calendar-color-choice.selected {
  border-color: #34373b;
  background: var(--choice-color);
}

.calendar-custom-calendar-charm-panel {
  width: 25rem;
  min-width: 25rem;
  max-height: 24rem;
  display: grid;
  grid-template-columns: repeat(6, 3.2rem);
  gap: 0.45rem;
  padding: 0.9rem;
}

.calendar-custom-calendar-menu .calendar-custom-calendar-charm-choice {
  width: 3.2rem;
  min-height: 3.2rem;
  height: 3.2rem;
  justify-content: center;
  padding: 0;
  color: #b14855;
  border: 1px solid transparent;
  border-radius: 0.18rem;
}

.calendar-custom-calendar-menu .calendar-custom-calendar-charm-choice:hover,
.calendar-custom-calendar-menu .calendar-custom-calendar-charm-choice:focus-visible,
.calendar-custom-calendar-menu .calendar-custom-calendar-charm-choice.selected {
  border-color: #7b686d;
  background: #eadfe1;
}

.calendar-custom-calendar-menu .calendar-custom-calendar-charm-choice.selected::before {
  content: none;
}

.calendar-custom-calendar-charm-icon {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  color: #b14855;
  font-weight: 600;
}

.calendar-custom-calendar-charm-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.calendar-custom-calendar-charm-icon svg path {
  fill: #b14855;
}

.calendar-custom-calendar-choice-panel button.selected::before {
  content: "✓";
  width: 1rem;
  color: var(--calendar-accent-strong);
}

.calendar-board {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.calendar-board-toolbar {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--calendar-line);
}

.calendar-board-toolbar button {
  height: 2rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0.18rem;
  cursor: pointer;
  color: #4e5258;
}

.calendar-board-toolbar button:hover {
  background: #f0f1f2;
  border-color: #d9dbde;
}

.calendar-today-button {
  min-width: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-color: #d7d9dc !important;
  background: #fff !important;
  font-weight: 600;
}

.calendar-today-button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.calendar-nav-button {
  width: 2rem;
  font-size: 1.5rem !important;
  line-height: 1;
}

.calendar-range-picker {
  position: relative;
  min-width: 0;
  margin-left: 0.5rem;
}

.calendar-board-toolbar .calendar-range-toggle {
  width: auto;
  max-width: min(31rem, 52vw);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.calendar-range-toggle span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-date-picker {
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  z-index: 180;
  width: min(31rem, calc(100vw - 5rem));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1rem;
  color: #35383d;
  border: 1px solid #e1e2e4;
  border-radius: 0.2rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 33, 38, 0.22);
}

.calendar-date-picker[hidden] {
  display: none;
}

.calendar-date-picker-month {
  padding-right: 1rem;
  border-right: 1px solid #e1e2e4;
}

.calendar-date-picker-years {
  position: relative;
  min-height: 13rem;
  padding-left: 1rem;
}

.calendar-date-picker header {
  min-height: 1.8rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
}

.calendar-date-picker header strong {
  margin-right: auto;
}

.calendar-board-toolbar .calendar-date-picker header button {
  width: 1.6rem;
  height: 1.6rem;
}

.calendar-date-picker-weekdays,
.calendar-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.calendar-date-picker-weekdays {
  padding: 0.25rem 0;
  font-size: 0.62rem;
}

.calendar-board-toolbar .calendar-date-picker-days button {
  width: 100%;
  height: 1.55rem;
  padding: 0;
  border-radius: 0;
  font-size: 0.63rem;
}

.calendar-date-picker-days button.outside {
  color: #9b9ea2;
}

.calendar-date-picker-days button.in-range {
  color: #8b2634;
  background: #f8d9de;
  border-top-color: #e65d6f;
  border-bottom-color: #e65d6f;
}

.calendar-date-picker-days button.range-start {
  color: #fff;
  background: #c94556;
  border-radius: 50% 0 0 50%;
}

.calendar-date-picker-days button.range-end {
  border-radius: 0 50% 50% 0;
}

.calendar-date-picker-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.calendar-board-toolbar .calendar-date-picker-months button {
  height: 2rem;
  padding: 0;
  border: 0;
  font-size: 0.66rem;
}

.calendar-date-picker-months button.selected {
  color: #a63d4a;
  background: #f8d9de;
  font-weight: 700;
}

.calendar-board-toolbar .calendar-date-picker-today {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  color: #55595e;
  font-size: 0.66rem;
}

.calendar-loading {
  margin-left: auto;
  color: var(--calendar-muted);
  font-size: 0.72rem;
}

.calendar-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  background: #fff8f9;
  border-bottom: 1px solid var(--calendar-accent-soft);
  font-size: 0.75rem;
}

.calendar-filter-bar[hidden] {
  display: none;
}

.calendar-filter-bar label {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.calendar-filter-bar input {
  min-width: 0;
  flex: 1;
  max-width: 28rem;
  height: 1.8rem;
  padding: 0 0.55rem;
  border: 1px solid #c9ccd0;
  border-radius: 0.2rem;
  outline: none;
}

.calendar-filter-bar input:focus {
  border-color: var(--calendar-accent);
  box-shadow: 0 0 0 2px var(--calendar-accent-soft);
}

.calendar-filter-bar button {
  color: var(--calendar-accent-strong);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-grid-host {
  min-height: 0;
  flex: 1;
  overflow: auto;
  position: relative;
  scrollbar-color: #b5b8bc transparent;
}

.calendar-week-view {
  min-width: 47rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-week-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 2.7rem repeat(var(--calendar-day-count), minmax(8rem, 1fr));
  height: 3rem;
  flex: 0 0 3rem;
  background: #fff;
  border-bottom: 1px solid var(--calendar-line);
}

.calendar-week-header-spacer {
  border-right: 1px solid var(--calendar-line);
}

.calendar-day-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0.65rem;
  border-right: 1px solid var(--calendar-line);
}

.calendar-day-header strong {
  color: var(--calendar-accent);
  font-size: 1rem;
  font-weight: 500;
}

.calendar-day-header span {
  color: #6e7176;
  font-size: 0.61rem;
}

.calendar-day-header.today {
  background: #fff7f8;
}

.calendar-week-body {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem repeat(var(--calendar-day-count), minmax(8rem, 1fr));
  min-height: calc(var(--calendar-hour-height) * 24);
  flex: 1;
}

.calendar-multi-calendar-view {
  min-width: max-content;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  --calendar-pane-min-width: max(27rem, calc(var(--calendar-day-count) * 6.25rem));
}

.calendar-multi-calendar-axis {
  position: sticky;
  left: 0;
  z-index: 12;
  flex: 0 0 2.7rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 1px 0 0 var(--calendar-line);
}

.calendar-multi-calendar-title-spacer,
.calendar-multi-calendar-title {
  position: sticky;
  top: 0;
  z-index: 13;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  background: #fff;
  border-bottom: 1px solid var(--calendar-line);
}

.calendar-multi-calendar-day-spacer,
.calendar-week-header-pane {
  position: sticky;
  top: 2.65rem;
  z-index: 12;
  height: 3rem;
  flex: 0 0 3rem;
  background: #fff;
  border-bottom: 1px solid var(--calendar-line);
}

.calendar-multi-calendar-axis .calendar-time-axis {
  min-height: calc(var(--calendar-hour-height) * 24);
  flex: 1 0 auto;
}

.calendar-multi-calendar-pane {
  min-width: var(--calendar-pane-min-width);
  flex: 1 0 calc((100% - 2.7rem) / var(--calendar-visible-count));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--calendar-line);
  background: #fff;
}

.calendar-multi-calendar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.75rem;
  color: var(--calendar-pane-color);
}

.calendar-multi-calendar-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
}

.calendar-multi-calendar-title button {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  padding: 0;
  color: var(--calendar-accent);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.calendar-multi-calendar-title button:hover,
.calendar-multi-calendar-title button:focus-visible {
  background: var(--calendar-accent-soft);
  outline: none;
}

.calendar-week-view-pane {
  min-width: 0;
  height: auto;
}

.calendar-week-header-pane,
.calendar-week-body-pane {
  grid-template-columns: repeat(var(--calendar-day-count), minmax(5.6rem, 1fr));
}

.calendar-multi-calendar-pane .calendar-day-header strong {
  color: var(--calendar-pane-color);
}

.calendar-multi-calendar-pane .calendar-event {
  border-left-color: var(--calendar-pane-color);
}

.calendar-time-axis {
  position: relative;
  border-right: 1px solid var(--calendar-line);
  background: #fff;
}

.calendar-time-label {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--calendar-hour-height);
  padding: 0.38rem 0.35rem 0 0;
  color: #777b81;
  text-align: right;
  font-size: 0.59rem;
  border-top: 1px solid var(--calendar-line);
}

.calendar-day-column {
  position: relative;
  min-height: calc(var(--calendar-hour-height) * 24);
  border-right: 1px solid var(--calendar-line);
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, var(--calendar-line-soft) 0, var(--calendar-line-soft) 1px, transparent 1px, transparent var(--calendar-slot-height));
}

.calendar-day-column.today {
  background-color: #fffafb;
}

.calendar-event {
  position: absolute;
  left: 0.18rem;
  right: 0.18rem;
  z-index: 4;
  overflow: hidden;
  padding: 0.25rem 0.35rem;
  color: #49252c;
  text-align: left;
  border: 0;
  border-left: 3px solid var(--calendar-accent-strong);
  border-radius: 0.18rem;
  background: var(--calendar-accent-soft);
  box-shadow: 0 1px 2px rgba(45, 25, 30, 0.14);
  cursor: pointer;
  font-size: 0.63rem;
  line-height: 1.25;
}

.calendar-event.imported-event,
.calendar-month-event.imported-event {
  background: #dcecff;
  border-left-color: #2878b8;
  color: #164b73;
}

.calendar-event:hover,
.calendar-event:focus-visible {
  z-index: 6;
  outline: 1px solid var(--calendar-accent-strong);
  background: #f4c8d0;
}

.calendar-event strong,
.calendar-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event span {
  font-size: 0.56rem;
}

.calendar-event-context-menu {
  position: fixed;
  z-index: 90;
  min-width: 12rem;
  padding: 0.25rem 0;
  color: #282b30;
  border: 1px solid #d8dadd;
  border-radius: 0.2rem;
  background: #fff;
  box-shadow: 0 9px 24px rgba(25, 30, 35, 0.2);
}

.calendar-event-context-menu[hidden] {
  display: none;
}

.calendar-event-context-menu button {
  width: 100%;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem;
  color: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
}

.calendar-event-context-menu button:not(:disabled):hover,
.calendar-event-context-menu button:not(:disabled):focus-visible {
  background: #f0f0f1;
  outline: none;
}

.calendar-now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 7;
  height: 2px;
  background: #e61b36;
  box-shadow: 0 0 0 1px rgba(230, 27, 54, 0.12);
  pointer-events: none;
}

.calendar-now-line.with-time-axis {
  left: 2.7rem;
}

.calendar-now-line::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: -0.22rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #e61b36;
}

.calendar-month-view {
  min-width: 44rem;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(6rem, 1fr));
  grid-template-rows: 2rem repeat(6, minmax(6rem, 1fr));
}

.calendar-month-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666a70;
  background: #fafafa;
  border-right: 1px solid var(--calendar-line);
  border-bottom: 1px solid var(--calendar-line);
  font-size: 0.68rem;
  font-weight: 600;
}

.calendar-month-day {
  min-height: 6rem;
  padding: 0.3rem;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--calendar-line);
  border-bottom: 1px solid var(--calendar-line);
  background: #fff;
  text-align: left;
}

.calendar-month-day.outside {
  background: #fafafa;
  color: #a2a5a9;
}

.calendar-month-day.today .calendar-month-number {
  color: #fff;
  background: var(--calendar-accent);
}

.calendar-month-number {
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  margin-left: auto;
  border-radius: 50%;
  font-size: 0.68rem;
}

.calendar-month-events {
  display: grid;
  gap: 0.18rem;
}

.calendar-month-event {
  width: 100%;
  overflow: hidden;
  padding: 0.2rem 0.3rem;
  color: #49252c;
  border: 0;
  border-left: 2px solid var(--calendar-accent-strong);
  border-radius: 0.12rem;
  background: var(--calendar-accent-soft);
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
}

.calendar-empty-state {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 7;
  padding: 0.7rem 1rem;
  color: var(--calendar-muted);
  border: 1px solid var(--calendar-line);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  font-size: 0.75rem;
}

.calendar-empty-state[hidden] {
  display: none;
}

.calendar-event-dialog {
  width: min(29rem, calc(100vw - 2rem));
  padding: 1.4rem;
  color: var(--calendar-ink);
  border: 0;
  border-radius: 0.55rem;
  box-shadow: 0 18px 55px rgba(25, 30, 35, 0.28);
}

.calendar-event-dialog::backdrop {
  background: rgba(25, 31, 38, 0.42);
  backdrop-filter: blur(2px);
}

.calendar-dialog-accent {
  width: 2.7rem;
  height: 0.3rem;
  margin-bottom: 0.8rem;
  border-radius: 1rem;
  background: var(--calendar-accent);
}

.calendar-event-dialog h2 {
  margin: 0 2rem 1rem 0;
  font-size: 1.15rem;
}

.calendar-dialog-close {
  position: absolute;
  right: 0.8rem;
  top: 0.7rem;
  width: 2rem;
  height: 2rem;
  color: #6c7075;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
}

.calendar-event-dialog dl {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.calendar-event-dialog dl>div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.75rem;
}

.calendar-event-dialog dt {
  color: var(--calendar-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.calendar-event-dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.calendar-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--calendar-line);
}

.calendar-dialog-actions a,
.calendar-dialog-actions button {
  padding: 0.5rem 0.8rem;
  border: 1px solid #c8cbd0;
  border-radius: 0.25rem;
  background: #fff;
  color: #3e4247;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.75rem;
}

.calendar-dialog-actions button {
  color: #fff;
  border-color: var(--calendar-accent-strong);
  background: var(--calendar-accent-strong);
}

.calendar-share-dialog,
.calendar-print-dialog,
.calendar-settings-dialog,
.calendar-confirm-dialog {
  color: #34373c;
  border: 0;
  background: #fff;
  box-shadow: 0 18px 60px rgba(24, 29, 35, 0.32);
}

.calendar-share-dialog::backdrop,
.calendar-print-dialog::backdrop,
.calendar-settings-dialog::backdrop,
.calendar-confirm-dialog::backdrop {
  background: rgba(32, 37, 42, 0.55);
}

.calendar-modal-close {
  position: absolute;
  right: 1.4rem;
  top: 1rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #a34a54;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 200;
  line-height: 1;
}

.calendar-share-dialog {
  width: min(58rem, calc(100vw - 2rem));
  min-height: min(40rem, calc(100vh - 2rem));
  padding: 2rem 2.5rem;
  border-radius: 0.1rem;
}

.calendar-confirm-dialog {
  position: relative;
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.8rem;
  border-radius: 0.35rem;
}

.calendar-confirm-dialog h2 {
  margin: 0 2.5rem 0.75rem 0;
  color: #25282d;
  font-size: 1.2rem;
  font-weight: 600;
}

.calendar-confirm-dialog p {
  margin: 0 0 1.6rem;
  color: #60656d;
  line-height: 1.45;
}

.calendar-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.calendar-confirm-actions button {
  min-width: 6.5rem;
  min-height: 2.3rem;
  padding: 0 1.2rem;
  border: 1px solid #dedfe1;
  border-radius: 0.2rem;
  background: #fff;
  cursor: pointer;
}

.calendar-confirm-actions button:hover,
.calendar-confirm-actions button:focus-visible {
  background: #f0f0f1;
  outline: none;
}

.calendar-confirm-actions .calendar-confirm-danger {
  color: #fff;
  border-color: #d83b01;
  background: #d83b01;
}

.calendar-confirm-actions .calendar-confirm-danger:hover,
.calendar-confirm-actions .calendar-confirm-danger:focus-visible {
  border-color: #a4262c;
  background: #a4262c;
}

.calendar-share-dialog h2 {
  margin: 0 3rem 1.8rem 0;
  font-size: 1.55rem;
  font-weight: 400;
}

.calendar-share-dialog h3 {
  margin: 0 0 1rem;
  color: #b14855;
  font-size: 1.1rem;
  font-weight: 600;
}

.calendar-share-dialog>p {
  margin: 0 0 1.45rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.calendar-share-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: 0.65rem;
}

.calendar-share-form input {
  height: 3rem;
  padding: 0 1rem;
  color: #33373c;
  border: 2px solid #b14855;
  outline: none;
  font-size: 0.86rem;
}

.calendar-share-form input:focus {
  box-shadow: 0 0 0 2px rgba(177, 72, 85, 0.18);
}

.calendar-share-form button {
  color: #fff;
  border: 0;
  background: #b14855;
  cursor: pointer;
}

.calendar-share-form button:disabled {
  color: #cfd0d2;
  background: #f4f4f4;
  cursor: not-allowed;
}

.calendar-share-form[hidden],
.calendar-share-candidate[hidden] {
  display: none;
}

.calendar-share-candidate {
  min-height: 4.8rem;
  display: grid;
  grid-template-columns: 2.6rem minmax(10rem, 1fr) minmax(13rem, 20rem) 7rem 2rem;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid #e7e7e8;
}

.calendar-share-avatar {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  color: #087e58;
  border-radius: 50%;
  background: #a8f0d1;
  font-weight: 700;
}

.calendar-share-person {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calendar-share-person strong,
.calendar-share-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-share-person strong {
  font-size: 0.86rem;
  font-weight: 500;
}

.calendar-share-person small {
  color: #70747a;
  font-size: 0.69rem;
}

.calendar-share-candidate select,
.calendar-shared-list select {
  height: 2.8rem;
  padding: 0 2rem 0 0.7rem;
  color: #3e4247;
  border: 1px solid #777b80;
  background: #fff;
  font-size: 0.82rem;
}

.calendar-share-action {
  height: 2.8rem;
  color: #fff;
  border: 0;
  border-radius: 0.12rem;
  background: #b14855;
  cursor: pointer;
  font-weight: 600;
}

.calendar-share-action:disabled {
  opacity: 0.72;
  cursor: wait;
}

.calendar-share-remove {
  color: #d44857;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
}

.calendar-share-spinner {
  grid-column: 5;
  grid-row: 1;
  width: 1.15rem;
  height: 1.15rem;
  justify-self: center;
  border: 2px solid #f2cbd0;
  border-top-color: #cf4358;
  border-radius: 50%;
  animation: calendar-share-spin 0.7s linear infinite;
}

@keyframes calendar-share-spin {
  to { transform: rotate(360deg); }
}

.calendar-share-state {
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}

.calendar-share-state:has(.calendar-shared-list:not([hidden])) {
  min-height: 10rem;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 1.6rem;
}

.calendar-share-state:has(.calendar-shared-list:not([hidden])) .calendar-share-illustration {
  display: none;
}

.calendar-share-state h4 {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.86rem;
}

.calendar-share-illustration {
  width: 10rem;
  height: 10rem;
  fill: none;
  stroke: #ef6573;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-share-state>p {
  margin: 1.6rem 0 0;
  color: #50545a;
  font-size: 1rem;
}

.calendar-shared-list {
  width: 100%;
  display: grid;
  gap: 0.45rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.calendar-shared-list[hidden] {
  display: none;
}

.calendar-shared-list li {
  display: grid;
  grid-template-columns: 2.6rem minmax(10rem, 1fr) minmax(13rem, 23rem) 2rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0;
  background: #fff;
  border: 0;
  font-size: 0.78rem;
}

.calendar-shared-list li .calendar-share-person {
  min-width: 0;
  flex: 1;
}

.calendar-shared-list li .calendar-share-remove {
  color: #8a3d47;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-add-dialog {
  width: 80vw;
  height: 80vh;
  max-width: 80vw;
  max-height: 80vh;
  padding: 0;
  overflow: hidden;
  color: #484b50;
  border: 0;
  background: #fff;
  box-shadow: 0 18px 60px rgba(24, 29, 35, 0.32);
}

.calendar-add-dialog[open] {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
}

.calendar-add-dialog::backdrop {
  background: rgba(32, 37, 42, 0.55);
}

.calendar-add-navigation {
  overflow-y: auto;
  background: #f8f8f8;
  border-right: 1px solid #e4e4e5;
}

.calendar-add-navigation h2 {
  margin: 0;
  padding: 1rem 1.1rem;
  font-size: 1rem;
}

.calendar-add-navigation nav {
  display: grid;
}

.calendar-add-navigation nav button {
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  color: #55595e;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.76rem;
}

.calendar-add-navigation nav button span {
  width: 1rem;
  color: #666b70;
  text-align: center;
}

.calendar-add-navigation nav button.selected {
  color: var(--calendar-accent-strong);
  background: #f3c4ca;
  font-weight: 600;
}

.calendar-add-navigation nav button.selected span {
  color: inherit;
}

.calendar-add-navigation nav hr {
  width: calc(100% - 2rem);
  margin: 0.25rem auto;
  border: 0;
  border-top: 1px solid #e2e2e3;
}

.calendar-add-navigation>p {
  margin: 0.7rem 1rem;
  font-size: 0.7rem;
  line-height: 1.45;
}

.calendar-add-navigation>p button {
  margin: 0.2rem 1rem 0 0;
  padding: 0;
  color: var(--calendar-accent-strong);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-add-content {
  position: relative;
  min-width: 0;
  overflow: auto;
}

.calendar-add-close {
  position: absolute;
  right: 0.7rem;
  top: 0.45rem;
  z-index: 2;
  color: #898c90;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
}

.calendar-add-panel {
  min-height: 100%;
  padding: 1.15rem 1rem;
}

.calendar-add-panel[hidden] {
  display: none;
}

.calendar-add-panel h3 {
  margin: 0 0 2.2rem;
  color: #45484d;
  font-size: 1rem;
  font-weight: 600;
}

.calendar-add-panel>p {
  max-width: 58rem;
  margin: -1.25rem 0 1.8rem;
  font-size: 0.72rem;
  line-height: 1.5;
}

.calendar-add-panel.recommended {
  position: relative;
  padding: 6rem 6.5rem;
  overflow: hidden;
}

.calendar-add-panel.recommended h3 {
  margin-bottom: 0.7rem;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
}

.calendar-add-panel.recommended p {
  margin: 0 0 2.7rem;
  color: #666a70;
  font-size: 0.9rem;
}

.calendar-add-primary,
.calendar-add-form-actions button,
.calendar-upload-actions button {
  min-width: 7rem;
  min-height: 2rem;
  padding: 0 1rem;
  border: 1px solid #dedfe1;
  background: #fff;
  cursor: pointer;
}

.calendar-add-primary:not(:disabled) {
  color: #fff;
  border-color: #168fb0;
  background: #168fb0;
}

.calendar-add-primary:disabled,
.calendar-add-form-actions button:disabled,
.calendar-upload-actions button:disabled {
  color: #d0d1d3;
  border-color: #f1f1f2;
  background: #f6f6f7;
  cursor: not-allowed;
}

.calendar-add-primary:not(:disabled):hover,
.calendar-add-primary:not(:disabled):focus-visible {
  border-color: #0f7894;
  background: #0f7894;
}

.calendar-add-illustration {
  position: absolute;
  right: 3rem;
  bottom: 2rem;
  width: min(24rem, 42%);
  height: auto;
  object-fit: contain;
}

.calendar-add-panel select,
.calendar-add-panel input {
  font: inherit;
}

.calendar-add-panel>select,
.calendar-add-panel label>select,
.calendar-add-panel form label>select {
  width: min(22rem, 100%);
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid #aeb1b5;
  background: #fff;
}

.calendar-add-panel>label {
  width: min(22rem, 100%);
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.72rem;
}

.calendar-edit-form {
  width: min(22rem, 100%);
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

.calendar-edit-form label,
.calendar-add-panel form>label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.72rem;
}

.calendar-edit-form input[type="text"] {
  height: 2.2rem;
  padding: 0 0.6rem;
  border: 1px solid #aeb1b5;
}

.calendar-edit-form input[type="color"] {
  width: 3rem;
  height: 2rem;
  padding: 0;
  border: 0;
}

[data-blank-calendar-form] {
  width: min(30rem, 100%);
  display: grid;
  gap: 1rem;
}

.calendar-name-input,
.calendar-line-input {
  width: min(22rem, 100%);
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-bottom: 2px solid #139bc0;
  outline: 0;
  font-size: 1rem;
}

.calendar-color-choices,
.calendar-charm-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.calendar-color-choices button {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--choice-color);
  cursor: pointer;
}

.calendar-color-choices button.selected {
  outline: 2px solid #555;
  outline-offset: 2px;
}

.calendar-charm-choices button {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: #168fb0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-charm-choices button.selected {
  color: #fff;
  border-radius: 0.2rem;
  background: #168fb0;
}

.calendar-charm-choices button svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.calendar-charm-choices button.selected svg path {
  fill: #fff;
}

.calendar-add-form-actions,
.calendar-upload-actions {
  display: flex;
  gap: 0.8rem;
}

[data-subscribe-calendar-form] {
  display: grid;
  gap: 1rem;
}

.calendar-upload-row {
  width: min(31rem, 100%);
  min-height: 2.3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  color: #b7b8bb;
  background: #f6f6f7;
  font-size: 0.72rem;
}

.calendar-upload-row.dragging {
  outline: 2px dashed var(--calendar-accent);
  outline-offset: 3px;
}

.calendar-upload-row span {
  padding-left: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-upload-row label {
  min-width: 5rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  color: #55595e;
  border: 1px solid #ced0d3;
  background: #fff;
  cursor: pointer;
}

.calendar-upload-row input {
  display: none;
}

.calendar-upload-actions {
  margin-top: 1rem;
}

.calendar-upload-preview {
  width: min(42rem, 100%);
  margin-top: 1.2rem;
  padding: 1rem;
  border-left: 3px solid var(--calendar-accent);
  background: #fff6f7;
  font-size: 0.76rem;
  line-height: 1.5;
}

.calendar-add-panel>.calendar-country-filter {
  width: min(29rem, 100%);
  height: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.65rem;
  border: 1px solid #aaaeb3;
  box-sizing: border-box;
}

.calendar-country-filter span {
  display: grid;
  place-items: center;
  color: var(--calendar-accent);
  font-size: 1.1rem;
  line-height: 1;
}

.calendar-country-filter input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.calendar-country-list {
  width: min(42rem, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 2.5rem;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
}

.calendar-country-list label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
}

.calendar-country-list label[hidden] {
  display: none;
}

.calendar-country-list input,
.calendar-birthday-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--calendar-accent);
}

.calendar-birthday-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
}

.calendar-print-dialog {
  width: calc(100vw - 0.5rem);
  height: calc(100vh - 0.5rem);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.calendar-print-dialog[open] {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
}

.calendar-print-close {
  position: fixed;
}

.calendar-print-options {
  overflow-y: auto;
  padding: 1rem 1.5rem;
  background: #fff;
}

.calendar-print-options h2 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
}

.calendar-print-options>label,
.calendar-print-options fieldset {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0;
  color: #4e5258;
  border: 0;
  font-size: 0.68rem;
  font-weight: 600;
}

.calendar-print-options select {
  width: 100%;
  height: 2rem;
  padding: 0 0.45rem;
  color: #4b4f54;
  border: 1px solid #b5b8bc;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 400;
}

.calendar-print-time-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.calendar-print-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 0.5rem !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
}

.calendar-print-check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--calendar-accent);
}

.calendar-print-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.calendar-print-actions button {
  min-width: 5rem;
  height: 2rem;
  color: #4c5055;
  border: 1px solid #d2d4d7;
  background: #fff;
  cursor: pointer;
  font-size: 0.72rem;
}

.calendar-print-actions button:first-child {
  color: #fff;
  border-color: var(--calendar-accent);
  background: var(--calendar-accent);
}

.calendar-print-preview {
  min-width: 0;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 3rem 4rem;
  background: #f3f3f3;
}

.calendar-print-page {
  width: min(31rem, 100%);
  min-height: 43rem;
  padding: 1rem;
  color: #4c5055;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  font-size: 0.48rem;
}

.calendar-print-page.compact {
  min-height: 34rem;
}

.calendar-print-page>header {
  display: grid;
  gap: 0.3rem;
  padding: 0.2rem 0 0.65rem;
}

.calendar-print-page>header span {
  color: var(--calendar-accent-strong);
}

.calendar-print-page>header i {
  width: 0.45rem;
  height: 0.45rem;
  display: inline-block;
  margin-right: 0.25rem;
  background: var(--calendar-accent);
}

.calendar-print-grid {
  display: grid;
  grid-template-columns: 1.6rem repeat(var(--print-day-count, 5), minmax(0, 1fr));
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

.calendar-print-grid.month {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-print-grid>div {
  min-height: 1.45rem;
  overflow: hidden;
  padding: 0.2rem;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.calendar-print-grid .print-grid-heading {
  min-height: 1.2rem;
  color: #696d72;
  background: #fafafa;
  font-weight: 600;
  text-align: center;
}

.calendar-print-grid .print-grid-time {
  color: #898c90;
  text-align: right;
}

.calendar-print-grid .print-grid-event {
  display: block;
  margin-bottom: 0.1rem;
  padding: 0.08rem 0.15rem;
  overflow: hidden;
  color: #73343e;
  border-left: 2px solid var(--calendar-accent);
  background: var(--calendar-accent-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-print-grid.month>div {
  min-height: 3.6rem;
}

[data-calendar-print-mini-preview] {
  float: right;
  width: 7rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
  margin: 0 0 0.7rem 0.7rem;
  padding: 0.4rem;
  border: 1px solid #e2e3e4;
  font-size: 0.42rem;
  text-align: center;
}

[data-calendar-print-mini-preview] .print-mini-title {
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
}

[data-calendar-print-mini-preview] .today {
  color: #fff;
  border-radius: 50%;
  background: var(--calendar-accent);
}

[data-calendar-print-mini-preview][hidden],
.calendar-print-agenda[hidden] {
  display: none;
}

.calendar-print-agenda {
  clear: both;
  margin-top: 0.8rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ddd;
}

.calendar-print-agenda h3 {
  margin: 0 0 0.35rem;
  font-size: 0.58rem;
}

.calendar-print-agenda p {
  margin: 0.15rem 0;
}

.calendar-settings-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem;
  border-radius: 0.35rem;
}

.calendar-settings-dialog h2 {
  margin: 0 2rem 1.2rem 0;
  font-size: 1.15rem;
}

.calendar-settings-dialog form>label {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.calendar-settings-dialog select {
  height: 2.2rem;
  padding: 0 0.5rem;
  border: 1px solid #c5c8cc;
  background: #fff;
}

.calendar-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  color: #fff;
  border-radius: 0.3rem;
  background: #30343a;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.22);
  font-size: 0.75rem;
}

.calendar-toast[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .calendar-app-rail {
    width: 3rem;
    flex-basis: 3rem;
  }

  .calendar-sidebar {
    position: absolute;
    left: 3rem;
    top: 7.1rem;
    bottom: 0;
    z-index: 40;
    box-shadow: 8px 0 18px rgba(30, 35, 40, 0.14);
  }

  .calendar-sidebar.collapsed {
    margin-left: -16.5rem;
  }

  .calendar-board-toolbar h1 {
    font-size: 0.9rem;
  }

  .calendar-print-dialog[open] {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .calendar-print-preview {
    padding: 2rem;
  }
}

@media (max-width: 620px) {
  .outlook-calendar {
    min-height: 30rem;
  }

  .outlook-calendar>.calendar-app-rail {
    display: grid !important;
    flex: 0 0 2.65rem !important;
    width: 2.65rem !important;
  }

  .calendar-ribbon-tabs {
    height: 2.5rem;
  }

  .calendar-ribbon-actions {
    min-height: 4.5rem;
    padding-left: 0.3rem;
  }

  .calendar-command {
    min-width: 3rem;
  }

  .calendar-command-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .calendar-command-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .calendar-sidebar {
    left: 2.7rem;
    top: 7rem;
    width: min(17rem, calc(100vw - 5.35rem));
    flex-basis: min(17rem, calc(100vw - 5.35rem));
  }

  .calendar-sidebar.collapsed {
    margin-left: -18rem;
  }

  .calendar-board-toolbar {
    gap: 0.15rem;
    padding: 0.35rem;
  }

  .calendar-today-button {
    min-width: 4.5rem;
  }

  .calendar-board-toolbar h1 {
    margin-left: 0.15rem;
    font-size: 0.78rem;
  }

  .calendar-date-picker {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    top: 7.4rem;
    z-index: 180;
    width: auto;
    grid-template-columns: 1fr;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }

  .calendar-date-picker-month {
    padding: 0 0 0.8rem;
    border-right: 0;
    border-bottom: 1px solid #e1e2e4;
  }

  .calendar-date-picker-years {
    min-height: 10rem;
    padding: 0.8rem 0 0;
  }

  .calendar-week-view {
    min-width: 39rem;
  }

  .calendar-filter-bar label {
    align-items: stretch;
    flex-direction: column;
    gap: 0.25rem;
  }

  .calendar-command-menu {
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    top: 6.8rem;
    max-height: calc(100vh - 7.3rem);
    overflow-y: auto;
  }

  .calendar-time-scale-menu {
    min-width: 0;
  }

  .calendar-share-dialog {
    min-height: calc(100vh - 1rem);
    padding: 1.25rem;
  }

  .calendar-share-form {
    grid-template-columns: 1fr;
  }

  .calendar-share-form button {
    height: 2.7rem;
  }

  .calendar-share-candidate,
  .calendar-shared-list li {
    grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
    padding: 0.65rem 0;
  }

  .calendar-share-candidate select,
  .calendar-shared-list select {
    grid-column: 1 / -1;
    width: 100%;
  }

  .calendar-share-action {
    grid-column: 1 / 3;
  }

  .calendar-share-spinner {
    grid-column: 3;
    grid-row: 3;
  }

  .calendar-share-state {
    min-height: 13rem;
  }

  .calendar-share-illustration {
    width: 7rem;
    height: 7rem;
  }

  .calendar-add-dialog[open] {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .calendar-add-navigation {
    max-height: 11rem;
    border-right: 0;
    border-bottom: 1px solid #e4e4e5;
  }

  .calendar-add-navigation h2 {
    padding: 0.65rem 1rem;
  }

  .calendar-add-panel.recommended {
    padding: 3rem 1rem;
  }

  .calendar-add-panel.recommended h3 {
    font-size: 1.65rem;
  }

  .calendar-add-illustration {
    right: 1rem;
    bottom: 1rem;
    opacity: 0.36;
  }

  .calendar-country-list {
    grid-template-columns: 1fr;
  }

  .calendar-print-dialog {
    overflow: auto;
  }

  .calendar-print-dialog[open] {
    display: block;
  }

  .calendar-print-options {
    padding: 1rem;
  }

  .calendar-print-preview {
    min-height: 35rem;
    padding: 1rem;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  #content {
    padding: 0 !important;
    overflow: visible !important;
  }

  .calendar-app-rail,
  .calendar-ribbon,
  .calendar-sidebar,
  .calendar-board-toolbar button,
  .calendar-filter-bar,
  .calendar-toast {
    display: none !important;
  }

  .outlook-calendar,
  .calendar-app,
  .calendar-workspace,
  .calendar-board,
  .calendar-grid-host {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .calendar-board-toolbar {
    min-height: 2.2rem;
  }

  .calendar-week-view,
  .calendar-month-view {
    min-width: 0 !important;
  }

  body.calendar-printing .outlook-calendar>.calendar-app-rail,
  body.calendar-printing .outlook-calendar>.calendar-app,
  body.calendar-printing .calendar-event-dialog,
  body.calendar-printing .calendar-share-dialog,
  body.calendar-printing .calendar-settings-dialog,
  body.calendar-printing .calendar-toast,
  body.calendar-printing .calendar-print-options,
  body.calendar-printing .calendar-print-close {
    display: none !important;
  }

  body.calendar-printing .outlook-calendar {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.calendar-printing .calendar-print-dialog {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.calendar-printing .calendar-print-preview {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.calendar-printing .calendar-print-page {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}
ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  font-family: "Inter", sans-serif;
  text-align: center;
  padding: 1em;
  background: var(--light-grey);
  height: 100%;
}

.notification {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background: var(--violet);
}

.headline {
  font-size: 3em;
  position: relative;
  top: 20vh;
  font-weight: bold;
  transition: opacity 1s;
  opacity: 1;
  display: block;
}

.headline.big {
  color: #07575B88;
}

.container:has(> .nav > input:checked) .headline {
  opacity: 0;
}

/* MAIN STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.nav {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 15vh;
  left: calc(50% - 7.5vh);
  border-radius: 5px 5px 25px 25px;
  margin: auto;
  bottom: 0;
  background: transparent;
}

.nav [type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.nav [type="checkbox"]+label {
  position: relative;
  width: 12vh;
  height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  background: var(--violet);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.2s;
}

.nav [type="checkbox"]+label:hover {
  background: var(--dark-violet);
}

.menu li,
.p-menu li {
  position: absolute;
  top: -5vh;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}

.menu li:nth-child(1),
.p-menu li:nth-child(1) {
  transition-delay: 0.2s;
}

.menu li:nth-child(2),
.p-menu li:nth-child(2) {
  transition-delay: 0.15s;
}

.menu li:nth-child(3),
.p-menu li:nth-child(3) {
  transition-delay: 0.1s;
}

.menu li:nth-child(4),
.p-menu li:nth-child(4) {
  transition-delay: 0.05s;
}

.menu li:nth-child(5),
.p-menu li:nth-child(5) {
  transition-delay: 0.05s;
}

.menu li:nth-child(6) {
  transition-delay: 0.02s;
}

.menu li:nth-child(7) {
  transition-delay: 0.05s;
}

.menu li:nth-child(8) {
  transition-delay: 0.02s;
}

.menu li:nth-child(9) {
  transition-delay: 0.05s;
}

.menu li a,
.p-menu li a {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s;
}

.menu li a:hover,
.p-menu li a:hover {
  background: var(--dark-violet);
  background-repeat: no-repeat;
  background-position: center;
}

.menu li a:hover span,
.p-menu li a:hover span {
  color: #808080;
}

.menu li a.bookings-link {
  background-size: 75% 75%;
  background-image: url(/booking.svg);
}

.menu li a.bookings-link:hover {
  background-size: 65% 65%;
}

.menu li a.patients-link {
  background-size: 80% 80%;
  background-image: url(/patient.svg);
}

.menu li a.patients-link:hover {
  background-size: 70% 70%;
}

.menu li a.staffs-link {
  background-image: url(/staff.svg);
  background-size: 70% 70%;
}

.menu li a.staffs-link:hover {
  background-size: 60% 60%;
}

.menu li a.attendance-link {
  background-image: url(/attendance.svg);
  background-size: 65% 65%;
}

.menu li a.attendance-link:hover {
  background-size: 55% 55%;
}

.menu li a.reports-link {
  background-image: url(/report.svg);
  background-size: 80% 80%;
}

.menu li a.reports-link:hover {
  background-size: 70% 70%;
}

.menu li a.settings-link {
  background-image: url(/settings.svg);
  background-size: 80% 80%;
}

.menu li a.settings-link:hover {
  background-size: 70% 70%;
}

.menu li a.broadcast-link {
  background-size: 75% 75%;
  background-image: url(/broadcast.svg);
}

.menu li a.broadcast-link:hover {
  background-size: 65% 65%;
}

.menu li a.notifications-link {
  background-size: 75% 75%;
  background-image: url(/notification.svg);
}

.menu li a.notifications-link:hover {
  background-size: 65% 65%;
}

.menu li a.email-link {
  background-size: 75% 75%;
  background-image: url(/email-white.svg);
}

.menu li a.email-link:hover {
  background-size: 65% 65%;
}

.p-menu li a.bookings-link {
  background-size: 75% 75%;
  background-image: url(/booking.svg);
}

.p-menu li a.bookings-link:hover {
  background-size: 65% 65%;
}

.p-menu li a.reports-link {
  background-size: 80% 80%;
  background-image: url(/report.svg);
}

.p-menu li a.reports-link:hover {
  background-size: 70% 70%;
}

.p-menu li a.rupee-link {
  background-image: url(/rupee.svg);
  background-size: 70% 70%;
}

.p-menu li a.rupee-link:hover {
  background-size: 60% 60%;
}

.menu li a span,
.p-menu li a span {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 5px));
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  color: var(--black);
  font-weight: bold;
  width: fit-content;
}

.nav input:checked+label {
  background: var(--black);
  transform: translateY(calc(-50% + 4px));
  color: var(--grey);
}

.nav input:checked~.menu li:nth-child(1) {
  top: -70vh;
  transition-delay: 0.1s;
}

.nav input:checked~.menu li:nth-child(2) {
  top: -60vh;
  left: calc(50% - 10vw);
  transition-delay: 0.2s;
}

.nav input:checked~.menu li:nth-child(3) {
  top: -60vh;
  left: calc(50% + 10vw);
  transition-delay: 0.3s;
}

.nav input:checked~.menu li:nth-child(4) {
  top: -45vh;
  left: calc(50% - 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(5) {
  top: -45vh;
  left: calc(50% + 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(6) {
  top: -30vh;
  left: calc(50% - 10vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(7) {
  top: -20vh;
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(8) {
  top: -30vh;
  left: calc(50% + 10vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li:nth-child(9) {
  top: -45vh;
  transition-delay: 0.4s;
}

.nav input:checked~.p-menu li:nth-child(1) {
  top: -60vh;
  transition-delay: 0.1s;
}

.nav input:checked~.p-menu li:nth-child(2) {
  top: -50vh;
  left: calc(50% - 10vw);
  transition-delay: 0.2s;
}

.nav input:checked~.p-menu li:nth-child(3) {
  top: -50vh;
  left: calc(50% + 10vw);
  transition-delay: 0.3s;
}

.nav input:checked~.p-menu li:nth-child(4) {
  top: -35vh;
  left: calc(50% - 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.p-menu li:nth-child(5) {
  top: -35vh;
  left: calc(50% + 15vw);
  transition-delay: 0.4s;
}

.nav input:checked~.menu li a span,
.nav input:checked~.p-menu li a span {
  opacity: 1;
  transition-delay: 0.9s;
}

@media screen and (min-width: 481px) {

  .container:has(> .nav > input:checked) .email-container,
  .container:has(> .nav > input:checked) .bookings-container {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .nav input:checked~.menu li:nth-child(1) {
    top: -63vh;
  }

  .nav input:checked~.menu li:nth-child(2) {
    top: -53vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.menu li:nth-child(3) {
    top: -53vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.menu li:nth-child(4) {
    top: -38vh;
    left: calc(50% - 18vh);
  }

  .nav input:checked~.menu li:nth-child(5) {
    top: -38vh;
    left: calc(50% + 18vh);
  }

  .nav input:checked~.menu li:nth-child(6) {
    top: -23vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.menu li:nth-child(7) {
    top: -13vh;
  }

  .nav input:checked~.menu li:nth-child(8) {
    top: -23vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.menu li:nth-child(9) {
    top: -38vh;
  }

  .nav input:checked~.p-menu li:nth-child(1) {
    top: -43vh;
  }

  .nav input:checked~.p-menu li:nth-child(2) {
    top: -33vh;
    left: calc(50% - 13vh);
  }

  .nav input:checked~.p-menu li:nth-child(3) {
    top: -33vh;
    left: calc(50% + 13vh);
  }

  .nav input:checked~.p-menu li:nth-child(4) {
    top: -18vh;
    left: calc(50% - 18vh);
  }

  .nav input:checked~.p-menu li:nth-child(5) {
    top: -18vh;
    left: calc(50% + 18vh);
  }

  .headline {
    top: 20vh;
    font-size: 1.5em;
  }

  .menu li a {
    width: 7vh;
    height: 7vh;
  }

  .container .profile-div {
    height: 2em;
    width: 2em;
  }

  .container .profile-div .profile-span {
    font-size: 1em;
  }

  .container #profile-menu {
    height: 7em;
    width: 12em;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(2)>span {
    font-size: 1em;
    border: 0.5px solid grey;
    border-radius: 0.1em;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(1) {
    padding: 0.3em;
    grid-template-columns: [col] 35% [col] 75%;
  }

  .container #profile-menu>div:nth-child(1)>div:nth-child(1)>span {
    font-size: 0.4em;
  }
}

/* FOOTER STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 60px;
  display: flex;
  align-items: center;
  padding: 5px;
  color: var(--black);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

.container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card p {
  margin: 0;
}

.card p:not(:last-child) {
  margin-bottom: 0.5em;
  font-size: 0.8em;

  & strong {
    font-size: 0.8em;
  }
}

.card {
  width: 100%;
  height: 5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5em;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
  text-align: left;
  margin-bottom: 0.5em;
  cursor: pointer;
}

.card-footer {
  font-size: 0.6em;
  color: #446;
}

.email-container,
.bookings-container {
  width: 30%;
  max-width: 25vw;
  background: transparent;
  text-align: left;
  font-size: 0.8em;
  display: none;
  transition: all 0.5s;
}

.bookings-container {
  float: right;
}

.email-container #card-container,
.bookings-container #card-container {
  overflow-y: auto;
  width: 100%;
  min-height: 5em;
  max-height: 25em;
  padding: 1em;
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
}

.container .popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}

.container .popup:target {
  opacity: 1;
  visibility: visible;
}

.container .mail-popup-content {
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  width: 80%;
  padding: 1em;
  height: 90%;
  justify-content: center;
  align-items: center;
}

.container .mail-popup-content * {
  user-select: text;
}

.container .mail-popup-content header {
  display: grid;
  grid-template-columns: [col] 10% [col] 90%;
  grid-template-rows: auto;
  max-height: 20%;
  border-bottom: 0.5px solid grey;
  text-align: left;
  overflow-y: auto;
}

.container .mail-popup-content header span {
  font-size: 0.8em;
  font-family: 'Courier New', Courier, monospace;
}

iframe.body {
  height: calc(80% - 2em);
  width: 100%;
  outline: none;
  border: none;
}

.menu-show {
  z-index: 100000;
  position: absolute;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns: [col] 100%;
  grid-template-rows: auto;
  border-radius: 5px;
  width: 10em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.menu-hide {
  display: none;
  z-index: 100000;
}

.rmenu-list {
  font-size: 0.8em;
  text-align: justify;
  padding: 0.5em;
}

.profile-div {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  height: 4em;
  width: 4em;
  position: absolute;
  right: 1em;
  top: 1em;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: all 0.3s;
}

.container .profile-menu {
  height: 10em;
  width: 20em;
  display: block;
  z-index: 100000;
  position: absolute;
  background-color: white;
  padding: 2px;
  margin: 0;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.container .profile-menu>div:nth-child(1) {
  height: 80%;
  width: 100%;
  display: grid;
  grid-template-columns: [col] 65% [col] 35%;
  grid-template-rows: [row] 100%;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(2) {
  padding: 0.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% 80%;
  transition: all 0.3s;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(2)>span {
  height: 100%;
  width: 100%;
  display: flex;
  font-size: 2em;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 1px solid grey;
  border-radius: 0.2em;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(1) {
  display: grid;
  grid-template-columns: [col] 30% [col] 70%;
  grid-template-rows: auto;
  padding: 0.5em;
}

.container .profile-menu>div:nth-child(1)>div:nth-child(1)>span {
  font-size: 0.7em;
  text-align: left;
  font-family: 'Fira Code', monospace;
  word-wrap: break-word;
}

.container .profile-menu>div:nth-child(2) {
  height: 20%;
  width: 100%;
  border-top: 0.5px solid #808080;
  display: flex;
  align-items: center;
}

.container .profile-menu>div:nth-child(2)>a {
  position: absolute;
  font-size: 70%;
  color: #3366cc;
  cursor: pointer;
}

.container .profile-menu>div:nth-child(2)>a:hover {
  text-decoration: underline;
}

.container .profile-menu>div:nth-child(2)>a:nth-child(1) {
  left: 0.5em;
}

.container .profile-menu>div:nth-child(2)>a:nth-child(2) {
  right: 0.5em;
}

.container .profile-menu>div:nth-child(2)>span:hover {
  text-decoration: underline;
}

.profile-div:hover {
  box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

.profile-div .profile-span {
  height: 100%;
  width: 100%;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- DETAIL MODAL SPECIFIC STYLES --- */

/* Style for read-only fields */
.display-field {
  padding: 10px 0;
  font-size: 16px;
  color: #333;
}

.modal-content[data-mode="display"] input[readonly],
.modal-content[data-mode="display"] textarea[readonly] {
  /* Visual distinction for read-only inputs */
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  color: #555;
  cursor: default;
}

/* Button Container for Actions */
.modal-button-container.detail-actions {
  justify-content: space-between;
  gap: 10px;
  margin-top: 30px;
}

.modal-button-container.detail-actions button {
  flex: 1;
  padding: 10px 15px;
  font-size: 14px;
}

/* Specific button colors */
.control-btn.delete {
  background-color: #dc3545;
}

.control-btn.edit {
  background-color: #ffc107;
  color: #333;
}

.control-btn.reply {
  background-color: #17a2b8;
}

.control-btn.forward {
  background-color: #6c757d;
}

/* Hover effects */
.control-btn.delete:hover {
  background-color: #c82333;
}

.control-btn.edit:hover {
  background-color: #e0a800;
}

.control-btn.reply:hover {
  background-color: #138496;
}

.control-btn.forward:hover {
  background-color: #5a6268;
}

/* --- Media Queries (Mobile Adjustments) --- */
@media (min-width: 769px) {
  .mobile-booking-modal-header .close-button {
    position: absolute;
    right: 25px;
    top: 15px;
    transform: none;
  }

  .mobile-booking-modal-header {
    display: block;
    position: static;
  }

  .mobile-booking-modal-header h1 {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 98vw !important;
    padding: 10px 5vw 10px 5vw !important;
  }

  .mobile-booking-modal-hr {
    display: block;
    border: none;
    border-top: 1.5px solid #e0e0e0;
    margin: 0.5em 0 1em 0;
  }

  /* Simple two-column layout for detail action buttons on mobile */
  .modal-button-container.detail-actions {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .modal-button-container.detail-actions button {
    width: 48%;
    margin-bottom: 10px;
  }
}

.mail-popup-content div.home-menu {
  display: flex;
  width: 100%;
  border-radius: 0.2em;
  border-bottom: 1px solid #919191;
  margin-bottom: 0.5em;
  align-items: center;
  justify-content: center;
  height: 2.5em;
}

.home-menu {
  display: none;
}

.home-menu>div.create-new-button {
  width: 10em;
  border-radius: 0.3em;
  position: relative;
}

.home-menu>div.create-new-button>div {
  width: 100%;
  border-radius: 0.3em;
  display: flex;
  align-items: center;
  height: 100%;
}

.home-menu>div.create-new-button>ul,
.home-menu>.move-to>ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 10em;
  max-height: 0;
  display: none;
  position: absolute;
  top: 105%;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  background-color: white;
  border: none;
  z-index: 1000;
  transition: 0.3s all;
}

.home-menu>.move-to>ul {
  border-radius: 0.2em;
}

.home-menu>div.create-new-button>ul.show,
.home-menu>.move-to>ul.show,
.home-menu>div.category-button>ul.show {
  display: block;
  max-height: 15em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  border: 0.5px solid #808080;
  overflow-y: auto;
}

.home-menu>div.create-new-button>ul li,
.home-menu>.move-to>ul>li {
  height: 1.5em;
  padding: 0.2em;
  font-family: math;
  display: flex;
  cursor: pointer;
}

.home-menu>.move-to>ul>li[disabled] {
  cursor: not-allowed;
}

.home-menu>div.create-new-button>ul li:hover,
.home-menu>.move-to>ul>li:not([disabled]):hover {
  background-color: #0000001a;
}

.home-menu>div.create-new-button>ul li:before,
.home-menu>.move-to>ul>li:not(:last-child):before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  margin-right: 1em;
  cursor: default;
  background-color: transparent;
}

.home-menu>.move-to>ul>li:last-child>form {
  width: 100%;
}

.home-menu>.move-to>ul>li:last-child>form>input {
  border: none;
  background: transparent;
  outline: none;
  max-width: calc(100% - 2em);
}

.home-menu>.move-to>ul>li:last-child>form>button {
  border: none;
  background: transparent;
  outline: none;
  max-width: 1.5em;
  font-size: 0.6em;
  color: rgba(5, 121, 255, 0.87);
  cursor: pointer;
}

.home-menu>.move-to>ul>li:last-child>form>button:hover {
  text-decoration: underline;
  font-weight: bold;
}

.home-menu>.move-to>ul>li[data-text=INBOX]:before {
  background-image: url(/inbox-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Sent]:before {
  background-image: url(/sent-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Drafts]:before {
  background-image: url(/draft-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Trash]:before {
  background-image: url(/delete-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Junk]:before {
  background-image: url(/junk-email-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Notes]:before {
  background-image: url(/notes-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Archive]:before {
  background-image: url(/archive-blue.svg);
}

.home-menu>.move-to>ul>li[data-text=Spam]:before {
  background-image: url(/spam-blue.svg);
}

.home-menu>div.create-new-button>ul li:first-child:before {
  background-image: url(/email.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(2):before {
  background-image: url(/event.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(3):before {
  background-image: url(/task.svg);
}

.home-menu>div.create-new-button>ul li:nth-child(4):before {
  background-image: url(/group.svg);
}

.home-menu>div.create-new-button>ul>li:not(:last-child),
.home-menu>.move-to>ul>li:not(:last-child) {
  border-bottom: 0.5px solid #808080;
}

.home-menu>div.category-button,
.home-menu>div.flag-button,
.home-menu>div.sig-button {
  width: max-content;
  border-radius: 0.3em;
  display: flex;
  align-items: center;
  margin-left: 1em;
  border-radius: 0.2em;
  cursor: pointer;
  position: relative;
}

.home-menu>div.category-button>ul {
  width: 13em;
  max-height: 10em;
  overflow-y: auto;
  position: absolute;
  background-color: white;
  border: 0.5px solid lightgrey;
  border-radius: 0.2em;
  top: 100%;
  z-index: 100000;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 10px;
  display: none;
}

.home-menu>div.category-button>ul li {
  padding: 0.2em;
  display: flex;
}

.home-menu>div.category-button>ul li>span {
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.home-menu>div.category-button>ul li>span:hover {
  font-weight: bold;
}

.home-menu>div.category-button>ul li>i {
  width: 1.5em;
}

.home-menu>div.category-button {
  width: 3em;
  padding: 0.3em;
}

.home-menu>div.category-button i:not(:first-child),
.home-menu>div.flag-button i:not(:first-child),
.home-menu>div.sig-button i:not(:first-child) {
  width: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}

.home-menu>div.create-new-button>div>button {
  background: transparent;
  background-color: rgba(43, 43, 225, 0.7);
  border: none;
  outline: none;
  height: 100%;
  cursor: pointer;
}

.home-menu>div.create-new-button>div>button:nth-child(1) {
  width: 80%;
  color: white;
  font-size: 1em;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border-right: 1px solid white;
}

.home-menu>div.create-new-button>div>button:nth-child(2) {
  width: 20%;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;

}

.home-menu>div.create-new-button>div>button:hover {
  background-color: rgba(43, 43, 225, 0.85);
}

.home-menu>.delete-button,
.home-menu>.archive-button,
.home-menu>.report-spam-button,
.home-menu>.move-to>button,
.home-menu>.reply-button,
.home-menu>.reply-with-meeting-button,
.home-menu>.reply-all-button,
.home-menu>.forward-button,
.home-menu>div.read-unread,
.home-menu>div.flag-button>button,
.home-menu>div.sig-button>i:first-child,
.home-menu>.pin-button,
.home-menu>.print-button,
.home-menu>.block-button {
  border: none;
  outline: none;
  height: 100%;
  cursor: pointer;
  background: transparent;
  width: 2em;
  padding: 0;
  margin-left: 1em;
  border-radius: 0.2em;
}

.home-menu>div.sig-button>i:first-child {
  width: 1.2em;
  margin-left: 0;
  display: flex;
}

.home-menu>div.flag-button>button,
.home-menu>div.sig-button>button {
  margin-left: 0;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.home-menu>div.read-unread {
  width: 10em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: end;
}

.home-menu>div.read-unread span {
  width: 80%;
  font-size: 0.9em;
  padding-right: 0.5em;
  text-align: right;
}

.home-menu>div.read-unread:before {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  width: 15%;
  height: 1.5em;
  background-size: 70% 70%;
}

.home-menu>div.read-unread:before {
  background-image: url(/mark-as-read-blue.svg);
  background-size: 100%;
}

.home-menu>div.flag-button>button:hover,
.home-menu>div.flag-button>i:hover,
.home-menu>div.sig-button>button:hover,
.home-menu>div.sig-button>i:hover {
  background-color: #ffffff;
}

.home-menu>.move-to>button {
  margin-left: 0;
}

.home-menu>.move-to {
  width: 3em;
  border-radius: 0.2em;
  margin-left: 1em;
  transition: all 0.3s;
  display: flex;
  cursor: pointer;
  position: relative;
}

.home-menu>.move-to>div {
  width: 1em;
  align-items: center;
  justify-content: center;
  display: flex;
}

.home-menu button {
  transition: all 0.3s;
}

.home-menu>button.delete-button:not([disabled]):hover,
.home-menu>button.archive-button:not([disabled]):hover,
.home-menu>button.report-spam-button:not([disabled]):hover,
.home-menu>.move-to:not([disabled]):hover,
.home-menu>.reply-button:not([disabled]):hover,
.home-menu>.reply-with-meeting-button:not([disabled]):hover,
.home-menu>.reply-all-button:not([disabled]):hover,
.home-menu>button.forward-button:not([disabled]):hover,
.home-menu>div.read-unread:not([disabled]):hover,
.home-menu>div.category-button:not([disabled]):hover,
.home-menu>div.flag-button:not([disabled]):hover,
.home-menu>div.sig-button:not([disabled]):hover,
.home-menu>.pin-button:not([disabled]):hover,
.home-menu>.print-button:not([disabled]):hover,
.home-menu>.block-button:not([disabled]):hover {
  background-color: #efefef;
  border: 0.5px solid #d4d4d4;
}

.home-menu>button.delete-button[disabled],
.home-menu>button.archive-button[disabled],
.home-menu>button.report-spam-button[disabled],
.home-menu>.move-to[disabled],
.home-menu>.move-to[disabled]>button,
.home-menu>.move-to[disabled]>div,
.home-menu>.reply-button[disabled],
.home-menu>.reply-with-meeting-button[disabled],
.home-menu>.reply-all-button[disabled],
.home-menu>button.forward-button[disabled],
.home-menu>div.read-unread[disabled],
.home-menu>div.category-button[disabled],
.home-menu>div.flag-button[disabled],
.home-menu>div.flag-button[disabled]>button,
.home-menu>div.sig-button[disabled],
.home-menu>div.sig-button[disabled]>i,
.home-menu>.pin-button[disabled],
.home-menu>.print-button[disabled],
.home-menu>.block-button[disabled] {
  cursor: not-allowed;
}

.home-menu>.delete-button:hover svg>g>path,
.home-menu>.archive-button:hover svg>g>path,
.home-menu>.report-spam-button:hover svg>g>path,
.home-menu>.report-spam-button:hover svg>g>polygon,
.home-menu>.move-to:hover button svg>g>path,
.home-menu>.forward-button:hover svg g>path,
.home-menu>div.category-button:hover>svg,
.home-menu>div.flag-button:hover svg,
.home-menu>div.sig-button:hover svg,
.home-menu>button.pin-button:hover svg {
  stroke-width: 1.5;
}

.home-menu>button.print-button:hover svg path,
.home-menu>button.print-button:hover svg rect,
.home-menu>button.print-button:hover svg polyline {
  stroke-width: 2.5;
}

.home-menu>button.reply-with-meeting-button:hover svg {
  stroke-width: 5;
}

.home-menu>button.print-button:hover svg circle {
  r: 1.25;
}

.home-menu>div.category-button:hover>i>svg,
.home-menu>div.flag-button:hover i>svg {
  stroke-width: 50;
}

.home-menu>.reply-button:hover svg>g>path,
.home-menu>.reply-all-button:hover svg>g>path {
  stroke-width: 2;
}

.home-menu>.move-to:hover>div>svg {
  stroke-width: 20;
}
#login-content #app {
    width: 50vh;
    height: 98%;
    background: white;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
    left: 50px;
    position:relative;
}

#login-content #app > .app-view > footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 1vh;
    position: absolute;
}

#login-content #app > .app-view > footer > a, 
#login-content #app > .app-view > footer > label {
    color: #3366cc;
    cursor: pointer;
    transition: all 1s;
}

#login-content #app > .app-view > footer > a:hover, 
#login-content #app > .app-view > footer > label:hover {
    text-decoration: underline;
    font-weight: bold;
}

#login-content #app > .app-view > footer > label.contact-us{
    display: none;
}

#login-content:has(#app > .app-view > footer > #contact-us:checked) #contact-us-popup {
    display: flex;
}

#login-content .app-view div:has(input[for=password]){
    display:flex;
    top: 7.5vh;
    height: 7.5vh;
    width: calc(100% - 13vh);
    position: absolute;
    left: 6.5vh;
    box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
}
  
#login-content .app-view, #login-content .app-view-signup {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    opacity: 1;
}

#login-content .app-view-signup div:has(input[type=file]){
    height: 20vh;
    width:20vh;
    border:1px solid lightgrey;
    border-radius: 50%;
    font-size: 2vh;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #00000060;
    cursor: pointer;
    z-index: 1;
    padding: 0.2em;
    left: 15vh;
    
    &:not(:has(> img[src])):before {
        content: 'Add account picture\a(Double click to add)';
        text-align: center;
    }

    & > img {
        border-radius: 50%;
    }

    & > layer {
        position:absolute;
        height:100%;
        width:100%;
        top:0;
        left:0;
        z-index:10;
        border-radius:0.2em;
        background: rgba(0,0,0,0.15);
        box-shadow: 0 3px 5px 0 rgba(31,38,135,0.37);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255,255,255,0.18);
        background-image: url(/delete-white.svg);
        background-size: 2em;
        background-position: center;
        background-repeat: no-repeat;
        cursor:pointer;
        max-height: 0;
        max-width: 0;
        transition: all 0.2s ease-out;

        & > button {
          float: right;
          background: transparent;
          outline: none;
          border: none;
          cursor: pointer;
          padding: 0;
          max-height: 0;
          max-width: 0;
  
          &:hover > svg > path{
            stroke-width: 5;
          }
        }
    }
}



#login-content .app-view-signup {
    opacity: 0;
    top: -100%;
}

#login-content .app-view-signup div:has(> input:not([type=file])){
    height: 7.5vh;
    top: 10%;

    & > input:focus {
        animation: box-shadow-anim 1s forwards;
    }

    &:before {
        content: '';
        height: 3vh;
        width: 3vh;
        display: block;
        top: 30%;
        left: 3%;
    }
}

#login-content .app-view-signup > form > div.custom-select-country::before,
#login-content .app-view-signup > form > div.custom-select-states::before {
    top: -10%;
    left: -7%;
}

@keyframes box-shadow-anim {
    from {
        box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
    } to {
        box-shadow: inset 0 -0.5vh #0F9EDE;
    }
}

@keyframes box-shadow-anim-reverse {
    from {
        box-shadow: inset 0 -0.5vh #0F9EDE;
    } to {
        box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
    }
}

#login-content .app-view-signup div:has(> input[type=email]){
    &:before {
        background: url(/email.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[for=password]),
#login-content .app-view-signup div:has(> input[for=confirm_password]) {
    &:before {
        background: url(/password.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[for=name]) {
    &:before {
        background: url(/name.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup div:has(> input[type=tel]) {
    &:before {
        background: url(/phone.svg) no-repeat center center / cover;
    }
}

#login-content .app-view-signup > header > .back-button {
    background-image:url(/back-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    height: 3vh;
    width: 3vh;
    background-color: transparent;
    cursor: pointer;
    float: left;

    &:hover{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
}

#login-content .app-view-signup > header > h2{
    flex-grow: 1;
    text-align: center;
    margin-block-start: 0;
    margin-block-end: 0;
    color: #3366cc;
}

#login-content .app-view-signup > header {
    padding: 3vh;
    display: flex;
    align-items: center;
}

#login-content .app-view-signup form > button {
    border: none;
    width: 90%;
    height: 5vh;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #99ccff;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 2px;
    transition: all 0.5s;
    position: absolute;
    overflow: hidden;
    bottom: 5%;
    left: 5%;

    &:before, &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(52, 152, 253, 0.25);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }

    &:hover:before, &:hover:after {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    & > span {
        position: relative;
        z-index: 2;
    }
}
  
#login-content .app-header {
    padding: 6vh;
}

#login-content .app-header, #login-content .app-header > * {
    font-family: system-ui;
    font-size: 1.5em;
    margin: 0;
    font-weight: 300;
}

#login-content .app-header > h1 {
    font-size: 4.8vh;
    font-weight: 400;
    margin-bottom: 4.8vh;
}

#login-content .app-header > h2 {
    font-size: 3vh;
}
  
#login-content .app-subheading {
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-register {
    position: relative;
    bottom: 1em;
    color: rgba(0, 0, 0, 0.45);
    display:flex;
    align-items: center;
    justify-content: center;
}

#login-content .app-register > a {
    font-weight: 400;
}

#login-content input:not([for=password]) {
    width: calc(100% - 13vh);
    height: 7.5vh;
    left: 6.5vh;
    box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
}

#login-content input[for=password]::-ms-reveal,
#login-content input[for=password]::-ms-clear,
#login-content input[for=confirm_password]::-ms-reveal,
#login-content input[for=confirm_password]::-ms-clear{
    display: none;
}
  
#login-content input {
    font-size: 2.5vh;
    margin-bottom: 2vh;
    background: transparent;
    position: absolute;
    top: 0;
    z-index: 2;
    border: none;
    outline: none;

    &::placeholder {
        color: #808080a5;
    }
}

#login-content .app-view-signup input {
    margin-bottom: 0;
}

#login-content input:not([type=password]):focus {
    outline: none;
    box-shadow: inset 0 -0.5vh transparent;
}

/* #login-content .app-view input[type=email] {
    top: 40%;
} */

/* #login-content .app-view input[type=password] {
    top: calc(40% + 7.5vh);
} */
  
#login-content .app-view form:has(input[type=email]:valid) ~ * .st1,
#login-content form:has(div > input[type=email]:valid) ~ * .st1 {
    transition-timing-function: ease-in-out;
    stroke-dasharray: 50, 153;
    stroke-dashoffset: 25;
}

#login-content form:has(> input[type=email]:focus) ~ * .st0 {
    stroke-dasharray: 210, 900;
    stroke-dashoffset: 0;
}
  
#login-content .app-view form:has(div > input[type=password]:focus) ~ * .st0,
#login-content .app-view form:has(div > input[type=password]:valid) ~ * .st0,
#login-content .app-button:focus ~ * .st0 {
    stroke-dasharray: 210, 900;
    stroke-dashoffset: -305;
}
  
#login-content form:has(> input:not(:valid)) ~ * .app-button,
#login-content form:has(div > input:placeholder-shown) ~ * .app-button {
    pointer-events: none;
    opacity: 0.6;
}
  
#login-content .app-button {
    text-decoration: none;
    color: #3366cc;
    font-size: 4.8vh;
    padding: 0 6vh;
    position: absolute;
    font-weight: 400;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
}

#login-content .app-button:focus {
    outline: none;
}
  
@-webkit-keyframes button-press {
    from, 20% {
      opacity: 1;
    }
    10% {
      opacity: 0.4;
    }
    40%, to {
      opacity: 0;
    }
}
  
@keyframes button-press {
    from, 20% {
      opacity: 1;
    }
    10% {
      opacity: 0.4;
    }
    40%, to {
      opacity: 0;
    }
}

#login-content #welcome ~ * .app-button {
    -webkit-animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
            animation: button-press 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

#login-content #welcome ~ * .st0 {
    stroke-dashoffset: -760;
    stroke-dasharray: 140, 900;
    transition-duration: 1.2s;
    /*-webkit-animation: disappear 0s 1.3s both;
            animation: disappear 0s 1.3s both;*/
}

#login-content #welcome ~ * .st1 {
    transition-duration: 0.3s;
    opacity: 0;
}

#login-content #welcome ~ * .app-graphic {
    transform: translate(0, 0);
    opacity: 1;
}

#login-content #welcome ~ * #svg-lines {
    -webkit-animation: pulse 0.5833333333s 1.2s ease-in-out both;
            animation: pulse 0.5833333333s 1.2s ease-in-out both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

#login-content #welcome ~ * .svg-loader {
    -webkit-animation: appear 0s 1.2s both;
            animation: appear 0s 1.2s both;
}

#login-content #welcome ~ * .svg-loader-segment {
    transition-delay: 3.75s;
    opacity: 0;
}

#login-content #welcome ~ * .svg-loader-segment.-cal {
    transform: translateX(4vh) translateY(-4vh);
    stroke: #08B5CF;
}

#login-content #welcome ~ * .svg-loader-segment.-heart {
    transform: translateX(3.5vh) translateY(6.7vh);
    stroke: #9965AA;
}

#login-content #welcome ~ * .svg-loader-segment.-steps {
    transform: translateX(-6.9vh) translateY(5.2vh);
    stroke: #0F9EDE;
}

#login-content #welcome ~ * .svg-loader-segment.-temp {
    transform: translateX(-14vh) translateY(-4vh);
    stroke: #F4814B;
}

#login-content #welcome ~ * .svg-data {
    opacity: 1;
    transform: translate(0, 0);
    transition: transform 0.6s 4.95s, opacity 0.6s 4.95s, stroke-dasharray 0.6s 4.95s, stroke-dashoffset 0.6s 4.95s;
}

#login-content #welcome ~ * .svg-data.-temp {
    stroke-dasharray: 118;
}

#login-content #welcome ~ * .svg-data.-cal {
    stroke-dasharray: 113;
}

#login-content #welcome ~ * .svg-data.-steps-bg, #welcome ~ * .svg-data.-steps {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

#login-content #welcome ~ * .svg-data.-heart {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
}

#login-content #welcome ~ * .svg-activity-fill,
#login-content #welcome ~ * .svg-activity-line {
    transform: translateY(0);
    opacity: 1;
    transition-duration: 1.2s;
    transition-delay: 4.95s;
}

#login-content #welcome ~ * .app-view:nth-child(1) > :not(svg),
#login-content #welcome ~ * *[class^=app-view]:nth-child(2) > :not(svg) {
    opacity: 0;
    pointer-events: none;
}

#login-content #welcome ~ * .app-view:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
}

#login-content #welcome ~ * .app-view:nth-child(2) > .app-header > *,
#login-content #welcome ~ * .app-view:nth-child(2) > .app-content,
#login-content #welcome ~ * .app-view:nth-child(2) > .app-activity,
#login-content #welcome ~ * .app-view:nth-child(2) .app-item,
#login-content #welcome ~ * .app-view:nth-child(2) .app-item > *:not(.app-graphic) {
    transform: translateY(0);
    transition-delay: 4.95s;
    opacity: 1;
}

#login-content #welcome ~ * .app-view:nth-child(2) > .app-activity {
    opacity: 1;
}

#login-content #welcome ~ * .app-view:nth-child(2) .app-item, #welcome ~ * .app-view:nth-child(2) > .app-content {
    border-color: #E3E3E3;
}
  
#login-content #welcome:not(:target) ~ * .app-graphic {
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
  
@-webkit-keyframes pulse {
    from, to {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
}
  
@keyframes pulse {
    from, to {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
}

@-webkit-keyframes disappear {
    to {
      opacity: 0;
    }
}

@keyframes disappear {
    to {
      opacity: 0;
    }
}

@-webkit-keyframes appear {
    to {
      opacity: 1;
    }
}

@keyframes appear {
    to {
      opacity: 1;
    }
}

#login-content .app-view:nth-child(2) {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

#login-content .app-view:nth-child(2) > .app-header {
    font-size: 1rem;
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4vh;
    padding-bottom: 1rem;
}

#login-content .app-view:nth-child(2) > .app-header > h2 {
    transform: translateY(1rem);
}

#login-content .app-view:nth-child(2) > .app-header > h2 > em {
    color: #0F9EDE;
    font-style: normal;
}

#login-content .app-view:nth-child(2) > .app-header > h2,
#login-content .app-view:nth-child(2) .app-item > *:not(.app-graphic) {
    transition-duration: 0.9s;
    opacity: 0;
}

#login-content .app-view:nth-child(2) > .app-content {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
    flex-basis: 40%;
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
}

#login-content .app-view:nth-child(2) > .app-activity {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    opacity: 0;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-header {
    padding: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-header > h2 {
    flex-grow: 1;
}

#login-content .app-view:nth-child(2) > .app-activity > .app-graph {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
  
#login-content .app-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
}
  
#login-content .app-item {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    border: 1px solid transparent;
    padding: 2vh 4vh;
    padding-bottom: 0;
}

#login-content .app-item > *:not(.app-graphic) {
    transform: translateY(1rem);
}

#login-content .app-item:nth-child(1) .app-graphic {
    transform: translateX(17vh) translateY(5vh);
}

#login-content .app-item:nth-child(2) .app-graphic {
    transform: translateX(-4vh) translateY(4vh);
}

#login-content .app-item:nth-child(3) .app-graphic {
    transform: translateX(6vh) translateY(-7vh);
}

.app-item:nth-child(4) .app-graphic {
    transform: translateY(-8vh) translateX(-4vh);
}
  
#login-content .app-graphic {
    transition: transform 1.2s 3.75s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s 4.35s cubic-bezier(0.77, 0, 0.175, 1);
    margin-top: 1rem;
    opacity: 0;
}
  
#login-content .app-data {
    font-size: 2rem;
}
  
#login-content .app-unit {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-label {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
}
  
#login-content .app-menu-icon {
    width: 1.5rem;
    height: 2px;
    background: #D0DFF0;
    margin-top: 0.5rem;
}

#login-content .app-menu-icon:before, .app-menu-icon:after {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 100%;
    background: #D0DFF0;
}

#login-content .app-menu-icon:before {
    top: -0.5rem;
    right: 0.1rem;
}

#login-content .app-menu-icon:after {
    top: 0.5rem;
    left: 0.1rem;
}
  
#login-content .app-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
}
  
#login-content .app-tag {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.45);
}

#login-content .app-tag + .app-tag {
    margin-left: 1rem;
}

#login-content .app-tag:before {
    content: "";
    display: inline-block;
    margin-right: 0.5rem;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    background: #D0DFF0;
}

#login-content .app-tag.-active:before {
    background: #0F9EDE;
}
  
#login-content {
    font-family: Montserrat, sans-serif;;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    /*justify-content: space-around;*/
    align-items: center;
    background: #f8f8f8;
    font-size: 2.5vh;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    user-select: none;
}
  
#login-content .st0, .st1, #login-content .svg-loader-segment {
    fill: none;
    stroke: #0F9EDE;
    stroke-width: 0.5vh;
    stroke-alignment: inside;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
  
#login-content .svg-loader {
    opacity: 0;
}
  
#login-content .st0 {
    stroke-dasharray: 0, 900;
    stroke-dashoffset: 0;
}
  
#login-content .st1 {
    transition-delay: 0.3s;
    stroke-dasharray: 50, 153;
    stroke-dashoffset: -153;
}
  
#login-content .svg-loader-segment {
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}
  
#login-content .app-view #svg-lines, #login-content .app-view-signup #svg-lines {
    left: 0;
    width: 100%;
    z-index: 0;
    overflow: visible;
    transform-origin: center 4vh;
}

#login-content .app-view-signup #svg-lines {
    position: absolute;
    top: 18.5%;
}

#login-content .app-view #svg-lines {
    position: relative;
    top: -61.5vh;
}
  
#login-content .svg-data {
    fill: none;
    stroke-width: 0.5vh;
}

#login-content .svg-data.-temp {
    stroke: #F4814B;
    stroke-dasharray: 20, 118;
}

#login-content .svg-data.-cal {
    stroke: #08B5CF;
    stroke-dasharray: 20, 113;
}

#login-content .svg-data.-steps-bg {
    stroke: #E0E1E0;
    stroke-dasharray: 40, 100;
    stroke-dashoffset: -60;
}
  
#login-content .svg-data.-steps {
    stroke: #0F9EDE;
    stroke-dasharray: 20, 73;
    stroke-dashoffset: -53;
}

.svg-data.-heart {
    stroke: #9965AA;
    stroke-dasharray: 50, 200;
    stroke-dashoffset: -150;
}
  
.svg-activity-fill {
    fill: #C4E4F8;
}
  
#login-content .svg-activity-line {
    fill: none;
    stroke: #65BCEA;
    stroke-miterlimit: 10;
    stroke-width: 0.25vh;
}
  
#login-content .svg-activity-avg, #login-content .svg-activity-indicator {
    fill: none;
    stroke: #D0DFF0;
    stroke-width: 0.25vh;
    mix-blend-mode: multiply;
}
  
#login-content .svg-activity-fill, #login-content .svg-activity-line {
    transform: translateY(10vh);
    opacity: 0;
}
  
#login-content > .meta-container {
    left: 10%;
}
  
#login-content .meta {
    flex-basis: calc(80% - 50vh);
    display: inline-block;
    animation: inner-left-visible 1s 0.5s ease both;
}
  
#login-content .meta > * {
    transition: none !important;
}

#login-content .meta h1 {
    font-weight: 300;
    font-size: 4em;
    color: #333;
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

#login-content .meta p {
    line-height: 1.3;
    font-size: 1.5vw;
    color: #3366cc;
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

#login-content .meta a {
    color:rgba(192, 8, 125, 0.29);
}

#login-content .meta a:hover {
    color:rgb(192, 8, 125);
}

#login-content .welcome_span{
    display: none;
}
  
#login-content .route {
    display: none;
}
  
#login-content *, #login-content *:before, #login-content *:after {
    box-sizing: border-box;
    position: relative;
}
  
@keyframes inner-left-visible {
    from {
      transform: translateX(50%);
      opacity: 0;
      display: none;
    }
    to {
      transform: none;
      opacity: 1;
      display: inline-block;
    }
}
  
@keyframes text-clip {
    from {
      clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.google_icon {
    background-image: url(/google-icon.svg);
}

.facebook_icon {
    background-image: url(/facebook.svg);
}

.instagram_icon {
    background-image: url(/instagram.svg);
}

.icon-button {
    background-position: center;
    background-repeat: no-repeat;
    height: 5vh;
    width: 5vh;
    background-color: white;
    border: none;
    outline: none;
    cursor:pointer;

    &:hover {
        border-radius: 0.2em;
        border: 1px solid lightgrey;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
}

#login-content .signup {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: #3366cc;
    font-weight: bold;

    &:hover {
        text-decoration: underline;
    }
}

@keyframes element-invisible {
    from {
        top: 0;
        opacity: 1;
    }
   to {
        top: -100%;
        opacity: 0;
    }
}

@keyframes element-visible {
    from {
        top: -100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

.invisible {
    animation: element-invisible 0.3s ease both;
}

.visible {
    animation: element-visible 0.3s 0.3s ease both;
}

@media screen and (max-width: 750px){
    #login-content .meta-container {
        display: none;
    }
    
    #login-content #app {
        left: 0;
        position: relative;
        width: 100%;
    }
      
    #login-content .app-view #svg-lines {
          top: -60.5vh;
    }
  
    #login-content .app-view-signup #svg-lines {
          top: 18.5%;
    }
  
    #login-content #app .welcome_span{
          display: block;
    }

    #login-content #app > .app-view > footer > label.contact-us {
        display: block;
    }

    #login-content .app-register {
        bottom: 0.5em;
    }
}

#login-content .app-view-signup .custom-select-country,
#login-content .app-view-signup .custom-select-states {
    position: relative;
    top: 10%;
    height: 7.5vh;
    align-items: center;
    display: flex;
    justify-content: center;

    &:before {
        content: '';
        height: 3vh;
        width: 3vh;
        display: block;
        left: -6.5%;
        top: -10%;
    }
}

#login-content .app-view-signup .custom-select-country:before {
    background: url(/flag.svg) no-repeat center center / cover;
}

#login-content .app-view-signup .custom-select-states:before {
    background: url(/states.svg) no-repeat center center / cover;
}
  
#login-content .app-view-signup .custom-select-country select,
#login-content .app-view-signup .custom-select-states select {
    display: none; /*hide original SELECT element:*/
}
  
#login-content .app-view-signup .select-selected-country,
#login-content .app-view-signup .select-selected-states {
    background-color: transparent;
    padding: 0;
    width: calc(100% - 13vh);
    border: none;
    align-items: center;
    display: flex;
    outline: none;
    padding-bottom: 0.5em;
    left: -2.5%;
    color: #00000060;

    &:focus {
        border-bottom: 0.5px solid lightgrey;
    }
}

#login-content .app-view-signup .select-selected-country:empty:not(:focus):before,
#login-content .app-view-signup .select-selected-states:empty:not(:focus):before {
    content: attr(data-text);
}
  
  /*style the arrow inside the select element:*/
#login-content .app-view-signup .select-selected-country:after,
#login-content .app-view-signup .select-selected-states:after {
    position: absolute;
    content: "";
    right: 1vh;
    width: 0.7em;
    height: 0.7em;
    background: url(/right-triangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition-duration: 1s;
    transition-property: transform;
}
  
  /*point the arrow upwards when the select box is open (active):*/
#login-content .app-view-signup .select-selected-country.select-arrow-active:after,
#login-content .app-view-signup .select-selected-states.select-arrow-active:after {
    transform: rotate(90deg);
}
  
  /*style the items (options), including the selected item:*/
#login-content .app-view-signup .select-items-country div, 
#login-content .app-view-signup .select-items-states div {
    color: #ffffff;
    padding: 1vh;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    color: black;
    font-size: 0.8em;
    background-color: #46464614;

    &:hover {
        color:white;
        font-weight: bold;
        background-color: #464646;
        animation: mousein-list-item 1s;
    }
}

@keyframes mousein-list-item {
    from {
        background-color: #46464614;
        color: black;
        font-weight: normal;
    }
    to {
        color:white;
        background-color: #464646;
        font-weight: bold;
    }
}
  
  /*style items (options):*/
#login-content .app-view-signup .select-items-country,
#login-content .app-view-signup .select-items-states {
    position: absolute;
    background-color: white;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow-y: auto;
    transition: max-height 1s cubic-bezier(0, 1, 0, 1);
    max-height: 18vh;
    justify-self: center;
    width: 70%;
    box-shadow: 1px 1px 1px 1px #808080;
    border-radius: 0.2em;
}
  
  /*hide the items when the select box is closed:*/
#login-content .app-view-signup .select-hide {
    max-height: 0;
    box-shadow: none;
}
  
.select-items-country div:hover, .select-items-states div:hover, .same-as-selected-country, .same-as-selected-states {
    background-color: rgba(213, 220, 220, 0.2);
}

#login-content .meta .whatsapp, 
#login-content .meta .call, 
#login-content .meta .email {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    width: 5em;
    display: block;
    height: 5em;
    bottom: -3em;
}

#login-content .contact-us-popup-content .whatsapp, 
#login-content .contact-us-popup-content .call, 
#login-content .contact-us-popup-content .email {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    width: 3em;
    display: block;
    height: 3em;
}

#login-content .contact-us-popup-content .email {
    background-image: url(/email-contact.svg);
    margin-left: 2em;
}

#login-content .contact-us-popup-content .whatsapp {
    background-image: url(/whatsapp.svg);
}

#login-content .contact-us-popup-content .call {
    background-image: url(/call.svg);
    margin-left: 2em;
}

#login-content .meta .email {
    background-image: url(/email-contact.svg);
    justify-self: center;
    position: relative;
}

#login-content .meta .whatsapp {
    background-image: url(/whatsapp.svg);
    right: 2em;
}

#login-content .meta .call {
    background-image: url(/call.svg);
    left: 2em;
    width: 4em;
    height: 4em;
}

#login-content .popup {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
}

#login-content .popup:target {
    opacity: 1;
    visibility: visible;
}

#login-content .popup .contact-us-popup-content {
    background-color: white;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    background: white;
    width: max-content;
    padding: 0 1em;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.rtf-div table td[rowspan] > div.first div.second, div.rtf-div table td > div.first:has(> div.first > br) div.second {
                align-items: start;
}

div.rtf-div table th > div > div, div.rtf-div table td > div > div {
    outline: none;
    overflow: hidden;
    border: none;
}

div.rtf-div table th, div.rtf-div table td {
    position: relative;
    word-wrap: break-word;
    max-width: 100%;
}

div.rtf-div table {
    table-layout: fixed;
    position: relative;
}

div.rtf-div table th.fixed, div.rtf-div table td.fixed {
    background: rgba(228, 228, 228, 0.6);
    position: sticky;
}

div.rtf-div table th.fixed, div.rtf-div table td.fixed {
    background: rgba(228, 228, 228, 0.6);
    position: sticky;
}

div.rtf-div table th.fixed {
    top: 0;
}

div.rtf-div table td.fixed {
    left: 0;
}

div.rtf-div table th > div.first, div.rtf-div table td > div.first {
    min-width: 3em;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
}

div.rtf-div table th > div.first div.first,
div.rtf-div table td > div.first div.first {
    flex-grow: 1;
    width: 100%;
}

div.rtf-div table, div.rtf-div table th, div.rtf-div table td {
    border: 1px solid lightgrey;
    border-collapse: collapse;
    max-width: 100%;
    font-size: 1em;
}

div.rtf-div ul, div.rtf-div ol {
    margin-left: 5em;
    overflow-x: auto;
}

.editable-code.active {
    border: 1px solid #388bff;
}

.editable-code label {
    width: 100%;
    height: 1.5em;
    text-align: center;
    font-size: 0.7em;
    padding: 0.2em;
    background: linear-gradient(to bottom, #ffffff, lightgrey);
    color: black; 
}

.editable-code code {
    display: flex;
    font-size: 1em;
    position: relative;
    margin-left: 3.5em;
}

.editable-code code:before {
    counter-increment: line;
    content: counter(line) ". ";
    display: inline-block;
    padding-left: 0.2em;
    width: 3em;
    min-width: 3em;
    background-color: #d4d4d4;  
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3.5em;
    text-align: center;
}

.editable-code code * {
    font-family: monospace;
}

div:has(> .editable-code) {
    max-width: 90%; 
    min-width: 90%; 
    margin: auto; 
    overflow: auto;
}

.editable-code {
    counter-reset: line;
    height: 100%;
    border: 0.5px solid #9898989d;
    background-color: #f5f5f563;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
    padding-right: 0.2em; 
    outline: none;
}

.no-border {
    width: 100%; 
    border: none; 
    outline: none;
}
.mail-header,
.mail-container {
    color: var(--mail-appearance-text, #1C274C);
}

.mail-header {
    display: flex;
    height: 3em;
    background-color: var(--mail-appearance-rail, #d5e4ef);
    align-items: center;
}

.mail-appearance-image-theme .mail-header {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.18)), var(--mail-appearance-image);
    background-position: center;
    background-repeat: repeat;
    background-size: auto 100%;
}

.mail-appearance-dark.mail-appearance-image-theme .mail-header {
    background-image: linear-gradient(90deg, rgba(10, 15, 22, 0.18), rgba(10, 15, 22, 0.28)), var(--mail-appearance-image);
}

.mail-header > span {
    color: var(--mail-appearance-accent, #6574ba) !important;
}

.search-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-flex: 1;
    align-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: var(--mail-appearance-panel, white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    height: 70%;
    overflow: visible;
    position: relative;
    width: 50%;
    justify-self: center;
    border: 1px solid var(--mail-appearance-border, lightgrey);
    border-left: none;
    border-right: none;
    outline: none;
    transition: 0.3s all;
    gap: 0.35em;
    padding: 0 0.35em;
}

.search-mail {
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    outline: none;
    background: var(--mail-appearance-panel, white);
    height: 70%;
    width: 1.5em;
    border: 1px solid var(--mail-appearance-border, lightgrey);
    border-left: none;
    padding: 0.2em;
    cursor: pointer;
}

.search-mail:hover {
    background-color: var(--mail-appearance-hover, #e7e7e7);
}

.search-cancel svg,
.search-cancel svg *,
.search-mail svg,
.search-mail svg * {
    color: var(--mail-appearance-muted, #808080) !important;
    fill: var(--mail-appearance-muted, #808080) !important;
    stroke: var(--mail-appearance-muted, #808080) !important;
}

.search-container input {
    flex: 1;
    min-width: 6em;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mail-appearance-text, #1C274C);
}

.mail-search-label {
    display: flex;
    align-items: center;
    height: 70%;
    padding: 0 0.45em;
    border-radius: 0.2em;
    background-color: var(--mail-appearance-rail, #d5e4ef);
    color: var(--mail-appearance-text, #1C274C);
    font-size: 0.85em;
    white-space: nowrap;
}

.mail-search-label.remove {
    display: none;
}

.mail-search-options {
    display: none;
    position: absolute;
    top: calc(100% + 0.25em);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.25em 0;
    list-style: none;
    background-color: var(--mail-appearance-panel, white);
    border: 1px solid var(--mail-appearance-border, lightgrey);
    border-radius: 0.2em;
    box-sizing: border-box;
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.12);
    z-index: 20;
}

.mail-search-options.show {
    display: block;
}

.search-container:not(:focus-within) .mail-search-options.show {
    display: none;
}

.mail-search-options li {
    padding: 0.45em 0.75em;
    cursor: pointer;
    color: var(--mail-appearance-text, #1C274C);
    font-size: 0.9em;
}

.mail-search-options li:hover,
.mail-search-options li.selected {
    background-color: var(--mail-appearance-rail, #d5e4ef);
}

.search-container:not(:focus-within) {
    width: 30%;
}

.mail-header:not(:has(> .search-container:focus-within)) .search-cancel {
    margin-left: calc(30% - 4.5em);
}

.search-cancel {
    background: var(--mail-appearance-panel, white);
    height: 70%;
    width: 1.5em;
    outline: none;
    border: none;
    border: 1px solid var(--mail-appearance-border, lightgrey);
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    border-right: none;
    cursor: pointer;
    margin-left: calc(25% - 4.5em);
    transition: 0.3s all;
}

.search-cancel:hover {
    background-color: var(--mail-appearance-hover, #e7e7e7);
}

.mail-container {
    display: flex;
    height: calc(100% - 3em);
    width: 100%;
}

.left-side-menus {
    height: 100%;
    width: 3em;
    background-color: var(--mail-appearance-rail, #d5e4ef);
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 2em [row] 2em [row] 2em [row] 2em [row] 2em;
    row-gap: 0.5em;
}

.left-side-menus a {
    background: transparent;
    color: var(--mail-appearance-text, #1C274C);
    display: flex;
    align-items: center;
    gap: 0.55em;
    height: max-content;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}

.left-side-menus svg {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.mail-appearance-monochrome-icons .left-side-menus svg {
    filter: grayscale(1) saturate(0);
    opacity: 0.75;
}

.mail-appearance-show-app-names .left-side-menus {
    width: 8.75em;
}

.mail-appearance-show-app-names .mail-content {
    width: calc(100% - 8.75em);
}

.mail-appearance-show-app-names .left-side-menus a::after {
    content: attr(title);
    font-size: 0.86em;
    font-weight: 500;
    white-space: nowrap;
}

.left-side-menus div:nth-child(1),
.left-side-menus div:nth-child(2) {
    padding: 0.8em;
}

.left-side-menus div:nth-child(3) {
    padding: 0.5em;
}

.left-side-menus div:nth-child(4) {
    padding: 0.3em;
}

.left-side-menus div:nth-child(5) {
    padding: 0.6em;
}

.mail-content {
    width: calc(100% - 3em);
    height: 100%;
}

.menu-header {
    height: 5em;
    width: 100%;
    background-color: color-mix(in srgb, var(--mail-appearance-rail, #d5e4ef) 46%, transparent);
    color: var(--mail-appearance-text, #1C274C);
}

.mail-list.resizing,
.mail-content .folder-drawer.resizing {
    transition: none !important;
}

.mail-content .folder-drawer {
    height: 100%;
    width: 0;
    opacity: 0;
    border: 1px solid var(--mail-appearance-border, lightgrey);
    background-color: var(--mail-appearance-panel, white);
    transition: 0.3s all;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}

.folding-container {
    width: 100%;
    height: 2em;
    display: flex;
    align-items: center;
    background-color: color-mix(in srgb, var(--mail-appearance-rail, #d5e4ef) 36%, transparent);
    position: relative;
}

.mail-content .mail-list>.mail-options>.folding-container {
    left: 0;
    position: absolute;
    background: var(--mail-appearance-panel, white);
    color: var(--mail-appearance-text, #1C274C);
    z-index: 10;
}

.mail-content .folder-drawer>.folding-container+ul,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    height: 0;
    opacity: 0;
    transition: 0.3s all;
}

.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul {
    max-height: 0;
    min-height: 0;
    margin-block-end: 0;
}

.mail-content .folder-drawer>.folding-container+ul li {
    color: var(--mail-appearance-text, #1C274C);
    height: 2em;
    padding: 0.5em;
    font-weight: 200;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.3s all;
    position: relative;
}

.mail-content .folder-drawer>.folding-container+ul li:has(input[type=radio]:checked) {
    background-color: var(--mail-appearance-accent, #ffb6b6);
    color: white;
    border-left: 5px solid color-mix(in srgb, var(--mail-appearance-accent, #007bd3) 72%, white);
}

.mail-content .folder-drawer>.folding-container:nth-child(1):has(> input:checked)+ul {
    margin-bottom: 1em;
}

.mail-content .folder-drawer>.folding-container+ul li:hover {
    background-color: var(--mail-appearance-accent, #ffb6b6);
    color: white;
}

.mail-content .folder-drawer>.folding-container+ul li:hover>.folder-menu {
    display: block;
}

.mail-content .folder-drawer>.folding-container+ul li:has(input[type=radio]:checked)>.folder-menu,
.mail-content .folder-drawer>.folding-container+ul li>.folder-menu:focus {
    display: block;
}

.mail-content .folder-drawer>.folding-container+ul li label {
    margin-left: 0.5em;
    cursor: pointer;
}

.folder-context-menu {
    display: none;
    position: absolute;
    z-index: 1200;
    width: 19em;
    margin: 0;
    padding: 0.35em 0;
    list-style: none;
    color: var(--mail-appearance-text, #333);
    background-color: var(--mail-appearance-panel, #fff);
    border: 1px solid var(--mail-appearance-border, #d4d4d4);
    border-radius: 0.35em;
    box-shadow: 0 0.35em 1.2em rgba(0, 0, 0, 0.22);
}

.folder-context-menu li {
    min-height: 2.65em;
    display: grid;
    grid-template-columns: 1.6em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75em;
    padding: 0.35em 1em;
    box-sizing: border-box;
    font-size: 0.95em;
    cursor: pointer;
}

.folder-context-menu li.folder-context-count {
    display: block;
    min-height: auto;
    padding: 0.9em 1.2em 1em;
    color: var(--mail-appearance-muted, #666);
    font-weight: 600;
    cursor: default;
}

.folder-context-menu li.folder-context-separator {
    display: block;
    min-height: 1px;
    height: 1px;
    padding: 0;
    margin: 0.35em 0;
    background-color: var(--mail-appearance-border, #d8d8d8);
    cursor: default;
}

.folder-context-menu li[data-folder-action]:not([disabled]):hover {
    background-color: var(--mail-appearance-hover, #efefef);
}

.folder-context-menu li[disabled] {
    color: var(--mail-appearance-muted, #b0b0b0);
    cursor: not-allowed;
}

.folder-context-icon {
    width: 1.45em;
    height: 1.45em;
    border: 1.6px solid currentColor;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95em;
    box-sizing: border-box;
}

.folder-context-icon-folder-add::before { content: "+"; font-weight: 700; }
.folder-context-icon-rename::before { content: "I"; font-weight: 700; }
.folder-context-icon-color { border-radius: 50%; }
.folder-context-icon-color::before { content: "o"; }
.folder-context-icon-move::before { content: ">"; }
.folder-context-icon-delete::before { content: "x"; font-weight: 700; }
.folder-context-icon-empty::before { content: "-"; font-weight: 700; }
.folder-context-icon-read::before { content: "v"; font-weight: 700; }
.folder-context-icon-favorite::before { content: "*"; font-weight: 700; }
.folder-context-icon-up::before { content: "^"; font-weight: 700; }
.folder-context-icon-down::before { content: "v"; font-weight: 700; }
.folder-context-icon-open::before { content: "[]"; font-size: 0.75em; }

.folder-context-chevron {
    font-size: 1.25em;
}

.folder-action-dialog[hidden] {
    display: none;
}

.folder-action-dialog {
    align-items: center;
    background: rgba(10, 15, 22, 0.48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25em;
    position: fixed;
    z-index: 2600;
}

.folder-action-dialog-panel {
    background: var(--mail-appearance-panel, #fff);
    border: 1px solid var(--mail-appearance-border, #dce3ec);
    border-radius: 0.45em;
    box-shadow: 0 1.2em 3em rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    color: var(--mail-appearance-text, #1d2733);
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: min(34em, 92vw);
    padding: 1.5em;
    width: 100%;
}

.folder-action-dialog-panel h2 {
    color: var(--mail-appearance-heading, #12344d);
    font-size: 1.15em;
    font-weight: 700;
    margin: 0;
}

.folder-action-dialog-panel p {
    color: var(--mail-appearance-text, #1d2733);
    font-size: 1em;
    line-height: 1.45;
    margin: 0;
}

.folder-action-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
}

.folder-action-dialog-field[hidden] {
    display: none;
}

.folder-action-dialog-field span {
    color: var(--mail-appearance-muted, #52616f);
    font-size: 0.88em;
    font-weight: 600;
}

.folder-action-dialog-field input {
    background: var(--mail-appearance-panel, #fff);
    border: 1px solid var(--mail-appearance-border, #c9d3df);
    border-radius: 0.35em;
    color: var(--mail-appearance-text, #1d2733);
    font: inherit;
    min-height: 2.55em;
    padding: 0 0.8em;
}

.folder-action-dialog-field input:focus {
    border-color: #0f6cbd;
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
    outline: none;
}

.folder-action-dialog-field input[aria-invalid="true"] {
    border-color: #c4314b;
}

.folder-action-dialog-error {
    color: #c4314b;
    font-size: 0.88em;
}

.folder-action-dialog-actions {
    display: flex;
    gap: 0.75em;
    justify-content: flex-end;
}

.folder-action-dialog-actions button {
    border: 1px solid transparent;
    border-radius: 0.35em;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 2.4em;
    min-width: 5.5em;
    padding: 0 1em;
}

.folder-action-dialog-secondary {
    background: var(--mail-appearance-hover, #eef2f6);
    color: var(--mail-appearance-text, #1d2733);
}

.folder-action-dialog-primary {
    background: #0f6cbd;
    color: #fff;
}

.folder-action-dialog-secondary:hover {
    background: var(--mail-appearance-selected, #e2e8f0);
}

.folder-action-dialog-primary:hover {
    background: #115ea3;
}

.calendar-invite-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--mail-appearance-text, #1d2733);
    background: var(--mail-appearance-panel, #fff);
    box-shadow: 0 22px 70px rgba(15, 35, 55, 0.28);
}

.calendar-invite-dialog::backdrop {
    background: rgba(18, 31, 43, 0.46);
    backdrop-filter: blur(2px);
}

.calendar-invite-dialog-panel > header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--mail-appearance-border, #dce3ec);
}

.calendar-invite-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #fff;
    background: var(--mail-appearance-accent, #0878c9);
}

.calendar-invite-icon svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendar-invite-dialog header span {
    color: var(--mail-appearance-muted, #5e6c78);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-invite-dialog header h2 {
    margin: 3px 40px 0 0;
    color: var(--mail-appearance-heading, #15364f);
    font-size: 1.35rem;
}

.calendar-invite-close {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--mail-appearance-muted, #536270);
    background: transparent;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.calendar-invite-close:hover {
    background: var(--mail-appearance-hover, #edf2f6);
}

.calendar-invite-body {
    max-height: min(520px, calc(100vh - 230px));
    padding: 22px 24px;
    overflow: auto;
}

.calendar-invite-body h3 {
    margin: 0;
    color: var(--mail-appearance-heading, #15364f);
    font-size: 1.28rem;
}

.calendar-invite-file {
    margin: 5px 0 20px;
    color: var(--mail-appearance-muted, #65727d);
    font-size: 0.82rem;
}

.calendar-invite-body dl {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--mail-appearance-border, #dce3ec);
    border-radius: 9px;
    overflow: hidden;
}

.calendar-invite-body dl > div {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mail-appearance-border, #e5eaf0);
}

.calendar-invite-body dl > div:last-child {
    border-bottom: 0;
}

.calendar-invite-body dt {
    color: var(--mail-appearance-muted, #5c6975);
    font-weight: 600;
}

.calendar-invite-body dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.calendar-invite-description {
    margin-top: 18px;
    padding: 14px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mail-appearance-rail, #d5e4ef) 38%, transparent);
}

.calendar-invite-description p {
    margin: 7px 0 0;
    white-space: pre-wrap;
}

.calendar-invite-error {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: #9c1c1c;
    background: #fde8e8;
}

.calendar-invite-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--mail-appearance-border, #dce3ec);
}

.calendar-invite-dialog footer > span {
    color: var(--mail-appearance-muted, #65727d);
    font-size: 0.82rem;
}

.calendar-invite-dialog footer > div {
    display: flex;
    gap: 9px;
}

.calendar-invite-dialog footer button {
    min-width: 104px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
}

.calendar-invite-secondary {
    border-color: var(--mail-appearance-border, #c9d3df) !important;
    color: var(--mail-appearance-text, #1d2733);
    background: var(--mail-appearance-panel, #fff);
}

.calendar-invite-primary {
    color: #fff;
    background: var(--mail-appearance-accent, #0878c9);
}

.calendar-invite-primary:disabled {
    cursor: wait;
    opacity: 0.65;
}

@media (max-width: 600px) {
    .calendar-invite-dialog-panel > header,
    .calendar-invite-body,
    .calendar-invite-dialog footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .calendar-invite-body dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .calendar-invite-dialog footer {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-invite-dialog footer > div,
    .calendar-invite-dialog footer button {
        flex: 1;
    }
}

.mail-content .folder-drawer>.folding-container+ul li:before {
    background-color: transparent;
    -webkit-mask: var(--folder-icon) center / 1em 1em no-repeat;
    mask: var(--folder-icon) center / 1em 1em no-repeat;
    content: '';
    width: 1em;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=INBOX]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Sent]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Drafts]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Trash]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Junk]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Notes]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Archive]:before,
.mail-content .folder-drawer>.folding-container+ul li[data-text=Spam]:before {
    background-color: currentColor;
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=INBOX]:before {
    --folder-icon: url(/inbox-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Sent]:before {
    --folder-icon: url(/sent-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Drafts]:before {
    --folder-icon: url(/draft-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Trash]:before {
    --folder-icon: url(/delete-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Junk]:before {
    --folder-icon: url(/junk-email-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Notes]:before {
    --folder-icon: url(/notes-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Archive]:before {
    --folder-icon: url(/archive-blue.svg);
}

.mail-content .folder-drawer>.folding-container+ul li[data-text=Spam]:before {
    --folder-icon: url(/spam-blue.svg);
}

.folding-container:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--mail-appearance-muted, #808080);
    position: absolute;
    left: 1em;
    transition: 0.3s all;
}

.folding-container:has(input:checked):before {
    rotate: 90deg;
}

.mail-content .folder-drawer>.folding-container:has(input:checked)+ul {
    height: max-content;
    opacity: 1;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.mail-content .mail-list>.mail-options:has(.folding-container>input:checked)+.mail-list-container>ul#pinned-mail-list-ul:has(*) {
    flex: 0 0 auto;
    height: auto;
    opacity: 1;
    max-height: calc(5em * 4);
    min-height: 5em;
    margin-block-end: 0.5em;
}

.folding-container label {
    color: inherit;
    font-size: 0.9em;
    cursor: pointer;
    position: absolute;
    left: 2em;
    cursor: pointer;
}

.mail-content .details-container {
    height: calc(100% - 5em);
    width: 100%;
    background-color: var(--mail-appearance-surface, #b8ebf46c);
    display: flex;
    padding: 0.2em;
}

.mail-appearance-image-theme .mail-content .details-container {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.9)), var(--mail-appearance-image);
    background-position: center;
    background-size: cover;
}

.mail-appearance-dark.mail-appearance-image-theme .mail-content .details-container {
    background-image: linear-gradient(90deg, rgba(13, 18, 24, 0.86), rgba(13, 18, 24, 0.92)), var(--mail-appearance-image);
}

.mail-content .details-container>.mail-detail-panel {
    height: 100%;
    width: 70%;
    margin-left: 0.5%;
    flex-grow: 1;
}

.mail-content .details-container .address-details,
.mail-content .details-container .attachments {
    display: flex;
    border-bottom: 0.5px solid var(--mail-appearance-border, lightgrey);
    background-color: var(--mail-appearance-panel, white);
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    min-height: 2em;
    max-height: 4em;
}

.mail-content .details-container .address-details {
    max-height: 9em;
    overflow-y: auto;
}

.mail-content .details-container .attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.5em;
    overflow-x: auto;
}

.mail-content .details-container .calendar-invite-response {
    align-items: center;
    background: color-mix(in srgb, var(--mail-appearance-rail, #d5e4ef) 38%, var(--mail-appearance-panel, #fff));
    border-bottom: 1px solid var(--mail-appearance-border, #dce3ec);
    display: flex;
    gap: 1em;
    justify-content: space-between;
    padding: 0.75em 0.9em;
}

.mail-content .details-container .calendar-invite-response[hidden] {
    display: none !important;
}

.calendar-invite-response strong {
    color: var(--mail-appearance-heading, #15364f);
    display: block;
    font-size: 0.95em;
}

.calendar-invite-response span {
    color: var(--mail-appearance-muted, #65727d);
    font-size: 0.82em;
}

.calendar-invite-response-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: flex-end;
}

.calendar-invite-response-actions button {
    border: 1px solid transparent;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    min-width: 5.75em;
    padding: 0.45em 0.85em;
}

.calendar-invite-response-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.calendar-response-accept {
    background: #247a5a;
}

.calendar-response-tentative {
    background: #9b6a2b;
}

.calendar-response-decline {
    background: #b3404a;
}

.mail-content .details-container .attachment-div .attachment-type {
    width: auto;
    height: min-content;
    background-color: var(--universal-blue);
    font-weight: bold;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    border-radius: 0.2em;
    padding: 0.2em;
    font-size: 0.5em;
}

.mail-content .details-container .attachment-div .attachment-name {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--mail-appearance-text, #333);
}

.mail-content .details-container .attachment-div .attachment-size {
    font-size: 0.5em;
    font-weight: 600;
    color: var(--mail-appearance-muted, #333333bc);
}

.mail-content .details-container .attachments .attachment-div {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    border-radius: 0.2em;
    background-color: color-mix(in srgb, var(--mail-appearance-panel, white) 92%, var(--mail-appearance-rail, #d5e4ef));
    cursor: pointer;
    transition: 0.3s all;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--mail-appearance-border, #ccc);
    position: relative;
}

.mail-content .details-container .attachments .attachment-div .details {
    display: flex;
    align-items: center;
    gap: 0.3em;
    margin-right: 1em;
}

.mail-content .details-container .attachments .attachment-div .attachment-download,
.mail-content .details-container .attachments .attachment-div .menu {
    color: var(--mail-appearance-text, #1C274C);
}

.mail-content .details-container .attachments .attachment-div .attachment-download i {
    color: currentColor;
}

.mail-content .details-container .attachments .attachment-div .menu {
    width: 1em;
    height: 100%;
    aspect-ratio: 1/1;
    border-left: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    right: 0;
    position: absolute;
}

.mail-content .details-container .attachments .attachment-div .menu svg path {
    stroke: currentColor !important;
    fill: currentColor;
}

.mail-appearance-dark .mail-content .details-container .attachments .attachment-div .attachment-download,
.mail-appearance-dark .mail-content .details-container .attachments .attachment-div .menu {
    color: var(--mail-appearance-text, #f3f6f8);
}

.mail-appearance-dark .mail-content .details-container .attachments .attachment-div .menu {
    border-left-color: var(--mail-appearance-border, #425466);
}

.mail-content .details-container .attachments .attachment-div .menu:hover {
    background-color: #00000058;
    border-left: 1px solid #7575758f;
}

.mail-content .details-container .attachments .attachment-div:hover {
    background-color: var(--mail-appearance-hover, #e0e0e0);
    border: 1px solid #7575758f;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.472);
}

.mail-content .details-container>.mail-detail-panel>#subject-div {
    height: 2em;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: var(--mail-appearance-panel, white);
    border-radius: 0.2em;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: bold;
    padding: 0.3em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-overflow: ellipsis;
}

.mail-content .details-container .mail-list {
    height: 100%;
    width: 30%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: var(--mail-appearance-panel, white);
    border-radius: 0.2em;
    position: relative;
    flex-shrink: 0;
}

.mail-content .details-container .mail-list::after,
.mail-content .folder-drawer::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 2px;
    cursor: ew-resize;
    background-color: transparent;
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    transition: background 0.2s;
}

.mail-content .details-container .mail-list:hover::after,
.mail-content .folder-drawer:hover::after {
    background-color: var(--mail-appearance-accent, #0076d7);
}

.mail-content .details-container .mail-list:active::after,
.mail-content .folder-drawer:active::after {
    background-color: var(--mail-appearance-accent, #0078d7);
    width: 4px;
}

.mail-content .details-container .mail-list .mail-options {
    height: 2em;
    width: 100%;
    border-bottom: 1px solid var(--mail-appearance-border, lightgrey);
    color: var(--mail-appearance-text, #1C274C);
    border-radius: 0.2em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0.5em;
}

.mail-content .details-container .mail-list .mail-options svg,
.mail-content .details-container .mail-list .mail-options svg * {
    color: var(--mail-appearance-text, #1C274C) !important;
    stroke: var(--mail-appearance-text, #1C274C) !important;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-button,
.mail-content .details-container .mail-list .mail-options #sort-button,
.mail-content .details-container .mail-list .mail-options #sort-order-button {
    position: relative;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-button[aria-expanded="true"],
.mail-content .details-container .mail-list .mail-options .mail-filter-button.active,
.mail-content .details-container .mail-list .mail-options #sort-button[aria-expanded="true"] {
    background-color: var(--mail-appearance-hover, #efefef);
    border-radius: 0.2em;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options,
.mail-content .details-container .mail-list .mail-options .mail-sort-options {
    display: none;
    position: absolute;
    top: calc(100% + 0.45em);
    right: 0;
    z-index: 35;
    width: 14.5em;
    margin: 0;
    padding: 0.45em 0;
    list-style: none;
    background-color: var(--mail-appearance-panel, white);
    border: 1px solid var(--mail-appearance-border, #d4d4d4);
    border-radius: 0.35em;
    box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.16);
}

.mail-content .details-container .mail-list .mail-options .mail-sort-options {
    width: 13.8em;
    padding: 0.55em 0;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options.show,
.mail-content .details-container .mail-list .mail-options .mail-sort-options.show {
    display: block;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options li,
.mail-content .details-container .mail-list .mail-options .mail-sort-options li {
    display: grid;
    grid-template-columns: 1.35em 1.55em minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65em;
    min-height: 2.35em;
    padding: 0.35em 0.85em;
    color: var(--mail-appearance-text, #1C274C);
    cursor: pointer;
    box-sizing: border-box;
}

.mail-content .details-container .mail-list .mail-options .mail-sort-options li {
    grid-template-columns: 1.35em minmax(0, 1fr);
    min-height: 2.45em;
    padding-inline: 0.9em;
}

.mail-content .details-container .mail-list .mail-options .mail-sort-options li.mail-sort-section {
    display: block;
    min-height: auto;
    padding: 0.45em 1.15em 0.25em;
    color: var(--mail-appearance-muted, #666);
    font-weight: 600;
    cursor: default;
}

.mail-content .details-container .mail-list .mail-options .mail-sort-options li.mail-sort-divider {
    display: block;
    min-height: 1px;
    height: 1px;
    padding: 0;
    margin: 0.45em 0;
    background-color: var(--mail-appearance-border, #d4d4d4);
    cursor: default;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options li:hover,
.mail-content .details-container .mail-list .mail-options .mail-filter-options li.selected,
.mail-content .details-container .mail-list .mail-options .mail-sort-options li:not(.mail-sort-section):not(.mail-sort-divider):hover,
.mail-content .details-container .mail-list .mail-options .mail-sort-options li.selected {
    background-color: var(--mail-appearance-hover, #efefef);
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options span,
.mail-content .details-container .mail-list .mail-options .mail-sort-options span {
    font-size: 0.95em;
    line-height: 1.2;
    white-space: nowrap;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options svg,
.mail-content .details-container .mail-list .mail-options .mail-filter-options svg *,
.mail-content .details-container .mail-list .mail-options .mail-sort-options svg,
.mail-content .details-container .mail-list .mail-options .mail-sort-options svg * {
    color: currentColor !important;
    stroke: currentColor !important;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-selected-indicator,
.mail-content .details-container .mail-list .mail-options .mail-filter-option-icon,
.mail-content .details-container .mail-list .mail-options .mail-sort-selected-indicator {
    width: 1.35em;
    height: 1.35em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-selected-indicator,
.mail-content .details-container .mail-list .mail-options .mail-sort-selected-indicator {
    visibility: hidden;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-options li.selected .mail-filter-selected-indicator,
.mail-content .details-container .mail-list .mail-options .mail-sort-options li.selected .mail-sort-selected-indicator {
    visibility: visible;
}

.mail-content .details-container .mail-list .mail-options .mail-filter-option-icon {
    width: 1.55em;
    height: 1.55em;
}

.mail-content .details-container .mail-list .mail-list-container {
    width: 100%;
    height: calc(100% - 2em);
    display: flex;
    flex-direction: column;
    background-color: var(--mail-appearance-border, lightgrey);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul,
.mail-content .mail-list>.mail-options+.mail-list-container>ul#pinned-mail-list-ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    width: 100%;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20% 20%;
    background-color: var(--mail-appearance-panel, white);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul {
    flex-grow: 1;
}

.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul {
    max-height: 0;
    min-height: 0;
    margin-block-end: 0;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>span {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mail-appearance-muted, #808080);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul.full_length,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul.full_length {
    height: 100%;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul+div {
    background-color: var(--mail-appearance-panel, white) !important;
    color: var(--mail-appearance-text, #1C274C);
    display: flex;
    justify-content: center;
    height: 1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div>button.see_more {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.8em;
    color: var(--mail-appearance-accent, rgba(4, 134, 255, 0.546));
    cursor: pointer;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div>button.see_more:hover {
    text-decoration: underline;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div.remove {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul+div.loading,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul.loading,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul+div.loading,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul.loading {
    background-image: url(/loading.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li {
    height: 5em;
    width: 100%;
    border-bottom: 0.5px solid var(--mail-appearance-border, lightgrey);
    color: var(--mail-appearance-text, #1C274C);
    transition: background-color 0.5s;
    position: relative;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li.delete,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li.delete {
    animation-name: delete-list-item;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes delete-list-item {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    25% {
        transform: translateX(-25%);
        opacity: 0.75;
    }

    50% {
        transform: translateX(-50%);
        opacity: 0.5;
    }

    75% {
        transform: translateX(-75%);
        opacity: 0.25;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li:hover {
    background-color: var(--mail-appearance-hover, #e8e8e8);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>.list-item-container>div>.pic-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li:hover>.list-item-container>div>.pic-div {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>.list-item-container>div>.checkbox-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li:hover>.list-item-container>div>.checkbox-div {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container {
    height: 100%;
    flex-grow: 1;
    margin-left: 0.2em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.pic-div,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.checkbox-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>div.pic-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>div.checkbox-div {
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.checkbox-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>div.checkbox-div {
    padding: 0.5em;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.pic-div:has(+ input:checked),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>div.pic-div:has(+ input:checked) {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input+div.checkbox-div>svg>g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>input+div.checkbox-div>svg>g>path {
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div>svg>g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>input:checked+div.checkbox-div>svg>g>path {
    display: block;
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div>div.checkbox-div>svg,
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div>div.checkbox-div>svg {
    color: var(--mail-appearance-text, #f3f6f8) !important;
    stroke: var(--mail-appearance-text, #f3f6f8) !important;
}

@keyframes rotate-div-90deg {
    from {
        display: flex;
        transform: rotateY(0deg);
    }

    to {
        display: none;
        transform: rotateY(90deg);
    }
}

@keyframes rotate-div-0deg {
    from {
        transform: rotateY(-90deg);
        display: none;
    }

    to {
        transform: rotateY(0deg);
        display: flex;
    }
}

.pic-div {
    border-radius: 50%;
    background-color: #808080a7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container {
    height: 100%;
    width: 100%;
    padding: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header {
    width: 100%;
    height: 35%;
    display: flex;
    position: relative;
    padding: 0.1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div {
    width: 100%;
    height: 65%;
    position: relative;
    padding: 0.1em;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>strong:has(span),
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>strong:has(span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span) {
    position: absolute;
    font-size: 1em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 8em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div>span.body-span {
    color: var(--mail-appearance-muted, #808080);
    font-family: "monospace";
    width: 100%;
    max-width: 95%;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.subject-name-span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.subject-name-span) {
    max-width: calc(100% - 6.5em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header:has(.attachments-button)>strong:has(span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header:has(.attachments-button)>strong:has(span) {
    max-width: calc(100% - 4.5em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span) {
    color: var(--mail-appearance-heading, var(--mail-appearance-accent, #13779e));
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>span,
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>strong:has(span),
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>span,
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>strong:has(span) {
    color: var(--mail-appearance-text, #f3f6f8);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.date-span,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.date-span),
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>span.date-span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div>strong:has(span.date-span) {
    color: var(--mail-appearance-muted, #808080);
    font-size: 0.5em;
    position: absolute;
    right: 0;
}

span.bold {
    font-weight: bold;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options {
    position: absolute;
    right: 0;
    height: 100%;
    width: max-content;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button {
    border: none;
    outline: none;
    background-color: transparent;
    height: 1.5em;
    width: 2em;
    padding-block: 0;
    padding-inline: 0;
    cursor: pointer;
    display: flex;
}

.mail-content .details-container .mail-list .mail-options div {
    width: 1.8em;
    height: max-content;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.3em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4),
.mail-content .details-container .mail-list .mail-options div:nth-child(5) {
    margin-left: 1em;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(4):hover,
.mail-content .details-container .mail-list .mail-options div:nth-child(5):hover {
    background-color: var(--mail-appearance-hover, #efefef);
    border-radius: 0.2em;
}

.mail-content .details-container .mail-list .mail-options #sort-order-button>input:checked+svg {
    display: block;
}

.mail-content .details-container .mail-list .mail-options #sort-order-button>input:not(:checked)+svg {
    display: none;
}

.mail-content .details-container .mail-list .mail-options #sort-order-button>input+svg+svg {
    display: none;
}

.mail-content .details-container .mail-list .mail-options #sort-order-button>input:not(:checked)+svg+svg {
    display: block;
}

.mail-content .details-container .mail-list .mail-options div:nth-child(3) svg g path {
    display: none;
}

.mail-content .details-container .mail-list .mail-options:has(> input:checked) div:nth-child(3) svg g path {
    display: block;
}

.mail-content .details-container .mail-list .mail-options #sort-button {
    width: max-content;
    min-width: 5em;
    justify-content: center;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-list .mail-options #sort-button:hover {
    background-color: var(--mail-appearance-hover, #efefef);
    border: 0.5px solid var(--mail-appearance-border, #d4d4d4);
}

.mail-content .details-container .mail-list .mail-options #sort-button>span {
    font-size: 0.8em;
}

.mail-content .details-container .mail-detailed-view {
    flex: 1 1 auto;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    background-color: var(--mail-appearance-panel, white);
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    font-family: "Roboto", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: var(--mail-appearance-muted, #808080);
    padding: 0.5em;
    position: relative;
}

.mail-content .details-container .mail-detailed-view .iframe-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-content .details-container .mail-detailed-view>div:nth-child(1) {
    float: right;
    position: absolute;
    width: max-content;
    height: 2em;
    max-height: 0;
    top: 0;
    right: 1em;
    z-index: 10000;
    background: white;
    transition: all 0.3s;
    border-radius: 0.2em;
    display: flex;
}

.mail-content .details-container .mail-detailed-view>div:nth-child(1)>* {
    transition: 0.3s all;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to {
    width: max-content;
    border-radius: 0.2em;
    margin-left: 1em;
    transition: all 0.3s;
    display: none;
    cursor: pointer;
    position: relative;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>button {
    border-radius: 0.2em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>div {
    border-radius: 0.2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mail-content .details-container .mail-detailed-view>div>button.forward-button {
    margin-left: 0;
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    border-radius: 0.2em;
}

/* .mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(1) {
    width: 2em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(2) {
    border-radius: 0.2em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.mail-content .details-container .mail-detailed-view > div > div.forward-button > button:nth-child(2) {
    width: 1em;
} */

.day-button {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 5px;
}

.day-button.selected {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.mail-content .details-container .mail-detailed-view>div>.delete-button {
    border: none;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-detailed-view>div>button.forward-button {
    width: max-content;
    margin-left: 1em;
    border-radius: 0.2em;
}

.mail-content .details-container .mail-detailed-view>div>.delete-button,
.mail-content .details-container .mail-detailed-view>div>.archive-button,
.mail-content .details-container .mail-detailed-view>div>.report-spam-button,
.mail-content .details-container .mail-detailed-view>div>.move-to,
.mail-content .details-container .mail-detailed-view>div>.move-to+div,
.mail-content .details-container .mail-detailed-view>div>.reply-button,
.mail-content .details-container .mail-detailed-view>div>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view>div>.reply-all-button,
.mail-content .details-container .mail-detailed-view>div>.forward-button {
    display: none;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.delete-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.archive-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.report-spam-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.move-to+div,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.reply-all-button,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.forward-button {
    display: inherit;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div>.move-to {
    display: flex;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) {
    max-height: 2em;
    box-shadow: 2px 2px #808080;
    border: 0.5px solid lightgrey;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>div:hover {
    background-color: #cacaca;
    border: 0.5px solid #808080;
}

.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) button:hover>svg g path,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1) div:hover>svg g path,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover>svg>g>polygon,
.mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered]):hover>div:nth-child(1)>button:hover>svg>g>line {
    stroke-width: 1.5;
}

.mail-content .details-container .mail-detailed-view>div>div.move-to>div {
    width: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-content .details-container .receipent-details {
    width: calc(100% - 2.5em);
    display: flex;
    flex-flow: column;
}

.mail-content .details-container .from-pic {
    width: 2.5em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em;
}

.mail-content .details-container .from-pic .pic-div {
    width: 1.9em;
    height: 1.9em;
}

.mail-content .details-container .receipent-details>div {
    width: 100%;
    min-height: 0.5em;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.5em;
    font-size: 0.8em;
    user-select: text;
}

.mail-content .details-container .receipent-details>div.from-div::before {
    content: 'From: ';
}

.mail-content .details-container .receipent-details>div.to-div::before {
    content: 'To: ';
}

.mail-content .details-container .receipent-details>div.cc-div::before {
    content: 'Cc: ';
}

.mail-content .details-container .receipent-details>div.bcc-div::before {
    content: 'Bcc: ';
}

.mail-content .details-container .mail-detailed-view iframe {
    width: 100%;
    max-height: 100%;
    min-height: 100%;
    outline: none;
    border: none;
}

.menu-header>div {
    height: 50%;
    width: 100%;
    display: flex;
    position: relative;
}

.menu-header>div:nth-child(1) {
    height: 40%;
}

.menu-header>div:nth-child(2) {
    height: 60%;
    padding: 0.1em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    justify-content: center;
    display: flex;
}

.menu-header>div:nth-child(2)>div {
    width: calc(100% - 0.4em);
    height: calc(100% - 0.4em);
    background-color: var(--mail-appearance-panel, white);
    border-radius: 0.2em;
    box-shadow: 3px 3px color-mix(in srgb, var(--mail-appearance-accent, lightblue) 38%, transparent);
    padding: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu,
.menu-header>div:nth-child(2)>div>div.view-menu {
    color: var(--mail-appearance-text, #1C274C);
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 0.2em;
}

.menu-header:has(#home-menu-button:not(:checked)) .home-menu {
    display: none;
}

.menu-header:has(#view-menu-button:not(:checked)) .view-menu {
    display: none;
}

.view-menu>.settings-button,
.view-menu>.zoom-button {
    color: var(--mail-appearance-text, #1C274C);
    min-width: 7em;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 0.2em;
    cursor: pointer;
    display: flex;
    margin-left: 1em;
    position: relative;
    transition: all 0.3s;
}

.view-menu>.settings-button:hover,
.view-menu>.zoom-button:hover,
.view-menu>.zoom-button:has([data-mail-zoom-options].show) {
    background-color: var(--mail-appearance-hover, #efefef);
    border: 0.5px solid var(--mail-appearance-border, #d4d4d4);
}

.view-menu>.settings-button>span,
.view-menu .zoom-trigger {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    font-size: 0.95em;
    height: 100%;
    justify-content: center;
    outline: none;
    padding: 0 0.8em;
}

.view-menu>.settings-button>span {
    white-space: nowrap;
}

.view-menu .zoom-current {
    color: var(--mail-appearance-accent, #6574ba);
    font-size: 0.78em;
    line-height: 1.1;
    margin-top: 0.2em;
}

.view-menu [data-mail-zoom-options] {
    background-color: var(--mail-appearance-panel, #ffffff);
    border: 1px solid var(--mail-appearance-border, #d4d4d4);
    border-radius: 0.2em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    display: none;
    left: 0;
    list-style: none;
    margin-block-end: 0;
    margin-block-start: 0;
    min-width: 8em;
    padding: 0.4em 0;
    position: absolute;
    top: 105%;
    z-index: 10000;
}

.view-menu [data-mail-zoom-options].show {
    display: block;
}

.view-menu [data-mail-zoom-options]>li {
    align-items: center;
    color: var(--mail-appearance-text, #333333);
    cursor: pointer;
    display: flex;
    font-size: 0.9em;
    height: 2em;
    padding: 0 0.9em 0 2em;
    position: relative;
    white-space: nowrap;
}

.view-menu [data-mail-zoom-options]>li:hover,
.view-menu [data-mail-zoom-options]>li.selected {
    background-color: var(--mail-appearance-hover, #f0f4ff);
}

.view-menu [data-mail-zoom-options]>li.selected::before {
    color: var(--mail-appearance-accent, #6574ba);
    content: '\2713';
    font-weight: bold;
    left: 0.75em;
    position: absolute;
}

.menu-header svg,
.menu-header svg g path {
    transition: 0.3s all;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button {
    width: 10em;
    border-radius: 0.3em;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div {
    width: 100%;
    border-radius: 0.3em;
    display: flex;
    align-items: center;
    height: 100%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 10em;
    max-height: 0;
    display: none;
    position: absolute;
    top: 105%;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: var(--mail-appearance-panel, white);
    border: 1px solid var(--mail-appearance-border, transparent);
    color: var(--mail-appearance-text, #1C274C);
    z-index: 1000;
    transition: 0.3s all;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.flag-button>ul>li[data-text="mark_complete"]:before {
    background-image: url(/green-tick.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.flag-button>ul>li[data-text="clear_flag"]:before {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23ffffff00%22%20stroke-width%3D%220.72%22%3E%3Cg%20id%3D%22_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22_iconCarrier%22%3E%20%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%2300000000%22%3E%3C%2Frect%3E%20%3Cg%20filter%3D%22url%28%23filter0_d_15_295%29%22%3E%20%3Cpath%20d%3D%22M4.5%2021V16V6.5C5.5%205.5%207%205%208.5%205C11.5%205%2013.5%207.5%2017.5%205.5V15.5C13.5%2017.5%2011.5%2014.5%208.5%2014.5C7.5%2014.5%205.5%2015%204.5%2016Z%22%20stroke%3D%22%23df8fe0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2221%22%20y2%3D%2221%22%20stroke%3D%22%23df8fe0%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3C%2Fline%3E%3C%2Fg%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%22filter0_d_15_295%22%20x%3D%223%22%20y%3D%224.5%22%20width%3D%2216%22%20height%3D%2219%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%3E%3C%2FfeFlood%3E%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%3E%3C%2FfeColorMatrix%3E%20%3CfeOffset%20dy%3D%221%22%3E%3C%2FfeOffset%3E%20%3CfeGaussianBlur%20stdDeviation%3D%220.5%22%3E%3C%2FfeGaussianBlur%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.1%200%22%3E%3C%2FfeColorMatrix%3E%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_15_295%22%3E%3C%2FfeBlend%3E%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_15_295%22%20result%3D%22shape%22%3E%3C%2FfeBlend%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul {
    border-radius: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul.show,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul.show,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul.show,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul.show,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul.show {
    display: block;
    max-height: 15em;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    padding-block-start: 0.5em;
    padding-block-end: 0.5em;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
    border: 0.5px solid #808080;
    overflow-y: auto;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul>li,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li {
    height: 1.5em;
    padding: 0.2em;
    font-family: math;
    display: flex;
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[disabled],
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[disabled] {
    cursor: not-allowed;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul li:hover,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not([disabled]):hover {
    background-color: #0000001a;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:before,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>ul>li:before,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not(:last-child):before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not(:last-child):before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    margin-right: 1em;
    cursor: default;
    background-color: transparent;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form {
    width: 100%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>input,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>input {
    border: none;
    background: transparent;
    outline: none;
    max-width: calc(100% - 2em);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>button,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>button {
    border: none;
    background: transparent;
    outline: none;
    max-width: 1.5em;
    font-size: 0.6em;
    color: rgba(5, 121, 255, 0.87);
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:last-child>form>button:hover,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:last-child>form>button:hover {
    text-decoration: underline;
    font-weight: bold;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=INBOX]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=INBOX]:before {
    background-image: url(/inbox-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Sent]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Sent]:before {
    background-image: url(/sent-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Drafts]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Drafts]:before {
    background-image: url(/draft-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Trash]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Trash]:before {
    background-image: url(/delete-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Junk]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Junk]:before {
    background-image: url(/junk-email-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Notes]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Notes]:before {
    background-image: url(/notes-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Archive]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Archive]:before {
    background-image: url(/archive-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li[data-text=Spam]:before,
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li[data-text=Spam]:before {
    background-image: url(/spam-blue.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:first-child:before {
    background-image: url(/email.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(2):before {
    background-image: url(/event.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(3):before {
    background-image: url(/task.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul li:nth-child(4):before {
    background-image: url(/group.svg);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>ul>li:not(:last-child),
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>ul>li:not(:last-child),
.mail-content .details-container .mail-detailed-view>div>div.move-to>ul>li:not(:last-child) {
    border-bottom: 0.5px solid var(--mail-appearance-border, #808080);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button {
    width: max-content;
    border-radius: 0.3em;
    display: flex;
    align-items: center;
    margin-left: 1em;
    border-radius: 0.2em;
    cursor: pointer;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul {
    width: 13em;
    max-height: 10em;
    overflow-y: auto;
    position: absolute;
    background-color: var(--mail-appearance-panel, white);
    border: 0.5px solid var(--mail-appearance-border, lightgrey);
    border-radius: 0.2em;
    top: 100%;
    z-index: 100000;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 10px;
    display: none;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul li {
    padding: 0.2em;
    display: flex;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul li>span {
    margin-left: 0.5em;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul li>span:hover {
    font-weight: bold;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul li i {
    width: 1.5em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button>ul li:hover i svg {
    stroke-width: 0.5;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button {
    width: 3em;
    padding: 0.3em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button i:not(:first-child),
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button i:not(:first-child) {
    width: 1em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button {
    background: transparent;
    background-color: color-mix(in srgb, var(--mail-appearance-accent, #0f6cbd) 86%, #1f2a44);
    border: none;
    color: #fff;
    outline: none;
    height: 100%;
    cursor: pointer;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:nth-child(1) {
    width: 80%;
    color: white;
    font-size: 1em;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-right: 1px solid color-mix(in srgb, #fff 76%, transparent);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:nth-child(2) {
    width: 20%;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;

}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button:hover {
    background-color: color-mix(in srgb, var(--mail-appearance-accent, #0f6cbd) 94%, #1f2a44);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button>div>button svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.delete-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.archive-button,
.mail-content .details-container .mail-detailed-view>div>.archive-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button,
.mail-content .details-container .mail-detailed-view>div>.report-spam-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button,
.mail-content .details-container .mail-detailed-view>div>.reply-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button,
.mail-content .details-container .mail-detailed-view>div>.reply-with-meeting-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button,
.mail-content .details-container .mail-detailed-view>div>.reply-all-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.forward-button,
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button,
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    border: none;
    color: inherit;
    outline: none;
    height: 100%;
    cursor: pointer;
    background: transparent;
    width: 2em;
    padding: 0;
    margin-left: 1em;
    border-radius: 0.2em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button {
    margin-left: 0;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    width: 10em;
    display: flex;
    align-items: center;
    justify-content: end;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button {
    width: 4em;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
    width: 4em;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button {
    width: 10.5em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button span {
    color: currentColor;
    width: 80%;
    font-size: 0.9em;
    padding-right: 0.5em;
    text-align: right;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button span,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button span {
    text-align: left;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button .zoom-trigger span {
    padding-right: 0;
    text-align: center;
    width: auto;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button .zoom-current {
    font-size: 0.68em;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:before,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:before {
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    width: 15%;
    height: 100%;
    background-size: 70% 70%;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:before {
    -webkit-mask: url(/mark-as-read-blue.svg) center / 100% no-repeat;
    background-color: currentColor;
    background-image: none;
    background-size: 100%;
    mask: url(/mark-as-read-blue.svg) center / 100% no-repeat;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread {
    color: var(--mail-appearance-text, #1C274C);
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread[disabled] {
    color: var(--mail-appearance-muted, #808080);
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:before {
    -webkit-mask: url(/settings-blue.svg) center / 70% 70% no-repeat;
    background-color: currentColor;
    background-image: none;
    mask: url(/settings-blue.svg) center / 70% 70% no-repeat;
    width: 30%;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:before {
    -webkit-mask: url(/zoom-blue.svg) center / 70% 70% no-repeat;
    background-color: currentColor;
    background-image: none;
    mask: url(/zoom-blue.svg) center / 70% 70% no-repeat;
    width: 40%;
}

.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:before {
    -webkit-mask: url(/sync-blue.svg) center / 70% 70% no-repeat;
    background-color: currentColor;
    background-image: none;
    mask: url(/sync-blue.svg) center / 70% 70% no-repeat;
    width: 40%;
}

/* .menu-header>div:nth-child(2)>div>div.home-menu>div.forward-button>button:nth-child(1) {
    margin-left: 0;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 2em;
} */

.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>button:hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button>i:hover {
    background-color: var(--mail-appearance-hover, #ffffff);
}

/* .menu-header>div:nth-child(2)>div>div.home-menu>div.forward-button>button:nth-child(2) {
    width: 1em;
    margin-left: 0;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
} */

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>button {
    margin-left: 0;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to {
    width: 3em;
    border-radius: 0.2em;
    margin-left: 1em;
    transition: all 0.3s;
    display: flex;
    cursor: pointer;
    position: relative;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to>div {
    width: 1em;
    align-items: center;
    justify-content: center;
    display: flex;
}

.menu-header>div:nth-child(2)>div>div.home-menu button {
    transition: all 0.3s;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.delete-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.archive-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.report-spam-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>button.forward-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button:not([disabled]):hover,
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button:not([disabled]):hover {
    background-color: var(--mail-appearance-hover, #efefef);
    border: 0.5px solid var(--mail-appearance-border, #d4d4d4);
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.delete-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.archive-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.report-spam-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled]>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled]>div,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>button.forward-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button[disabled]>button,
.menu-header>div:nth-child(2)>div>div.home-menu>.pin-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.print-button[disabled],
.menu-header>div:nth-child(2)>div>div.home-menu>.block-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button[disabled],
.menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button[disabled] {
    color: var(--mail-appearance-muted, #808080);
    cursor: not-allowed;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg[stroke="#1C274C"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg[stroke="#000000"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg [stroke="#1C274C"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg [stroke="#000000"] {
    stroke: currentColor !important;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg[fill="#1C274C"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg[fill="#000000"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg [fill="#1C274C"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg [fill="#000000"] {
    fill: currentColor !important;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg[color="#000000"],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu svg [color="#000000"] {
    color: currentColor !important;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu .print-button svg .b {
    fill: currentColor !important;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu .print-button svg .c {
    stroke: currentColor !important;
}

.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu>div.category-button[disabled],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button[disabled],
.mail-appearance-dark .menu-header>div:nth-child(2)>div>div.home-menu>.move-to[disabled] {
    color: var(--mail-appearance-muted, #808080);
}

.menu-header>div:nth-child(2)>div>div.home-menu>.delete-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.archive-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button:hover svg>g>polygon,
.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:hover button svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.forward-button:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.delete-mail:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.flag-email:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.pin-email:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.delete-mail:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.flag-email:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.pin-email:hover svg g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:hover>svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:hover svg,
.menu-header>div:nth-child(2)>div>div.home-menu>button.pin-button:hover svg {
    stroke-width: 1.5;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-read:hover svg g {
    stroke: #5b74ca;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g {
    fill: #5b74ca;
    stroke: #5b74ca;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g>path,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.mark-as-unread:hover svg g>path {
    stroke-width: 10;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.attachments-button,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>.attachments-button {
    padding: 0.2em;
    cursor: default;
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button,
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button {
    color: var(--mail-appearance-muted, #b8c0ca);
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#1C274C"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#df8fe0"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#808080"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#1C274C"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#df8fe0"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [stroke="#808080"] {
    stroke: var(--mail-appearance-muted, #b8c0ca) !important;
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#1C274C"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#000000"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#808080"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#1C274C"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#000000"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button svg [fill="#808080"] {
    fill: var(--mail-appearance-muted, #b8c0ca) !important;
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [fill="#df8fe0"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [fill="#df8fe0"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [fill="#df8fe0"][stroke="#df8fe0"],
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [fill="#df8fe0"][stroke="#df8fe0"] {
    fill: var(--mail-appearance-accent, #df8fe0) !important;
    stroke: var(--mail-appearance-accent, #df8fe0) !important;
}

.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [stroke="#df8fe0"]:not([fill="#df8fe0"]),
.mail-appearance-dark .mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>header>.options>button.flag-email svg [stroke="#df8fe0"]:not([fill="#df8fe0"]) {
    fill: none !important;
    stroke: var(--mail-appearance-muted, #b8c0ca) !important;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg path,
.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg rect,
.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg polyline {
    stroke-width: 2.5;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.reply-with-meeting-button:hover svg {
    stroke-width: 5;
}

.menu-header>div:nth-child(2)>div>div.home-menu>button.print-button:hover svg circle {
    r: 1.25;
}

.menu-header>div:nth-child(2)>div>div.home-menu>div.category-button:hover>i>svg,
.menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button:hover i>svg {
    stroke-width: 50;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.reply-button:hover svg>g>path,
.menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button:hover svg>g>path {
    stroke-width: 2;
}

.menu-header>div:nth-child(2)>div>div.home-menu>.move-to:hover>div>svg {
    stroke-width: 20;
}

.menu-header>div:nth-child(1)>button,
.menu-header>div:nth-child(1)>label {
    background: transparent;
    border: none;
    color: var(--mail-appearance-text, #1C274C);
    outline: none;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    padding: 0;
}

.menu-header>div:nth-child(1)>label.folder-drawer-menu {
    padding: 0.3em;
}

.mail-content>.menu-header+.details-container>.folder-drawer.expanded {
    width: 15%;
    opacity: 1;
    margin-right: 0.5em;
}

.menu-header>div:nth-child(1)>button:nth-child(4),
.menu-header>div:nth-child(1)>button:nth-child(6) {
    width: 5em;
    transition: all 0.3s;
    position: relative;
}

.menu-header>div:nth-child(1)>button:nth-child(4) label,
.menu-header>div:nth-child(1)>button:nth-child(6) label {
    cursor: pointer;
}

.menu-header>div:nth-child(1)>input:checked+button:nth-child(4):after,
.menu-header>div:nth-child(1)>input:checked+button:nth-child(6):after {
    content: '';
    width: 50%;
    height: 3px;
    background-color: var(--mail-appearance-accent, #808080);
    display: block;
    justify-self: center;
    transition: all 0.3s;
    border-radius: 0.2em;
    top: 2em;
    position: absolute;
    left: 25%;
}

.menu-header>div:nth-child(1)>input:checked+button:nth-child(4):hover:after,
.menu-header>div:nth-child(1)>input:checked+button:nth-child(6):hover:after {
    width: 90%;
    left: 5%;
}

.mail-container .folder-drawer ul li .folder-menu {
    right: 0.2em;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/three-dots-white.svg);
    outline: none;
    border: none;
    width: 1em;
    height: 1em;
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    display: none;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>.options,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>.options {
    display: flex;
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>span,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li:hover>div.list-item-container>div.mail-item-container>header>span {
    max-width: calc(100% - 9em);
}

.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div,
.mail-content .details-container .mail-list .mail-list-container ul#mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-subject-div,
.mail-content .details-container .mail-list .mail-list-container ul#pinned-mail-list-ul>li>div.list-item-container>div.mail-item-container>div>div.mail-item-body-div {
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
}

.category-card {
    background: white;
    z-index: 1;
    position: relative;
    padding: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    border-width: 1px;
    color: var(--sphere-color);
    border-radius: 0.2em;
}

.category-card:hover:before {
    background: rgb(from var(--sphere-color) r g b / 0.356);
    border-color: rgb(from var(--sphere-color) r g b / 0.555);
}

.category-card:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
    border-radius: 0.2em;
    cursor: pointer;
    transition: all 0.2s;
    border-width: 1.5px;
    background-color: rgb(from var(--sphere-color) r g b / 0.356);
    border-color: rgb(from var(--sphere-color) r g b / 0.356);
}

.category-card:not(:first-child) {
    margin-left: 0.3em;
}

#print-choice-modal.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}

/* Modal content box */
#print-choice-modal .modal-content,
#print-choice-modal>div {
    background: #fff;
    border-radius: 8px;
    padding: 2em;
    min-width: 300px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    animation: modal-fade-in 0.2s;
}

.modal-content {
    background-color: #fff;
    padding: 25px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    width: 70%;
    position: relative;
    animation: fadeIn 0.3s ease-out;
    max-height: 90%;
    overflow-y: auto;
}

/* Close button */
#print-choice-modal #close-print-choice-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5em;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

#print-choice-modal #close-print-choice-modal:hover {
    color: #333;
}

/* Modal heading and text */
#print-choice-modal h2 {
    margin-bottom: 1em;
    font-size: 1.3em;
    color: #6574ba;
}

#print-choice-modal p {
    margin-bottom: 2em;
    color: #444;
}

/* Modal buttons */
#print-choice-modal button {
    padding: 0.7em 1.5em;
    border: none;
    border-radius: 5px;
    background: #6574ba;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(101, 116, 186, 0.08);
}

#print-choice-modal button:hover {
    background: #4956a2;
}

/* Button group */
#print-choice-modal .modal-content>div,
#print-choice-modal>div>div {
    display: flex;
    gap: 1em;
    justify-content: center;
}

/* Fade-in animation */
@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media print {
    body * {
        visibility: hidden;
    }

    .mail-container>.mail-content>.details-container>.mail-list+div,
    .mail-container>.mail-content>.details-container>.mail-list+div * {
        visibility: visible;
    }

    .mail-container>.mail-content>.details-container>.mail-list+div {
        position: absolute;
        left: 0;
        top: 0;
    }
}

#open-new-mail-btn.open-new-mail-trigger {
    padding: 0.6em 1.2em;
    background: #19bebb;
    color: #fff;
    border: none;
    border-radius: 4px;
    font: 600 0.9rem/1 'Inter', sans-serif;
    cursor: pointer;
}

.new-mail-dialog {
    width: min(900px, 92vw);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    border: 1px solid #ececec;
}

#compose-mail-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rtf-editor-wrapper {
    flex: 1;
    padding: 0 1.2em 0.75em;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.btn.secondary {
    background: #e9ecef;
    color: #333;
}

.btn.secondary:hover {
    background: #d8dde1;
}

.btn.primary {
    background: #19bebb;
    color: #fff;
}

.btn.primary:hover {
    background: #118d8b;
}

@media (max-width: 640px) {

    .attachments-row {
        grid-template-columns: 55px 1fr;
    }

    .new-mail-dialog {
        width: 96vw;
    }
}

/* Modal Core */
.spam-modern-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
    user-select: none;
    height: 90%;
    padding: 1em;
}

.spam-modern-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.spam-modern-modal .spam-modal-content {
    overflow-y: auto;
    height: 100%;
}

.spam-modern-modal header h2 {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    color: #1a1a1b;
    text-align: center;
}

.spam-modern-modal header p {
    font-size: 0.9rem;
    color: #65676b;
    margin-bottom: 24px;
}

/* Scrollable List */
.spam-modern-modal .section-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #65676b;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.spam-modern-modal .section-title+p {
    font-size: 0.5rem;
    color: #65676b;
    margin-bottom: 2px;
    font-weight: 500;
}

.spam-modern-modal .section-title+p+hr {
    margin-bottom: 12px;
}

.spam-modern-modal .checkbox-list {
    display: grid;
    gap: 8px;
    max-height: 80%;
    overflow-y: auto;
    margin-bottom: 0.4em;
    padding-right: 4px;
    outline: none;
}

.spam-modern-modal .checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.spam-modern-modal .checkbox-card:hover {
    background: #f8f9fa;
}

.spam-modern-modal .checkbox-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #e53935;
    margin-top: 2px;
}

.spam-modern-modal .email-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    font-size: 0.95rem;
}

.spam-modern-modal .meta {
    font-size: 0.7rem;
    color: #65676b;
    line-height: 1.2;
    display: inline-block;
}

/* Footer & Buttons */
.spam-modern-modal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.spam-modern-modal .switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.spam-modern-modal .actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.spam-modern-modal .btn-primary,
.spam-modern-modal .btn-secondary {
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.spam-modern-modal .btn-primary {
    background: #e53935;
    color: white;
}

.spam-modern-modal .btn-primary:hover {
    background: #c62828;
}

.spam-modern-modal .btn-secondary {
    background: #f0f2f5;
    color: #1a1a1b;
}

.spam-modern-modal .btn-secondary:hover {
    background: #e4e6eb;
}

/* Animations */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.context-menu {
    width: 220px;
    background: var(--mail-appearance-panel, white);
    border: 1px solid var(--mail-appearance-border, #e1dfdd);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    padding: 6px 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    position: absolute;
    display: none;
    z-index: 1000;
}

.context-menu .menu-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--mail-appearance-text, #323130);
}

.context-menu .menu-item[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.context-menu .menu-item:not([disabled]):hover {
    background-color: var(--mail-appearance-hover, #f3f2f1);
}

.attachment-context-menu .menu-icon,
.message-context-menu .menu-icon,
.blocked-content-context-menu .menu-icon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.attachment-context-menu .menu-icon svg,
.message-context-menu .menu-icon svg,
.blocked-content-context-menu .menu-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--mail-appearance-accent, #005a9e);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.context-menu .menu-text {
    font-size: 14px;
}

#mailSettingsDialog {
    border-radius: 0.2em;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.55);
    user-select: none;
    width: 90%;
    height: 90%;
}

.mobile-detail-back {
    display: none;
}

@media (max-width: 900px) {
    body:has(.mail-container) #content {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-height: 0 !important;
        overflow: hidden;
        padding: 0;
    }

    body:has(.mail-detailed-view .iframe-container[rendered]) .mail-header {
        display: none;
    }

    .mail-header {
        display: grid;
        grid-template-columns: 2.5em minmax(0, 1fr) 2.5em;
        column-gap: 0.4em;
        row-gap: 0.25em;
        flex: 0 0 auto;
        height: auto;
        padding: 0.25em 0.4em 0.05em;
    }

    .mail-header>div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .mail-header>span {
        grid-column: 2 / 4;
        grid-row: 1;
        width: auto !important;
        font-size: 1.4em !important;
        text-align: left !important;
    }

    .search-cancel,
    .mail-header:not(:has(> .search-container:focus-within)) .search-cancel {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0;
        width: 100%;
        height: 2.5em;
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 0;
        justify-self: stretch;
        padding: 0;
        z-index: 1;
    }

    .search-cancel svg {
        width: 30% !important;
    }

    .search-container,
    .search-container:not(:focus-within) {
        display: flex;
        grid-column: 1 / 4;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        height: 2.5em;
        border: 1px solid lightgrey;
        border-radius: 0.45em;
        padding: 0 2.5em;
    }

    .search-container input {
        background: transparent;
        min-width: 0;
    }

    .mail-search-label {
        max-width: 7em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mail-search-options {
        left: 0;
        width: 100%;
    }

    .search-mail {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 3;
        grid-row: 2;
        width: 100%;
        height: 2.5em;
        background: transparent;
        border: none;
        border-radius: 0;
        justify-self: stretch;
        padding: 0;
        z-index: 1;
    }

    .search-cancel:hover,
    .search-mail:hover {
        background-color: #e7e7e7;
    }

    .search-mail svg {
        width: 1.25em;
        height: 1.25em;
    }

    .mail-container {
        flex-direction: column;
        flex: 1 1 auto;
        height: auto;
        margin-top: 5px;
        min-height: 0;
        overflow: hidden;
    }

    .mail-container:has(.mail-detailed-view .iframe-container[rendered]) {
        margin-top: 0;
        min-height: 0;
    }

    .mail-container:has(.mail-detailed-view .iframe-container[rendered]) .left-side-menus {
        display: none;
    }

    .mail-container>.shared-app-rail.left-side-menus {
        display: grid !important;
        flex: 0 0 3.25em !important;
        grid-template-columns: repeat(5, minmax(2.5em, 1fr)) !important;
        grid-template-rows: 100% !important;
        height: 3.25em !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0.35em 0.5em;
        row-gap: 0;
        column-gap: 0.25em;
    }

    .mail-container>.shared-app-rail.left-side-menus>.shared-app-rail-item {
        min-width: 0;
        padding: 0.2em 0.35em;
    }

    .mail-container>.shared-app-rail.left-side-menus .shared-app-rail-link svg {
        width: 1.65em;
        height: 1.65em;
        max-height: 1.65em;
    }

    .mail-container>.shared-app-rail.left-side-menus>.shared-app-rail-item.active {
        box-shadow: inset 0 -3px #19bebb;
    }

    .mail-container:has(.mail-detailed-view .iframe-container[rendered])>.shared-app-rail.left-side-menus {
        display: none !important;
    }

    .left-side-menus {
        display: none;
        width: 100%;
        height: 3em;
        grid-template-columns: repeat(5, minmax(2.5em, 1fr));
        grid-template-rows: 100%;
        column-gap: 0.25em;
        row-gap: 0;
    }

    .left-side-menus div:nth-child(n) {
        padding: 0.5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mail-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .mail-content:has(.mail-detailed-view .iframe-container[rendered]) {
        min-height: 0;
    }

    .mail-content:has(.mail-detailed-view .iframe-container[rendered]) .menu-header {
        display: none;
    }

    .menu-header {
        display: block;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        background-color: #c7c7c742;
    }

    .menu-header>div:nth-child(1) {
        height: 2.5em;
    }

    .menu-header>div:nth-child(2) {
        height: auto;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.15em 0.3em;
    }

    .menu-header>div:nth-child(2)>div {
        height: 2.5em;
        min-width: max-content;
    }

    .menu-header>div:nth-child(2)>div>div.home-menu,
    .menu-header>div:nth-child(2)>div>div.view-menu {
        min-width: max-content;
    }

    .menu-header>div:nth-child(2)>div>div.home-menu>div.create-new-button {
        width: 8.5em;
        flex: 0 0 8.5em;
    }

    .menu-header>div:nth-child(2)>div>div.home-menu>.delete-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.archive-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.report-spam-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.move-to,
    .menu-header>div:nth-child(2)>div>div.home-menu>.reply-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.reply-with-meeting-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.reply-all-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.forward-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread,
    .menu-header>div:nth-child(2)>div>div.home-menu>div.category-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>div.flag-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.print-button,
    .menu-header>div:nth-child(2)>div>div.home-menu>.block-button,
    .menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button,
    .menu-header>div:nth-child(2)>div>div.view-menu>div.zoom-button,
    .menu-header>div:nth-child(2)>div>div.view-menu>div.sync-button {
        flex: 0 0 auto;
        min-height: 2.5em;
        margin-left: 0.5em;
    }

    .mail-content .details-container {
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0;
        height: auto;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) {
        gap: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        background-color: white;
    }

    .mail-content .details-container:not(:has(.iframe-container[rendered]))>div:nth-child(3) {
        display: none;
    }

    .mail-content .folder-drawer::after,
    .mail-content .details-container .mail-list::after {
        display: none;
    }

    .mail-content .details-container .folder-drawer {
        width: 100%;
        height: 0;
        min-height: 0;
        border: 0;
        overflow: hidden;
    }

    .mail-content>.menu-header+.details-container>.folder-drawer.expanded {
        width: calc(100% - 1em) !important;
        height: auto;
        max-height: 12em;
        border: 1px solid lightgrey;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        left: 0.5em;
        margin-right: 0;
        overflow-y: auto;
        position: absolute;
        top: 0.5em;
        z-index: 30;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .folder-drawer,
    .mail-content .details-container:has(.iframe-container[rendered]) .mail-list {
        display: none;
    }

    .mail-content .details-container .mail-list {
        width: 100% !important;
        height: 100%;
        min-height: 0;
        border-radius: 0;
        flex: 0 0 auto;
    }

    .mail-content .details-container>.mail-detail-panel {
        width: 100% !important;
        height: 100%;
        min-height: 0;
        margin-left: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .mail-content .details-container:has(.iframe-container[rendered])>.mail-detail-panel {
        display: flex;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .mobile-detail-back {
        align-items: center;
        background: var(--mail-appearance-panel, white);
        border: none;
        border-bottom: 1px solid var(--mail-appearance-border, #e4e8ef);
        color: var(--mail-appearance-heading, #13779e);
        cursor: pointer;
        display: flex;
        font-weight: 600;
        min-height: 2.75em;
        padding: 0 0.9em;
        text-align: left;
        width: 100%;
    }

    .mail-content .details-container>.mail-detail-panel>#subject-div {
        border-radius: 0;
        box-shadow: none;
        height: auto;
        min-height: 2.75em;
        overflow: hidden;
        padding: 0.7em 0.9em;
    }

    .mail-content .details-container:has(.iframe-container[rendered])>div:nth-child(3)>div:nth-child(3) {
        display: flex !important;
        flex: 1 1 auto;
        height: auto !important;
        margin-top: 0 !important;
        min-height: 0;
    }

    .mail-content .details-container .address-details {
        max-height: none;
    }

    .mail-content .details-container .receipent-details>div {
        align-items: flex-start;
        overflow-wrap: anywhere;
    }

    .mail-content .details-container .attachments {
        max-height: 8em;
    }

    .mail-content .details-container .calendar-invite-response {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-invite-response-actions {
        justify-content: stretch;
    }

    .calendar-invite-response-actions button {
        flex: 1;
    }

    .mail-content .details-container .mail-detailed-view {
        min-height: 24em;
        overflow: auto;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .mail-detailed-view {
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: hidden;
        padding: 0;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .mail-detailed-view .iframe-container {
        align-items: flex-start;
        flex: 1 1 auto;
        height: auto;
        justify-content: flex-start;
        min-height: 0;
        overflow: auto;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .mail-detailed-view iframe {
        display: block;
        flex: 1 1 auto;
        height: 100%;
        max-height: none;
        min-height: 0;
    }

    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div:nth-child(1) {
        max-width: calc(100% - 1em);
        max-height: none;
        overflow-x: auto;
        padding: 0.2em 0.5em;
        box-shadow: 2px 2px #808080;
        border: 0.5px solid lightgrey;
    }

    .mail-content .details-container:has(.iframe-container[rendered]) .mail-detailed-view>div:nth-child(1) {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        box-shadow: none;
        max-width: 100%;
        overflow-x: auto;
        position: sticky;
        right: auto;
        top: 0;
        width: 100%;
    }

    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.delete-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.archive-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.report-spam-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.move-to+div,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.reply-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.reply-with-meeting-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.reply-all-button,
    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.forward-button {
        display: inherit;
    }

    .mail-content .details-container .mail-detailed-view:has(.iframe-container[rendered])>div>.move-to {
        display: flex;
    }

    #print-choice-modal .modal-content,
    #print-choice-modal>div {
        width: min(92vw, 28em);
        min-width: 0;
        padding: 1.25em;
    }

    #print-choice-modal .modal-content>div,
    #print-choice-modal>div>div {
        flex-direction: column;
    }

    .spam-modern-modal {
        width: calc(100vw - 1em);
        max-width: none;
        height: min(90dvh, 42em);
    }

    #mailSettingsDialog {
        width: 96vw;
        height: 90dvh;
    }
}

@media (max-width: 640px) {
    .mail-header>div:first-child {
        flex: 0 0 auto;
    }

    .mail-header>span {
        font-size: 1.25em !important;
    }

    .menu-header>div:nth-child(1)>button:nth-child(4),
    .menu-header>div:nth-child(1)>button:nth-child(6) {
        width: 4em;
    }

    .menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread {
        width: 12.5em;
        flex-basis: 12.5em;
    }

    .menu-header>div:nth-child(2)>div>div.home-menu>div.read-unread span {
        width: auto;
        white-space: nowrap;
        text-align: left;
    }

    .menu-header>div:nth-child(2)>div>div.view-menu>div.settings-button {
        width: 8em;
    }

    .mail-content .details-container .mail-list {
        height: 100%;
        min-height: 0;
    }

    .mail-content .details-container>.mail-detail-panel {
        height: 100dvh;
        min-height: 0;
    }

    .mail-content .details-container .mail-detailed-view {
        min-height: 0;
    }
}
.container .patient-header {
    height: 10em;
    width: 100%;
    background: transparent;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    position: relative;
}

.container .patient-body>.patient-details-table,
.container .patient-body>.patient-details-table table {
    width: 100%;
    background-color: white;
    border: 0.5px solid black;
    height: max-content;
}

.container .patient-body>.patient-details-table {
    padding: 1em;
    page-break-inside: auto;
    box-shadow: rgb(40 110 255 / 74%) 3px 3px;
    border: 1px solid #006eff87;
}

.container .patient-body>.patient-details-table>tbody {
    display: inline-table;
    width: calc(100% - 1em);
}

.container .patient-body>.patient-details-table>tbody>tr {
    height: 2em;
}

.container .patient-body>.patient-details-table>tbody .dropdown {
    background-color: white;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    width: 100%;
    border-radius: 0.2em;
    max-height: 0;
    transition: all 0.3s;
    position: absolute;
    overflow-y: auto;
    z-index: 1000;
}

.container .patient-body>.patient-details-table table {
    border: none;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item {
    width: 100%;
    display: none;
    cursor: pointer;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item:hover {
    text-decoration: underline;
    font-weight: bold;
    background-color: #00000045;
}

.container .patient-body>.patient-details-table>tbody .dropdown.shown {
    max-height: 10em;
}

.container .patient-body>.patient-details-table>tbody .dropdown.shown>.dropdown-item {
    padding: 0.5em;
    display: block;
}

.container .patient-body>.patient-details-table>tbody .dropdown>.dropdown-item:not(:last-child) {
    border-bottom: 0.5px solid lightgrey;
}

.container .patient-body>.patient-details-table input[disabled] {
    cursor: not-allowed;
}

.container .patient-body>.patient-details-table .rating-circle {
    border-radius: 50%;
    width: 2em;
    height: 2em;
    margin-left: 1em;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
}

.container .patient-body>.patient-details-table .rating-circle:first-child {
    background-color: #026602;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(2) {
    background-color: #009200;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(3) {
    background-color: #02c702;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(4) {
    background-color: #86c705;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(5) {
    background-color: #e1db06;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(6) {
    background-color: #ffc201;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(7) {
    background-color: #ff6a00cc;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(8) {
    background-color: #ff4909cc;
}

.container .patient-body>.patient-details-table .rating-circle:nth-child(9) {
    background-color: #ff3405;
}

.container .patient-body>.patient-details-table .rating-circle:last-child {
    background-color: #ff0000;
}

.container .patient-body>.patient-details-table tr:not([disabled]) .rating-circle {
    cursor: pointer;
}

.container .patient-body>.patient-details-table tr[disabled],
.container .patient-body>.patient-details-table tr[disabled] * {
    cursor: not-allowed;
}

.container .patient-body>.patient-details-table tr[disabled] {
    background-color: #00000025;
}

.container .patient-body>.patient-details-table tr[disabled] td:has(> .rating-circle) {
    padding: 0.5em;
}

.container .patient-body>.patient-details-table tr {
    transition: all 0.3s;
}

.container .patient-body>.patient-details-table input:not([type=radio]),
.container .patient-body>.patient-details-table div[type=placeholder],
.container .patient-body>.patient-details-table textarea[placeholder] {
    border: none;
    outline: none;
    height: 95%;
    align-self: center;
    border-bottom: 0.5px solid lightgrey;
    padding: 0.2em;
}

.container .patient-body>.patient-details-table div[type=placeholder],
.container .patient-body>.patient-details-table input[type=date],
.container .patient-body>.patient-details-table input[type=tel],
.container .patient-body>.patient-details-table input[type=email],
.container .patient-body>.patient-details-table input#addr_line_1,
.container .patient-body>.patient-details-table input#addr_line_2 {
    width: 100%;
}

.container .patient-body>.header-button-container,
.container .patient-body>.footer-button-container {
    padding: 1em;
    margin-top: 1em;
}

.container .patient-header img {
    height: 100%;
}

.container .patient-header .headline {
    height: 100%;
    flex-grow: 1;
    top: 0;
}

.container .patient-header .headline>h1 {
    font-size: 1em;
    width: 90%;
    justify-self: center;
}

.container .patient-header .headline>span {
    justify-self: center;
}

.container .patient-header .contact-details {
    min-width: 15em;
    padding: 0.5em;
    border: 1px solid grey;
    border-radius: 0.5em;
    margin-top: 0.2em;
}

.container .patient-header .contact-details .email,
.container .patient-header .contact-details .phone,
.container .patient-header .contact-details .whatsapp,
.container .patient-header .contact-details .web {
    width: 100%;
    height: 2em;
    display: flex;
    align-items: center;
    width: 100%;
}

.container .patient-header .contact-details .email>i,
.container .patient-header .contact-details .phone>i,
.container .patient-header .contact-details .whatsapp>i,
.container .patient-header .contact-details .web>i {
    content: '';
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-size: 1.5em 1.5em;
    margin-right: 1em;
    display: flex;
    justify-content: center;
}

/* .container .patient-body > .header-button-container > .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
} */

.container .patient-body>.header-button-container #reset,
.container .patient-body>.header-button-container #edit,
.container .patient-body>.header-button-container #delete {
    float: right;
    background: transparent;
    border: none;
    outline: none;
    top: 50%;
    position: relative;
}

.container .patient-body>.header-button-container #edit,
.container .patient-body>.header-button-container #delete {
    margin-right: 1em;
}

.container .patient-body>.header-button-container #reset:disabled,
.container .patient-body>.header-button-container #edit:disabled,
.container .patient-body>.header-button-container #delete:disabled {
    color: #808080;
}

.container .patient-body>.header-button-container #reset:not([disabled]),
.container .patient-body>.header-button-container #edit:not([disabled]),
.container .patient-body>.header-button-container #delete:not([disabled]) {
    cursor: pointer;
}

.container .patient-body>.header-button-container #reset:not([disabled]):hover,
.container .patient-body>.header-button-container #edit:not([disabled]):hover,
.container .patient-body>.header-button-container #delete:not([disabled]):hover {
    color: blue;
    text-decoration: underline;
}

.container .patient-body>.header-button-container>.button-container>.button.after,
.container .patient-body>.footer-button-container>.button-container>.button.after {
    position: relative;
    z-index: 0;
    border: 1px solid #3247cf;
    border-radius: 8px;
    padding: 8px 16px;
    min-width: 8em;
    background-image: linear-gradient(180deg, #4098ff, #4058ff 62%, #4075ff);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
    font-family: "Roobert", sans-serif;
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    transition-property: border-color, transform;
    transition-duration: 0.2s;
    will-change: transform;
    cursor: pointer;
}

#error-modal-table {
    padding: 1em;
    border-collapse: separate;
}

#error-modal-table tbody {
    overflow-y: auto;
}

body {
    counter-reset: Serial;
}

#error-modal-table tbody tr td:first-child:before {
    counter-increment: Serial;
    content: counter(Serial);
}

#error-modal-table,
#error-modal-table tbody tr,
#error-modal-table tbody tr td,
#error-modal-table tbody tr td span {
    width: 100%;
}

#error-modal-table tbody tr td {
    display: flex;
    justify-content: left;
}

#error-modal-table tbody tr td:before {
    margin-right: 1em;
}

#error-modal-table tbody tr td span {
    color: red;
    text-align: left;
}

.checkups,
.visit,
.reports,
.prescriptions,
.receipts {
    margin-bottom: 2em;
}

/* Container that handles the scrolling */
.table-scroll-container {
    max-height: 15em;
    overflow-y: auto;
    box-shadow: rgb(40 110 255 / 74%) 3px 3px;
    border-radius: 0.2em;
    border: 1px solid #006eff87;
    border-collapse: separate;
    border-spacing: 0;
}

.checkup-list-table,
.visit-list-table,
.report-list-table,
.prescription-list-table,
.receipt-list-table {
    width: 100%;
    background: white;
}

.checkup-list-table>thead,
.visit-list-table>thead,
.report-list-table>thead,
.prescription-list-table>thead,
.receipt-list-table>thead {
    position: sticky;
    top: 0;
    /* Sticks to the top of the parent scrolling container */
    z-index: 1;
    /* Ensures it stays above the body content */
    background: white;
    /* Prevents rows from showing through on scroll */
}

.checkup-list-table>tbody,
.visit-list-table>tbody,
.report-list-table>tbody,
.prescription-list-table>tbody,
.receipt-list-table>tbody {
    min-height: 3em;
    width: 100%;
}

.checkup-list-table>tbody>.empty-row,
.report-list-table>tbody>.empty-row,
.visit-list-table>tbody>.empty-row,
.prescription-list-table>tbody>.empty-row,
.receipt-list-table>tbody>.empty-row {
    width: 100%;
    height: 2em;
}

.checkup-list-table>thead>tr>th,
.visit-list-table>thead>tr>th,
.report-list-table>thead>tr>th,
.prescription-list-table>thead>tr>th,
.receipt-list-table>thead>tr>th {
    border-bottom: 0.5px solid black;
}

.checkup-list-table th,
.checkup-list-table td,
.visit-list-table th,
.visit-list-table td,
.report-list-table th,
.report-list-table td,
.prescription-list-table th,
.prescription-list-table td,
.receipt-list-table th,
.receipt-list-table td {
    padding: 0.2em;
}

.checkup-list-table th:not(:first-child),
.checkup-list-table td:not(:first-child),
.visit-list-table th:not(:first-child),
.visit-list-table td:not(:first-child),
.report-list-table th:not(:first-child),
.report-list-table td:not(:first-child),
.prescription-list-table th:not(:first-child),
.prescription-list-table td:not(:first-child),
.receipt-list-table th:not(:first-child),
.receipt-list-table td:not(:first-child) {
    border-left: 0.5px solid black;
}

.checkup-list-table>tbody,
.visit-list-table>tbody,
.report-list-table>tbody,
.prescription-list-table>tbody,
.receipt-list-table>tbody {
    max-height: 10em;
    overflow-y: auto;
}

.checkup-list-table>tbody>tr:nth-child(even),
.visit-list-table>tbody>tr:nth-child(even),
.report-list-table>tbody>tr:nth-child(even),
.prescription-list-table>tbody>tr:nth-child(even),
.receipt-list-table>tbody>tr:nth-child(even) {
    background-color: #f2f2f2;
}

.checkup-list-table>tbody>tr:not(.empty-row, #loading-row),
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .prescription-name-td-action-div)>span,
.receipt-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .receipt-name-td-action-div)>span,
.visit-list-table>tbody>tr:not(.empty-row, #loading-row)>td:nth-child(2)>span {
    cursor: pointer;
}

.report-list-table>tbody>tr:not(.empty-row, #loading-row) a:hover {
    text-decoration: underline;
}

.checkup-list-table>tbody>tr:not(.empty-row, #loading-row):hover,
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .prescription-name-td-action-div)>span:hover,
.receipt-list-table>tbody>tr:not(.empty-row, #loading-row)>td:has(> .receipt-name-td-action-div)>span:hover,
.visit-list-table>tbody>tr:not(.empty-row, #loading-row)>td:nth-child(2)>span:hover {
    font-weight: bold;
    text-decoration: underline;
}

.prescription-list-table>tbody>tr:not(.empty-row, #loading-row):has(a.download:not([disabled]):hover),
.prescription-list-table>tbody>tr:not(.empty-row, #loading-row):has(a.send:hover) {
    font-weight: normal;
    text-decoration: none;
}

.patient-id-div {
    min-width: 25em;
    justify-self: center;
    border: 0.5px solid lightgrey;
    padding: 0.5em;
    height: 2em;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-radius: 0.5em;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (hover: hover) {
    .button.after:hover {
        transform: scale(1.04);
        font-weight: bold;
    }
}

.container .patient-body>.header-button-container>.button-container>.button.after:active {
    border-color: #192ba1;
    transform: scale(0.98);
}

.container .patient-body>.header-button-container>.button-container>.button.after::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 7px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.2s;
}

.container .patient-body>.header-button-container>.button-container>.button.after::before {
    background-image: linear-gradient(180deg, #40a6ff, #4058ff 62%, #4075ff);
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 0px rgba(0, 0, 0, 0.2);
}

.container .patient-body>.header-button-container>.button-container>.button.after::after {
    background-image: linear-gradient(180deg, #0a40ce, #4058ff 38%, #40a0ff);
    box-shadow: inset 0 1px 1px #0b1c95;
}

.container .patient-body>.header-button-container>.button-container>.button.after:active::after {
    opacity: 1;
}

.modal {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000aa;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.truncate-text {
    /* Required for ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name-cell-wrap {
    word-break: break-all;
}

#report-upload-modal .report-upload-view,
.new-assessment-modal,
.create-prescription-modal {
    height: 10em;
}

.new-assessment-modal-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 2em;
}

.equilibrium-test-grade {
    outline: none;
    border: none;
    border-radius: 0.2em;
}

.equilibrium-test-grade:not([disabled]) {
    cursor: pointer;
}

.left-align-table-sub-header {
    float: left;
    text-align: left;
}

.circle-shadow {
    background-color: rgba(0, 0, 0, 0.6);
    stroke: none;
    position: absolute;
    z-index: 10000;
    border-radius: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
}

.long-arrow {
    margin-left: 1em;
    margin-right: 1em;
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    transform: rotate(45deg);

}

.long-arrow:after {
    content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: black;
    transform: rotate(-45deg) translate(6px, 2px);
}

.human-figure {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    position: relative;
}

.human-figure[face=front-face] {
    background-image: url(/male-front-face-color.png);
}

.human-figure[face=back-face] {
    background-image: url(/male-back-face-color.png);
}

.human-figure[face=left-face] {
    background-image: url(/male-left-face-color.png);
}

.human-figure[face=right-face] {
    background-image: url(/male-right-face-color.png);
}

.human-figure[face=skeletal-front-face] {
    background-image: url(/skeletal-front-face.png);
}

.human-figure[face=skeletal-back-face] {
    background-image: url(/skeletal-back-face.png);
}

.equilibrium-test-grade:not([disabled]):hover {
    background-color: #00000025;
}

.new-assessment-modal-table .comments {
    width: 90%;
    border: none;
    border-bottom: 1px solid lightgrey;
    outline: none;
    resize: none;
}

.new-assessment-modal-body {
    padding: 1em;
    overflow-y: auto;
    height: calc(100% - 6em);
}

.new-assessment-modal-table th.top-cell {
    border-top: 1px solid black;
}

.new-assessment-modal-table th.black-border-header-cell {
    border-bottom: 1px solid black;
}

.new-assessment-modal-table td.left-cell,
.new-assessment-modal-table th.left-cell {
    border-left: 1px solid black;
}

.new-assessment-modal-table td.right-cell,
.new-assessment-modal-table th.right-cell {
    border-right: 1px solid black;
}

.new-assessment-modal-table td.bottom-cell,
.new-assessment-modal-table th.bottom-cell {
    border-bottom: 1px solid black;
}

.new-assessment-modal-table td.top-cell,
.new-assessment-modal-table th.top-cell {
    border-top: 1px solid black;
}

.new-assessment-modal-table th.non-right-border,
.new-assessment-modal-table td.non-right-border {
    border-right: none;
}

.new-assessment-modal-table th.non-left-border,
.new-assessment-modal-table td.non-left-border {
    border-left: none;
}

.new-assessment-modal-table th.non-top-border,
.new-assessment-modal-table td.non-top-border {
    border-top: none;
}

.new-assessment-modal-table th.non-bottom-border,
.new-assessment-modal-table td.non-bottom-border {
    border-bottom: none;
}

#range-of-motion input[type=number],
#range-of-motion input.comments[type=text] {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.new-assessment-modal-body .assessment-type-dropdown {
    width: 80%;
    height: 2em;
    border: 0.5px solid lightgrey;
    justify-self: center;
    border-radius: 0.2em;
    position: relative;
    display: flex;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]) {
    transition: all 0.2s;
    cursor: pointer;
}

.new-assessment-modal-body .assessment-type-dropdown[disabled] {
    cursor: not-allowed;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):after {
    content: '';
    border-left: 0.5px solid lightgrey;
    right: 10%;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid grey;
    top: calc(50% - 5px);
    right: 0.5em;
    transition: all 0.1s;
}

.new-assessment-modal-body .assessment-type-dropdown:hover:after,
.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked):after {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgb(75, 75, 75);
    top: calc(50% - 7px);
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked):after {
    rotate: 90deg;
}

.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):hover,
.new-assessment-modal-body .assessment-type-dropdown:not([disabled]):has(> input[type=checkbox]:checked) {
    box-shadow: 3px 3px 3px lightgrey;
}

.new-assessment-modal-body>div>footer {
    cursor: pointer;
    padding-left: 1em;
    padding-right: 1em;
    width: max-content;
    height: 2em;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    position: relative;
}

.new-assessment-modal-body>div>footer:not([disabled]) {
    border: 0.5px solid #006eff;
}

.new-assessment-modal-body>div>footer[disabled] {
    border: 0.5px solid #808080;
    cursor: not-allowed;
}

.new-assessment-modal-body>div>footer:not([disabled]):after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #006eff;
    top: calc(50% - 5px);
    right: 0.5em;
    transition: all 0.1s;
    rotate: 90deg;
}

.new-assessment-modal-body>div>footer>span {
    margin-left: 0.5em;
    transition: all 0.2s;
    margin-right: 1em;
    font-weight: bold;
}

.new-assessment-modal-body>div>footer:not([disabled])>span {
    color: #006eff;
}

.new-assessment-modal-body>div>footer[disabled]>span {
    color: #808080;
}

.new-assessment-modal-body>div>footer:not([disabled])>i>svg,
.new-assessment-modal-body>div>footer:not([disabled])>i>svg line {
    fill: #006eff;
    stroke: #006eff;
}

.new-assessment-modal-body>div>footer[disabled]>i>svg,
.new-assessment-modal-body>div>footer[disabled]>i>svg line {
    fill: #808080;
    stroke: #808080;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>span {
    text-decoration: underline;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>i>svg {
    transition: all 0.2s;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover>i>svg line {
    stroke-width: 3;
}

.new-assessment-modal-body>div>footer:not([disabled]):hover {
    box-shadow: 3px 3px 3px #006eff73;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items {
    max-height: 0;
    height: 0;
    border-radius: 0.2em;
    background-color: white;
    top: 100%;
    position: absolute;
    width: 100%;
    box-shadow: 3px 3px 3px lightgrey;
    transition: all 0.2s;
    margin-top: 0.3em;
    overflow-y: auto;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item {
    position: relative;
    height: 2em;
    display: none;
    justify-content: left;
    align-items: center;
    background-color: white;
    transition: background-color 0.2s ease;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:hover {
    background-color: #80808041;
}

.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item:hover {
    background-color: #006eff41;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item span,
.new-assessment-modal-body #new-assessment-body+footer .assessment-type-dropdown-items .item span {
    margin-left: 10%;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:has(> input[type=radio]:checked) span {
    margin-left: 0;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:has(> input[type=radio]:checked):before {
    content: '';
    width: 10%;
    background-image: url(/green-tick.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    background-size: 50%;
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked) .item,
.new-assessment-modal-body #new-assessment-body+footer:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items .item {
    display: flex;
}

.new-assessment-modal-body .assessment-type-dropdown .assessment-type-dropdown-items .item:not(:last-child) {
    border-bottom: 0.5px solid lightgrey;
}

.new-assessment-modal-body .assessment-type-dropdown:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items {
    max-height: 6em;
    height: 6em;
    border: 0.5px solid grey;
}

.new-assessment-modal-body #new-assessment-body+footer:has(> input[type=checkbox]:checked) .assessment-type-dropdown-items {
    max-height: 6em;
    height: 6em;
    border: 0.5px solid #006eff;
}

h2.section-header {
    text-decoration: underline;
    margin-bottom: 1em;
    text-align: left;
    font-weight: bold;
}

h2.section-header:hover>button {
    display: inline;
}

h2.section-header>button {
    margin-left: 1em;
    outline: none;
    background: none;
    border: none;
    background-image: url(/delete-blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 100%;
    width: 3em;
    display: none;
}

div[of=checkup-tables]+hr {
    margin-bottom: 1em;
}

.new-assessment-modal-table th,
.new-assessment-modal-table td {
    border: 1px solid lightgrey;
    padding: 0.2em;
}

.modal .patient-search-view,
.modal .error-view,
.modal .report-upload-view,
.new-assessment-modal-view,
.prescription-body-view,
.receipt-modal-content,
.patient-visit-modal-content {
    background: white;
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
    width: 70%;
    height: 70%;
    border-radius: 0.5em;
    position: relative;
    z-index: 1000;
    padding: 0.5em;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content {
    background-color: #fefefe;
    padding: 1em;
    border: 1px solid #888;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    position: relative;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .modal-actions {
    justify-content: center;
    gap: 15px;
    padding-top: 0.5em;
    border-top: 1px solid lightgrey;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content h2 {
    color: #dc3545;
    /* Red for warning */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn {
    padding: 5px 25px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 80px;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-yes {
    background-color: #28a745;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-yes:hover {
    background-color: #218838;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-no {
    background-color: #6c757d;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-ok {
    background-color: #0052a982;
    color: white;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-set-credit {
    background-color: #4901bdec;
    color: white;
    margin-top: 0.5em;
    width: 100%;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-ok:hover {
    background-color: #0052a9;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-no:hover {
    background-color: #5a6268;
}

.patient-visit-modal-content+.modal>.patient-visit-modal-warning-content .btn-set-credit:hover {
    background-color: #2f007aec;
    color: white;
}

.prescription-body-view {
    height: 90%;
    width: 90%;
}

.new-assessment-modal-view {
    width: 95%;
    height: 95%;
}

.modal .patient-search-view>header,
.modal .error-view>header,
.modal .report-upload-view>header,
.modal .error-view>header,
.modal .new-assessment-modal-view>header {
    height: 3em;
    width: 100%;
    border-bottom: 0.5px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal .new-assessment-modal-view>header {
    position: relative;
}

.modal .new-assessment-modal-view>header>button[type=button],
.receipt-modal-content>header>button,
.patient-visit-modal-content>header>button {
    right: 1em;
    position: absolute;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0095ff;
}

.modal .new-assessment-modal-view>header>button[type=button]:hover,
.receipt-modal-content>header>button:hover,
.patient-visit-modal-content>header>button:hover {
    text-decoration: underline;
}

.modal .patient-search-view>header>h1,
.modal .error-view>header>h1,
.modal .report-upload-view>header>h1,
.modal .new-assessment-modal-view>header>h2 {
    font-weight: bold;
    color: #3366cc;
    font-size: 1.5em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.modal .patient-search-view>.patient-search-view-body {
    padding: 0.5em;
    height: calc(100% - 6em);
}

.modal .patient-search-view>.patient-search-view-body>.search-box {
    width: 95%;
    height: 2em;
    justify-self: center;
    border: 0.5px solid black;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div {
    width: calc(100% - 6em);
    height: 100%;
    display: grid;
    grid-template-columns: 30% [col] 5% [col] 30% [col] 5% [col] 30% [col];
    grid-template-rows: 100% [row];
    align-items: center;
    justify-content: center;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>button {
    position: absolute;
    right: 1em;
    height: 1.5em;
    width: 5em;
    color: white;
    background-color: #3366cc;
    border: none;
    outline: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.3s;
}

.modal .patient-search-view>.patient-search-view-body>div>table {
    width: 100%;
    height: calc(100% - 2em);
    border-collapse: collapse;
}

.modal .patient-search-view>.patient-search-view-body>div>table>thead {
    height: 1.5em;
}

.modal .patient-search-view>.patient-search-view-body>div>table>tbody {
    height: calc(100% - 1.5em);
    overflow: auto;
}

.modal .patient-search-view>.patient-search-view-body>div>table>tbody>tr>td {
    font-size: 0.8em;
}

.modal .patient-search-view>.patient-search-view-body>div>table>thead>tr>th {
    background: #727272;
    color: white;
    border: 1px solid white;
    font-weight: normal;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>button:hover {
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div>input {
    border: none;
    border-bottom: 0.5px solid grey;
    height: 70%;
    outline: none;
    padding-left: 0.2em;
    margin-right: 1em;
}

.modal .patient-search-view>.patient-search-view-body>.search-box>div>span {
    font-size: 0.5em;
    color: grey;
    margin-right: 1em;
}

.modal .patient-search-view>footer,
.modal .error-view>footer,
.modal .report-upload-view>footer,
.modal .new-assessment-modal-view>footer {
    height: 3em;
    width: 100%;
    border-top: 0.5px solid grey;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.modal .patient-search-view>footer>button,
.modal .error-view>footer>button,
.modal .report-upload-view>footer>button,
.modal .new-assessment-modal-view>footer>button {
    height: 2em;
    width: 5em;
    color: white;
    background-color: #3366cc;
    border: none;
    outline: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.3s;
}

.modal .new-assessment-modal-view>footer>button[disabled] {
    cursor: not-allowed;
    background-color: grey;
}

.modal .patient-search-view>footer>button:hover,
.modal .error-view>footer>button:not([disabled]):hover,
.modal .report-upload-view>footer>button:hover,
.modal .new-assessment-modal-view>footer>button:not([disabled]):hover {
    box-shadow: 2px 4px 6px rgba(49, 49, 49, 0.8);
}

*[disable-item][disabled] {
    cursor: not-allowed;
}

.container .patient-body button[disabled] {
    cursor: not-allowed;
}

.container .patient-body>.header-button-container>.button-container>.button.after[disabled],
.container .patient-body>.footer-button-container>.button-container>.button.after[disabled] {
    background-image: linear-gradient(180deg, #cccccc, #737373 62%, #5e5e5e);
    border: none;
    cursor: not-allowed;
}

.red-star {
    color: red;
    font-size: 0.5em;
    float: left;
    align-self: center;
    width: 2em;
}

.add-new-checkup,
.add-new-report,
.delete-report,
.delete-checkup,
.add-new-prescription,
.delete-prescription,
.download-prescription,
.send-prescription,
.add-new-receipt,
.delete-receipt,
.download-receipt,
.send-receipt,
.add-new-visit,
.delete-visit {
    outline: none;
    background: none;
    cursor: pointer;
    border: none;
    margin-left: 1em;
    width: 1.5em;
    display: flex;
    align-items: center;
}

.add-new-prescription:not([disabled]):hover>svg line {
    stroke-width: 2.5;
}

.delete-prescription:not([disabled]):hover>svg {
    stroke-width: 20;
}

.download-prescription:not([disabled]):hover>svg path {
    stroke-width: 2.5;
}

.send-prescription:not([disabled]):hover>svg path {
    stroke-width: 2.5;
}

.add-new-checkup:not([disabled]):hover>svg line,
.add-new-report:not([disabled]):hover>svg line {
    stroke-width: 3;
}

.delete-report:not([disabled]):hover>svg path,
.delete-checkup:not([disabled]):hover>svg path {
    stroke-width: 20;
}

.marker {
    position: absolute;
    width: 15px;
    /* Adjust size as needed */
    height: 15px;
    /* Adjust size as needed */
    background-color: #888888b4;
    /* Grey color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* Center the circle on the click point */
}

.functional-evaluation-checkbox-label {
    font-weight: bold;
    margin-left: 0.2em;
}

.prescription-name-td {
    text-align: left;
    display: flex;
    position: relative;
    align-items: center;
}

.prescription-name-td-action-div,
.receipt-name-td-action-div,
.visit-name-td-action-div {
    right: 0.5em;
    position: absolute;
    display: flex;
}

.prescription-name-td-action-div>a.download,
.prescription-name-td-action-div>button.send,
.receipt-name-td-action-div>a.download,
.receipt-name-td-action-div>button.send,
.visit-name-td-action-div>button.send {
    height: 100%;
    width: 1em;
    display: block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    cursor: pointer;
}

.prescription-name-td-action-div>a.download:disabled path,
.receipt-name-td-action-div>a.download:disabled path {
    stroke: #808080;
}

.prescription-name-td-action-div>a.download:disabled,
.receipt-name-td-action-div>a.download:disabled {
    cursor: not-allowed;
}

.prescription-name-td-action-div>a.download:not([disabled]):hover>svg path,
.prescription-name-td-action-div>button.send:hover>svg path,
.receipt-name-td-action-div>a.download:not([disabled]):hover>svg path,
.receipt-name-td-action-div>button.send:hover>svg path,
.visit-name-td-action-div>button.send:hover>svg path {
    stroke-width: 2.5;
}

.open-modal-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

.send-modal-content,
.receipt-modal-content,
.patient-visit-modal-content {
    background-color: #fff;
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%;
    position: relative;
    flex-direction: column;
    height: 90%;
}

.send-modal-content h1,
.receipt-modal-content h1,
.patient-visit-modal-content h1 {
    text-align: center;
    color: #333;
    margin-top: 0;
}

.receipt-modal-content>header,
.patient-visit-modal-content>header {
    height: 2em;
    border-bottom: 0.5px solid lightgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.send-modal-content label,
.receipt-modal-content label,
.patient-visit-modal-content label {
    margin-top: 10px;
    font-weight: bold;
    color: #555;
    width: 100%;
    text-align: left;
    display: block;
}

.send-modal-content input[type="text"],
.send-modal-content input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.send-modal-content .send-button,
.receipt-modal-content .create-button,
.patient-visit-modal-content .create-button {
    background-color: #28a745;
    color: white;
    padding: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.receipt-modal-content .create-button:disabled,
.patient-visit-modal-content .create-button:disabled {
    cursor: not-allowed;
    background-color: #909090;
}

.send-modal-content .send-button:hover,
.receipt-modal-content .create-button:not([disabled]):hover,
.patient-visit-modal-content .create-button:not([disabled]):hover {
    background-color: #218838;
}

.hidden-element {
    opacity: 0;
    visibility: hidden;
}

.visible-element {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.receipt-modal-content .date-section {
    text-align: left;
    font-size: 14px;
    margin-bottom: 10px;
}

.receipt-modal-content .patient-details,
.patient-visit-modal-content .patient-details {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.receipt-modal-content .patient-details div,
.patient-visit-modal-content .patient-details div {
    flex-basis: 30%;
}

.receipt-modal-content .patient-details span.header,
.patient-visit-modal-content .patient-details span.header {
    font-weight: bold;
}

.receipt-modal-content .invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-modal-content .invoice-table th,
.receipt-modal-content .invoice-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

.receipt-modal-content .invoice-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.receipt-modal-content .total-row td {
    font-weight: bold;
}

.receipt-modal-content .total-row #total-fee-cell {
    display: flex;
    align-items: center;
}

.receipt-modal-content .total-row .total-label {
    text-align: right;
}

table.invoice-table td[rowspan]>div:nth-child(1) div:nth-child(2),
table.invoice-table td>div:nth-child(1):has(> div:nth-child(1) > br) div:nth-child(2) {
    align-items: start;
}

table.invoice-table div[contentEditable="true"] {
    outline: none;
    overflow: hidden;
    border: none;
}

table.invoice-table th,
table.invoice-table td {
    word-wrap: break-word;
    max-width: 100%;
}

table.invoice-table {
    table-layout: fixed;
    position: relative;
}

table.invoice-table th>div:nth-child(1) div:nth-child(2),
table.invoice-table td>div:nth-child(1) div:nth-child(2) {
    display: none;
    cursor: pointer;
    position: relative;
    height: auto;
    width: 0.5em;
    border-color: transparent;
    border-style: solid;
    border-width: .31em 0 .31em .5em;
    border-top-color: transparent;
    border-left-color: #808080;
    right: 0.2em;
    margin-left: 0.2em;
}

table.invoice-table th>div:nth-child(1),
table.invoice-table td>div:nth-child(1) {
    min-width: 3em;
    height: 100%;
    display: flex;
    align-items: center;
}

table.invoice-table th>div:nth-child(1) div:nth-child(1),
table.invoice-table td>div:nth-child(1) div:nth-child(1) {
    flex-grow: 1;
}

table.invoice-table th>div:nth-child(1):has(> div[contenteditable=true]):hover div:nth-child(2),
table.invoice-table td>div:nth-child(1):has(> div[contenteditable=true]):hover div:nth-child(2) {
    display: block;
}

table.invoice-table td input[type=number],
table.invoice-table td textarea {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-bottom: 0.5px solid lightgrey;
    padding: 0.5em;
}

/* .table-menu-list */
.table-menu-list {
    font-size: 0.8em;
    text-align: justify;
    padding: 0.5em;
    cursor: pointer;
}

.table-menu-list:hover {
    background-color: #0000005e;
}

.table-menu-list[disabled] {
    cursor: not-allowed;
    color: lightgrey;
}

.red-round-border {
    border: 1.5px solid red;
}

.patient-visit-modal-content .form-group {
    margin-bottom: 15px;
}

.patient-visit-modal-content .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.patient-visit-modal-content .form-group input,
.patient-visit-modal-content .form-group textarea,
.patient-visit-modal-content .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

@media print {
    body * {
        visibility: hidden;
    }

    #content,
    #content * {
        visibility: visible;
    }

    .container .header-button-container,
    .container .footer-button-container {
        display: none;
    }
}

@media print and (orientation: portrait) {

    .container .patient-header .contact-details .email>i,
    .container .patient-header .contact-details .phone>i,
    .container .patient-header .contact-details .whatsapp>i,
    .container .patient-header .contact-details .web>i {
        visibility: visible;
    }

    .container .patient-header .contact-details .email,
    .container .patient-header .contact-details .phone,
    .container .patient-header .contact-details .whatsapp,
    .container .patient-header .contact-details .web {
        justify-content: center;
    }

    .container .patient-header .contact-details {
        max-width: 10em;
        min-width: 10em;
        padding: 0.1em;
    }

    .container .patient-header .contact-details * {
        font-size: 0.7em;
    }

    .container .patient-header img {
        height: 70%;
    }

    .container .patient-header .headline>h1 {
        font-size: 0.5em;
        align-self: center;
    }

    .container .patient-header .headline>span {
        align-self: center;
        margin-top: auto;
    }
}

@media (max-width: 1024px) {
    .modal .patient-search-view>.patient-search-view-body>.search-box {
        height: max-content;
        padding: 1em;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>div {
        display: block;
    }
}

@media (max-width: 768px) {
    #content {
        padding: 0.25em;
    }

    .back-button {
        width: 2.5em;
        height: 2.5em;
    }

    .container {
        width: 100%;
        overflow-x: hidden;
    }

    .container .patient-header {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75em;
        padding: 0.75em 0.5em 1em;
    }

    .container .patient-header img {
        width: 7.5em;
        height: auto;
        align-self: center;
    }

    .container .patient-header .headline {
        height: auto;
        text-align: center;
    }

    .container .patient-header .headline>span {
        display: block;
        font-size: 1.7em;
    }

    .container .patient-header .headline>h1 {
        width: 100%;
        margin: 0.25em 0 0;
        font-size: 1.45em;
        line-height: 1.2;
    }

    .container .patient-header .contact-details {
        width: 100%;
        min-width: 0;
        max-width: 25em;
        margin: 0 auto;
        font-size: 0.9em;
        overflow-wrap: anywhere;
    }

    .container .patient-body>.header-button-container,
    .container .patient-body>.footer-button-container {
        padding: 0.75em 0.25em;
        margin-top: 0.5em;
    }

    .container .patient-body>.header-button-container>.button-container {
        position: static !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }

    .container .patient-body>.header-button-container #before {
        position: static !important;
        width: 100%;
        max-width: 12em;
    }

    .container .patient-body>.header-button-container #reset,
    .container .patient-body>.header-button-container #edit,
    .container .patient-body>.header-button-container #delete {
        float: none;
        position: static;
        top: auto;
        margin-right: 0;
        padding: 0.45em 0.75em;
    }

    .container .patient-body>.footer-button-container>.button-container {
        display: flex;
        justify-content: center;
    }

    .container .patient-body>.patient-details-table,
    .container .patient-body>.patient-details-table>tbody,
    .container .patient-body>.patient-details-table>tbody>tr,
    .container .patient-body>.patient-details-table>tbody>tr>td,
    .container .patient-body>.patient-details-table table,
    .container .patient-body>.patient-details-table table>tbody,
    .container .patient-body>.patient-details-table table>tbody>tr,
    .container .patient-body>.patient-details-table table>tbody>tr>td {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .container .patient-body>.patient-details-table {
        padding: 0.75em;
        box-shadow: rgb(40 110 255 / 45%) 2px 2px;
    }

    .container .patient-body>.patient-details-table>tbody {
        width: 100%;
    }

    .container .patient-body>.patient-details-table>tbody>tr {
        padding: 0.6em 0;
        border-bottom: 1px solid #e4e4e4;
    }

    .container .patient-body>.patient-details-table>tbody>tr:last-child {
        border-bottom: none;
    }

    .container .patient-body>.patient-details-table>tbody>tr>td:first-child {
        margin-bottom: 0.35em;
        font-weight: 600;
    }

    .container .patient-body>.patient-details-table span[style*="float: left"],
    .container .patient-body>.patient-details-table span[style*="position: absolute"] {
        float: none !important;
        position: static !important;
        display: inline;
        text-align: left !important;
    }

    .container .patient-body>.patient-details-table input:not([type=radio]):not([type=checkbox]),
    .container .patient-body>.patient-details-table textarea,
    .container .patient-body>.patient-details-table div[type=placeholder] {
        width: 100% !important;
        min-height: 2.4em;
        margin-left: 0 !important;
        left: auto !important;
        position: static !important;
    }

    .container .patient-body>.patient-details-table textarea {
        min-height: 7em;
    }

    .container .patient-body>.patient-details-table div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        row-gap: 0.5em;
    }

    .container .patient-body>.patient-details-table td[style*="display: flex"],
    .container .patient-body>.patient-details-table td>div[style*="display:flex"],
    .container .patient-body>.patient-details-table td>div[style*="display: flex"] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5em 0.9em;
        justify-content: flex-start !important;
    }

    .container .patient-body>.patient-details-table td>div[style*="width: 50%"],
    .container .patient-body>.patient-details-table td>div[style*="width: 49%"],
    .container .patient-body>.patient-details-table td>div>div[style*="width: 50%"],
    .container .patient-body>.patient-details-table td>div>div[style*="width: 49%"] {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    .container .patient-body>.patient-details-table td>div[style*="left: 10%"],
    .container .patient-body>.patient-details-table td>div[style*="left:10%"] {
        left: auto !important;
        position: static !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35em 0.75em;
    }

    .container .patient-body>.patient-details-table input[type=radio] {
        margin-left: 0 !important;
    }

    .container .patient-body>.patient-details-table label {
        margin-left: 0.25em !important;
        margin-right: 0.65em;
    }

    .container .patient-body>.patient-details-table .rating-circle {
        width: 2.15em;
        height: 2.15em;
        margin: 0.2em;
        flex: 0 0 auto;
    }

    .container .patient-body>.patient-details-table .red-star {
        float: none;
        display: inline;
        width: auto;
        margin-left: 0.15em;
    }

    .patient-id-div {
        width: 100%;
        min-width: 0;
        height: auto;
        flex-direction: column;
        gap: 0.5em;
        align-items: stretch;
    }

    .patient-id-div>div {
        width: 100%;
        margin-left: 0 !important;
        text-align: center;
    }

    .visit>header,
    .checkups>header,
    .reports>header,
    .prescriptions>header,
    .receipts>header {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35em;
    }

    .visit>header>h2,
    .checkups>header>h2,
    .reports>header>h2,
    .prescriptions>header>h2,
    .receipts>header>h2 {
        margin: 0 0.25em 0 0;
        font-size: 1em;
    }

    .visit>header>span {
        position: static !important;
        width: 100%;
        text-align: left;
        margin-top: 0.25em;
    }

    .table-scroll-container {
        max-height: 18em;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .checkup-list-table,
    .visit-list-table,
    .report-list-table,
    .prescription-list-table,
    .receipt-list-table {
        min-width: 42em;
    }

    .modal {
        position: fixed;
        align-items: flex-start;
        padding: 0.75em;
        overflow: auto;
    }

    .modal .patient-search-view,
    .modal .error-view,
    .modal .report-upload-view,
    .new-assessment-modal-view,
    .prescription-body-view,
    .receipt-modal-content,
    .patient-visit-modal-content,
    .send-modal-content {
        width: 100% !important;
        max-width: none;
        height: calc(100dvh - 1.5em) !important;
        max-height: calc(100dvh - 1.5em);
        overflow: hidden;
        padding: 0.6em;
    }

    .modal .patient-search-view>.patient-search-view-body {
        height: calc(100% - 6em);
        padding: 0.5em 0;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box {
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6em;
        padding: 0.75em;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>div {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        row-gap: 0.5em;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>div>span {
        display: none;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>div>input {
        width: 100%;
        height: 2.4em;
        margin-right: 0;
    }

    .modal .patient-search-view>.patient-search-view-body>.search-box>button {
        position: static;
        width: 100%;
        height: 2.4em;
    }

    .modal .patient-search-view>.patient-search-view-body>.patient-search-results {
        height: calc(100% - 10em) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal .patient-search-view>.patient-search-view-body>.patient-search-results>table {
        min-width: 48em;
        height: auto;
    }
}

@page {
    size: auto;
    margin: 0mm;
}
.report-page {
  min-height: calc(100vh - 1em);
  padding: 2.5em clamp(1em, 3vw, 3em);
  color: #1f3338;
  background:
    linear-gradient(135deg, rgba(25, 190, 187, 0.08), transparent 24em),
    linear-gradient(180deg, #f7faf9 0%, #eef4f4 100%);
  border-radius: 0.5em;
}

.report-back-button {
  position: fixed;
  top: 1.2em;
  left: 1.2em;
  z-index: 20;
  min-width: 5.8em;
  height: 2.8em;
  padding: 0 1em 0 2.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99em;
  background: #ffffff;
  box-shadow: 0 0.6em 1.3em rgba(17, 35, 42, 0.12);
  border: 1px solid #d9e7e7;
  color: #07575b;
  font-weight: 800;
  text-decoration: none;
}

.report-back-button::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  width: 0.78em;
  height: 0.78em;
  border-left: 0.18em solid #12343b;
  border-bottom: 0.18em solid #12343b;
  transform: translateY(-50%) rotate(45deg);
}

.report-back-button:hover {
  color: #ffffff;
  background: #07575b;
}

.report-back-button:hover::before {
  border-color: #ffffff;
}

.report-hero {
  max-width: 1440px;
  margin: 0 auto 1.2em;
  padding: 1.5em;
  display: grid;
  grid-template-columns: minmax(14em, 1fr) minmax(20em, 1.25fr);
  gap: 1.2em;
  align-items: end;
  border: 1px solid #d9e7e7;
  background: #ffffff;
  box-shadow: 0 0.8em 2em rgba(25, 58, 66, 0.08);
  border-radius: 0.5em;
}

.report-kicker {
  display: inline-flex;
  padding: 0.35em 0.65em;
  border-radius: 99em;
  background: #e7f6f6;
  color: #0c6f6d;
  font-weight: 700;
  letter-spacing: 0;
}

.report-hero h1 {
  margin: 0.2em 0 0;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1;
  font-family: "Winky Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  color: #07575b;
}

.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8em;
}

.report-summary-grid div {
  min-height: 6em;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.45em;
  background: #f9fcfc;
  border: 1px solid #e1eeee;
}

.report-summary-grid span,
.report-section-toolbar p,
.report-panel summary small {
  color: #577077;
}

.report-summary-grid strong {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: #07575b;
}

.report-accordion {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 1em;
}

.report-filter-bar.report-page-filter {
  max-width: 1440px;
  margin: 0 auto 1.2em;
  box-sizing: border-box;
  align-items: end;
}

.report-page-filter label {
  min-width: min(21em, 100%);
}

.report-page-filter input {
  width: 100%;
  box-sizing: border-box;
}

.report-panel {
  overflow: hidden;
  border-radius: 0.5em;
  border: 1px solid #d9e7e7;
  background: #ffffff;
  box-shadow: 0 0.7em 1.8em rgba(25, 58, 66, 0.07);
}

.report-panel > summary {
  position: relative;
  cursor: pointer;
  padding: 1.1em 1.3em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6em;
  align-items: center;
}

.report-panel > summary::after {
  content: "+";
  position: absolute;
  top: 1em;
  right: 1.3em;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef7f7;
  color: #07575b;
  font-size: 1.2em;
  transition: background 0.2s, color 0.2s, transform 0.28s ease;
}

.report-panel[open] > summary::after {
  content: "-";
  transform: rotate(180deg);
}

.report-panel.is-closing > summary::after {
  content: "+";
  transform: rotate(0deg);
}

.report-panel > summary::-webkit-details-marker {
  display: none;
}

.report-panel summary span {
  font-size: 1.25em;
  font-weight: 800;
}

.report-panel summary small {
  grid-column: 1 / 2;
  padding-right: 3.2em;
}

.report-panel-body {
  padding: 0 1.3em 1.3em;
  overflow: hidden;
}

.report-panel.is-animating .report-panel-body {
  transition: height 0.32s ease, opacity 0.22s ease, transform 0.32s ease;
}

.earnings-layout {
  display: grid;
  grid-template-columns: minmax(18em, 0.9fr) minmax(22em, 1.1fr);
  gap: 1em;
}

.report-subsection {
  min-width: 0;
}

.report-section-toolbar {
  margin-bottom: 0.8em;
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
}

.report-section-toolbar h2,
.report-section-toolbar p {
  margin: 0;
}

.report-section-toolbar h2 {
  color: #07575b;
  font-size: 1.1em;
}

.report-filter-bar {
  margin: 0 0 0.9em;
  padding: 0.85em;
  display: flex;
  align-items: end;
  gap: 0.8em;
  flex-wrap: wrap;
  border: 1px solid #dfeaea;
  border-radius: 0.45em;
  background: #f9fcfc;
}

.report-filter-bar label {
  display: grid;
  gap: 0.3em;
  color: #577077;
  font-weight: 800;
}

.report-filter-bar input {
  min-width: 15em;
  padding: 0.65em 0.75em;
  border: 1px solid #cfe1e1;
  border-radius: 0.4em;
  color: #1f3338;
  background: #ffffff;
  outline: none;
}

.report-filter-bar input:focus {
  border-color: #07575b;
  box-shadow: 0 0 0 0.18em rgba(7, 87, 91, 0.12);
}

.report-filter-bar button {
  padding: 0.65em 0.9em;
  border: 0;
  border-radius: 0.4em;
  color: #07575b;
  background: #eef7f7;
  cursor: pointer;
  font-weight: 800;
}

.report-filter-bar button:hover {
  color: #ffffff;
  background: #ff7825;
}

.report-table-tools {
  margin: 0 0 0.8em;
  padding: 0.8em;
  display: grid;
  grid-template-columns: minmax(16em, 1fr) minmax(10em, 0.35fr) minmax(10em, 0.35fr);
  gap: 0.8em;
  align-items: end;
  border: 1px solid #dfeaea;
  border-radius: 0.45em;
  background: #f9fcfc;
}

.report-table-tools label {
  min-width: 0;
  display: grid;
  gap: 0.3em;
  color: #577077;
  font-weight: 800;
}

.report-table-tools input,
.report-table-tools select {
  width: 100%;
  min-height: 2.65em;
  padding: 0.65em 0.75em;
  border: 1px solid #cfe1e1;
  border-radius: 0.4em;
  color: #1f3338;
  background: #ffffff;
  outline: none;
}

.report-table-tools input:focus,
.report-table-tools select:focus {
  border-color: #07575b;
  box-shadow: 0 0 0 0.18em rgba(7, 87, 91, 0.12);
}

.report-create-button,
.report-row-actions button {
  border: 0;
  border-radius: 0.45em;
  cursor: pointer;
  font-weight: 800;
}

.report-create-button {
  padding: 0.75em 1.1em;
  color: #ffffff;
  background: #07575b;
  box-shadow: 0 0.6em 1.2em rgba(7, 87, 91, 0.2);
}

.report-create-button:hover {
  background: #ff7825;
}

.report-table-shell {
  max-height: 21em;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 0.5em;
  border: 1px solid #dfeaea;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.report-table-shell.is-drop-target {
  border-color: #ff7825;
  background: #fffaf6;
  box-shadow: 0 0 0 0.2em rgba(255, 120, 37, 0.12);
}

.report-table-shell::-webkit-scrollbar {
  height: 0.65em;
}

.report-table-shell::-webkit-scrollbar-track {
  background: #eef7f7;
}

.report-table-shell::-webkit-scrollbar-thumb {
  border-radius: 99em;
  background: #b7d0d0;
}

.report-table-shell::-webkit-scrollbar-thumb:hover {
  background: #07575b;
}

.report-table {
  width: 100%;
  min-width: 58em;
  border-collapse: separate;
  border-spacing: 0;
}

.report-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.85em 1em;
  text-align: left;
  background: #eef7f7;
  color: #34555c;
  border-bottom: 1px solid rgba(18, 52, 59, 0.12);
}

.report-table td {
  position: relative;
  padding: 0.72em 1em;
  border-bottom: 1px solid rgba(18, 52, 59, 0.08);
}

.report-table tbody tr {
  position: relative;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.report-table tbody tr.is-draggable {
  cursor: grab;
}

.report-table tbody tr.is-dragging,
.report-table tbody tr.is-transferring {
  opacity: 0.48;
}

.report-table tbody tr.is-transferring {
  pointer-events: none;
}

.report-table tbody tr:hover {
  background: #f8fbfb;
  box-shadow: inset 0.25em 0 #ff7825;
}

.report-table-placeholder td,
.report-table-placeholder:hover td {
  height: 7em;
  text-align: center;
  color: #6a7f85;
  background: #fbfdfd;
  border-bottom: 0;
  font-weight: 700;
}

.report-table-placeholder:hover {
  box-shadow: none;
}

.report-table-placeholder.is-hidden {
  display: none;
}

.report-table tbody tr.is-hidden,
.patient-earning-card.is-hidden,
.report-visit-table tbody tr.is-hidden {
  display: none;
}

.report-table input,
.report-table select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #14353c;
  font-size: 0.98em;
}

.report-table select {
  cursor: pointer;
}

.report-table select:disabled {
  color: #14353c;
  cursor: default;
  opacity: 1;
  appearance: none;
}

.report-table input:not([readonly]):not([type="file"]),
.report-table select:not(:disabled) {
  padding: 0.35em 0.45em;
  border-radius: 0.3em;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(7, 87, 91, 0.28);
}

.report-attachment-field {
  min-width: 9.5em;
  display: grid;
  gap: 0.35em;
}

.report-attachment-link {
  color: #07575b;
  font-weight: 800;
  text-decoration: none;
  word-break: break-word;
}

.report-attachment-link:hover {
  color: #ff7825;
}

.report-attachment-empty,
.report-attachment-name {
  color: #6a7f85;
  font-size: 0.84em;
}

.report-table input[type="file"] {
  max-width: 100%;
  font-size: 0.84em;
  color: #577077;
}

.report-table tbody tr:not(.is-editing) input[type="file"] {
  display: none;
}

.report-table input[type="file"]:not(:disabled) {
  padding: 0.25em 0;
}

.report-row-actions {
  position: absolute;
  z-index: 5;
  right: 1em;
  top: 0;
  transform: translateY(-78%) translateX(0.6em);
  display: flex;
  gap: 0.4em;
  padding: 0.35em;
  border-radius: 99em;
  background: #ffffff;
  border: 1px solid #d9e7e7;
  box-shadow: 0 0.8em 1.8em rgba(18, 52, 59, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.report-table tbody tr:hover .report-row-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-78%) translateX(0);
}

.report-row-actions button {
  padding: 0.45em 0.75em;
  color: #07575b;
  background: #eef7f7;
}

.report-row-actions button:hover {
  color: #ffffff;
  background: #ff7825;
}

.patient-earning-list {
  max-height: 21em;
  overflow-y: auto;
  display: grid;
  gap: 0.65em;
}

.patient-earning-card {
  width: 100%;
  border-radius: 0.5em;
  background: #f9fcfc;
  border: 1px solid #e1eeee;
  cursor: pointer;
  text-align: left;
  padding: 0.85em 1em;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.patient-earning-card:hover {
  background: #eef7f7;
  border-color: #8ecbca;
  box-shadow: 0 0.7em 1.4em rgba(7, 87, 91, 0.12);
  transform: translateY(-1px);
}

.patient-earning-primary,
.patient-earning-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.patient-earning-primary span {
  font-weight: 800;
  font-size: 1.05em;
}

.patient-earning-primary strong {
  color: #07575b;
  white-space: nowrap;
}

.patient-earning-meta {
  margin-top: 0.8em;
  color: #577077;
}

.report-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}

.report-chart-card {
  min-width: 0;
  padding: 1em;
  border-radius: 0.5em;
  border: 1px solid #dfeaea;
  background:
    linear-gradient(145deg, rgba(25, 190, 187, 0.08), transparent 12em),
    #ffffff;
}

.report-chart-card-wide {
  grid-column: 1 / -1;
}

.report-chart-header {
  margin-bottom: 0.85em;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1em;
}

.report-chart-header h2,
.report-chart-header p {
  margin: 0;
}

.report-chart-header h2 {
  color: #07575b;
  font-size: 1.05em;
}

.report-chart-header p {
  margin-top: 0.2em;
  color: #577077;
  font-size: 0.92em;
}

.report-chart {
  position: relative;
  min-height: 19em;
  overflow: hidden;
  border-radius: 0.45em;
  background: rgba(249, 252, 252, 0.88);
  border: 1px solid rgba(18, 52, 59, 0.08);
}

.report-chart-stage {
  width: 100%;
  min-height: 19em;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
}

.report-chart-axis-svg {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 320px;
  background: rgba(249, 252, 252, 0.96);
  border-right: 1px solid rgba(18, 52, 59, 0.08);
}

.report-chart-plot-shell {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #8ecbca #eef7f7;
}

.report-chart-plot-shell::-webkit-scrollbar {
  height: 0.55em;
}

.report-chart-plot-shell::-webkit-scrollbar-track {
  background: #eef7f7;
}

.report-chart-plot-shell::-webkit-scrollbar-thumb {
  background: #8ecbca;
  border-radius: 99em;
}

.report-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.report-chart-pie-svg-compact {
  max-width: 31rem;
  margin: 0 auto;
}

.report-chart-plot-svg {
  width: auto;
  height: 320px;
  min-width: 100%;
  max-width: none;
  display: block;
}

.report-chart-grid-line {
  stroke: rgba(18, 52, 59, 0.1);
  stroke-width: 1;
}

.report-chart-axis-line {
  stroke: rgba(18, 52, 59, 0.24);
  stroke-width: 1.4;
}

.report-chart-axis-label,
.report-chart-axis-title,
.report-chart-legend-label {
  fill: #577077;
  font-size: 0.78em;
  font-weight: 700;
}

.report-chart-axis-title {
  fill: #07575b;
  font-size: 0.86em;
}

.report-chart-line-area {
  fill: rgba(25, 190, 187, 0.1);
}

.report-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-chart-point {
  stroke: #ffffff;
  stroke-width: 2.5;
}

.report-chart-bar,
.report-chart-pie-slice {
  filter: drop-shadow(0 0.35em 0.45em rgba(18, 52, 59, 0.14));
}

.report-chart-bar {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.report-chart-bar:hover {
  filter: drop-shadow(0 0.65em 0.7em rgba(18, 52, 59, 0.2));
  transform: scaleY(1.06);
}

.report-chart-pie-slice-group {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.report-chart-pie-slice-group:hover,
.report-chart-pie-slice-group.is-highlighted {
  transform: translate(var(--slice-x), var(--slice-y)) scale(1.04);
}

.report-chart-legend-item {
  cursor: pointer;
}

.report-chart-pie-label {
  fill: #ffffff;
  font-size: 0.9em;
  font-weight: 900;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(18, 52, 59, 0.28);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.report-chart-hover-zone {
  fill: transparent;
  cursor: pointer;
}

.report-chart-tooltip {
  position: absolute;
  z-index: 5;
  max-width: min(22em, calc(100% - 2em));
  padding: 0.7em 0.85em;
  display: grid;
  gap: 0.25em;
  border-radius: 0.45em;
  color: #ffffff;
  background: rgba(18, 52, 59, 0.94);
  box-shadow: 0 0.8em 1.8em rgba(18, 52, 59, 0.18);
  font-size: 0.88em;
  pointer-events: none;
}

.report-chart-tooltip[hidden] {
  display: none;
}

.report-chart-tooltip strong,
.report-chart-tooltip span,
.report-chart-tooltip small {
  display: block;
}

.report-chart-tooltip small {
  max-height: 8em;
  overflow: auto;
  color: #d9f1f0;
  line-height: 1.45;
}

.report-chart-empty {
  width: calc(100% - 2em);
  min-height: 12em;
  display: grid;
  place-items: center;
  border-radius: 0.45em;
  border: 1px dashed rgba(18, 52, 59, 0.22);
  color: #577077;
  font-weight: 800;
  text-align: center;
}

.report-dialog-open {
  overflow: hidden;
}

.report-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  padding: 2em;
  display: grid;
  place-items: center;
  background: rgba(16, 35, 40, 0.42);
}

.report-dialog-backdrop[hidden] {
  display: none;
}

.report-patient-dialog {
  width: min(1100px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 0.6em;
  background: #ffffff;
  box-shadow: 0 1.6em 4em rgba(16, 35, 40, 0.28);
  border: 1px solid #d9e7e7;
  padding: 1em;
}

.report-dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.2em 0.2em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  background: #ffffff;
  border-bottom: 1px solid #d9e7e7;
}

.report-dialog-header span {
  color: #577077;
  font-weight: 700;
}

.report-dialog-header h2 {
  margin: 0.15em 0 0;
  color: #07575b;
  font-size: 1.7em;
}

.report-dialog-close {
  width: 2.5em;
  height: 2.5em;
  border: 0;
  border-radius: 50%;
  color: #07575b;
  background: #eef7f7;
  cursor: pointer;
  font-weight: 900;
}

.report-dialog-close:hover {
  color: #ffffff;
  background: #ff7825;
}

.report-patient-details-section,
.report-visit-section {
  margin: 1.2em 0 0;
}

.report-patient-details-section h3,
.report-visit-section h3 {
  margin: 0 0 0.7em;
  color: #07575b;
}

.report-patient-details-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8em;
}

.report-patient-details-section dl div {
  padding: 0.85em;
  border: 1px solid #e1eeee;
  border-radius: 0.45em;
  background: #f9fcfc;
}

.report-patient-details-section dt {
  color: #577077;
  font-weight: 800;
}

.report-patient-details-section dd {
  margin: 0.35em 0 0;
  color: #1f3338;
}

.report-visit-section .table-scroll-container {
  max-height: 22em;
  overflow: auto;
  padding: 0.45em;
  border: 1px solid #d9e7e7;
  border-radius: 0.45em;
}

.report-visit-table,
.report-visit-table th,
.report-visit-table td {
  border-color: #d9e7e7 !important;
}

.report-visit-table th {
  background: #eef7f7;
  color: #34555c;
}

.report-visit-table td {
  color: #1f3338;
}

.report-visit-table th,
.report-visit-table td {
  padding: 0.7em 0.85em;
  line-height: 1.45;
  vertical-align: top;
}

.report-visit-total {
  margin-top: 0.9em;
  padding: 0.9em 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  border-radius: 0.45em;
  background: #eef7f7;
  color: #07575b;
  font-weight: 800;
}

.report-visit-total strong {
  font-size: 1.15em;
}

.report-empty-state {
  min-height: 8em;
  display: grid;
  place-items: center;
  border-radius: 0.5em;
  color: #577077;
  background: #f9fcfc;
  border: 1px dashed rgba(18, 52, 59, 0.22);
}

.report-empty-state.is-hidden {
  display: none;
}

@media (max-width: 800px) {
  .report-page {
    padding: 4.5em 0.8em 1em;
  }

  .report-hero,
  .earnings-layout,
  .report-chart-grid,
  .report-summary-grid {
    grid-template-columns: 1fr;
  }

  .report-chart-card-wide {
    grid-column: auto;
  }

  .report-chart {
    min-height: 16em;
  }

  .report-section-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-filter-bar,
  .report-filter-bar label,
  .report-filter-bar input,
  .report-filter-bar button,
  .report-table-tools,
  .report-table-tools label,
  .report-table-tools input,
  .report-table-tools select {
    width: 100%;
  }

  .report-table-tools {
    grid-template-columns: 1fr;
  }

  .report-patient-details-section dl {
    grid-template-columns: 1fr;
  }

  .report-dialog-backdrop {
    padding: 0.8em;
  }

  .report-create-button {
    width: 100%;
  }
}
/* Styles for RTF container and related components */

/* .rtf-container */
div.rtf-container .link-container-div div:not(:has(button)) {
  display: grid;
  grid-template-rows: [row] 45% [row] 45%;
  grid-gap: 0.5em;
  height: 80%;
}

div.rtf-container .link-container-div div:not(:has(button)) fieldset {
  border: none;
  text-align: left;
  height: 100%;
  font-size: 0.5em;
  color: var(--universal-blue);
}

div.rtf-container .link-container-div div:not(:has(button)) fieldset input {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  padding: 0.2em;
  color: #4e4e4e;
  font-size: 1.5em;
}

div.rtf-container .link-container-div div:has(button) {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.rtf-container .link-container-div div:has(button)>button,
&>input {
  height: 80%;
  width: 20%;
  border-radius: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  background: none;
  border: none;
  cursor: pointer;
}

div.rtf-container .link-container-div div:has(button)>button,
&>input:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container .link-container-div {
  position: relative;
  display: none;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  width: 15em;
  height: 6.5em;
  padding: 0.2em;
  z-index: 10000;
  -o-transition: .6s ease opacity, .6s ease transform;
  -moz-transition: .6s ease opacity, .6s ease transform;
  -webkit-transition: .6s ease opacity, .6s ease transform;
  transition: .6s ease opacity, .6s ease transform;
}

div.rtf-container .formatter-option-divider {
  position: relative;
  height: 70%;
  border-left: 1px solid lightgrey;
}

div.rtf-container div:has(> .font-size) .font-size {
  height: 100%;
  width: 100%;
  display: flex;
  border-radius: 0.2em;
  cursor: pointer;
}

div.rtf-container div:has(> .font-size) .font-size:not([disabled]):hover {
  background-color: lightgrey;
}

div.rtf-container div:has(> .font-size) .font-size[disabled] {
  cursor: default;
}

div.rtf-container div:has(> .font-size) #font-size-input {
  outline: none;
  width: 100%;
  font-size: 0.7em;
  -moz-appearance: textfield;
  appearance: textfield;
}

div.rtf-container div:has(> .font-size) #font-size-input::-webkit-inner-spin-button,
div.rtf-container div:has(> .font-size) #font-size-input::-webkit-outer-spin-button {
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

div.rtf-container div:has(> .font-size) {
  display: grid;
  grid-template-columns: [col] 20% [col] 60% [col] 20%;
  grid-gap: 5%;
  width: 10%;
  min-width: 3.5em;
  padding-left: 0.2em;
  padding-right: 0.5em;
  align-items: center;
}

div.rtf-container div:has(> .text-decoration) .text-decoration,
div.rtf-container div:has(> .text-decoration)>div>.text-decoration {
  border-radius: 0.2em;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-self: center;
}

div.rtf-container div:has(> .text-decoration) .text-decoration:not([disabled]).active,
&:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) .text-decoration[disabled] {
  cursor: default;
}

div.rtf-container div:has(> .text-decoration) .bold {
  font-weight: bold;
}

div.rtf-container div:has(> .text-decoration) .italics {
  font-style: italic;
}

div.rtf-container div:has(> .text-decoration) .underline {
  text-decoration: underline;
}

div.rtf-container div:has(> .text-decoration) .line-through {
  text-decoration: line-through;
}

div.rtf-container div:has(> .text-decoration) .text-color {
  --background-color: var(--skipped);
}

div.rtf-container div:has(> .text-decoration) .text-color::after {
  content: '';
  position: relative;
  display: block;
  width: 70%;
  height: 3px;
  background-color: var(--background-color);
}

div:has(div.rtf-container div:has(> .text-decoration) .text-color).active {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) .background-color {
  background-image: url(/fill.svg);
  background-position: center;
  background-repeat: no-repeat;
  --background-color: var(--skipped);
}

div.rtf-container div:has(> .text-decoration) .background-color::after {
  content: '';
  position: relative;
  display: flex;
  width: 80%;
  height: 3px;
  background-color: var(--background-color);
  top: 30%;
  left: 10%;
}

div:has(div.rtf-container div:has(> .text-decoration) .background-color).active {
  background-color: lightgray;
}

div.rtf-container div:has(> .text-decoration) {
  display: grid;
  grid-template-columns: [col] 15% [col] 15% [col] 15% [col] 15% [col] 15% [col] 15%;
  width: 20%;
  max-height: 1.7em;
  grid-gap: 1%;
  align-items: center;
  justify-content: center;
}

div.rtf-container div:has(> .attachment) .attachment[disabled] {
  cursor: default;
}

div.rtf-container div:has(> .attachment) .attachment:not([disabled]).active,
div.rtf-container div:has(> .attachment) .attachment:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:has(> .attachment) .attachment.link {
  background-image: url(/link.svg);
}

div.rtf-container div:has(> .attachment) .attachment.comment {
  background-image: url(/comment.svg);
}

div.rtf-container div:has(> .attachment) .attachment.file {
  background-image: url(/attachment.svg);
}

div.rtf-container div:has(> .attachment) .attachment.table {
  background-image: url(/table.svg);
}

div.rtf-container div:has(> .attachment) .attachment.code {
  background-image: url(/code.svg);
}

div.rtf-container div:has(> .attachment) .attachment {
  height: 100%;
  width: 100%;
  border-radius: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
}

div.rtf-container div:has(> .attachment) {
  display: grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  width: 15%;
  align-items: center;
  justify-content: center;
  height: 100%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>.text-alignment-container:not([disabled]):hover,
&.active {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>.text-alignment-container .alignment {
  height: 100%;
  width: 80%;
  padding: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(/text-alignment-left.svg);
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>.text-alignment-container .alignment+div {
  background-image: url(/arrow-down.svg);
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 20%
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>.text-alignment-container {
  border-radius: 0.2em;
  display: flex;
  width: 100%;
  padding: 0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container {
  border-radius: 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container:not([disabled]):hover,
&.active {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container .checkbox {
  cursor: pointer;
  height: 100%;
  width: 80%;
  padding: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .checkbox-container .checkbox:hover {
  border-color: rgba(118, 118, 118, 0.8);
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .bullets) {
  border-radius: 0.2em;
  display: flex;
  width: 100%;
  padding: 0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .bullets):not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .bullets) .bullets {
  background-image: url(/bullets.svg);
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .ordered-list) {
  border-radius: 0.2em;
  display: flex;
  width: 100%;
  padding: 0.2em;
  cursor: pointer;
  height: 80%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .ordered-list):not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container)>div:has(> .ordered-list) .ordered-list {
  background-image: url(/ordered-list.svg);
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list>div>input[type="radio"]:checked+button {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list>div>button {
  height: 100%;
  width: 80%;
  padding: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list>div>button:not([disabled]):hover {
  background-color: lightgray;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list>div {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  justify-content: center;
  align-items: center;
  font-size: 0.7em;
  padding: 0.2em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .text-styling-list {
  position: absolute;
  top: 100%;
  left: 0px;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  width: 7em;
  height: 2em;
  z-index: 10000;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul input[type="radio"]:checked+li div {
  background-image: url(/tick.svg);
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li div {
  background-position: center;
  background-repeat: no-repeat;
  width: 10%;
  height: inherit;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li span {
  width: 80%;
  height: 100%;
  margin-left: 5%;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li:not([disabled]):hover {
  background-color: lightgrey;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul li {
  padding: 0.2em;
  width: 100%;
  display: flex;
  cursor: pointer;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options ul {
  height: 100%;
  width: 100%;
  font-size: 0.8em;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0.5em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) .spacing-options {
  display: none;
  position: absolute;
  top: 100%;
  left: -100%;
  background-color: #fff;
  border-radius: 0.2em;
  border: 1px solid lightgrey;
  min-width: 10em;
  height: 10em;
}

div.rtf-container div:not([class]):has(> .text-alignment-container) {
  display: grid;
  grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
  width: 15%;
  align-items: center;
  height: 100%;
  position: relative;
  padding-left: 0.2em;
  padding-right: 0.2em;
  grid-gap: 1%;
}

div.rtf-container {
  height: auto;
  max-height: 22em;
  width: 100%;
  border: 1px solid lightgrey;
  padding: 0.5em;
  border-radius: 0.2em;
  display: flex;
  flex-direction: column;
}

div.rtf-container>footer>div>div:not(last-child):not([disabled]):hover {
  background-color: #929292b6;
}

div.rtf-container>footer>div>div:not(last-child) span:not([type=filename]) {
  width: auto;
  height: 80%;
  background-color: var(--universal-blue);
  font-weight: bold;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  border-radius: 0.2em;
  padding: 0.1em;
  font-size: 0.5em;
}

div.rtf-container>footer>div>div:not(last-child) span[type=filename] {
  color: #0d2a57;
  font-size: 0.6em;
  margin-left: 0.5em;
}

div.rtf-container>footer>div>div:not(last-child).active {
  border: 0.5px solid var(--universal-blue);
}

div.rtf-container>footer>div>div:not(last-child):not(:first-child) {
  margin-left: 1em;
}

div.rtf-container>footer>div>div:not(last-child) {
  width: fit-content;
  min-width: 10em;
  height: 1.5em;
  background: #fff;
  border: 0.5px solid rgba(228, 228, 228, 0.7);
  box-shadow: 3px 3px 0 0 rgba(228, 228, 228, 0.7);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0.2em;
  background-color: #92929250;
  cursor: pointer;
}

div.rtf-container>footer>div {
  max-width: 100%;
  height: auto;
  display: grid;
  grid-auto-flow: column;
  overflow-y: auto;
  padding: 0.5em;
  width: fit-content;
}

div.rtf-container>footer #attachment-menu button {
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  padding: 0.2em;
}

div.rtf-container>footer #attachment-menu button:hover {
  background-color: lightgrey;
}

div.rtf-container>footer #attachment-menu {
  display: none;
  grid-template-columns: [col] 47.5% [col] 47.5%;
  position: relative;
  padding: 0.2em;
  width: 5em;
  height: 1.5em;
  z-index: 100000;
  border: 1px solid lightgrey;
  background-color: white;
  grid-gap: 5%;
}

div.rtf-container>footer {
  background-color: transparent;
  max-height: 3em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] {
  min-height: 15em;
  height: 80%;
  outline: none;
  border-top: 1px solid lightgrey;
  padding: 0.2em;
  font-size: 80%;
  color: var(--skipped);
  overflow: auto;
  text-align: left;
  font-family: Arial, sans-serif;
  flex-grow: 1;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table td[rowspan]>div:nth-child(1) div:nth-child(2),
& td>div:nth-child(1):has(> div:nth-child(1) > br) div:nth-child(2) {
  align-items: start;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table div[contentEditable="true"] {
  outline: none;
  overflow: hidden;
  border: none;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th,
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td {
  word-wrap: break-word;
  max-width: 100%;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table {
  table-layout: fixed;
  position: relative;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed,
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  background: rgba(228, 228, 228, 0.6);
  position: sticky;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed,
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  background: rgba(228, 228, 228, 0.6);
  position: sticky;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th.fixed {
  top: 0;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table td.fixed {
  left: 0;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th>div:nth-child(1) div:nth-child(2),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td>div:nth-child(1) div:nth-child(2) {
  display: none;
  cursor: pointer;
  position: relative;
  height: auto;
  width: 0.5em;
  border-color: transparent;
  border-style: solid;
  border-width: .31em 0 .31em .5em;
  border-top-color: transparent;
  border-left-color: #808080;
  right: 0.2em;
  margin-left: 0.2em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th>div:nth-child(1),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td>div:nth-child(1) {
  min-width: 3em;
  height: 100%;
  display: flex;
  align-items: center;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th>div:nth-child(1) div:nth-child(1),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td>div:nth-child(1) div:nth-child(1) {
  flex-grow: 1;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table th>div:nth-child(1):hover div:nth-child(2),
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td>div:nth-child(1):hover div:nth-child(2) {
  display: block;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] span::selection {
  color: var(--selection-color);
  background: #ADD8E6;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] span {
  --selection-color: #fff;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] table,
div.rtf-container div[contentEditable="true"][type="rtf-div"] table th,
div.rtf-container div[contentEditable="true"][type="rtf-div"] table td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  max-width: 100%;
  font-size: 1em;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"]::selection {
  background: #ADD8E6;
}

div.rtf-container div[contentEditable="true"][type="rtf-div"] ul,
div.rtf-container div[contentEditable="true"][type="rtf-div"] ol {
  margin-left: 5em;
}

.editable-code.active {
  border: 1px solid #388bff;
}

.editable-code label {
  width: 100%;
  height: 1.5em;
  text-align: center;
  font-size: 0.7em;
  padding: 0.2em;
  background: linear-gradient(to bottom, #ffffff, lightgrey);
  color: black;
}

.editable-code code {
  display: flex;
  font-size: 1em;
  position: relative;
  margin-left: 3.5em;
}

.editable-code code:before {
  counter-increment: line;
  content: counter(line) ". ";
  display: inline-block;
  padding-left: 0.2em;
  width: 3em;
  min-width: 3em;
  background-color: #d4d4d4;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3.5em;
  text-align: center;
}

.editable-code code * {
  font-family: monospace;
}

div:has(> .editable-code) {
  max-width: 90%;
  min-width: 90%;
  margin: auto;
  overflow: auto;
}

.editable-code {
  counter-reset: line;
  width: 100%;
  height: 100%;
  border: 0.5px solid #9898989d;
  background-color: #f5f5f563;
  white-space: pre-wrap;
  /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  padding-right: 0.2em;
  outline: none;
}

.no-border {
  width: 100%;
  border: none;
  outline: none;
}

.round-buttons {
  border-radius: 50%;
  box-shadow: rgba(255, 255, 255, .4) 1px 1px 1px 1px inset;
  flex-grow: 1;
}

/* .formatter-option, .shadow, .formatter-option-divider */
.formatter-option {
  width: 100%;
  height: 1.7em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shadow {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

#font-size-input {
  min-width: 0;
  max-width: 200px;
  width: auto;
  /* Disabled and novalidate are attributes, not styles */
}

/* .comment-box */
.comment-box label {
  text-align: center;
  color: var(--universal-blue);
  height: 100%;
  width: 90%;
  border-bottom: 1px solid lightgrey;
  font-size: 0.7em;
  left: 5%;
  position: relative;
}

/* .menu-show, .remove-style-div, .remove-style-buttons */
.menu-show {
  z-index: 100000;
  position: absolute;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns: [col] 100%;
  grid-template-rows: auto;
  border-radius: 5px;
  width: 10em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.remove-style-div button.remove-style-buttons {
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
}

.remove-style-div button.remove-style-buttons:not([disabled]):hover {
  background-color: lightgray;
}

.remove-style-div button.remove-style-buttons[disabled] {
  cursor: default;
}

.remove-style-div {
  z-index: 100000;
  position: relative;
  background-color: white;
  border: 1px solid lightgrey;
  padding: 2px;
  margin: 0;
  list-style-type: none;
  list-style: none;
  display: grid;
  grid-template-columns: [col] 30% [col] 30% [col] 30%;
  grid-gap: 5%;
  border-radius: 5px;
  width: 5em;
  height: 2em;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.menu-hide {
  display: none;
  z-index: 100000;
}

div.arrow-right {
  display: none;
  position: absolute;
  border-color: transparent;
  border-style: solid;
  border-width: .5em .31em 0;
  width: 0;
  height: 0;
  border-width: .31em 0 .31em .5em;
  border-top-color: transparent;
  border-left-color: #808;
  right: 5px;
  rotate: 45deg;
}

/* .table-menu-list */
.table-menu-list {
  font-size: 0.8em;
  text-align: justify;
  padding: 0.5em;
  cursor: pointer;
}

.table-menu-list:hover {
  background-color: #0000005e;
}

.table-menu-list[disabled] {
  cursor: not-allowed;
  color: lightgrey;
}


/* Inline styles for SVG icons and buttons */
#reduce-font-size svg,
#increase-font-size svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.text-styling-list button[style] {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Inline styles for color input */
input[type="color"] {
  height: 0px;
  width: 0px;
  inline-size: 0px;
  block-size: 0px;
  border-width: 0px;
  padding: 0px;
}

/* Inline styles for hidden file input */
div.rtf-container input[type="file"] {
  display: none;
}


/* Inline styles for form buttons */
.link-container-div input[type="button"],
.comment-container-div input[type="button"] {
  width: auto;
}

/* Inline styles for form divs */
.comment-container-div>div {
  width: 20%;
}

.link-container-div>div {
  width: 100%;
}

/* Add any additional referenced styles as needed */
select[name="select-font-family"],
select[name="code-type"] {
  outline: none;
  border: none;
  padding: 0.1em;
  cursor: pointer;
  font-size: 0.8em;
  text-align: center;
  background-color: transparent;

  &:active {
    background-color: lightgrey;
  }

  & option {
    border-radius: 0.2em;
  }

  &.active {
    border: 0.5px solid var(--universal-blue);
    border-radius: 0.2em;
  }
}

select[name="select-font-family"] {
  margin-bottom: 0;
  width: max-content;
}
.shared-app-rail {
  width: 3rem;
  flex: 0 0 3rem;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 3rem repeat(5, 2rem);
  row-gap: 0.5rem;
  color: #19bebb;
  background: var(--mail-appearance-rail, #d5e4ef);
  z-index: 20;
}

.shared-app-rail.without-home {
  grid-template-rows: repeat(5, 2rem);
}

.shared-app-rail > .shared-app-rail-item {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0.45rem;
}

.shared-app-rail > .shared-app-home {
  padding: 0.55rem;
  color: #324350;
  background: #ffdc4a;
}

.shared-app-rail > .shared-app-rail-item:nth-child(2),
.shared-app-rail > .shared-app-rail-item:nth-child(3) {
  padding: 0.65rem;
}

.shared-app-rail > .shared-app-rail-item.active {
  box-shadow: inset 3px 0 #19bebb;
}

.shared-app-rail > .shared-app-rail-item:not(.shared-app-home) .shared-app-rail-link {
  color: #19bebb;
}

.shared-app-rail.without-home > .shared-app-mail,
.shared-app-rail.without-home > .shared-app-calendar {
  padding: 0.65rem;
}

.shared-app-rail-link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: default;
  text-decoration: none;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

a.shared-app-rail-link {
  cursor: pointer;
}

.shared-app-rail-link:hover {
  filter: brightness(0.9);
  opacity: 0.82;
}

.shared-app-rail-link svg {
  width: 100%;
  max-height: 100%;
  fill: currentColor;
}

.mail-appearance-monochrome-icons .shared-app-rail-link svg {
  filter: grayscale(1) saturate(0);
  opacity: 0.75;
}

.mail-appearance-show-app-names .shared-app-rail {
  width: 8.75em;
  flex-basis: 8.75em;
}

.mail-appearance-show-app-names .shared-app-rail-link {
  justify-content: flex-start;
  gap: 0.55em;
}

.mail-appearance-show-app-names .shared-app-rail-link::after {
  content: attr(title);
  font-size: 0.86em;
  font-weight: 500;
  white-space: nowrap;
}

.mail-appearance-show-app-names .shared-app-rail-link svg {
  width: 1.5em;
}

@media (max-width: 620px) {
  .shared-app-rail {
    width: 2.65rem;
    flex-basis: 2.65rem;
  }
}
.profile-container {
    display: grid;
    grid-template-columns: [col] 30% [col] 70%;
    grid-template-rows: [row] 100%;
}

.form-control:focus {
    box-shadow: none;
    border-color: #BA68C8
}

.back:hover {
    color: #682773;
    cursor: pointer
}

.labels {
    font-size: 11px
}

.add-experience:hover {
    background: #BA68C8;
    color: #fff;
    cursor: pointer;
    border: solid 1px #BA68C8
}

.picture-div span {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 20vh;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.picture-div {
    width: 30vh;
    height: 30vh;
    background-repeat: no-repeat;
    background-position: center;
    border: 0.5px solid grey;
    border-radius: 3vh;
    background-size: 100% 100%;
    cursor: pointer;
}

.picture-div img {
    width: 100%;
    height: 100%;
    border-radius: 3vh;
}

.p-3 {
    padding: 1rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.d-flex {
    display: flex !important;
}

.text-right {
    text-align: right !important;
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

.mt-2 {
    margin-top: .5rem !important;
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

@media (max-width: 480px) {
    .profile-container {
        display: block;
    }

    .profile-container > div:nth-child(1) {
        width: 25vh;
        height: 25vh;
        justify-self: center;
        position: relative;
    }

    .profile-container .col-md-5 {
        width: 100%;
    }

    a.back-button:nth-child(1){
        display:none;
    }

    a.back-button:nth-child(2){
        display:block;
    }

    .picture-div {
        height: 25vh;
        width: 25vh;
    }

    .picture-div span {
        font-size: 15vh;
    }
}

.col-md-5 {
    flex: 0 0 auto;
    width: 41.666667%;
}

.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-md-12 {
    flex: 0 0 auto;
    width: 100%;
    position: relative;
}

.col-md-12:not(:first-child){
    margin-top: 1em;
}

.labels {
    font-size: 11px;
    display: inline-block;
    margin-bottom: 0.5em;
}

.form-control {
    display: block;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.profile-button {
    background: rgb(99, 39, 120);
    box-shadow: none;
    border: none;
    cursor: pointer;
}


.profile-button:hover {
    background: #682773
}

.profile-button:focus {
    background: #682773;
    box-shadow: none
}

.profile-button:active {
    background: #682773;
    box-shadow: none
}

.dpdn-mnu {
    position: absolute;
    background-color: #fff;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    display: block;
    max-height: 0em;
    overflow-y: auto;
    z-index: 9;
    padding: 0;
    width: calc(100% - var(--bs-gutter-x));
    transition: max-height 0.3s;
}

.dpdn-mnu.active {
    max-height: 10em;
}
.dpdn-mnu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 

.dpdn-mnu li:hover {
    background-color: #f2f2f2
}
.dpdn-mnu li:active {
    background-color: #e2e2e2
}

.back-button {
    display: flex;
    font-size: 3vh;
}

.back-button:nth-child(2){
    display:none;
}

.back-button:hover {
    text-decoration: underline;
}

.back-button::before {
    content: '';
    background-image:url(/back-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    height: 3vh;
    width: 3vh;
    background-color: transparent;
    cursor: pointer;
    float: left;
    align-self: center;
    margin-right:0.5em;
}

.dpdn:has(li.visible) li:not([class=visible]){
    display:none;
}

.dropdown[disabled] {
    cursor: not-allowed;
}

.loader-anim-div {
    background-image:url(/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-color: rgba(255,255,255,0.8);
    z-index: 100000;
}
  
.message-translucent {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-color: rgba(255,255,255,0.8);
    z-index: 100000;
    display:flex;
    justify-content:center;
    align-items:center;
  
    & span {
      font-weight: bold;
      letter-spacing: 0.1em;
      opacity: 1;
      -webkit-animation: fadeInFromNone 2s ease-out, fadeOutFromIn 1s eas;
      -moz-animation: fadeInFromNone 2s ease-out;
      -o-animation: fadeInFromNone 2s ease-out;
      animation: fadeInFromNone 2s ease-out;
    }
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}
  
@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
  
    1% {
        display: block;
        opacity: 0;
    }
  
    100% {
        display: block;
        opacity: 1;
    }
}

layer {
    position:absolute;
    height:100%;
    width:0;
    top:0;
    left:0;
    z-index:10;
    border-radius:3vh;
    background: rgba(0,0,0,0.15);
    box-shadow: 0 3px 5px 0 rgba(31,38,135,0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.18);
    background-size: 2em;
    background-position: center;
    background-repeat: no-repeat;
    cursor:pointer;
    transition: all 0.3s;
    opacity: 0;
}

.picture-div:has(span) layer {
    background-image: url(/add-white.svg);
}

.picture-div:not(:has(span)) layer {
    background-image: url(/delete-white.svg);
}

layer.active {
    width: 100%;
    opacity:1;
}

layer > button {
    right: 0.2em;
    position: absolute;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: ease filter, transform 0.3s;
}
.staff-page {
  min-height: calc(100vh - 1rem);
  padding: 2.5rem clamp(1rem, 3vw, 2.5rem);
  color: #1d3438;
  background:
    linear-gradient(135deg, rgba(38, 166, 154, 0.1), transparent 24rem),
    linear-gradient(180deg, #f6fbfa 0%, #edf5f4 100%);
}

.staff-back-button {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 20;
  min-width: 5.8rem;
  height: 2.8rem;
  padding: 0 1rem 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 99rem;
  background: #ffffff;
  box-shadow: 0 0.6rem 1.3rem rgba(17, 35, 42, 0.12);
  border: 1px solid #d9e8e6;
  color: #07575b;
  font-weight: 800;
  text-decoration: none;
}

.staff-back-button::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border-left: 0.18rem solid #12343b;
  border-bottom: 0.18rem solid #12343b;
  transform: translateY(-50%) rotate(45deg);
}

.staff-back-button:hover {
  color: #ffffff;
  background: #07575b;
}

.staff-back-button:hover::before {
  border-color: #ffffff;
}

.staff-hero,
.staff-filter-bar,
.staff-table-panel {
  max-width: 1320px;
  margin: 0 auto 1rem;
}

.staff-hero {
  min-height: 9rem;
  padding: 1.2rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid #d9e8e6;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(18, 52, 59, 0.08);
}

.staff-kicker {
  display: inline-flex;
  padding: 0.34rem 0.65rem;
  border-radius: 99rem;
  background: #e6f5f3;
  color: #0a686b;
  font-weight: 800;
}

.staff-hero h1 {
  margin: 0.35rem 0 0;
  color: #07575b;
  font-family: "Winky Sans", Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.staff-primary-action,
.staff-secondary-action,
.staff-danger-action,
.staff-filter-bar button,
.staff-password-reveal,
.staff-password-row button {
  border: 0;
  border-radius: 0.45rem;
  cursor: pointer;
  font-weight: 800;
}

.staff-primary-action {
  padding: 0.85rem 1.2rem;
  color: #ffffff;
  background: #07575b;
  box-shadow: 0 0.65rem 1.1rem rgba(7, 87, 91, 0.18);
}

.staff-primary-action:hover {
  background: #ff7825;
}

.staff-secondary-action,
.staff-filter-bar button,
.staff-password-reveal,
.staff-password-row button {
  padding: 0.72rem 0.95rem;
  color: #07575b;
  background: #e9f5f4;
}

.staff-danger-action {
  padding: 0.72rem 0.95rem;
  color: #ffffff;
  background: #b3261e;
  box-shadow: 0 0.65rem 1.1rem rgba(179, 38, 30, 0.18);
}

.staff-danger-action:hover {
  background: #8a1f11;
}

.staff-filter-bar {
  padding: 0.85rem;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.45fr) minmax(12rem, 0.45fr) auto;
  gap: 0.8rem;
  align-items: end;
  border: 1px solid #d9e8e6;
  border-radius: 0.5rem;
  background: #ffffff;
}

.staff-filter-bar label,
.staff-form-grid label,
.staff-picture-field label {
  display: grid;
  gap: 0.35rem;
  color: #49686e;
  font-weight: 800;
}

.staff-filter-bar input,
.staff-filter-bar select,
.staff-form-grid input,
.staff-form-grid select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.66rem 0.75rem;
  border: 1px solid #cfe2e0;
  border-radius: 0.42rem;
  color: #1d3438;
  background: #ffffff;
  outline: none;
  font-size: 1rem;
}

.staff-filter-bar input:focus,
.staff-filter-bar select:focus,
.staff-form-grid input:focus,
.staff-form-grid select:focus {
  border-color: #07575b;
  box-shadow: 0 0 0 0.18rem rgba(7, 87, 91, 0.12);
}

.staff-form-grid input:disabled,
.staff-form-grid select:disabled,
.staff-form-grid input[readonly] {
  cursor: not-allowed;
}

.staff-table-panel {
  border: 1px solid #d9e8e6;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(18, 52, 59, 0.07);
}

.staff-table-shell {
  overflow: auto;
  border-radius: 0.5rem;
}

.staff-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: separate;
  border-spacing: 0;
}

.staff-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.9rem 1rem;
  color: #315a60;
  text-align: left;
  background: #eef7f6;
  border-bottom: 1px solid rgba(18, 52, 59, 0.12);
}

.staff-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(18, 52, 59, 0.08);
  vertical-align: middle;
}

.staff-table tbody tr {
  position: relative;
}

.staff-table tbody tr:hover,
.staff-table tbody tr:focus-within {
  z-index: 3;
}

.staff-table tbody td:last-child {
  position: relative;
  min-width: 8rem;
}

.staff-row-actions {
  position: absolute;
  top: calc(100% - 0.2rem);
  right: 1rem;
  z-index: 6;
  display: flex;
  gap: 0.35rem;
  padding: 0.22rem;
  border: 1px solid #d9e8e6;
  border-radius: 99rem;
  background: #f7fbfa;
  box-shadow: 0 0.45rem 1rem rgba(18, 52, 59, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.3rem);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  visibility: hidden;
  white-space: nowrap;
}

.staff-table tr:hover .staff-row-actions,
.staff-table tr:focus-within .staff-row-actions,
.staff-row-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.staff-row-action {
  min-width: 3.25rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 99rem;
  color: #07575b;
  background: #e6f5f3;
  cursor: pointer;
  font-weight: 800;
}

.staff-row-action:hover,
.staff-row-action:focus-visible {
  color: #ffffff;
  background: #07575b;
}

.staff-row-action-danger {
  color: #8a1f11;
  background: #fff0ec;
}

.staff-row-action-danger:hover,
.staff-row-action-danger:focus-visible {
  color: #ffffff;
  background: #b3261e;
}

.staff-table tr.is-hidden {
  display: none;
}

.staff-user-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.staff-avatar,
.staff-picture-preview {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #07575b center / cover no-repeat;
  font-weight: 900;
}

.staff-avatar {
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
}

.staff-user-cell strong,
.staff-user-cell small,
.staff-table td small {
  display: block;
}

.staff-user-cell strong {
  color: #12343b;
}

.staff-user-cell small,
.staff-table td small {
  margin-top: 0.2rem;
  color: #617a80;
}

.staff-pill {
  display: inline-flex;
  padding: 0.32rem 0.55rem;
  border-radius: 99rem;
  color: #07575b;
  background: #e6f5f3;
  font-weight: 800;
  white-space: nowrap;
}

.staff-empty-state {
  min-height: 8rem;
  display: grid;
  place-items: center;
  color: #617a80;
  font-weight: 800;
}

.staff-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8000;
  padding: 1rem;
  display: grid;
  place-items: center;
  background: rgba(15, 34, 38, 0.46);
}

.staff-dialog-backdrop[hidden] {
  display: none;
}

.staff-confirm-backdrop[hidden] {
  display: none;
}

.staff-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8200;
  padding: 1rem;
  display: grid;
  place-items: center;
  background: rgba(15, 34, 38, 0.46);
}

.staff-confirm-dialog {
  width: min(420px, 94vw);
  padding: 1.2rem;
  display: grid;
  gap: 1.1rem;
  border: 1px solid #d9e8e6;
  border-radius: 0.5rem;
  color: #1d3438;
  background: #ffffff;
  box-shadow: 0 1.4rem 4rem rgba(15, 34, 38, 0.26);
}

.staff-confirm-dialog span {
  color: #8a1f11;
  font-weight: 900;
}

.staff-confirm-dialog h2 {
  margin: 0.2rem 0 0;
  color: #12343b;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.staff-confirm-dialog p {
  margin: 0.55rem 0 0;
  color: #49686e;
  line-height: 1.45;
}

.staff-confirm-dialog footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.staff-dialog {
  width: min(980px, 96vw);
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #d9e8e6;
  box-shadow: 0 1.4rem 4rem rgba(15, 34, 38, 0.26);
}

.staff-dialog form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.staff-dialog header,
.staff-dialog footer {
  flex: 0 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #d9e8e6;
}

.staff-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #d9e8e6;
  border-bottom: 0;
}

.staff-dialog header span {
  color: #617a80;
  font-weight: 800;
}

.staff-dialog h2 {
  margin: 0.1rem 0 0;
  color: #07575b;
}

.staff-dialog header button {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  color: #07575b;
  background: #e9f5f4;
  cursor: pointer;
  font-weight: 900;
}

.staff-form-grid {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  overflow-y: auto;
}

.staff-picture-field {
  grid-row: span 3;
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.staff-picture-preview {
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  font-size: 1.8rem;
}

.staff-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.staff-password-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.staff-password-input-wrap input {
  padding-right: 4.6rem;
}

.staff-password-row .staff-password-reveal {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 2.25rem;
  min-height: 2rem;
  padding: 0.3rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: transparent;
  box-shadow: none;
}

.staff-password-reveal svg {
  width: 1.35rem;
  height: 1.35rem;
}

.staff-password-row .staff-password-reveal:hover,
.staff-password-row .staff-password-reveal:focus-visible {
  background: transparent;
  outline: none;
}

.staff-form-message {
  margin: 0 1rem 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.45rem;
  color: #8a1f11;
  background: #fff0ec;
  font-weight: 800;
}

.staff-toast {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 9000;
  padding: 0.85rem 1rem;
  border-radius: 0.45rem;
  color: #ffffff;
  background: #07575b;
  box-shadow: 0 0.8rem 1.8rem rgba(18, 52, 59, 0.18);
  font-weight: 800;
}

.staff-toast[hidden] {
  display: none;
}

@media (max-width: 800px) {
  .staff-page {
    padding: 4.5rem 0.8rem 1rem;
  }

  .staff-hero,
  .staff-filter-bar,
  .staff-form-grid,
  .staff-password-row {
    grid-template-columns: 1fr;
  }

  .staff-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-primary-action,
  .staff-secondary-action,
  .staff-danger-action,
  .staff-filter-bar button,
  .staff-password-row button {
    width: 100%;
  }

  .staff-password-reveal {
    width: auto;
  }

  .staff-picture-field {
    grid-row: auto;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.google-visualization-tooltip {
  pointer-events: none;
}

html,
body,
#content {
  min-height: 100% !important;
  height: 100%;
}

#content {
  transition: margin-left 0.5s;
  padding: 0.5em;
  overflow-y: auto;
}

* {
  scroll-behavior: smooth;
  font-family: Arial, sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --grey: #808080;
  --universal-blue: #3366cc;
  --white: #ffffff;
  --light-grey: #edf0f1;
  --violet: #655be1;
  --dark-violet: #5146e1;
  --black: black;
}

.no-user-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  align-items: center;
  justify-content: center;
}

.popup:target {
  opacity: 1;
  visibility: visible;
}

.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 30em;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.popup-content {
  background-color: white;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  width: max-content;
  padding: 0 1em;
  height: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-white {
  background-image: url(/home-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70% 70%;
}

/* Message Box styles */
#message-box,
#settings-message-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #28a745;
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 90000;
  display: none;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.error {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

::-webkit-scrollbar {
  /* Set a moderately small width for the entire area */
  width: 12px;
}

::-webkit-scrollbar-track {
  /* The track itself is the background. By default, it has no border.
      If a browser adds one, setting border: transparent ensures it's invisible. */
  border: transparent;

  /* Simulate a 1px wide line centered in the 12px area */
  background: linear-gradient(to right, transparent 5.5px, #ccc 5.5px, #ccc 6.5px, transparent 6.5px);

  /* Remove any inner shadow (box-shadow is often used for borders/depth) */
  box-shadow: none;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  /* Solid color for the square */
  background-color: #333;
  border-radius: 0;
  height: 2em;

  /* The border creates space, making the thumb appear smaller/square.
      Setting it to transparent is essential to prevent a visible outline. */
  border: 3px solid transparent;

  /* Ensures the background color doesn't bleed into the border area */
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

/* Time Picker CSS */
.tp-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

.tp-modal {
  background: #fff;
  width: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: tp-fade-in 0.2s ease-out;
}

@keyframes tp-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header Section */
.tp-header {
  background: #007bff;
  /* Primary Brand Color */
  padding: 24px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.tp-time-group {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tp-display-val {
  font-size: 48px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.tp-display-val.active {
  color: #fff;
}

.tp-colon {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 0.9;
}

.tp-ampm-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 12px;
}

.tp-ampm-btn {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.tp-ampm-btn.active {
  background: #fff;
  color: #007bff;
  border-color: #fff;
}

/* Body / List Section */
.tp-body {
  height: 300px;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
}

.tp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  /* Hidden by default, toggled via JS */
}

.tp-list.active {
  display: block;
}

.tp-item {
  padding: 12px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.1s;
}

.tp-item:hover {
  background: #f5f5f5;
}

.tp-item.selected {
  background: #e6f2ff;
  color: #007bff;
  font-weight: 600;
}

/* Footer Section */
.tp-footer {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  border-top: 1px solid #eee;
}

.tp-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}

.tp-btn:hover {
  background: #e6f2ff;
}

input.time-picker[type="number"]::-webkit-inner-spin-button,
input.time-picker[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.clock-icon {
  cursor: pointer;
  position: absolute;
  right: 0.2em;
  width: 1em;
}

.input-container:has(.clock-icon):not([disabled])>svg {
  transition: stroke-width 0.1s;
}

.input-container:has(.clock-icon):not([disabled])>svg:hover {
  stroke-width: 2.5;
}

.input-container[disabled]:has(.clock-icon)>div:has(> svg) {
  cursor: not-allowed;
}

#notification-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column-reverse;
  /* Newest at bottom, pushes old ones up */
  gap: 12px;
  z-index: 9999;
  perspective: 1000px;
  /* Adds depth for animations */
}

.toast {
  width: 320px;
  padding: 8px;

  /* The Glass Effect */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  /* Border & Shadow for Depth */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  color: black;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: max-content;
  /* Modern Entrance Animation */
  animation: glassSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes glassSlideIn {
  from {
    transform: translateX(50px) scale(0.9);
    opacity: 0;
  }

  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.toast-content strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  /*color: #fff;*/
  letter-spacing: 0.3px;
}

.toast-content p {
  margin: 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  margin-bottom: 4px;
  font-size: 0.6rem;
}

.toast-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  /*color: #fff;*/
  width: 10px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
  margin-left: 12px;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Exit Animation */
.toast-fade-out {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.4s ease;
}