/**
 * kDots main styles
 *
 * Note that light / dark colors (& other theme customisations) should go in themes/light.less & themes/dark.less
 * and override as needed
 */
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: clip;
  padding: 0px;
  margin: 0px;
  /** Messages **/
  /** end messages **/
}
html .sl-toast-stack,
body .sl-toast-stack {
  top: auto;
  bottom: 0px;
  width: 50rem;
}
html .sl-toast-stack sl-alert et2-checkbox,
body .sl-toast-stack sl-alert et2-checkbox {
  padding-top: var(--sl-spacing-large);
}
html #egw_message,
body #egw_message {
  display: none;
}
@keyframes loading-prompt-spinner {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
html .egw-loading-prompt-container::before,
body .egw-loading-prompt-container::before {
  opacity: 0.3;
  content: "";
  background-color: var(--sl-color-neutral-100);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
}
html .egw-loading-prompt-container .egw-loading-prompt-spinner-msg,
body .egw-loading-prompt-container .egw-loading-prompt-spinner-msg {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: 48%;
  z-index: 999;
  text-shadow: 4px 4px 7px var(--sl-color-primary-500);
  color: var(--sl-color-primary-900);
  margin-top: 52px;
}
html .egw-loading-prompt-container .egw-loading-prompt-spinner-animator,
body .egw-loading-prompt-container .egw-loading-prompt-spinner-animator {
  width: 38px;
  height: 38px;
  position: absolute;
  margin-left: 50%;
  left: -17px;
  top: 48%;
  z-index: 999;
  background-position: 3px 3px;
  opacity: 1;
  background-repeat: no-repeat;
  vertical-align: middle;
  border: 5px solid;
  border: 6px var(--sl-color-primary-500) solid;
  border-top: 6px var(--sl-color-primary-900) solid;
  border-radius: 50%;
  -webkit-animation: loading-prompt-spinner 1.2s infinite linear;
  animation: loading-prompt-spinner 1.2s infinite linear;
}
@keyframes loading-prompt-horizental {
  0% {
    transform: translate(-52.5px, -7.5px);
  }
  100% {
    transform: translate(38.5px, -7.5px);
  }
}
html .egw-loading-prompt-container .egw-loading-prompt-horizental-animator::after,
body .egw-loading-prompt-container .egw-loading-prompt-horizental-animator::after {
  content: '';
  position: absolute;
  top: 48%;
  left: 50%;
  width: 15px;
  height: 15px;
  z-index: 999;
  border-radius: 30%;
  background: #FBC200;
  animation-name: loading-prompt-horizental;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
html .egw-loading-prompt-container .egw-loading-prompt-horizental-msg,
body .egw-loading-prompt-container .egw-loading-prompt-horizental-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  text-shadow: 4px 4px 7px var(--sl-color-primary-500);
  color: var(--sl-color-primary-900);
  margin-left: -35px;
}
html .egw-loading-prompt-container .egw-loading-prompt-horizental-animator::before,
body .egw-loading-prompt-container .egw-loading-prompt-horizental-animator::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 999;
  width: 100px;
  border-radius: 5px;
  border: solid 10px var(--sl-color-primary-500);
  transform: translate(-50%, -50%);
}
/* BI icons - Path is relative to destination directory */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  vertical-align: middle;
}
.egw_menu::part(popup) {
  z-index: var(--sl-z-index-dropdown);
}
egw-framework#egw_fw_basecontainer {
  --icon-size: 40px;
  --sl-tooltip-arrow-size: 0;
  /* Internals */
  /* Content slotted inside */
}
egw-framework#egw_fw_basecontainer::part(status-split) {
  /* This limits the max size of the status panel */
  --max: 15em;
}
egw-framework#egw_fw_basecontainer::part(header) {
  --icon-size: 40px;
  --tab-icon-size: var(--icon-size);
  --tab-icon-size-active: 46px;
  color: var(--primary-background-color);
  gap: 0;
  font-size: var(--icon-size);
  padding: 0.4rem;
  padding-right: 1px;
}
egw-framework#egw_fw_basecontainer::part(app-list-panel) {
  padding: var(--sl-spacing-medium);
  gap: var(--sl-spacing-medium);
}
egw-framework#egw_fw_basecontainer [slot="logo"] {
  flex-grow: 1;
}
egw-framework#egw_fw_basecontainer [slot="logo"] img {
  max-width: calc(var(--left-side-width, 220px) - var(--icon-size));
  max-height: var(--icon-size);
  min-width: var(--icon-size);
  display: block;
  text-align: center;
}
egw-framework#egw_fw_basecontainer sl-icon-button[slot="header"],
egw-framework#egw_fw_basecontainer et2-image[slot="header"] {
  font-size: var(--icon-size);
  color: inherit;
}
egw-framework#egw_fw_basecontainer div#egw_fw_toggler {
  position: initial;
  display: none;
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items {
  position: relative;
  order: 99;
  margin-left: auto;
  gap: var(--sl-spacing-large);
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items .topmenu_info_item {
  min-width: 1em;
  min-height: 1em;
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items #quick_add_selectbox::part(emptyLabel) {
  display: none;
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items #quick_add_selectbox::part(combobox) {
  width: 1px;
  padding: 0;
  box-shadow: none;
  border: none;
}
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r {
  position: initial;
  top: initial;
}
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-avatar,
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-lavatar {
  --size: 40px;
}
egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
  display: flex;
  gap: var(--sl-spacing-medium);
  padding-left: 1em;
}
table.et2_grid > tbody > tr > td:last-child et2-image.iphoto {
  position: relative;
  left: 10px;
  top: -2px;
}
/*** HEADER ***/
/** Tab notification badges **/
/**
	color selection for header timer
	 */
.timesheet_timer,
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer {
  text-align: center;
  font-size: 20px;
  white-space: nowrap;
  color: var(--sl-color-neutral-600);
}
.timesheet_timer.running,
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
  color: var(--sl-color-primary-600);
}
.timesheet_timer.running.overall,
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running.overall {
  color: var(--sl-color-neutral-1000);
}
.timesheet_timer.paused,
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.paused {
  color: var(--sl-color-orange-500);
}
/** end color for timer*/
#egw_fw_topmenu_info_items {
  /*these are the icons on the right
  timer, darkmode, quickadd, notifications, account
  */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  color: var(--sl-color-neutral-600);
  font-size: var(--header-icon-size);
}
#egw_fw_topmenu_info_items > * {
  border: none;
  background-color: transparent;
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar {
  width: calc(calc(2 * var(--sl-spacing-2x-small)) + var(--icon-size));
  height: calc(calc(2 * var(--sl-spacing-2x-small)) + var(--icon-size));
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-button::part(label) {
  padding: 0;
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-button::part(base) {
  border: none;
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar et2-avatar {
  --size: calc(0.6rem + var(--icon-size));
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar::part(base) {
  vertical-align: initial;
}
#egw_fw_topmenu_info_items .topmenu_info_item {
  height: var(--icon-size);
  width: var(--icon-size);
  display: inline-block;
}
#egw_fw_topmenu_info_items .topmenu_info_item:hover {
  background-color: var(--sl-input-background-color-hover);
}
#egw_fw_topmenu_info_items et2-button-icon::part(base) {
  padding: 0;
}
#egw_fw_topmenu_info_items #topmenu_info_timer {
  order: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0px;
  width: calc(1.8 * var(--icon-size));
  height: var(--header-icon-size);
  left: var(--sl-spacing-large);
  border: 1px solid var(--sl-color-neutral-600);
  border-radius: var(--sl-border-radius-pill);
}
#egw_fw_topmenu_info_items #topmenu_info_timer #timerIconRunning,
#egw_fw_topmenu_info_items #topmenu_info_timer #timerIconPaused {
  padding-left: calc(1.6rem / 7);
  font-size: var(--header-icon-size);
}
#egw_fw_topmenu_info_items #topmenu_info_timer #timerIconRunning:has(~ div.paused) {
  display: none;
}
#egw_fw_topmenu_info_items #topmenu_info_timer #timerIconPaused:has( ~ div:not(.paused)) {
  display: none;
}
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer {
  display: block;
  width: 100%;
  z-index: 2;
  font-size: larger;
}
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
  cursor: pointer;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add {
  position: relative;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
  display: block;
  background-image: url(../../node_modules/bootstrap-icons/icons/plus-circle.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  width: 100%;
  height: 100%;
  padding-right: 3px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:before {
  content: " ";
  font-size: 2em;
  line-height: 0.6em;
  background-color: white;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
  height: 0px;
  display: inline-block;
  text-align: initial;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox sl-option {
  white-space: nowrap;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(emptyLabel) {
  /* do NOT show empty label, required for clearing value */
  display: none;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control-input) {
  border: none !important;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control) {
  margin-left: -3em;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(listbox),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(menu) {
  max-height: 60vh;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
  height: 0px;
  overflow: hidden;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(combobox) {
  visibility: hidden;
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-menu-item et2-image {
  width: 1em;
}
#egw_fw_topmenu_info_items button#topmenu_info_search {
  background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
}
#topmenu_info_print_title {
  background-image: url(../../../api/templates/default/images/print.svg);
}
#topmenu_info_print_title span {
  width: 45px;
  height: 45px;
  display: inline-block;
}
/* popup copied from pixelegg */
#egwpopup {
  top: 46px;
  right: 0 !important;
  left: auto !important;
  height: calc(100% - 69px);
  width: 277px !important;
  position: absolute;
  background: #fff;
  border: 1px solid silver;
  border-top: none;
  border-bottom: none;
  padding: 1em;
  /*Button*/
}
#egwpopup input#egwpopup_ok_button,
#egwpopup button#desktop_perms {
  padding: 0 5px;
}
#egwpopup #egwpopup_list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar {
  width: 4px;
  background-color: #fafafa;
}
#egwpopup #egwpopup_list::-webkit-scrollbar-thumb {
  background-color: #6a6f71;
}
#egwpopup #egwpopup_list {
  overflow-y: auto;
  height: calc(100% - 52px);
}
#egwpopup #egwpopup_list .egwpopup_time_label {
  width: 100%;
  color: #fafafa;
  text-align: center;
  font-style: italic;
  opacity: 0.5;
  font-size: 10pt;
  background: #255ea5;
  font-weight: bold;
}
#egwpopup #egwpopup_list span.egwpopup_delete {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_mark {
  display: inline-block;
  float: right;
  width: 10px;
  height: 10px;
  border: 1px solid #b9436c;
  border-radius: 50%;
  margin: 7px;
  background: #b9436c;
  cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message {
  height: auto;
  overflow: hidden;
  padding: 10px;
  background-color: #fafafa;
  margin-bottom: 5px;
}
#egwpopup #egwpopup_list .egwpopup_message:hover {
  background-color: rgba(103, 159, 210, 0.2);
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_inner_container {
  height: 63px;
  overflow: hidden;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_inner_container a {
  max-width: 60em;
  display: inline-block;
  overflow-wrap: break-word;
  vertical-align: text-top;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar {
  display: inline-block;
  width: 100%;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_date {
  float: left;
  color: #767676;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_message_open {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  background-image: url(../../node_modules/bootstrap-icons/icons/search.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_top_toolbar .egwpopup_collapse {
  display: none;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container {
  text-align: center;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_actions_container > button {
  height: 24px;
  width: 80px;
  border: none;
  background: #e6e6e6;
  background-size: 16px;
  background-position: 12px center;
  background-repeat: no-repeat;
  padding-left: 26px;
}
#egwpopup #egwpopup_list .egwpopup_message .egwpopup_message_more_info {
  color: #767676;
  padding-top: 5px;
  padding-bottom: 5px;
}
#egwpopup #egwpopup_list .egwpopup_message span.egwpopup_nav_prev,
#egwpopup #egwpopup_list .egwpopup_message span.egwpopup_nav_next {
  display: none;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded {
  position: fixed;
  top: 85px;
  height: calc(100% - 130px);
  left: 20vw;
  width: 60vw;
  box-shadow: 0 0 40px #666;
  overflow: auto;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded:hover {
  background-color: #fafafa;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_message_inner_container {
  height: calc(100% - 62px);
  overflow: auto;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_collapse {
  float: right;
  width: 24px;
  height: 24px;
  background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
  display: inline-block;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_message_more_info {
  display: none;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded span.egwpopup_nav_prev {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  background-image: url(../../node_modules/bootstrap-icons/icons/arrow-bar-left.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded .egwpopup_nav_disable {
  opacity: 0.5;
  pointer-events: none;
}
#egwpopup #egwpopup_list .egwpopup_message.egwpopup_expanded span.egwpopup_nav_next {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  background-image: url(../../node_modules/bootstrap-icons/icons/arrow-bar-right.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  cursor: pointer;
}
#egwpopup #egwpopup_list .egwpopup_message_seen .egwpopup_mark {
  cursor: auto;
  background: none;
  border-color: #666c6e;
}
#egwpopup #egwpopup_list .egwpopup_message_clone {
  border: 2px dashed silver;
  opacity: 0.3;
  height: 125px;
}
#egwpopup div#egwpopup_header {
  font-size: 16px;
  color: silver;
  text-align: center;
  padding: 15px;
}
#egwpopup div#egwpopup_header .egwpopup_seenall {
  float: right;
  width: 10px;
  height: 10px;
  border: 1px solid silver;
  border-radius: 50%;
  cursor: pointer;
  margin: 4px 0px 0px 0px;
}
#egwpopup div#egwpopup_header .egwpopup_seenall:hover {
  border-color: gray;
  background: rgba(103, 159, 210, 0.2);
}
#egwpopup div#egwpopup_header .egwpopup_deleteall {
  background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
  width: 12px;
  height: 12px;
  background-position: center;
  background-size: 12px;
  float: right;
  background-repeat: no-repeat;
  margin-right: 15px;
  margin-top: 4px;
  cursor: pointer;
  display: inline-block;
  opacity: 0.5;
}
#egwpopup div#egwpopup_header .egwpopup_deleteall:hover {
  opacity: 1;
}
/*** END HEADER ***/
/*** APPLICATION ***/
egw-app {
  --application-header-text-color: var(--sl-color-neutral-200);
  /* Lock size of left menu section for small screens */
  /* Nice formatting for templates slotted into header (no need to wrap contents in et2-hbox) */
  /* Nice formatting for custom templates slotted into filter */
  /* Application template gets full height */
  /*sidebox styling
  * same styling should apply to sl-details.favorites inside the EgwFrameworkApp.styles.ts
  */
  /** Clean nextmatch headers **/
  /* Hide nextmatch header, it's in the framework now */
  /** filter drawer styling**/
}
egw-app div[id$='index'] {
  overflow: auto;
}
@media (max-width: 800px) {
  egw-app {
    --left-max: 50%;
  }
}
@media (max-width: 600px) {
  egw-app {
    --left-max: 100%;
    --left-min: 100%;
  }
}
egw-app::part(name) {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  --image-filter: brightness(0) invert(1);
}
egw-app::part(header) {
  display: flex;
  background-color: transparent;
  overflow: hidden;
}
egw-app et2-template[slot="main-header"]::part(base) {
  display: flex;
  flex-direction: row;
  align-items: center;
}
egw-app [slot="filter"]::part(base),
egw-app [slot="filter"] > et2-template::part(base),
egw-app [slot="filter"]::part(base),
egw-app [slot="filter"]::part(content),
egw-app [slot="filter"] > et2-template::part(content),
egw-app [slot="filter"]::part(content) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-width);
}
egw-app et2-details::part(content) {
  display: flex;
  flex-direction: column;
  gap: var(--gap-width);
}
egw-app::part(content) {
  position: relative;
  flex-direction: column;
  overflow-y: hidden;
}
egw-app::part(filter) {
  --size: 40em;
  --label-width: max(15em, 30%);
}
@media (max-width: 800px) {
  egw-app::part(filter) {
    --size: 100%;
  }
}
egw-app::part(filter__panel) {
  z-index: var(--sl-z-index-drawer);
}
egw-app > div[id] > div,
egw-app > div[id] > et2-template {
  height: 100%;
}
egw-app et2-favorites-menu::part(menu) {
  border: none;
  border-radius: initial;
}
egw-app::part(details-header) {
  background-color: var(--application-color, var(--sl-color-primary-800, lightblue));
  padding-block: var(--sl-spacing-3x-small);
  margin: var(--sl-spacing-medium);
  margin-bottom: 0;
  color: var(--application-header-text-color);
}
egw-app::part(details-base) {
  border: none;
  border-radius: 0;
}
egw-app::part(content) {
  padding: 0;
}
egw-app .et2_nextmatch.et2-filterbox--loaded:not(.et2-filterbox--none):not(.et2-filterbox--has-header) .nextmatch_header {
  height: 0px;
  overflow: hidden;
}
egw-app *[slot="filter"] et2-details:has(> .et2_customfield_list:only-child > tbody:empty) {
  display: none;
}
egw-app *[slot="filter"] et2-details:has(> .et2_customfield_list:only-child:empty) {
  display: none;
}
/* Individual application colors, should go in each app's CSS */
body,
:root {
  --addressbook-color: #003366;
  --admin-color: #333333;
  --bookmarks-color: #CC6633;
  --calendar-color: #CC0033;
  --filemanager-color: #ff9933;
  --infolog-color: #660033;
  --mail-color: #006699;
  --projectmanager-color: #669999;
  --resources-color: #003333;
  --timesheet-color: #330066;
  --tracker-color: #009966;
  --wiki-color: #797979;
  --ranking-color: #404040;
  --default-color: #797979;
  --kanban-color: #4663c8;
  --smallpart-color: #303333;
}
body egw-app[name="addressbook"],
:root egw-app[name="addressbook"] {
  --application-color: var(--addressbook-color);
}
body egw-app[name="admin"],
:root egw-app[name="admin"] {
  --application-color: var(--admin-color);
}
body egw-app[name="bookmarks"],
:root egw-app[name="bookmarks"] {
  --application-color: var(--bookmarks-color);
}
body egw-app[name="calendar"],
:root egw-app[name="calendar"] {
  --application-color: var(--calendar-color);
}
body egw-app[name="filemanager"],
:root egw-app[name="filemanager"] {
  --application-color: var(--filemanager-color);
}
body egw-app[name="infolog"],
:root egw-app[name="infolog"] {
  --application-color: var(--infolog-color);
}
body egw-app[name="mail"],
:root egw-app[name="mail"] {
  --application-color: var(--mail-color);
}
body egw-app[name="projectmanager"],
:root egw-app[name="projectmanager"] {
  --application-color: var(--projectmanager-color);
}
body egw-app[name="resources"],
:root egw-app[name="resources"] {
  --application-color: var(--resources-color);
}
body egw-app[name="timesheet"],
:root egw-app[name="timesheet"] {
  --application-color: var(--timesheet-color);
}
body egw-app[name="tracker"],
:root egw-app[name="tracker"] {
  --application-color: var(--tracker-color);
}
body egw-app[name="wiki"],
:root egw-app[name="wiki"] {
  --application-color: var(--wiki-color);
}
body egw-app[name="ranking"],
:root egw-app[name="ranking"] {
  --application-color: var(--ranking-color);
}
body egw-app[name="smallpart"],
:root egw-app[name="smallpart"] {
  --application-color: var(--smallpart-color);
}
/*** END APPLICATION ***/
/*** Popup styling ***/
.popupMainDiv {
  /* This would make things simpler for sizing, but causes problems with etemplate.resize() and dialogs with grids
  height: 100%;
   */
  padding: 0 var(--sl-spacing-small);
  /* Specific to override etemplate2 */
}
.popupMainDiv .dialogHeader,
.popupMainDiv .dialogFooter,
.popupMainDiv .dialogFooterToolbar {
  --sl-panel-border-width: 2px;
  --sl-panel-border-color: var(--sl-color-neutral-500);
}
.popupMainDiv .dialogHeader {
  border-bottom: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}
.popupMainDiv table.et2_grid > tbody > tr.dialogFooterToolbar > td {
  padding-top: var(--sl-spacing-small);
  padding-bottom: var(--sl-spacing-small);
}
.popupMainDiv .dialogFooter,
.popupMainDiv .dialogFooterToolbar {
  border-collapse: separate;
  border-top: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}
.popupMainDiv .dialogFooter td:first-child,
.popupMainDiv .dialogFooterToolbar td:first-child {
  padding-left: var(--sl-spacing-x-small);
}
.popupMainDiv .dialogFooter td:last-child,
.popupMainDiv .dialogFooterToolbar td:last-child {
  padding-right: var(--sl-spacing-x-small);
}
/*** End popup styling ***/
/*** WIDGETS ***/
/* This should mostly go away with webcomponents */
/* Show something for undefined widget */
*:not(:defined) {
  background-size: contain;
  background-image: url(../../node_modules/bootstrap-icons/icons/question-circle.svg);
}
/* Get nextmatch sizing more nicely without messing with dynheight */
div.et2_nextmatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
div.et2_nextmatch > div:not(:first-child) {
  flex: 1 1 100%;
  max-height: 100%;
}
div.et2_nextmatch th {
  font-weight: normal;
}
div.et2_nextmatch .egwGridView_outer {
  border-collapse: collapse;
}
div.et2_nextmatch .egwGridView_outer thead > tr {
  background-color: var(--sl-color-neutral-100);
}
div.et2_nextmatch .egwGridView_outer thead > tr th {
  border-right: var(--sl-panel-border-width) solid var(--sl-color-neutral-400);
}
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer {
  display: flex;
  align-items: center;
  padding-left: var(--sl-spacing-2x-small);
  min-height: 2em;
  max-height: 6.5em;
  overflow-x: hidden;
  overflow-y: auto;
}
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer et2-vbox {
  width: 100%;
}
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer et2-vbox span:not(.no_ellipsis) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer et2-vbox > span:only-child,
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer et2-vbox > et2-description:only-child > span[part="content"] {
  white-space: normal;
}
div.et2_nextmatch .egwGridView_outer thead > tr th .ellipsis* {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
div.et2_nextmatch .egwGridView_outer thead > tr th.optcol span.selectcols {
  height: 9px;
  padding: 4px 14px 0 2px;
  margin-top: 4px;
  background-image: url(../../api/templates/default/images/selectcols.svg);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  display: inline-block;
  background-position: top;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea {
  overflow-x: hidden;
  overflow-y: auto;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table {
  border-collapse: collapse;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table tr.selected {
  background-color: var(--highlight-background-color);
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table.egwGridView_grid > tbody > tr {
  border-bottom: var(--sl-panel-border-width) solid var(--sl-color-neutral-200);
}
/* Special styling for widgets in main-header */
[slot="main-header"] {
  /* Only target the parts, or nested widgets will look weird */
  /* Anything changed here needs to be reset for et2-toolbar [slot=list] below */
  --sl-input-background-color: transparent;
  --sl-input-background-color-hover: transparent;
  --sl-input-background-color-focus: transparent;
  --sl-input-color: var(--application-header-text-color);
  --input-text-color: var(--application-header-text-color);
  --sl-input-icon-color: var(--application-header-text-color);
  --sl-input-color-hover: var(--application-header-text-color);
  --sl-input-placeholder-color: var(--application-header-text-color);
  --focus-background-color: hsla(from var(--application-header-text-color) h s l / 0.18);
  color: var(--application-header-text-color);
  /****
INPUT FIELDS GET SOME BACKGROUND WHEN FOCUSED
 ****/
  /*HOVER effect on all clickable elements in the main-header*/
  /*we also want to style the clickable elements in the whole header in the same way*/
  /*END HOVER*/
  /****
	*
	* Make Elements in the main-header waste less space if possible
	*
	 ****/
  /* Don't let search grow */
}
[slot="main-header"] ::part(listbox) {
  --sl-input-background-color: var(--sl-color-neutral-0);
}
[slot="main-header"] input::placeholder {
  color: black;
}
[slot="main-header"] et2-vfs-upload,
[slot="main-header"] et2-file {
  --sl-color-neutral-0: transparent;
  --sl-color-neutral-700: var(--application-header-text-color);
  --sl-input-border-color: transparent;
}
[slot="main-header"] et2-vfs-upload .et2_label,
[slot="main-header"] et2-file .et2_label {
  color: var(--application-header-text-color);
}
[slot="main-header"] et2-vfs-upload::part(button),
[slot="main-header"] et2-file::part(button) {
  --sl-input-border-color-hover: transparent;
}
[slot="main-header"] *::part(base),
[slot="main-header"] *::part(button__base),
[slot="main-header"] ::part(control) {
  color: var(--application-header-text-color);
  background-color: transparent;
}
[slot="main-header"] et2-switch-icon::part(control) {
  font-size: var(--sl-font-size-x-large, 20px);
}
[slot="main-header"] .et2-input-widget:focus-within {
  --sl-input-background-color: var(--focus-background-color);
  --sl-input-background-color-focus: var(--focus-background-color);
  --sl-input-border-color: var(--sl-input-border-color-hover);
}
[slot="main-header"] .et2-input-widget:focus-within::part(input) {
  background-color: var(--focus-background-color);
}
[slot="main-header"] .et2_clickable,
[slot="main-header"] et2-image,
[slot="main-header"] .et2-input-widget:not(et2-toolbar) {
  --sl-input-border-color: transparent;
  --indicator-color: var(--sl-color-neutral-0);
  --sl-input-background-color: transparent;
}
[slot="main-header"] .et2_clickable::part(input):autofill,
[slot="main-header"] et2-image::part(input):autofill,
[slot="main-header"] .et2-input-widget:not(et2-toolbar)::part(input):autofill,
[slot="main-header"] .et2_clickable::part(input):-webkit-autofill,
[slot="main-header"] et2-image::part(input):-webkit-autofill,
[slot="main-header"] .et2-input-widget:not(et2-toolbar)::part(input):-webkit-autofill {
  /* Chrome doesn't let us style autofill background directly */
  transition: background-color 50000s ease-in-out 0s;
  /* Long transition to hide the default color change */
  -webkit-text-fill-color: var(--application-header-text-color);
  -webkit-box-shadow: 0 0 0 50px var(--sl-input-background-color) inset;
  /* Box shadow hides the default background color */
}
[slot="main-header"] .et2_clickable[label]::part(label),
[slot="main-header"] et2-image[label]::part(label),
[slot="main-header"] .et2-input-widget:not(et2-toolbar)[label]::part(label) {
  padding-inline-start: var(--sl-spacing-2x-small);
}
[slot="main-header"] .et2_clickable::part(control),
[slot="main-header"] et2-image::part(control),
[slot="main-header"] .et2-input-widget:not(et2-toolbar)::part(control) {
  --indicator-color: var(--application-header-text-color);
  --sl-input-border-color: transparent;
  --sl-input-background-color: transparent;
  --image-filter: brightness(0) invert(1);
  --image-filter-off: brightness(0) invert(1) opacity(0.5);
}
[slot="main-header"] .et2_clickable::part(base),
[slot="main-header"] et2-image::part(base),
[slot="main-header"] .et2-input-widget:not(et2-toolbar)::part(base) {
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
}
[slot="main-header"] .et2_clickable:hover::part(base),
[slot="main-header"] et2-image:hover::part(base),
[slot="main-header"] .et2-input-widget:not(et2-toolbar):hover::part(base),
[slot="main-header"] .et2_clickable:hover::part(control),
[slot="main-header"] et2-image:hover::part(control),
[slot="main-header"] .et2-input-widget:not(et2-toolbar):hover::part(control) {
  border-color: var(--sl-input-border-color-hover);
}
[slot="main-header"] et2-switch-icon {
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
  border-radius: var(--sl-input-border-radius-medium);
}
[slot="main-header"] et2-switch-icon:hover {
  border-color: var(--sl-input-border-color-hover) !important;
}
[slot="main-header"] et2-button-toggle::part(control) {
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
  border-radius: var(--sl-input-border-radius-medium);
}
[slot="main-header"] et2-button-toggle:hover::part(control) {
  border-color: var(--sl-color-neutral-400) !important;
}
[slot="main-header"] et2-toolbar {
  border-bottom-width: 0px;
  flex: 1 1 auto;
  /* Change colors of things in list back */
}
[slot="main-header"] et2-toolbar sl-button-group {
  background: none;
}
[slot="main-header"] et2-toolbar et2-dropdown-button ::part(base) {
  background-color: transparent;
  color: currentColor;
}
[slot="main-header"] et2-toolbar et2-switch-icon {
  padding-inline: var(--sl-spacing-small);
}
[slot="main-header"] et2-toolbar ::part(list) {
  color: var(--sl-color-neutral-700);
}
[slot="main-header"] et2-toolbar ::part(list) et2-button::part(base) {
  border: solid var(--sl-input-border-width) var(--sl-input-border-color);
  color: var(--sl-color-neutral-700);
}
[slot="main-header"] et2-toolbar ::part(list) et2-button:hover::part(base) {
  color: var(--sl-color-neutral-700);
  border-color: var(--sl-input-border-color);
}
[slot="main-header"] et2-toolbar [slot="list"] {
  color: var(--sl-color-neutral-700);
  --indicator-color: var(--sl-color-neutral-700);
  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-placeholder-color: var(--sl-color-neutral-700);
}
[slot="main-header"] et2-toolbar [slot="list"] ::part(base),
[slot="main-header"] et2-toolbar [slot="list"]::part(base),
[slot="main-header"] et2-toolbar [slot="list"]::part(control) {
  color: var(--sl-color-neutral-700);
  --sl-input-color: var(--sl-color-neutral-700);
  --indicator-color: var(--sl-color-neutral-700);
  --image-filter: none;
  --image-filter-off: none;
}
[slot="main-header"] et2-toolbar [slot="list"] :hover::part(base) {
  border-color: var(--sl-input-border-color);
}
[slot="main-header"] et2-toolbar * {
  flex-grow: 0;
}
[slot="main-header"] .et2-select-widget {
  flex-grow: 0;
}
[slot="main-header"] .et2-select-widget::part(form-control) {
  width: fit-content;
}
[slot="main-header"] [id$="api-search-button"] {
  flex: 0 0 min-content;
}
/*Special styling for flatpickr widget*/
.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
  display: flex;
  height: auto;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months {
  flex: 1 1 5ch;
  max-width: 13ch;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper {
  flex: 0 0 6ch;
}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper .numInput {
  padding: 0;
}
/*** END WIDGETS ***/
@media screen and (max-width: 800px) {
  html * {
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
  }
  :root,
  body {
    /* Stop pull-to-refresh on chrome*/
    overflow-y: hidden;
    /* copied from previous framework */
  }
  :root egw-framework#egw_fw_basecontainer,
  body egw-framework#egw_fw_basecontainer {
    --left-side-width: 0px !important;
    /* Hide some parts */
  }
  :root egw-framework#egw_fw_basecontainer::part(open-applications),
  body egw-framework#egw_fw_basecontainer::part(open-applications),
  :root egw-framework#egw_fw_basecontainer::part(status),
  body egw-framework#egw_fw_basecontainer::part(status),
  :root egw-framework#egw_fw_basecontainer::part(divider),
  body egw-framework#egw_fw_basecontainer::part(divider) {
    display: none;
  }
  :root egw-framework#egw_fw_basecontainer.egw_fw--left-side-collapsed::part(header),
  body egw-framework#egw_fw_basecontainer.egw_fw--left-side-collapsed::part(header) {
    display: none;
  }
  :root egw-framework#egw_fw_basecontainer::part(main),
  body egw-framework#egw_fw_basecontainer::part(main) {
    overflow-x: hidden;
  }
  :root egw-framework#egw_fw_basecontainer::part(status-split),
  body egw-framework#egw_fw_basecontainer::part(status-split) {
    --max: 0;
  }
  :root button[id*="save"]:hover,
  body button[id*="save"]:hover,
  :root button[id*="apply"]:hover,
  body button[id*="apply"]:hover,
  :root button[id*="copy"]:hover,
  body button[id*="copy"]:hover,
  :root button[id*="edit_button[edit]"]:hover,
  body button[id*="edit_button[edit]"]:hover,
  :root button.et2_button:hover,
  body button.et2_button:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  :root et2-dialog,
  body et2-dialog {
    /* Old way of adding stuff.  Buttons should be slotted into header-actions, anything else into label */
  }
  :root et2-dialog .egw-popup,
  body et2-dialog .egw-popup {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
  }
  :root et2-dialog::part(panel),
  body et2-dialog::part(panel) {
    /* allow dialog to be full screen */
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  :root et2-dialog::part(header),
  body et2-dialog::part(header) {
    /* Set header size, color & background */
    color: var(--application-header-text-color, var(--sl-color-neutral-100));
    background: var(--application-color, var(--sl-color-primary-500));
    height: var(--sl-spacing-3x-large);
    padding: 0;
    border-radius: 0 !important;
    flex-direction: row-reverse;
  }
  :root et2-dialog::part(title),
  body et2-dialog::part(title) {
    font-size: var(--sl-font-size-x-large);
    padding: 0;
    display: flex;
    align-items: center;
    /* Needs something so flex will work right */
    min-width: 5em;
  }
  :root et2-dialog::part(header-actions),
  body et2-dialog::part(header-actions) {
    flex-direction: row-reverse;
    font-size: var(--sl-font-size-2x-large);
    align-content: center;
  }
  :root et2-dialog::part(close-button),
  body et2-dialog::part(close-button) {
    color: var(--application-header-text-color, var(--sl-color-neutral-100));
    font-size: var(--sl-font-size-2x-large);
  }
  :root et2-dialog::part(footer),
  body et2-dialog::part(footer) {
    order: 0;
    /*box-shadow: 0px 4px 5px 2px silver;*/
    width: 100%;
    margin-top: 0px;
    background: var(--sl-color-primary-700);
    color: var(--application-header-text-color, var(--sl-color-neutral-100));
    /* Allow buttons to wrap */
    flex-wrap: wrap;
  }
  :root et2-dialog .dialogHeadbar:empty,
  body et2-dialog .dialogHeadbar:empty {
    display: none;
  }
  :root et2-dialog .dialogHeadbar:not(:empty),
  body et2-dialog .dialogHeadbar:not(:empty) {
    color: var(--sl-color-neutral-0);
    font-size: var(--sl-font-size-x-large);
    background-color: var(--application-color);
    position: fixed;
    height: calc(var(--sl-spacing-3x-large) - 1px);
    top: 1px;
    left: 5.5em;
    right: 0;
    z-index: 1;
    overflow: hidden;
  }
  :root et2-dialog .dialogHeadbar:not(:empty) .entry_id,
  body et2-dialog .dialogHeadbar:not(:empty) .entry_id {
    position: absolute;
    right: var(--sl-spacing-medium);
    font-weight: var(--sl-font-weight-bold);
  }
  :root et2-dialog et2-hbox[slot="label"],
  body et2-dialog et2-hbox[slot="label"],
  :root et2-dialog et2-box[slot="label"],
  body et2-dialog et2-box[slot="label"],
  :root et2-dialog et2-hbox[slot="header-actions"],
  body et2-dialog et2-hbox[slot="header-actions"],
  :root et2-dialog eg2-box[slot="header-actions"],
  body et2-dialog eg2-box[slot="header-actions"] {
    flex: 1 1 min-content;
  }
  :root et2-dialog et2-hbox[slot="label"]::part(base),
  body et2-dialog et2-hbox[slot="label"]::part(base),
  :root et2-dialog et2-box[slot="label"]::part(base),
  body et2-dialog et2-box[slot="label"]::part(base),
  :root et2-dialog et2-hbox[slot="header-actions"]::part(base),
  body et2-dialog et2-hbox[slot="header-actions"]::part(base),
  :root et2-dialog eg2-box[slot="header-actions"]::part(base),
  body et2-dialog eg2-box[slot="header-actions"]::part(base) {
    align-items: center;
  }
  :root et2-dialog span[slot="label"],
  body et2-dialog span[slot="label"] {
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-end: var(--sl-spacing-small);
  }
  :root et2-dialog et2-number[slot="label"],
  body et2-dialog et2-number[slot="label"] {
    display: inline-flex;
  }
  :root et2-dialog et2-button[slot="footer"]:has(et2-image),
  body et2-dialog et2-button[slot="footer"]:has(et2-image) {
    /* Fixed size on footer buttons */
    width: 50px;
    height: 50px;
  }
  :root et2-dialog et2-button[slot="footer"] et2-image,
  body et2-dialog et2-button[slot="footer"] et2-image {
    max-width: initial;
    left: 0;
  }
  :root et2-dialog et2-button[slot="footer"] et2-image span,
  body et2-dialog et2-button[slot="footer"] et2-image span {
    padding-left: 20px;
  }
  :root et2-dialog et2-button[slot="footer"][id*="cancel"],
  body et2-dialog et2-button[slot="footer"][id*="cancel"] {
    /* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
    display: none;
  }
  :root et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base),
  body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base),
  :root et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover),
  body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover),
  :root et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover),
  body et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
    /* Have an icon - Hide button style, just show image */
    border: none;
    background: transparent;
    justify-content: center;
    color: var(--sl-color-neutral-100);
  }
  :root et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label),
  body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
    /* Visually hide labels but leave them there for accessibility */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    flex: 0 1 auto;
  }
  :root et2-dialog #delete_popup,
  body et2-dialog #delete_popup {
    position: absolute;
    z-index: 1000000;
    display: block;
  }
  :root et2-dialog #timer_dialog::part(header),
  body et2-dialog #timer_dialog::part(header),
  :root et2-dialog et2-dialog#timer_dialog::part(footer),
  body et2-dialog et2-dialog#timer_dialog::part(footer) {
    background-color: var(--timesheet-color);
  }
  :root .et2_nextmatch,
  body .et2_nextmatch {
    /* If there's a filterbox, hide the header */
  }
  :root .et2_nextmatch .nextmatch_sortheader,
  body .et2_nextmatch .nextmatch_sortheader {
    padding-right: 0px;
    margin-right: 0px;
  }
  :root .et2_nextmatch.et2-filterbox--loaded .nextmatch_header,
  body .et2_nextmatch.et2-filterbox--loaded .nextmatch_header,
  :root .et2_nextmatch.et2-filterbox--loaded .nm-mob-header,
  body .et2_nextmatch.et2-filterbox--loaded .nm-mob-header,
  :root .et2_nextmatch.et2-filterbox--loaded .nm_favorites_div,
  body .et2_nextmatch.et2-filterbox--loaded .nm_favorites_div {
    display: none;
  }
  :root .et2_nextmatch .nextmatch_header.nm_header_hide,
  body .et2_nextmatch .nextmatch_header.nm_header_hide {
    display: none !important;
  }
  :root .et2_nextmatch .egwGridView_outer thead tr,
  body .et2_nextmatch .egwGridView_outer thead tr {
    visibility: hidden;
  }
  :root .et2_nextmatch .search.searchOn input,
  body .et2_nextmatch .search.searchOn input {
    border: none;
    background: white;
    outline: none;
    position: absolute;
    left: 110px;
    width: 80%;
    height: var(--sl-font-size-large);
  }
  :root .et2_nextmatch .search.searchOn button[id$="search_button"],
  body .et2_nextmatch .search.searchOn button[id$="search_button"] {
    background-image: none !important;
  }
  :root .et2_nextmatch .search.searchOn button[id$="search_button"]:after,
  body .et2_nextmatch .search.searchOn button[id$="search_button"]:after {
    content: "\2613";
    font-weight: bold;
    font-size: 18pt;
  }
  :root .et2_nextmatch .nm-mob-header,
  body .et2_nextmatch .nm-mob-header {
    background: var(--primary-color);
    margin-top: 0;
    padding-left: 60px;
    position: relative;
    height: 50px;
    z-index: 1;
    display: flex;
    border-bottom: 1px solid transparent;
  }
  :root .et2_nextmatch .nm-mob-header et2-button-icon,
  body .et2_nextmatch .nm-mob-header et2-button-icon {
    font-size: 2.3em;
    color: var(--sl-color-neutral-0);
  }
  :root .et2_nextmatch .nm-mob-header button,
  body .et2_nextmatch .nm-mob-header button {
    height: var(--sl-font-size-large);
    width: var(--sl-font-size-large);
    background-repeat: no-repeat;
    font-size: large;
    background-color: var(--primary-color);
    border: none;
    margin: 0;
    color: white;
    background-size: 18px 18px;
    box-shadow: none;
    outline: none;
  }
  :root .et2_nextmatch .nm-mob-header div.et2_searchbox,
  body .et2_nextmatch .nm-mob-header div.et2_searchbox {
    display: inline-block;
    width: 50px;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_toggle_header,
  body .et2_nextmatch .nm-mob-header button.nm_toggle_header {
    background-image: url(../../node_modules/bootstrap-icons/icons/list-task.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    display: block;
    color: var(--sl-color-neutral-0);
    order: 9;
    padding: 0 1em 0 1em;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_toggle_header:focus,
  body .et2_nextmatch .nm-mob-header button.nm_toggle_header:focus {
    outline: none;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_action_header,
  body .et2_nextmatch .nm-mob-header button.nm_action_header {
    background-image: url(../../node_modules/bootstrap-icons/icons/three-dots-vertical.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-left: 1px solid silver;
    border: 0;
    color: white;
    width: 50px;
    height: 50px;
    display: block;
    color: var(--sl-color-neutral-0);
    order: 10;
    padding: 0 1em 0 1em;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_action_header:focus,
  body .et2_nextmatch .nm-mob-header button.nm_action_header:focus {
    outline: none;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_action_header.back,
  body .et2_nextmatch .nm-mob-header button.nm_action_header.back {
    background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
    -webkit-filter: none !important;
    background-color: white !important;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_delete_action,
  body .et2_nextmatch .nm-mob-header div.nm_delete_action {
    background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
    color: var(--sl-color-neutral-0);
    background-position: center;
    background-repeat: no-repeat;
    border-left: 1px solid silver;
    border: 0;
    color: black;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    display: none;
    order: 7;
    padding: 0 1em 0 1em;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div {
    order: 8;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 1px solid silver;
    border: 0;
    color: white;
    height: 50px;
    display: none;
    float: right;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div:focus,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div:focus {
    outline: none;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"],
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] {
    top: 0 !important;
    outline: none;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:first-child,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:first-child {
    display: none;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2),
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) {
    background-position: center;
    background-image: url(../../node_modules/bootstrap-icons/icons/star.svg) !important;
    background-size: 24px 24px;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) div:first-child,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] .et2_dropdown button:nth-child(2) div:first-child {
    display: none;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites {
    height: 250px;
    width: 100%;
    left: 0px !important;
    box-shadow: 0px 4px 5px 2px silver;
    border: 1px solid silver;
    overflow-y: auto !important;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item[data-id="blank"]:before,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item[data-id="blank"]:before {
    content: '';
    background-image: url(../../node_modules/bootstrap-icons/icons/trash3.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-left: 4px;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item:not([data-id="add"]):not([data-id="blank"]):before,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item:not([data-id="add"]):not([data-id="blank"]):before {
    content: '';
    background-image: url(../../node_modules/bootstrap-icons/icons/star.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-left: 4px;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 1px solid silver;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a {
    width: 100%;
    line-height: 30px;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a input,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a input {
    display: none;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a div.ui-icon-trash,
  body .et2_nextmatch .nm-mob-header div.nm_favorites_div div[name="favorite"] ul.favorites li.ui-menu-item a div.ui-icon-trash {
    display: block;
    padding-right: 8px;
  }
  :root .et2_nextmatch .nm-mob-header button.nm_toggle_header_on,
  body .et2_nextmatch .nm-mob-header button.nm_toggle_header_on {
    background-image: url(../../node_modules/bootstrap-icons/icons/x-lg.svg);
    -webkit-filter: none !important;
    background-color: white !important;
  }
  :root .et2_nextmatch .nm-mob-header et2-searchbox,
  body .et2_nextmatch .nm-mob-header et2-searchbox {
    order: -1;
    width: -webkit-fill-available;
  }
  :root .et2_nextmatch .nm-mob-header div.nm_appname_header,
  body .et2_nextmatch .nm-mob-header div.nm_appname_header {
    width: 100%;
    display: none;
    position: absolute;
    top: 0;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    font-size: 14pt;
    font-weight: bold;
    opacity: 0.2;
    text-align: center;
    padding-top: 13px;
    z-index: -1;
  }
  :root .et2_nextmatch .header_row_right,
  body .et2_nextmatch .header_row_right {
    height: var(--sl-font-size-large);
    width: 100%;
    padding: 0;
  }
  :root .et2_nextmatch .header_row_right div[id$=favorite_wrapper],
  body .et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
    margin: 0;
    top: 0 !important;
    height: var(--sl-font-size-large);
  }
  :root .et2_nextmatch .header_row_right *,
  body .et2_nextmatch .header_row_right * {
    float: left;
    max-width: 100% !important;
  }
  :root .et2_nextmatch .header_row_right .et2_dropdown button,
  body .et2_nextmatch .header_row_right .et2_dropdown button {
    height: var(--sl-font-size-large);
    width: var(--sl-font-size-large);
  }
  :root .et2_nextmatch .header_count,
  body .et2_nextmatch .header_count {
    margin: 0;
    height: var(--sl-font-size-large);
    font-size: var(--sl-font-size-large);
    margin-top: -3px;
    margin-right: 0px;
    float: right;
    border: none;
    border-radius: 0;
  }
  :root .et2_nextmatch .header_count span,
  body .et2_nextmatch .header_count span {
    font-size: var(--sl-font-size-large);
  }
  :root .et2_nextmatch table.egwGridView_grid tr div.h2_hbox,
  body .et2_nextmatch table.egwGridView_grid tr div.h2_hbox {
    padding-bottom: 4px;
  }
  :root .et2_nextmatch table.egwGridView_grid tr img,
  body .et2_nextmatch table.egwGridView_grid tr img {
    height: 12px;
  }
  :root .et2_nextmatch table.egwGridView_grid tr et2-image,
  body .et2_nextmatch table.egwGridView_grid tr et2-image {
    font-size: 12px;
    width: 12px;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.focused,
  body .et2_nextmatch table.egwGridView_grid tbody tr.focused {
    background-image: none;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]),
  body .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) {
    background: #b0bfd8 !important;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) *,
  body .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) * {
    color: white !important;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) td:last-child,
  body .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) td:last-child {
    position: relative;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) td:last-child:before,
  body .et2_nextmatch table.egwGridView_grid tbody tr.selected:not([class*="tile"]) td:last-child:before {
    content: " ";
    position: absolute;
    background: #b0bfd8;
    right: 0px;
    bottom: 0px;
    top: 0px;
    color: white;
    background-image: url(../../node_modules/bootstrap-icons/icons/check-lg.svg);
    background-repeat: no-repeat;
    height: auto;
    background-size: 20px;
    background-position: center;
    height: 99%;
    width: 99%;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr:hover,
  body .et2_nextmatch table.egwGridView_grid tbody tr:hover {
    background: transparent;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr td,
  body .et2_nextmatch table.egwGridView_grid tbody tr td {
    padding: 10px 0px 10px 0px;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_label,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_label,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_button,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_button,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_link,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_link,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox_ro,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_textbox_ro,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td .et2_email,
  body .et2_nextmatch table.egwGridView_grid tbody tr td .et2_email,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td img,
  body .et2_nextmatch table.egwGridView_grid tbody tr td img {
    padding: 8px 0px 0px 0px;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr td time.et2_label,
  body .et2_nextmatch table.egwGridView_grid tbody tr td time.et2_label,
  :root .et2_nextmatch table.egwGridView_grid tbody tr td span.mobile_cat_col,
  body .et2_nextmatch table.egwGridView_grid tbody tr td span.mobile_cat_col {
    padding: 0;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr td div.et2_progress,
  body .et2_nextmatch table.egwGridView_grid tbody tr td div.et2_progress {
    margin: 0;
  }
  :root .et2_nextmatch table.egwGridView_grid tbody tr.swipe,
  body .et2_nextmatch table.egwGridView_grid tbody tr.swipe {
    background-color: #ffc200;
    border: none;
  }
  :root .et2_nextmatch .egwGridView_outer,
  body .et2_nextmatch .egwGridView_outer {
    width: 100%;
  }
  :root .et2_nextmatch .egwGridView_outer thead,
  body .et2_nextmatch .egwGridView_outer thead {
    max-height: 1px;
    display: none;
  }
  :root .et2_nextmatch .egwGridView_outer thead tr th,
  body .et2_nextmatch .egwGridView_outer thead tr th {
    font-size: large;
  }
  :root .et2_nextmatch .egwGridView_outer td img,
  body .et2_nextmatch .egwGridView_outer td img {
    border: none;
  }
  :root .et2_details .et2_details_toggle:after,
  body .et2_details .et2_details_toggle:after {
    width: 30px;
    height: 30px;
    font-size: 18pt;
    text-align: center;
    padding: 9px;
  }
  et2-button-icon.plus_button {
    position: fixed !important;
    right: 15px;
    bottom: 15px;
    font-size: 45px;
    line-height: 45px;
    border-radius: var(--sl-border-radius-circle);
    z-index: 100;
    background-color: var(--application-color, var(--primary-color, var(--sl-color-primary-500)));
    border: none;
    margin: 0;
    padding: 0;
    color: var(--sl-color-neutral-0);
  }
  et2-button-icon.plus_button:hover,
  et2-button-icon.plus_button:active {
    background-color: #0c5da5;
  }
}
@media screen and (max-width: 600px) {
  et2-dialog {
    --width: 100%;
  }
  et2-dialog::part(panel) {
    /* make dialog full screen */
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
}
/**
 * These are utility classes used throughout egroupware, but aren't in etemplate.css
 * Most of this kind of thing will probably migrate from etemplate.css into here as webcomponents take over widget styles
 */
/*
	Printing
*/
@media screen {
  .onlyPrint {
    display: none !important;
  }
}
@media print {
  .noPrint {
    display: none !important;
  }
  body {
    height: auto;
  }
}
/**
 * allow to use Api\Framework::bodyClass('scrollVertical'); to enable scrolling of body
 */
body.scrollVertical {
  overflow-y: auto;
}
/** Theme customisations **/
/* imported here to make fast light/dark transitions */
:root,
:host,
html,
.sl-theme-light {
  /*
  color token generator using #4177a2
  https://codepen.io/claviska/full/QWveRgL

  make them important, otherwise the shoelace sl-light style overrides this in some cases, look for a different option?
   */
  --sl-color-primary-50: #f8fafb!important;
  --sl-color-primary-100: #e6edf3!important;
  --sl-color-primary-200: #d3e0ea!important;
  --sl-color-primary-300: #bfd1e0!important;
  --sl-color-primary-400: #a3bdd2 !important;
  --sl-color-primary-500: #80a4c1!important;
  --sl-color-primary-600: #5a89ae!important;
  --sl-color-primary-700: #3d7099!important;
  --sl-color-primary-800: #335d7e!important;
  --sl-color-primary-900: #24425a!important;
  --sl-color-primary-950: #162837!important;
  --sl-shadow-x-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.24);
  --sl-shadow-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.48);
  --sl-shadow-medium: 0 2px 4px hsla(240, 3.8%, 46.1%, 0.48);
  --sl-shadow-large: 0 2px 8px hsla(240, 3.8%, 46.1%, 0.48);
  --sl-shadow-x-large: 0 4px 16px hsla(240, 3.8%, 46.1%, 0.48);
  /*** APPLICATION ***/
  /*** End APPLICATION ***/
}
:root egw-app,
:host egw-app,
html egw-app,
.sl-theme-light egw-app {
  --application-header-text-color: var(--sl-color-neutral-100);
}
html[data-darkmode="1"],
.sl-theme-dark {
  background-color: black;
  color: var(--sl-color-neutral-700);
  --sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
  --sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
  --sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
  --sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
  --sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
  --sl-color-primary-500: var(--primary-color);
  --sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
  --sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
  --sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
  --sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
  --sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
  /*** HEADER ***/
  /*** APPLICATION ***/
  /*** End APPLICATION ***/
  /*** WIDGETS ***/
  /* This should mostly go away with webcomponents */
  /* Date widget (flatpickr dark theme)  */
  .flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #3f4458;
  -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #20222c;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #20222c;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #3f4458;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #20222c;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #3f4458;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: #3f4458;
  color: #fff;
  fill: #fff;
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: #fff;
  fill: #fff;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #eee;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(192,187,167,0.1);
}
.numInputWrapper span:active {
  background: rgba(192,187,167,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255,255,255,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(255,255,255,0.5);
}
.numInputWrapper:hover {
  background: rgba(192,187,167,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(192,187,167,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff;
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255,255,255,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: #3f4458;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(192,187,167,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #3f4458;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: #3f4458;
  color: #fff;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #20222c;
          box-shadow: -1px 0 0 #20222c;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #646c8c;
  border-color: #646c8c;
}
.flatpickr-day.today {
  border-color: #eee;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #eee;
  background: #eee;
  color: #3f4458;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #80cbc4;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #80cbc4;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #80cbc4;
          box-shadow: -10px 0 0 #80cbc4;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
          box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(255,255,255,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(255,255,255,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
          box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #20222c;
          box-shadow: 1px 0 0 #20222c;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(255,255,255,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(255,255,255,0.95);
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(255,255,255,0.95);
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #6a7395;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

  /** End WIDGETS **/
}
html[data-darkmode="1"] #egw_fw_topmenu_info_items #topmenu_info_timer:before,
.sl-theme-dark #egw_fw_topmenu_info_items #topmenu_info_timer:before {
  filter: initial;
}
html[data-darkmode="1"] egw-app,
.sl-theme-dark egw-app {
  --application-header-text-color: var(--sl-color-neutral-900);
}
html[data-darkmode="1"] .et2_container,
.sl-theme-dark .et2_container {
  background-color: initial;
}
html[data-darkmode="1"] .dialogFooterToolbar et2-button::part(base):not(:hover),
.sl-theme-dark .dialogFooterToolbar et2-button::part(base):not(:hover),
html[data-darkmode="1"] et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover),
.sl-theme-dark et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
  background-color: var(--sl-input-background-color);
}
html[data-darkmode="1"] .nextmatch_sortheader,
.sl-theme-dark .nextmatch_sortheader {
  color: #96bcd9;
}
html[data-darkmode="1"] .flatpickr-calendar,
.sl-theme-dark .flatpickr-calendar {
  background: var(--sl-panel-background-color);
  box-shadow: var(--sl-shadow-large);
}
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-innerContainer,
.sl-theme-dark .flatpickr-calendar .flatpickr-innerContainer {
  background: var(--sl-panel-background-color);
  border-bottom-color: var(--sl-panel-border-color);
}
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-months,
.sl-theme-dark .flatpickr-calendar .flatpickr-months {
  background-color: var(--sl-color-neutral-200);
}
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-months .flatpickr-month,
.sl-theme-dark .flatpickr-calendar .flatpickr-months .flatpickr-month,
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months,
.sl-theme-dark .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months {
  background: none;
  color: var(--sl-color-neutral-700);
}
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-weeks,
.sl-theme-dark .flatpickr-calendar .flatpickr-weeks,
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-days,
.sl-theme-dark .flatpickr-calendar .flatpickr-days {
  border-left-color: var(--sl-panel-border-color);
}
html[data-darkmode="1"] .flatpickr-calendar span.flatpickr-weekday,
.sl-theme-dark .flatpickr-calendar span.flatpickr-weekday {
  color: var(--sl-color-neutral-500);
  background-color: var(--sl-color-neutral-200);
}
html[data-darkmode="1"] .flatpickr-calendar .flatpickr-time,
.sl-theme-dark .flatpickr-calendar .flatpickr-time {
  background-color: transparent;
  border-color: var(--sl-panel-border-color);
}
.flatpickr-calendar.hasTime html[data-darkmode="1"] .flatpickr-calendar .flatpickr-time,
.flatpickr-calendar.hasTime .sl-theme-dark .flatpickr-calendar .flatpickr-time {
  border-top: var(--sl-panel-border-width) solid var(--sl-panel-border-color);
}
/** End theme customisations **/