@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/assets/NcDateTimePicker-BLEg7GJo.css

@@ -0,0 +1,851 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+/**
+* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+* SPDX-License-Identifier: AGPL-3.0-or-later
+*/
+.mx-icon-left:before,
+.mx-icon-right:before,
+.mx-icon-double-left:before,
+.mx-icon-double-right:before,
+.mx-icon-double-left:after,
+.mx-icon-double-right:after {
+  content: "";
+  position: relative;
+  top: -1px;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  border-style: solid;
+  border-color: currentColor;
+  border-width: 2px 0 0 2px;
+  border-radius: 1px;
+  box-sizing: border-box;
+  transform-origin: center;
+  transform: rotate(-45deg) scale(0.7);
+}
+.mx-icon-double-left:after {
+  left: -4px;
+}
+.mx-icon-double-right:before {
+  left: 4px;
+}
+.mx-icon-right:before,
+.mx-icon-double-right:before,
+.mx-icon-double-right:after {
+  transform: rotate(135deg) scale(0.7);
+}
+.mx-btn {
+  box-sizing: border-box;
+  line-height: 1;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 7px 15px;
+  margin: 0;
+  cursor: pointer;
+  background-color: transparent;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  color: #73879c;
+  white-space: nowrap;
+}
+.mx-btn:hover {
+  border-color: #1284e7;
+  color: #1284e7;
+}
+.mx-btn-text {
+  border: 0;
+  padding: 0 4px;
+  text-align: left;
+  line-height: inherit;
+}
+.mx-scrollbar {
+  height: 100%;
+}
+.mx-scrollbar:hover .mx-scrollbar-track {
+  opacity: 1;
+}
+.mx-scrollbar-wrap {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.mx-scrollbar-track {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  width: 6px;
+  z-index: 1;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.24s ease-out;
+}
+.mx-scrollbar-track .mx-scrollbar-thumb {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: rgba(144, 147, 153, 0.3);
+  transition: background-color 0.3s;
+}
+.mx-zoom-in-down-enter-active,
+.mx-zoom-in-down-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transform-origin: center top;
+}
+.mx-zoom-in-down-enter,
+.mx-zoom-in-down-enter-from,
+.mx-zoom-in-down-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+.mx-datepicker {
+  position: relative;
+  display: inline-block;
+  width: 210px;
+}
+.mx-datepicker svg {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+.mx-datepicker-range {
+  width: 320px;
+}
+.mx-datepicker-inline {
+  width: auto;
+}
+.mx-input-wrapper {
+  position: relative;
+}
+.mx-input-wrapper .mx-icon-clear {
+  display: none;
+}
+.mx-input-wrapper:hover .mx-icon-clear {
+  display: block;
+}
+.mx-input-wrapper:hover .mx-icon-clear + .mx-icon-calendar {
+  display: none;
+}
+.mx-input {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 34px;
+  padding: 6px 30px;
+  padding-left: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.mx-input:hover, .mx-input:focus {
+  border-color: #409aff;
+}
+.mx-input:disabled, .mx-input.disabled {
+  color: #ccc;
+  background-color: #f3f3f3;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+.mx-input:focus {
+  outline: none;
+}
+.mx-input::-ms-clear {
+  display: none;
+}
+.mx-icon-calendar,
+.mx-icon-clear {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  font-size: 16px;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.5);
+  vertical-align: middle;
+}
+.mx-icon-clear {
+  cursor: pointer;
+}
+.mx-icon-clear:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+.mx-datepicker-main {
+  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
+  color: #73879c;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+}
+.mx-datepicker-popup {
+  position: absolute;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  z-index: 2001;
+}
+.mx-datepicker-sidebar {
+  float: left;
+  box-sizing: border-box;
+  width: 100px;
+  padding: 6px;
+  overflow: auto;
+}
+.mx-datepicker-sidebar + .mx-datepicker-content {
+  margin-left: 100px;
+  border-left: 1px solid #e8e8e8;
+}
+.mx-datepicker-body {
+  position: relative;
+  user-select: none;
+}
+.mx-btn-shortcut {
+  display: block;
+  padding: 0 6px;
+  line-height: 24px;
+}
+.mx-datepicker-header {
+  padding: 6px 8px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.mx-datepicker-footer {
+  padding: 6px 8px;
+  text-align: right;
+  border-top: 1px solid #e8e8e8;
+}
+.mx-calendar-range,
+.mx-time-range {
+  display: flex;
+}
+@media (max-width: 750px) {
+  .mx-calendar-range,
+  .mx-time-range {
+    flex-direction: column;
+  }
+}
+.mx-calendar {
+  box-sizing: border-box;
+  width: 248px;
+  padding: 6px 12px;
+}
+.mx-calendar + .mx-calendar {
+  border-left: 1px solid #e8e8e8;
+}
+.mx-calendar-header, .mx-time-header {
+  box-sizing: border-box;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  overflow: hidden;
+}
+.mx-btn-icon-left,
+.mx-btn-icon-double-left {
+  float: left;
+}
+.mx-btn-icon-right,
+.mx-btn-icon-double-right {
+  float: right;
+}
+.mx-calendar-header-label {
+  font-size: 14px;
+}
+.mx-calendar-decade-separator {
+  margin: 0 2px;
+}
+.mx-calendar-decade-separator:after {
+  content: "~";
+}
+.mx-calendar-content {
+  position: relative;
+  height: 224px;
+  box-sizing: border-box;
+}
+.mx-calendar-content .cell {
+  cursor: pointer;
+}
+.mx-calendar-content .cell:hover {
+  color: #73879c;
+  background-color: #f3f9fe;
+}
+.mx-calendar-content .cell.active {
+  color: #fff;
+  background-color: #1284e7;
+}
+.mx-calendar-content .cell.in-range, .mx-calendar-content .cell.hover-in-range {
+  color: #73879c;
+  background-color: #dbedfb;
+}
+.mx-calendar-content .cell.disabled {
+  cursor: not-allowed;
+  color: #ccc;
+  background-color: #f3f3f3;
+}
+.mx-calendar-week-mode .mx-date-row {
+  cursor: pointer;
+}
+.mx-calendar-week-mode .mx-date-row:hover {
+  background-color: #f3f9fe;
+}
+.mx-calendar-week-mode .mx-date-row.mx-active-week {
+  background-color: #dbedfb;
+}
+.mx-calendar-week-mode .mx-date-row .cell:hover {
+  color: inherit;
+  background-color: transparent;
+}
+.mx-calendar-week-mode .mx-date-row .cell.active {
+  color: inherit;
+  background-color: transparent;
+}
+.mx-week-number {
+  opacity: 0.5;
+}
+.mx-table {
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+.mx-table th {
+  padding: 0;
+  font-weight: 500;
+  vertical-align: middle;
+}
+.mx-table td {
+  padding: 0;
+  vertical-align: middle;
+}
+.mx-table-date td,
+.mx-table-date th {
+  height: 32px;
+  font-size: 12px;
+}
+.mx-table-date .today {
+  color: #2a90e9;
+}
+.mx-table-date .cell.not-current-month {
+  color: #ccc;
+  background: none;
+}
+.mx-time {
+  flex: 1;
+  width: 224px;
+  background: #fff;
+}
+.mx-time + .mx-time {
+  border-left: 1px solid #e8e8e8;
+}
+.mx-date-time {
+  position: relative;
+  width: 248px;
+  height: 270px;
+}
+.mx-date-time .mx-time {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.mx-date-time-range {
+  position: relative;
+  width: 496px;
+  height: 270px;
+}
+.mx-date-time-range .mx-time-range {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.mx-time-header {
+  border-bottom: 1px solid #e8e8e8;
+}
+.mx-time-content {
+  height: 224px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.mx-time-columns {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.mx-time-column {
+  flex: 1;
+  position: relative;
+  border-left: 1px solid #e8e8e8;
+  text-align: center;
+}
+.mx-time-column:first-child {
+  border-left: 0;
+}
+.mx-time-column .mx-time-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mx-time-column .mx-time-list::after {
+  content: "";
+  display: block;
+  height: 192px;
+}
+.mx-time-column .mx-time-item {
+  cursor: pointer;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px;
+}
+.mx-time-column .mx-time-item:hover {
+  color: #73879c;
+  background-color: #f3f9fe;
+}
+.mx-time-column .mx-time-item.active {
+  color: #1284e7;
+  background-color: transparent;
+  font-weight: 700;
+}
+.mx-time-column .mx-time-item.disabled {
+  cursor: not-allowed;
+  color: #ccc;
+  background-color: #f3f3f3;
+}
+.mx-time-option {
+  cursor: pointer;
+  padding: 8px 10px;
+  font-size: 14px;
+  line-height: 20px;
+}
+.mx-time-option:hover {
+  color: #73879c;
+  background-color: #f3f9fe;
+}
+.mx-time-option.active {
+  color: #1284e7;
+  background-color: transparent;
+  font-weight: 700;
+}
+.mx-time-option.disabled {
+  cursor: not-allowed;
+  color: #ccc;
+  background-color: #f3f3f3;
+}
+.mx-datepicker[data-v-ceff315] {
+  user-select: none;
+  color: var(--color-main-text);
+  /* INPUT CONTAINER */
+}
+.mx-datepicker[data-v-ceff315] svg {
+  fill: var(--color-main-text);
+}
+.mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-input {
+  width: 100%;
+  border: 2px solid var(--color-border-maxcontrast);
+  background-color: var(--color-main-background);
+  background-clip: content-box;
+}
+.mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-input:active:not(.disabled), .mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-input:hover:not(.disabled), .mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-input:focus:not(.disabled) {
+  border-color: var(--color-primary-element);
+}
+.mx-datepicker[data-v-ceff315] .mx-input-wrapper:disabled, .mx-datepicker[data-v-ceff315] .mx-input-wrapper.disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-icon-calendar,
+.mx-datepicker[data-v-ceff315] .mx-input-wrapper .mx-icon-clear {
+  color: var(--color-text-lighter);
+}
+.mx-datepicker-main {
+  color: var(--color-main-text);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-main-background);
+  font-family: var(--font-face) !important;
+  line-height: 1.5;
+}
+.mx-datepicker-main svg {
+  fill: var(--color-main-text);
+}
+.mx-datepicker-main.mx-datepicker-popup {
+  z-index: 2000;
+  box-shadow: none;
+}
+.mx-datepicker-main.mx-datepicker-popup .mx-datepicker-sidebar + .mx-datepicker-content {
+  border-left: 1px solid var(--color-border);
+}
+.mx-datepicker-main.show-week-number .mx-calendar {
+  width: 296px;
+}
+.mx-datepicker-main .mx-datepicker-header {
+  border-bottom: 1px solid var(--color-border);
+}
+.mx-datepicker-main .mx-datepicker-footer {
+  border-top: 1px solid var(--color-border);
+}
+.mx-datepicker-main .mx-datepicker-btn-confirm {
+  background-color: var(--color-primary-element);
+  border-color: var(--color-primary-element);
+  color: var(--color-primary-element-text) !important;
+  opacity: 1 !important;
+}
+.mx-datepicker-main .mx-datepicker-btn-confirm:hover {
+  background-color: var(--color-primary-element-light) !important;
+  border-color: var(--color-primary-element-light) !important;
+}
+.mx-datepicker-main .mx-calendar {
+  width: 264px;
+  padding: 5px;
+}
+.mx-datepicker-main .mx-calendar.mx-calendar-week-mode {
+  width: 296px;
+}
+.mx-datepicker-main .mx-time + .mx-time,
+.mx-datepicker-main .mx-calendar + .mx-calendar {
+  border-left: 1px solid var(--color-border);
+}
+.mx-datepicker-main .mx-range-wrapper {
+  display: flex;
+  overflow: hidden;
+}
+.mx-datepicker-main .mx-range-wrapper .mx-calendar-content .mx-table-date .cell.active {
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.mx-datepicker-main .mx-range-wrapper .mx-calendar-content .mx-table-date .cell.in-range + .cell.active {
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+.mx-datepicker-main .mx-table {
+  text-align: center;
+}
+.mx-datepicker-main .mx-table thead > tr > th {
+  text-align: center;
+  opacity: 0.5;
+  color: var(--color-text-lighter);
+}
+.mx-datepicker-main .mx-table tr:focus,
+.mx-datepicker-main .mx-table tr:hover,
+.mx-datepicker-main .mx-table tr:active {
+  background-color: transparent;
+}
+.mx-datepicker-main .mx-table .cell {
+  transition: all 100ms ease-in-out;
+  text-align: center;
+  opacity: 0.7;
+  border-radius: 50px;
+}
+.mx-datepicker-main .mx-table .cell > * {
+  cursor: pointer;
+}
+.mx-datepicker-main .mx-table .cell.today {
+  opacity: 1;
+  color: var(--color-primary-element);
+  font-weight: bold;
+}
+.mx-datepicker-main .mx-table .cell.today:hover, .mx-datepicker-main .mx-table .cell.today:focus {
+  color: var(--color-primary-element-text);
+}
+.mx-datepicker-main .mx-table .cell.in-range, .mx-datepicker-main .mx-table .cell.disabled {
+  border-radius: 0;
+  font-weight: normal;
+}
+.mx-datepicker-main .mx-table .cell.in-range {
+  opacity: 0.7;
+}
+.mx-datepicker-main .mx-table .cell.not-current-month {
+  opacity: 0.5;
+  color: var(--color-text-lighter);
+}
+.mx-datepicker-main .mx-table .cell.not-current-month:hover, .mx-datepicker-main .mx-table .cell.not-current-month:focus {
+  opacity: 1;
+}
+.mx-datepicker-main .mx-table .cell:hover, .mx-datepicker-main .mx-table .cell:focus, .mx-datepicker-main .mx-table .cell.actived, .mx-datepicker-main .mx-table .cell.active, .mx-datepicker-main .mx-table .cell.in-range {
+  opacity: 1;
+  color: var(--color-primary-element-text);
+  background-color: var(--color-primary-element);
+  font-weight: bold;
+}
+.mx-datepicker-main .mx-table .cell.disabled {
+  opacity: 0.5;
+  color: var(--color-text-lighter);
+  border-radius: 0;
+  background-color: var(--color-background-darker);
+}
+.mx-datepicker-main .mx-table .mx-week-number {
+  text-align: center;
+  opacity: 0.7;
+  border-radius: 50px;
+}
+.mx-datepicker-main .mx-table span.mx-week-number,
+.mx-datepicker-main .mx-table li.mx-week-number,
+.mx-datepicker-main .mx-table span.cell,
+.mx-datepicker-main .mx-table li.cell {
+  min-height: 32px;
+}
+.mx-datepicker-main .mx-table.mx-table-date thead, .mx-datepicker-main .mx-table.mx-table-date tbody, .mx-datepicker-main .mx-table.mx-table-year, .mx-datepicker-main .mx-table.mx-table-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.mx-datepicker-main .mx-table.mx-table-date thead tr, .mx-datepicker-main .mx-table.mx-table-date tbody tr, .mx-datepicker-main .mx-table.mx-table-year tr, .mx-datepicker-main .mx-table.mx-table-month tr {
+  display: inline-flex;
+  align-items: center;
+  flex: 1 1 32px;
+  justify-content: space-around;
+  min-height: 32px;
+}
+.mx-datepicker-main .mx-table.mx-table-date thead th,
+.mx-datepicker-main .mx-table.mx-table-date thead td, .mx-datepicker-main .mx-table.mx-table-date tbody th,
+.mx-datepicker-main .mx-table.mx-table-date tbody td, .mx-datepicker-main .mx-table.mx-table-year th,
+.mx-datepicker-main .mx-table.mx-table-year td, .mx-datepicker-main .mx-table.mx-table-month th,
+.mx-datepicker-main .mx-table.mx-table-month td {
+  display: flex;
+  align-items: center;
+  flex: 0 1 32%;
+  justify-content: center;
+  min-width: 32px;
+  height: 95%;
+  min-height: 32px;
+  transition: background 100ms ease-in-out;
+}
+.mx-datepicker-main .mx-table.mx-table-year tr th,
+.mx-datepicker-main .mx-table.mx-table-year tr td {
+  flex-basis: 48%;
+}
+.mx-datepicker-main .mx-table.mx-table-date tr th,
+.mx-datepicker-main .mx-table.mx-table-date tr td {
+  flex-basis: 32px;
+}
+.mx-datepicker-main .mx-btn {
+  min-width: 32px;
+  height: 32px;
+  margin: 0 2px !important;
+  padding: 7px 10px;
+  cursor: pointer;
+  text-decoration: none;
+  opacity: 0.5;
+  color: var(--color-text-lighter);
+  border-radius: 32px;
+  line-height: 20px;
+}
+.mx-datepicker-main .mx-btn:hover, .mx-datepicker-main .mx-btn:focus {
+  opacity: 1;
+  color: var(--color-main-text);
+  background-color: var(--color-background-darker);
+}
+.mx-datepicker-main .mx-calendar-header, .mx-datepicker-main .mx-time-header {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 44px;
+  margin-bottom: 4px;
+}
+.mx-datepicker-main .mx-calendar-header button, .mx-datepicker-main .mx-time-header button {
+  min-width: 32px;
+  min-height: 32px;
+  margin: 0;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  opacity: 0.7;
+  color: var(--color-main-text);
+  border-radius: 32px;
+  line-height: 20px;
+}
+.mx-datepicker-main .mx-calendar-header button:hover, .mx-datepicker-main .mx-time-header button:hover, .mx-datepicker-main .mx-calendar-header button:focus, .mx-datepicker-main .mx-time-header button:focus {
+  opacity: 1;
+  color: var(--color-main-text);
+  background-color: var(--color-background-darker);
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right {
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  padding: 0;
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i {
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+  filter: var(--background-invert-if-dark);
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i::before {
+  content: none;
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-text, .mx-datepicker-main .mx-time-header button.mx-btn-text {
+  line-height: initial;
+}
+.mx-datepicker-main .mx-calendar-header .mx-calendar-header-label, .mx-datepicker-main .mx-time-header .mx-calendar-header-label {
+  display: flex;
+}
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-left > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-double-left > i {
+  background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M18.4%207.4L17%206l-6%206%206%206%201.4-1.4-4.6-4.6%204.6-4.6m-6%200L11%206l-6%206%206%206%201.4-1.4L7.8%2012l4.6-4.6z'/%3e%3c/svg%3e");
+}
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-left > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-left > i {
+  background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M15.4%2016.6L10.8%2012l4.6-4.6L14%206l-6%206%206%206%201.4-1.4z'/%3e%3c/svg%3e");
+}
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-right > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-right > i {
+  background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M8.6%2016.6l4.6-4.6-4.6-4.6L10%206l6%206-6%206-1.4-1.4z'/%3e%3c/svg%3e");
+}
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-right > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-double-right > i {
+  background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M5.6%207.4L7%206l6%206-6%206-1.4-1.4%204.6-4.6-4.6-4.6m6%200L13%206l6%206-6%206-1.4-1.4%204.6-4.6-4.6-4.6z'/%3e%3c/svg%3e");
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right {
+  order: 2;
+}
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right {
+  order: 3;
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row .mx-week-number {
+  font-weight: bold;
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row:hover, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week {
+  opacity: 1;
+  border-radius: 50px;
+  background-color: var(--color-background-dark);
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row:hover td, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week td {
+  background-color: transparent;
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row:hover td, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row:hover td:hover, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row:hover td:focus, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week td, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week td:hover, .mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week td:focus {
+  color: inherit;
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week {
+  color: var(--color-primary-element-text);
+  background-color: var(--color-primary-element);
+}
+.mx-datepicker-main .mx-calendar-week-mode .mx-date-row.mx-active-week td {
+  opacity: 0.7;
+  font-weight: normal;
+}
+.mx-datepicker-main .mx-time {
+  background-color: var(--color-main-background);
+}
+.mx-datepicker-main .mx-time .mx-time-header {
+  justify-content: center;
+  border-bottom: 1px solid var(--color-border);
+}
+.mx-datepicker-main .mx-time .mx-time-column {
+  border-left: 1px solid var(--color-border);
+}
+.mx-datepicker-main .mx-time .mx-time-option.active, .mx-datepicker-main .mx-time .mx-time-option:hover,
+.mx-datepicker-main .mx-time .mx-time-item.active,
+.mx-datepicker-main .mx-time .mx-time-item:hover {
+  color: var(--color-primary-element-text);
+  background-color: var(--color-primary-element);
+}
+.mx-datepicker-main .mx-time .mx-time-option.disabled,
+.mx-datepicker-main .mx-time .mx-time-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: var(--color-main-text);
+  background-color: var(--color-main-background);
+}/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon[data-v-4be9df7f] {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+.mx-datepicker[data-v-4be9df7f] .mx-input-wrapper .mx-input {
+  background-clip: border-box;
+}
+.datetime-picker-inline-icon[data-v-4be9df7f] {
+  opacity: 0.3;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0 !important;
+  margin: 0;
+}
+.datetime-picker-inline-icon--highlighted[data-v-4be9df7f] {
+  opacity: 0.7;
+}
+.datetime-picker-inline-icon[data-v-4be9df7f]:focus, .datetime-picker-inline-icon[data-v-4be9df7f]:hover {
+  opacity: 1;
+}/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {
+  border-radius: var(--border-radius-large);
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper .v-popper__inner {
+  padding: 4px;
+  border-radius: var(--border-radius-large);
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper .v-popper__inner .timezone-popover-wrapper__label {
+  padding: 4px 0;
+  padding-left: 14px;
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper .v-popper__inner .timezone-popover-wrapper__timezone-select.v-select .vs__dropdown-toggle {
+  border-radius: calc(var(--border-radius-large) - 4px);
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper .v-popper__inner .timezone-popover-wrapper__timezone-select.v-select.vs--open .vs__dropdown-toggle {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper .v-popper__inner .timezone-popover-wrapper__timezone-select.v-select.vs--open.select--drop-up .vs__dropdown-toggle {
+  border-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);
+}
+.vs__dropdown-menu--floating {
+  z-index: 100001 !important;
+}