@databricks/design-system 0.2.1 → 1.0.0

package/dist/index-dark.css

@@ -3725,7 +3725,7 @@ a.du-bois-dark-btn-sm {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   box-sizing: border-box;
   padding: 4px 0;
   overflow: hidden;
@@ -4124,6 +4124,1261 @@ a.du-bois-dark-btn-sm {
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.du-bois-dark-picker {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #ffffffd6;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: tnum;
+  padding: 8px 7px 8px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  border: 1px solid #434343;
+  border-radius: 4px;
+  transition: border 0.3s, box-shadow 0.3s;
+}
+.du-bois-dark-picker:hover,
+.du-bois-dark-picker-focused {
+  border-color: #1d517c;
+  border-right-width: 1px !important;
+}
+.du-bois-dark-picker-focused {
+  border-color: #2272B4;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(34, 114, 180, 0.2);
+}
+.du-bois-dark-picker.du-bois-dark-picker-disabled {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #434343;
+  cursor: not-allowed;
+}
+.du-bois-dark-picker.du-bois-dark-picker-disabled .du-bois-dark-picker-suffix {
+  color: rgba(255, 255, 255, 0.3);
+}
+.du-bois-dark-picker.du-bois-dark-picker-borderless {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.du-bois-dark-picker-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+.du-bois-dark-picker-input > input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 7px;
+  color: #ffffffd6;
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid #434343;
+  border-radius: 4px;
+  transition: all 0.3s;
+  flex: auto;
+  min-width: 1px;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.du-bois-dark-picker-input > input::-moz-placeholder {
+  opacity: 1;
+}
+.du-bois-dark-picker-input > input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+.du-bois-dark-picker-input > input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+.du-bois-dark-picker-input > input:hover {
+  border-color: #1d517c;
+  border-right-width: 1px !important;
+}
+.du-bois-dark-picker-input > input:focus,
+.du-bois-dark-picker-input > input-focused {
+  border-color: #2272B4;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(34, 114, 180, 0.2);
+}
+.du-bois-dark-picker-input > input-disabled {
+  color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.08);
+  cursor: not-allowed;
+  opacity: 1;
+}
+.du-bois-dark-picker-input > input-disabled:hover {
+  border-color: #434343;
+  border-right-width: 1px !important;
+}
+.du-bois-dark-picker-input > input[disabled] {
+  color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.08);
+  cursor: not-allowed;
+  opacity: 1;
+}
+.du-bois-dark-picker-input > input[disabled]:hover {
+  border-color: #434343;
+  border-right-width: 1px !important;
+}
+.du-bois-dark-picker-input > input-borderless,
+.du-bois-dark-picker-input > input-borderless:hover,
+.du-bois-dark-picker-input > input-borderless:focus,
+.du-bois-dark-picker-input > input-borderless-focused,
+.du-bois-dark-picker-input > input-borderless-disabled,
+.du-bois-dark-picker-input > input-borderless[disabled] {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+textarea.du-bois-dark-picker-input > input {
+  max-width: 100%;
+  height: auto;
+  min-height: 40px;
+  line-height: 1.5715;
+  vertical-align: bottom;
+  transition: all 0.3s, height 0s;
+}
+.du-bois-dark-picker-input > input-lg {
+  padding: 6.5px 7px;
+  font-size: 16px;
+}
+.du-bois-dark-picker-input > input-sm {
+  padding: 4px 3px;
+}
+.du-bois-dark-picker-input > input:focus {
+  box-shadow: none;
+}
+.du-bois-dark-picker-input > input[disabled] {
+  background: transparent;
+}
+.du-bois-dark-picker-input:hover .du-bois-dark-picker-clear {
+  opacity: 1;
+}
+.du-bois-dark-picker-input-placeholder > input {
+  color: rgba(255, 255, 255, 0.3);
+}
+.du-bois-dark-picker-large {
+  padding: 6.5px 7px 6.5px;
+}
+.du-bois-dark-picker-large .du-bois-dark-picker-input > input {
+  font-size: 16px;
+}
+.du-bois-dark-picker-small {
+  padding: 4px 3px 4px;
+}
+.du-bois-dark-picker-suffix {
+  align-self: center;
+  margin-left: 2px;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 1;
+  pointer-events: none;
+}
+.du-bois-dark-picker-suffix > * {
+  vertical-align: top;
+}
+.du-bois-dark-picker-clear {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 1;
+  background: #141414;
+  transform: translateY(-50%);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s, color 0.3s;
+}
+.du-bois-dark-picker-clear > * {
+  vertical-align: top;
+}
+.du-bois-dark-picker-clear:hover {
+  color: #ffffff99;
+}
+.du-bois-dark-picker-separator {
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 16px;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 16px;
+  vertical-align: top;
+  cursor: default;
+}
+.du-bois-dark-picker-focused .du-bois-dark-picker-separator {
+  color: #ffffff99;
+}
+.du-bois-dark-picker-disabled .du-bois-dark-picker-range-separator .du-bois-dark-picker-separator {
+  cursor: not-allowed;
+}
+.du-bois-dark-picker-range {
+  position: relative;
+  display: inline-flex;
+}
+.du-bois-dark-picker-range .du-bois-dark-picker-clear {
+  right: 7px;
+}
+.du-bois-dark-picker-range:hover .du-bois-dark-picker-clear {
+  opacity: 1;
+}
+.du-bois-dark-picker-range .du-bois-dark-picker-active-bar {
+  bottom: -1px;
+  height: 2px;
+  margin-left: 7px;
+  background: #2272B4;
+  opacity: 0;
+  transition: all 0.3s ease-out;
+  pointer-events: none;
+}
+.du-bois-dark-picker-range.du-bois-dark-picker-focused .du-bois-dark-picker-active-bar {
+  opacity: 1;
+}
+.du-bois-dark-picker-range-separator {
+  align-items: center;
+  padding: 0 4px;
+  line-height: 1;
+}
+.du-bois-dark-picker-range.du-bois-dark-picker-small .du-bois-dark-picker-clear {
+  right: 3px;
+}
+.du-bois-dark-picker-range.du-bois-dark-picker-small .du-bois-dark-picker-active-bar {
+  margin-left: 3px;
+}
+.du-bois-dark-picker-dropdown {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #ffffffd6;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: tnum;
+  position: absolute;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
+}
+.du-bois-dark-picker-dropdown-hidden {
+  display: none;
+}
+.du-bois-dark-picker-dropdown-placement-bottomLeft .du-bois-dark-picker-range-arrow {
+  top: 1.66666667px;
+  display: block;
+  transform: rotate(-45deg);
+}
+.du-bois-dark-picker-dropdown-placement-topLeft .du-bois-dark-picker-range-arrow {
+  bottom: 1.66666667px;
+  display: block;
+  transform: rotate(135deg);
+}
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-enter.du-bois-dark-slide-up-enter-active.du-bois-dark-picker-dropdown-placement-topLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-enter.du-bois-dark-slide-up-enter-active.du-bois-dark-picker-dropdown-placement-topRight,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-appear.du-bois-dark-slide-up-appear-active.du-bois-dark-picker-dropdown-placement-topLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-appear.du-bois-dark-slide-up-appear-active.du-bois-dark-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-enter.du-bois-dark-slide-up-enter-active.du-bois-dark-picker-dropdown-placement-bottomLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-enter.du-bois-dark-slide-up-enter-active.du-bois-dark-picker-dropdown-placement-bottomRight,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-appear.du-bois-dark-slide-up-appear-active.du-bois-dark-picker-dropdown-placement-bottomLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-appear.du-bois-dark-slide-up-appear-active.du-bois-dark-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-leave.du-bois-dark-slide-up-leave-active.du-bois-dark-picker-dropdown-placement-topLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-leave.du-bois-dark-slide-up-leave-active.du-bois-dark-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-leave.du-bois-dark-slide-up-leave-active.du-bois-dark-picker-dropdown-placement-bottomLeft,
+.du-bois-dark-picker-dropdown.du-bois-dark-slide-up-leave.du-bois-dark-slide-up-leave-active.du-bois-dark-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.du-bois-dark-picker-dropdown-range {
+  padding: 6.66666667px 0;
+}
+.du-bois-dark-picker-dropdown-range-hidden {
+  display: none;
+}
+.du-bois-dark-picker-dropdown .du-bois-dark-picker-panel > .du-bois-dark-picker-time-panel {
+  padding-top: 2px;
+}
+.du-bois-dark-picker-ranges {
+  margin-bottom: 0;
+  padding: 2px 8px;
+  overflow: hidden;
+  line-height: 36px;
+  text-align: left;
+  list-style: none;
+}
+.du-bois-dark-picker-ranges > li {
+  display: inline-block;
+}
+.du-bois-dark-picker-ranges .du-bois-dark-picker-preset > .du-bois-dark-tag-blue {
+  color: #2272B4;
+  background: #121921;
+  border-color: #183044;
+  cursor: pointer;
+}
+.du-bois-dark-picker-ranges .du-bois-dark-picker-ok {
+  float: right;
+  margin-left: 4px;
+}
+.du-bois-dark-picker-range-wrapper {
+  display: flex;
+}
+.du-bois-dark-picker-range-arrow {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  width: 10px;
+  height: 10px;
+  margin-left: 10.5px;
+  box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.06);
+  transition: left 0.3s ease-out;
+}
+.du-bois-dark-picker-range-arrow::after {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 10px;
+  height: 10px;
+  border: 5px solid #303030;
+  border-color: #1f1f1f #1f1f1f transparent transparent;
+  content: '';
+}
+.du-bois-dark-picker-panel-container {
+  overflow: hidden;
+  vertical-align: top;
+  background: #1f1f1f;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  transition: margin 0.3s;
+}
+.du-bois-dark-picker-panel-container .du-bois-dark-picker-panels {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  direction: ltr;
+}
+.du-bois-dark-picker-panel-container .du-bois-dark-picker-panel {
+  vertical-align: top;
+  background: transparent;
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.du-bois-dark-picker-panel-container .du-bois-dark-picker-panel .du-bois-dark-picker-content,
+.du-bois-dark-picker-panel-container .du-bois-dark-picker-panel table {
+  text-align: center;
+}
+.du-bois-dark-picker-panel-container .du-bois-dark-picker-panel-focused {
+  border-color: #303030;
+}
+.du-bois-dark-picker-panel {
+  display: inline-flex;
+  flex-direction: column;
+  text-align: center;
+  background: #1f1f1f;
+  border: 1px solid #303030;
+  border-radius: 4px;
+  outline: none;
+}
+.du-bois-dark-picker-panel-focused {
+  border-color: #2272B4;
+}
+.du-bois-dark-picker-decade-panel,
+.du-bois-dark-picker-year-panel,
+.du-bois-dark-picker-quarter-panel,
+.du-bois-dark-picker-month-panel,
+.du-bois-dark-picker-week-panel,
+.du-bois-dark-picker-date-panel,
+.du-bois-dark-picker-time-panel {
+  display: flex;
+  flex-direction: column;
+  width: 272px;
+}
+.du-bois-dark-picker-header {
+  display: flex;
+  padding: 0 4px;
+  color: rgba(255, 255, 255, 0.85);
+  border-bottom: 1px solid #303030;
+}
+.du-bois-dark-picker-header > * {
+  flex: none;
+}
+.du-bois-dark-picker-header button {
+  padding: 0;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 40px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.du-bois-dark-picker-header > button {
+  min-width: 1.6em;
+  font-size: 14px;
+}
+.du-bois-dark-picker-header > button:hover {
+  color: #ffffffd6;
+}
+.du-bois-dark-picker-header-view {
+  flex: auto;
+  font-weight: 500;
+  line-height: 40px;
+}
+.du-bois-dark-picker-header-view button {
+  color: inherit;
+  font-weight: inherit;
+}
+.du-bois-dark-picker-header-view button:not(:first-child) {
+  margin-left: 4px;
+}
+.du-bois-dark-picker-header-view button:hover {
+  color: #2272B4;
+}
+.du-bois-dark-picker-prev-icon,
+.du-bois-dark-picker-next-icon,
+.du-bois-dark-picker-super-prev-icon,
+.du-bois-dark-picker-super-next-icon {
+  position: relative;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+}
+.du-bois-dark-picker-prev-icon::before,
+.du-bois-dark-picker-next-icon::before,
+.du-bois-dark-picker-super-prev-icon::before,
+.du-bois-dark-picker-super-next-icon::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border: 0 solid currentColor;
+  border-width: 1.5px 0 0 1.5px;
+  content: '';
+}
+.du-bois-dark-picker-super-prev-icon::after,
+.du-bois-dark-picker-super-next-icon::after {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border: 0 solid currentColor;
+  border-width: 1.5px 0 0 1.5px;
+  content: '';
+}
+.du-bois-dark-picker-prev-icon,
+.du-bois-dark-picker-super-prev-icon {
+  transform: rotate(-45deg);
+}
+.du-bois-dark-picker-next-icon,
+.du-bois-dark-picker-super-next-icon {
+  transform: rotate(135deg);
+}
+.du-bois-dark-picker-content {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.du-bois-dark-picker-content th,
+.du-bois-dark-picker-content td {
+  position: relative;
+  min-width: 24px;
+  font-weight: 400;
+}
+.du-bois-dark-picker-content th {
+  height: 30px;
+  color: #ffffffd6;
+  line-height: 30px;
+}
+.du-bois-dark-picker-cell {
+  padding: 3px 0;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+}
+.du-bois-dark-picker-cell-in-view {
+  color: #ffffffd6;
+}
+.du-bois-dark-picker-cell::before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 24px;
+  transform: translateY(-50%);
+  content: '';
+}
+.du-bois-dark-picker-cell .du-bois-dark-picker-cell-inner {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  transition: background 0.3s, border 0.3s;
+}
+.du-bois-dark-picker-cell:hover:not(.du-bois-dark-picker-cell-in-view) .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-cell:hover:not(.du-bois-dark-picker-cell-selected):not(.du-bois-dark-picker-cell-range-start):not(.du-bois-dark-picker-cell-range-end):not(.du-bois-dark-picker-cell-range-hover-start):not(.du-bois-dark-picker-cell-range-hover-end) .du-bois-dark-picker-cell-inner {
+  background: rgba(255, 255, 255, 0.08);
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-today .du-bois-dark-picker-cell-inner::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid #2272B4;
+  border-radius: 4px;
+  content: '';
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range {
+  position: relative;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range::before {
+  background: #121921;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-selected .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end .du-bois-dark-picker-cell-inner {
+  color: #fff;
+  background: #2272B4;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start:not(.du-bois-dark-picker-cell-range-start-single)::before,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end:not(.du-bois-dark-picker-cell-range-end-single)::before {
+  background: #121921;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start::before {
+  left: 50%;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end::before {
+  right: 50%;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start:not(.du-bois-dark-picker-cell-in-range):not(.du-bois-dark-picker-cell-range-start):not(.du-bois-dark-picker-cell-range-end)::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end:not(.du-bois-dark-picker-cell-in-range):not(.du-bois-dark-picker-cell-range-start):not(.du-bois-dark-picker-cell-range-end)::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start.du-bois-dark-picker-cell-range-start-single::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start.du-bois-dark-picker-cell-range-start.du-bois-dark-picker-cell-range-end.du-bois-dark-picker-cell-range-end-near-hover::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end.du-bois-dark-picker-cell-range-start.du-bois-dark-picker-cell-range-end.du-bois-dark-picker-cell-range-start-near-hover::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end.du-bois-dark-picker-cell-range-end-single::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover:not(.du-bois-dark-picker-cell-in-range)::after {
+  position: absolute;
+  top: 50%;
+  z-index: 0;
+  height: 24px;
+  border-top: 1px dashed #123c5e;
+  border-bottom: 1px dashed #123c5e;
+  transform: translateY(-50%);
+  content: '';
+}
+.du-bois-dark-picker-cell-range-hover-start::after,
+.du-bois-dark-picker-cell-range-hover-end::after,
+.du-bois-dark-picker-cell-range-hover::after {
+  right: 0;
+  left: 2px;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover::before,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start.du-bois-dark-picker-cell-range-hover::before,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end.du-bois-dark-picker-cell-range-hover::before,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start:not(.du-bois-dark-picker-cell-range-start-single).du-bois-dark-picker-cell-range-hover-start::before,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end:not(.du-bois-dark-picker-cell-range-end-single).du-bois-dark-picker-cell-range-hover-end::before,
+.du-bois-dark-picker-panel > :not(.du-bois-dark-picker-date-panel) .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-start::before,
+.du-bois-dark-picker-panel > :not(.du-bois-dark-picker-date-panel) .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-end::before {
+  background: #06131e;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start:not(.du-bois-dark-picker-cell-range-start-single):not(.du-bois-dark-picker-cell-range-end) .du-bois-dark-picker-cell-inner {
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end:not(.du-bois-dark-picker-cell-range-end-single):not(.du-bois-dark-picker-cell-range-start) .du-bois-dark-picker-cell-inner {
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-start .du-bois-dark-picker-cell-inner::after,
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-end .du-bois-dark-picker-cell-inner::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  background: #06131e;
+  content: '';
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-start .du-bois-dark-picker-cell-inner::after {
+  right: -6px;
+  left: 0;
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-end .du-bois-dark-picker-cell-inner::after {
+  right: 0;
+  left: -6px;
+}
+.du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-start::after {
+  right: 50%;
+}
+.du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-end::after {
+  left: 50%;
+}
+tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover:first-child::after,
+tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end:first-child::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-start.du-bois-dark-picker-cell-range-hover-edge-start.du-bois-dark-picker-cell-range-hover-edge-start-near-range::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-edge-start:not(.du-bois-dark-picker-cell-range-hover-edge-start-near-range)::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start::after {
+  left: 6px;
+  border-left: 1px dashed #123c5e;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover:last-child::after,
+tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start:last-child::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-end.du-bois-dark-picker-cell-range-hover-edge-end.du-bois-dark-picker-cell-range-hover-edge-end-near-range::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-edge-end:not(.du-bois-dark-picker-cell-range-hover-edge-end-near-range)::after,
+.du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end::after {
+  right: 6px;
+  border-right: 1px dashed #123c5e;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.du-bois-dark-picker-cell-disabled {
+  color: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+}
+.du-bois-dark-picker-cell-disabled .du-bois-dark-picker-cell-inner {
+  background: transparent;
+}
+.du-bois-dark-picker-cell-disabled::before {
+  background: #303030;
+}
+.du-bois-dark-picker-cell-disabled.du-bois-dark-picker-cell-today .du-bois-dark-picker-cell-inner::before {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+.du-bois-dark-picker-decade-panel .du-bois-dark-picker-content,
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-content,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-content,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-content {
+  height: 264px;
+}
+.du-bois-dark-picker-decade-panel .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-inner {
+  padding: 0 4px;
+}
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-content {
+  height: 56px;
+}
+.du-bois-dark-picker-footer {
+  width: min-content;
+  min-width: 100%;
+  line-height: 38px;
+  text-align: center;
+  border-bottom: 1px solid transparent;
+}
+.du-bois-dark-picker-panel .du-bois-dark-picker-footer {
+  border-top: 1px solid #303030;
+}
+.du-bois-dark-picker-footer-extra {
+  padding: 0 8px;
+  line-height: 38px;
+  text-align: left;
+}
+.du-bois-dark-picker-footer-extra:not(:last-child) {
+  border-bottom: 1px solid #303030;
+}
+.du-bois-dark-picker-now {
+  text-align: left;
+}
+.du-bois-dark-picker-today-btn {
+  color: #2272B4;
+}
+.du-bois-dark-picker-today-btn:hover {
+  color: #1d517c;
+}
+.du-bois-dark-picker-today-btn:active {
+  color: #3f81b1;
+}
+.du-bois-dark-picker-today-btn.du-bois-dark-picker-today-btn-disabled {
+  color: rgba(255, 255, 255, 0.3);
+  cursor: not-allowed;
+}
+.du-bois-dark-picker-decade-panel .du-bois-dark-picker-cell-inner {
+  padding: 0 2px;
+}
+.du-bois-dark-picker-decade-panel .du-bois-dark-picker-cell::before {
+  display: none;
+}
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-body,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-body,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-body {
+  padding: 0 4px;
+}
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-inner {
+  width: 60px;
+}
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-range-hover-start::after,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-range-hover-start::after,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-range-hover-start::after {
+  left: 14px;
+  border-left: 1px dashed #123c5e;
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-range-hover-start::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-range-hover-start::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-range-hover-start::after {
+  right: 14px;
+  border-right: 1px dashed #123c5e;
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-range-hover-end::after,
+.du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-range-hover-end::after,
+.du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-range-hover-end::after {
+  right: 14px;
+  border-right: 1px dashed #123c5e;
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-year-panel .du-bois-dark-picker-cell-range-hover-end::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-quarter-panel .du-bois-dark-picker-cell-range-hover-end::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-month-panel .du-bois-dark-picker-cell-range-hover-end::after {
+  left: 14px;
+  border-left: 1px dashed #123c5e;
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-dark-picker-week-panel .du-bois-dark-picker-body {
+  padding: 4px 8px;
+}
+.du-bois-dark-picker-week-panel .du-bois-dark-picker-cell:hover .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-week-panel .du-bois-dark-picker-cell-selected .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-week-panel .du-bois-dark-picker-cell .du-bois-dark-picker-cell-inner {
+  background: transparent !important;
+}
+.du-bois-dark-picker-week-panel-row td {
+  transition: background 0.3s;
+}
+.du-bois-dark-picker-week-panel-row:hover td {
+  background: rgba(255, 255, 255, 0.08);
+}
+.du-bois-dark-picker-week-panel-row-selected td,
+.du-bois-dark-picker-week-panel-row-selected:hover td {
+  background: #2272B4;
+}
+.du-bois-dark-picker-week-panel-row-selected td.du-bois-dark-picker-cell-week,
+.du-bois-dark-picker-week-panel-row-selected:hover td.du-bois-dark-picker-cell-week {
+  color: rgba(255, 255, 255, 0.5);
+}
+.du-bois-dark-picker-week-panel-row-selected td.du-bois-dark-picker-cell-today .du-bois-dark-picker-cell-inner::before,
+.du-bois-dark-picker-week-panel-row-selected:hover td.du-bois-dark-picker-cell-today .du-bois-dark-picker-cell-inner::before {
+  border-color: #fff;
+}
+.du-bois-dark-picker-week-panel-row-selected td .du-bois-dark-picker-cell-inner,
+.du-bois-dark-picker-week-panel-row-selected:hover td .du-bois-dark-picker-cell-inner {
+  color: #fff;
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-body {
+  padding: 4px 8px;
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-content {
+  width: 252px;
+}
+.du-bois-dark-picker-date-panel .du-bois-dark-picker-content th {
+  width: 36px;
+}
+.du-bois-dark-picker-datetime-panel {
+  display: flex;
+}
+.du-bois-dark-picker-datetime-panel .du-bois-dark-picker-time-panel {
+  border-left: 1px solid #303030;
+}
+.du-bois-dark-picker-datetime-panel .du-bois-dark-picker-date-panel,
+.du-bois-dark-picker-datetime-panel .du-bois-dark-picker-time-panel {
+  transition: opacity 0.3s;
+}
+.du-bois-dark-picker-datetime-panel-active .du-bois-dark-picker-date-panel,
+.du-bois-dark-picker-datetime-panel-active .du-bois-dark-picker-time-panel {
+  opacity: 0.3;
+}
+.du-bois-dark-picker-datetime-panel-active .du-bois-dark-picker-date-panel-active,
+.du-bois-dark-picker-datetime-panel-active .du-bois-dark-picker-time-panel-active {
+  opacity: 1;
+}
+.du-bois-dark-picker-time-panel {
+  width: auto;
+  min-width: auto;
+}
+.du-bois-dark-picker-time-panel .du-bois-dark-picker-content {
+  display: flex;
+  flex: auto;
+  height: 224px;
+}
+.du-bois-dark-picker-time-panel-column {
+  flex: 1 0 auto;
+  width: 56px;
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
+  text-align: left;
+  list-style: none;
+  transition: background 0.3s;
+}
+.du-bois-dark-picker-time-panel-column::after {
+  display: block;
+  height: 196px;
+  content: '';
+}
+.du-bois-dark-picker-datetime-panel .du-bois-dark-picker-time-panel-column::after {
+  height: 198px;
+}
+.du-bois-dark-picker-time-panel-column:not(:first-child) {
+  border-left: 1px solid #303030;
+}
+.du-bois-dark-picker-time-panel-column-active {
+  background: rgba(18, 25, 33, 0.2);
+}
+.du-bois-dark-picker-time-panel-column:hover {
+  overflow-y: auto;
+}
+.du-bois-dark-picker-time-panel-column > li {
+  margin: 0;
+  padding: 0;
+}
+.du-bois-dark-picker-time-panel-column > li.du-bois-dark-picker-time-panel-cell .du-bois-dark-picker-time-panel-cell-inner {
+  display: block;
+  width: 100%;
+  height: 28px;
+  margin: 0;
+  padding: 0 0 0 14px;
+  color: #ffffffd6;
+  line-height: 28px;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+.du-bois-dark-picker-time-panel-column > li.du-bois-dark-picker-time-panel-cell .du-bois-dark-picker-time-panel-cell-inner:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.du-bois-dark-picker-time-panel-column > li.du-bois-dark-picker-time-panel-cell-selected .du-bois-dark-picker-time-panel-cell-inner {
+  background: #121921;
+}
+.du-bois-dark-picker-time-panel-column > li.du-bois-dark-picker-time-panel-cell-disabled .du-bois-dark-picker-time-panel-cell-inner {
+  color: rgba(255, 255, 255, 0.3);
+  background: transparent;
+  cursor: not-allowed;
+}
+/* stylelint-disable-next-line */
+_:-ms-fullscreen .du-bois-dark-picker-range-wrapper .du-bois-dark-picker-month-panel .du-bois-dark-picker-cell,
+:root .du-bois-dark-picker-range-wrapper .du-bois-dark-picker-month-panel .du-bois-dark-picker-cell,
+_:-ms-fullscreen .du-bois-dark-picker-range-wrapper .du-bois-dark-picker-year-panel .du-bois-dark-picker-cell,
+:root .du-bois-dark-picker-range-wrapper .du-bois-dark-picker-year-panel .du-bois-dark-picker-cell {
+  padding: 21px 0;
+}
+.du-bois-dark-picker-rtl {
+  direction: rtl;
+}
+.du-bois-dark-picker-rtl .du-bois-dark-picker-suffix {
+  margin-right: 2px;
+  margin-left: 0;
+}
+.du-bois-dark-picker-rtl .du-bois-dark-picker-clear {
+  right: auto;
+  left: 0;
+}
+.du-bois-dark-picker-rtl .du-bois-dark-picker-separator {
+  transform: rotate(180deg);
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-header-view button:not(:first-child) {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.du-bois-dark-picker-rtl.du-bois-dark-picker-range .du-bois-dark-picker-clear {
+  right: auto;
+  left: 7px;
+}
+.du-bois-dark-picker-rtl.du-bois-dark-picker-range .du-bois-dark-picker-active-bar {
+  margin-right: 7px;
+  margin-left: 0;
+}
+.du-bois-dark-picker-rtl.du-bois-dark-picker-range.du-bois-dark-picker-small .du-bois-dark-picker-active-bar {
+  margin-right: 3px;
+}
+.du-bois-dark-picker-dropdown-rtl .du-bois-dark-picker-ranges {
+  text-align: right;
+}
+.du-bois-dark-picker-dropdown-rtl .du-bois-dark-picker-ranges .du-bois-dark-picker-ok {
+  float: left;
+  margin-right: 4px;
+  margin-left: 0;
+}
+.du-bois-dark-picker-panel-rtl {
+  direction: rtl;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-prev-icon,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-super-prev-icon {
+  transform: rotate(135deg);
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-next-icon,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-super-next-icon {
+  transform: rotate(-45deg);
+}
+.du-bois-dark-picker-cell .du-bois-dark-picker-cell-inner {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  transition: background 0.3s, border 0.3s;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start::before {
+  right: 50%;
+  left: 0;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end::before {
+  right: 0;
+  left: 50%;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start.du-bois-dark-picker-cell-range-end::before {
+  right: 50%;
+  left: 50%;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-start .du-bois-dark-picker-cell-inner::after {
+  right: 0;
+  left: -6px;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-date-panel .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-in-range.du-bois-dark-picker-cell-range-hover-end .du-bois-dark-picker-cell-inner::after {
+  right: -6px;
+  left: 0;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-start::after {
+  right: 0;
+  left: 50%;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-end::after {
+  right: 50%;
+  left: 0;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-start:not(.du-bois-dark-picker-cell-range-start-single):not(.du-bois-dark-picker-cell-range-end) .du-bois-dark-picker-cell-inner {
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-end:not(.du-bois-dark-picker-cell-range-end-single):not(.du-bois-dark-picker-cell-range-start) .du-bois-dark-picker-cell-inner {
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover:not(.du-bois-dark-picker-cell-selected):first-child::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-start.du-bois-dark-picker-cell-range-hover-edge-start.du-bois-dark-picker-cell-range-hover-edge-start-near-range::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-edge-start:not(.du-bois-dark-picker-cell-range-hover-edge-start-near-range)::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start::after {
+  right: 6px;
+  left: 0;
+  border-right: 1px dashed #123c5e;
+  border-left: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+}
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover:not(.du-bois-dark-picker-cell-selected):last-child::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-end.du-bois-dark-picker-cell-range-hover-edge-end.du-bois-dark-picker-cell-range-hover-edge-end-near-range::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-edge-end:not(.du-bois-dark-picker-cell-range-hover-edge-end-near-range)::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end::after {
+  right: 0;
+  left: 6px;
+  border-right: none;
+  border-left: 1px dashed #123c5e;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 4px;
+}
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-start:last-child::after,
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-range-hover-end:first-child::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-start.du-bois-dark-picker-cell-range-hover-edge-start:not(.du-bois-dark-picker-cell-range-hover)::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-start.du-bois-dark-picker-cell-range-hover-end.du-bois-dark-picker-cell-range-hover-edge-start:not(.du-bois-dark-picker-cell-range-hover)::after,
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-end.du-bois-dark-picker-cell-range-hover-start.du-bois-dark-picker-cell-range-hover-edge-end:not(.du-bois-dark-picker-cell-range-hover)::after,
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-start.du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-hover-edge-start:last-child::after,
+.du-bois-dark-picker-panel-rtl tr > .du-bois-dark-picker-cell-in-view.du-bois-dark-picker-cell-end.du-bois-dark-picker-cell-range-hover.du-bois-dark-picker-cell-range-hover-edge-end:first-child::after {
+  right: 6px;
+  left: 6px;
+  border-right: 1px dashed #123c5e;
+  border-left: 1px dashed #123c5e;
+  border-radius: 4px;
+}
+.du-bois-dark-picker-dropdown-rtl .du-bois-dark-picker-footer-extra {
+  direction: rtl;
+  text-align: right;
+}
+.du-bois-dark-picker-panel-rtl .du-bois-dark-picker-time-panel {
+  direction: ltr;
+}
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.du-bois-dark-tag {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #ffffffd6;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: tnum;
+  display: inline-block;
+  height: auto;
+  margin-right: 8px;
+  padding: 0 7px;
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid #434343;
+  border-radius: 4px;
+  opacity: 1;
+  transition: all 0.3s;
+}
+.du-bois-dark-tag,
+.du-bois-dark-tag a,
+.du-bois-dark-tag a:hover {
+  color: #ffffffd6;
+}
+.du-bois-dark-tag > a:first-child:last-child {
+  display: inline-block;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+.du-bois-dark-tag-close-icon {
+  margin-left: 3px;
+  color: #ffffff99;
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.du-bois-dark-tag-close-icon:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+.du-bois-dark-tag-has-color {
+  border-color: transparent;
+}
+.du-bois-dark-tag-has-color,
+.du-bois-dark-tag-has-color a,
+.du-bois-dark-tag-has-color a:hover,
+.du-bois-dark-tag-has-color .anticon-close,
+.du-bois-dark-tag-has-color .anticon-close:hover {
+  color: #fff;
+}
+.du-bois-dark-tag-checkable {
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
+}
+.du-bois-dark-tag-checkable:not(.du-bois-dark-tag-checkable-checked):hover {
+  color: #2272B4;
+}
+.du-bois-dark-tag-checkable:active,
+.du-bois-dark-tag-checkable-checked {
+  color: #fff;
+}
+.du-bois-dark-tag-checkable-checked {
+  background-color: #2272B4;
+}
+.du-bois-dark-tag-checkable:active {
+  background-color: #3f81b1;
+}
+.du-bois-dark-tag-hidden {
+  display: none;
+}
+.du-bois-dark-tag-pink {
+  color: #e0529c;
+  background: #291321;
+  border-color: #551c3b;
+}
+.du-bois-dark-tag-pink-inverse {
+  color: #fff;
+  background: #cb2b83;
+  border-color: #cb2b83;
+}
+.du-bois-dark-tag-magenta {
+  color: #e0529c;
+  background: #291321;
+  border-color: #551c3b;
+}
+.du-bois-dark-tag-magenta-inverse {
+  color: #fff;
+  background: #cb2b83;
+  border-color: #cb2b83;
+}
+.du-bois-dark-tag-red {
+  color: #e84749;
+  background: #2a1215;
+  border-color: #58181c;
+}
+.du-bois-dark-tag-red-inverse {
+  color: #fff;
+  background: #d32029;
+  border-color: #d32029;
+}
+.du-bois-dark-tag-volcano {
+  color: #e87040;
+  background: #2b1611;
+  border-color: #592716;
+}
+.du-bois-dark-tag-volcano-inverse {
+  color: #fff;
+  background: #d84a1b;
+  border-color: #d84a1b;
+}
+.du-bois-dark-tag-orange {
+  color: #e89a3c;
+  background: #2b1d11;
+  border-color: #593815;
+}
+.du-bois-dark-tag-orange-inverse {
+  color: #fff;
+  background: #d87a16;
+  border-color: #d87a16;
+}
+.du-bois-dark-tag-yellow {
+  color: #e8d639;
+  background: #2b2611;
+  border-color: #595014;
+}
+.du-bois-dark-tag-yellow-inverse {
+  color: #fff;
+  background: #d8bd14;
+  border-color: #d8bd14;
+}
+.du-bois-dark-tag-gold {
+  color: #e8b339;
+  background: #2b2111;
+  border-color: #594214;
+}
+.du-bois-dark-tag-gold-inverse {
+  color: #fff;
+  background: #d89614;
+  border-color: #d89614;
+}
+.du-bois-dark-tag-cyan {
+  color: #33bcb7;
+  background: #112123;
+  border-color: #144848;
+}
+.du-bois-dark-tag-cyan-inverse {
+  color: #fff;
+  background: #13a8a8;
+  border-color: #13a8a8;
+}
+.du-bois-dark-tag-lime {
+  color: #a9d134;
+  background: #1f2611;
+  border-color: #3e4f13;
+}
+.du-bois-dark-tag-lime-inverse {
+  color: #fff;
+  background: #8bbb11;
+  border-color: #8bbb11;
+}
+.du-bois-dark-tag-green {
+  color: #6abe39;
+  background: #162312;
+  border-color: #274916;
+}
+.du-bois-dark-tag-green-inverse {
+  color: #fff;
+  background: #49aa19;
+  border-color: #49aa19;
+}
+.du-bois-dark-tag-blue {
+  color: #3c9ae8;
+  background: #111d2c;
+  border-color: #15395b;
+}
+.du-bois-dark-tag-blue-inverse {
+  color: #fff;
+  background: #177ddc;
+  border-color: #177ddc;
+}
+.du-bois-dark-tag-geekblue {
+  color: #5273e0;
+  background: #131629;
+  border-color: #1c2755;
+}
+.du-bois-dark-tag-geekblue-inverse {
+  color: #fff;
+  background: #2b4acb;
+  border-color: #2b4acb;
+}
+.du-bois-dark-tag-purple {
+  color: #854eca;
+  background: #1a1325;
+  border-color: #301c4d;
+}
+.du-bois-dark-tag-purple-inverse {
+  color: #fff;
+  background: #642ab5;
+  border-color: #642ab5;
+}
+.du-bois-dark-tag-success {
+  color: #49aa19;
+  background: #162312;
+  border-color: #274916;
+}
+.du-bois-dark-tag-processing {
+  color: #177ddc;
+  background: #111d2c;
+  border-color: #15395b;
+}
+.du-bois-dark-tag-error {
+  color: #d32029;
+  background: #2a1215;
+  border-color: #58181c;
+}
+.du-bois-dark-tag-warning {
+  color: #d87a16;
+  background: #2b1d11;
+  border-color: #593815;
+}
+.du-bois-dark-tag > .anticon + span,
+.du-bois-dark-tag > span + .anticon {
+  margin-left: 7px;
+}
+.du-bois-dark-tag.du-bois-dark-tag-rtl {
+  margin-right: 0;
+  margin-left: 8px;
+  direction: rtl;
+  text-align: right;
+}
+.du-bois-dark-tag-rtl .du-bois-dark-tag-close-icon {
+  margin-right: 3px;
+  margin-left: 0;
+}
+.du-bois-dark-tag-rtl.du-bois-dark-tag > .anticon + span,
+.du-bois-dark-tag-rtl.du-bois-dark-tag > span + .anticon {
+  margin-right: 7px;
+  margin-left: 0;
+}
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
@@ -4148,7 +5403,7 @@ a.du-bois-dark-btn-sm {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   display: block;
 }
 .du-bois-dark-dropdown::before {
@@ -4258,7 +5513,7 @@ a.du-bois-dark-btn-sm {
 }
 .du-bois-dark-dropdown-menu-submenu-popup {
   position: absolute;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   background: transparent;
   box-shadow: none;
   transform-origin: 0 0;
@@ -10541,7 +11796,7 @@ a.du-bois-dark-btn-sm {
   list-style: none;
   font-feature-settings: tnum;
   position: absolute;
-  z-index: 1070;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 70);
   display: block;
   width: max-content;
   max-width: 250px;
@@ -11887,7 +13142,7 @@ textarea.du-bois-dark-input {
 }
 .du-bois-dark-menu-submenu-popup {
   position: absolute;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   background: transparent;
   border-radius: 4px;
   box-shadow: none;
@@ -12577,7 +13832,7 @@ textarea.du-bois-dark-input {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1000;
+  z-index: calc(var(--dubois-zindex-base, 1000));
   height: 100%;
   background-color: rgba(0, 0, 0, 0.45);
 }
@@ -12595,7 +13850,7 @@ textarea.du-bois-dark-input {
   -webkit-overflow-scrolling: touch;
 }
 .du-bois-dark-modal-wrap {
-  z-index: 1000;
+  z-index: calc(var(--dubois-zindex-base, 1000));
 }
 .du-bois-dark-modal-title {
   margin: 0;
@@ -12660,7 +13915,7 @@ textarea.du-bois-dark-input {
   word-wrap: break-word;
 }
 .du-bois-dark-modal-footer {
-  padding: 20px 40px 40px;
+  padding: 0px 0px;
   text-align: right;
   background: transparent;
   border-top: 0px solid #303030;
@@ -12996,7 +14251,7 @@ textarea.du-bois-dark-input {
   list-style: none;
   font-feature-settings: tnum;
   position: fixed;
-  z-index: 1010;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 30);
   margin-right: 24px;
 }
 .du-bois-dark-notification-topLeft,
@@ -13210,7 +14465,7 @@ textarea.du-bois-dark-input {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1030;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 30);
   font-weight: normal;
   white-space: normal;
   text-align: left;
@@ -15614,257 +16869,6 @@ textarea.du-bois-dark-pagination-options-quick-jumper input {
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 
-/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.du-bois-dark-tag {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #ffffffd6;
-  font-size: 14px;
-  font-variant: tabular-nums;
-  line-height: 1.5715;
-  list-style: none;
-  font-feature-settings: tnum;
-  display: inline-block;
-  height: auto;
-  margin-right: 8px;
-  padding: 0 7px;
-  font-size: 12px;
-  line-height: 20px;
-  white-space: nowrap;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid #434343;
-  border-radius: 4px;
-  opacity: 1;
-  transition: all 0.3s;
-}
-.du-bois-dark-tag,
-.du-bois-dark-tag a,
-.du-bois-dark-tag a:hover {
-  color: #ffffffd6;
-}
-.du-bois-dark-tag > a:first-child:last-child {
-  display: inline-block;
-  margin: 0 -8px;
-  padding: 0 8px;
-}
-.du-bois-dark-tag-close-icon {
-  margin-left: 3px;
-  color: #ffffff99;
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.du-bois-dark-tag-close-icon:hover {
-  color: rgba(255, 255, 255, 0.85);
-}
-.du-bois-dark-tag-has-color {
-  border-color: transparent;
-}
-.du-bois-dark-tag-has-color,
-.du-bois-dark-tag-has-color a,
-.du-bois-dark-tag-has-color a:hover,
-.du-bois-dark-tag-has-color .anticon-close,
-.du-bois-dark-tag-has-color .anticon-close:hover {
-  color: #fff;
-}
-.du-bois-dark-tag-checkable {
-  background-color: transparent;
-  border-color: transparent;
-  cursor: pointer;
-}
-.du-bois-dark-tag-checkable:not(.du-bois-dark-tag-checkable-checked):hover {
-  color: #2272B4;
-}
-.du-bois-dark-tag-checkable:active,
-.du-bois-dark-tag-checkable-checked {
-  color: #fff;
-}
-.du-bois-dark-tag-checkable-checked {
-  background-color: #2272B4;
-}
-.du-bois-dark-tag-checkable:active {
-  background-color: #3f81b1;
-}
-.du-bois-dark-tag-hidden {
-  display: none;
-}
-.du-bois-dark-tag-pink {
-  color: #e0529c;
-  background: #291321;
-  border-color: #551c3b;
-}
-.du-bois-dark-tag-pink-inverse {
-  color: #fff;
-  background: #cb2b83;
-  border-color: #cb2b83;
-}
-.du-bois-dark-tag-magenta {
-  color: #e0529c;
-  background: #291321;
-  border-color: #551c3b;
-}
-.du-bois-dark-tag-magenta-inverse {
-  color: #fff;
-  background: #cb2b83;
-  border-color: #cb2b83;
-}
-.du-bois-dark-tag-red {
-  color: #e84749;
-  background: #2a1215;
-  border-color: #58181c;
-}
-.du-bois-dark-tag-red-inverse {
-  color: #fff;
-  background: #d32029;
-  border-color: #d32029;
-}
-.du-bois-dark-tag-volcano {
-  color: #e87040;
-  background: #2b1611;
-  border-color: #592716;
-}
-.du-bois-dark-tag-volcano-inverse {
-  color: #fff;
-  background: #d84a1b;
-  border-color: #d84a1b;
-}
-.du-bois-dark-tag-orange {
-  color: #e89a3c;
-  background: #2b1d11;
-  border-color: #593815;
-}
-.du-bois-dark-tag-orange-inverse {
-  color: #fff;
-  background: #d87a16;
-  border-color: #d87a16;
-}
-.du-bois-dark-tag-yellow {
-  color: #e8d639;
-  background: #2b2611;
-  border-color: #595014;
-}
-.du-bois-dark-tag-yellow-inverse {
-  color: #fff;
-  background: #d8bd14;
-  border-color: #d8bd14;
-}
-.du-bois-dark-tag-gold {
-  color: #e8b339;
-  background: #2b2111;
-  border-color: #594214;
-}
-.du-bois-dark-tag-gold-inverse {
-  color: #fff;
-  background: #d89614;
-  border-color: #d89614;
-}
-.du-bois-dark-tag-cyan {
-  color: #33bcb7;
-  background: #112123;
-  border-color: #144848;
-}
-.du-bois-dark-tag-cyan-inverse {
-  color: #fff;
-  background: #13a8a8;
-  border-color: #13a8a8;
-}
-.du-bois-dark-tag-lime {
-  color: #a9d134;
-  background: #1f2611;
-  border-color: #3e4f13;
-}
-.du-bois-dark-tag-lime-inverse {
-  color: #fff;
-  background: #8bbb11;
-  border-color: #8bbb11;
-}
-.du-bois-dark-tag-green {
-  color: #6abe39;
-  background: #162312;
-  border-color: #274916;
-}
-.du-bois-dark-tag-green-inverse {
-  color: #fff;
-  background: #49aa19;
-  border-color: #49aa19;
-}
-.du-bois-dark-tag-blue {
-  color: #3c9ae8;
-  background: #111d2c;
-  border-color: #15395b;
-}
-.du-bois-dark-tag-blue-inverse {
-  color: #fff;
-  background: #177ddc;
-  border-color: #177ddc;
-}
-.du-bois-dark-tag-geekblue {
-  color: #5273e0;
-  background: #131629;
-  border-color: #1c2755;
-}
-.du-bois-dark-tag-geekblue-inverse {
-  color: #fff;
-  background: #2b4acb;
-  border-color: #2b4acb;
-}
-.du-bois-dark-tag-purple {
-  color: #854eca;
-  background: #1a1325;
-  border-color: #301c4d;
-}
-.du-bois-dark-tag-purple-inverse {
-  color: #fff;
-  background: #642ab5;
-  border-color: #642ab5;
-}
-.du-bois-dark-tag-success {
-  color: #49aa19;
-  background: #162312;
-  border-color: #274916;
-}
-.du-bois-dark-tag-processing {
-  color: #177ddc;
-  background: #111d2c;
-  border-color: #15395b;
-}
-.du-bois-dark-tag-error {
-  color: #d32029;
-  background: #2a1215;
-  border-color: #58181c;
-}
-.du-bois-dark-tag-warning {
-  color: #d87a16;
-  background: #2b1d11;
-  border-color: #593815;
-}
-.du-bois-dark-tag > .anticon + span,
-.du-bois-dark-tag > span + .anticon {
-  margin-left: 7px;
-}
-.du-bois-dark-tag.du-bois-dark-tag-rtl {
-  margin-right: 0;
-  margin-left: 8px;
-  direction: rtl;
-  text-align: right;
-}
-.du-bois-dark-tag-rtl .du-bois-dark-tag-close-icon {
-  margin-right: 3px;
-  margin-left: 0;
-}
-.du-bois-dark-tag-rtl.du-bois-dark-tag > .anticon + span,
-.du-bois-dark-tag-rtl.du-bois-dark-tag > span + .anticon {
-  margin-right: 7px;
-  margin-left: 0;
-}
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
@@ -16155,7 +17159,7 @@ textarea.du-bois-dark-pagination-options-quick-jumper input {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   display: block;
 }
 .du-bois-dark-tabs-dropdown-hidden {