@datability/8ui 1.2.0 → 1.2.2

package/dist/components/input/input-date-time/index.scss

@@ -0,0 +1,179 @@
+@import '../extend.scss';
+
+.DBui-inputDateTime {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDateTime {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateTimeWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  padding: 3em 1em;
+  gap: 0.8em;
+
+  @media (max-width: 425px) {
+    padding: 2.5em 0;
+    width: 99vw;
+  }
+
+  .DBui-inputDateTimeWrapperYearMonthDayTime {
+    display: flex;
+    flex-direction: row;
+    gap: 0.3em;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 425px) {
+      gap: 0.2em;
+    }
+
+    .DBui-inputDateTimeWrapperYearMonthDay {
+      display: flex;
+      flex-direction: column;
+      gap: 0.3em;
+      justify-content: center;
+      align-items: center;
+      border-right: 1px solid gray;
+      padding-right: 0.5em;
+
+
+      .DBui-inputDateTimeRowMonthYear,
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+        display: flex;
+        flex-direction: row;
+        gap: 0.8em;
+
+        @media (max-width: 425px) {
+          gap: 0.2em;
+        }
+      }
+
+      .DBui-inputDateTimeRowMonthYear {
+        gap: 0.5em;
+        margin-left: 0.5em;
+        align-items: center;
+      }
+
+      .DBui-inputDateTimeRowHeaderDay,
+      .DBui-inputDateTimeRowDay {
+
+        .DBui-inputDateTimeHeader,
+        .DBui-inputDateTimeDay {
+          width: 30px;
+          height: 30px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .DBui-inputDateTimeDay {
+
+          cursor: not-allowed;
+
+          &[data-hidden-hover='false'] {
+            cursor: pointer;
+
+            &:hover {
+              background-color: #03287E;
+              border-radius: 100%;
+              color: #FFFFFF;
+            }
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+            border-radius: 100%;
+          }
+        }
+      }
+    }
+
+    .DBui-inputDateTimeWrapperHourMin {
+      padding: 0 0.3em;
+      align-self: flex-end;
+      flex-direction: column;
+      display: flex;
+
+      @media (max-width: 425px) {
+        padding: 0 0.2em;
+      }
+
+      .DBui-inputDateTimeWrapperHourMinOptions {
+        max-height: 200px;
+        overflow-y: scroll;
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+
+        /* Hide scrollbar for Chrome, Safari and Opera */
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        p {
+          padding: 0.5em;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+
+          &[data-checked='true'] {
+            background-color: #03287E;
+            color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+  .DBui-inputDateTimeWrapperButton {
+    display: flex;
+    gap: 0.5em;
+    justify-content: flex-end;
+  }
+}
+
+.DBui-inputDateTimeRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateTimeRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}

package/dist/components/input/input-number/index.scss

@@ -0,0 +1,9 @@
+@import '../extend.scss';
+
+.DBui-inputNumber {
+    @extend .DBui-input;
+
+    &:disabled {
+        @extend .DBui-disabled;
+    }
+}

package/dist/components/input/input-password/index.scss

@@ -0,0 +1,22 @@
+@import '../extend.scss';
+
+.DBui-wrapInputPassword {
+    width: 100%;
+    position: relative;
+    
+    .DBui-inputPassword {
+        @extend .DBui-input;
+
+        padding-right: 1em;
+    }
+
+    .DBui-inputPasswordIcon {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 1.5em;
+        height: 1.5em;
+    }
+}

package/dist/components/input/input-radio/index.scss

@@ -0,0 +1,35 @@
+@import '../extend.scss';
+
+.DBui-wrapInputRadioList {
+    display: flex;
+    width: 100%;
+    gap: 1em;
+
+    &[data-vertical='true'] {
+        flex-direction: column;
+        gap: 0.5em;
+    }
+
+    .DBui-wrapInputRadio {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+
+        .DBui-labelRadio {
+            &[data-invalid='true'] {
+                color: #EB5757;
+            }
+        }
+
+        .DBui-inputRadio {
+            border-radius: 0.3em;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+            &:disabled {
+                @extend .DBui-disabled;
+            }
+        }
+    }
+}

package/dist/components/input/input-select/index.scss

@@ -0,0 +1,81 @@
+@import '../extend.scss';
+
+.DBui-wrapperInputSelect {
+  cursor: pointer;
+  position: relative;
+  height: 35px;
+  width: 100%;
+  padding: 0.3em 35px 0.3em 0.5em;
+  border-radius: 8px;
+  border: 1px solid #e3e3e8;
+  background-color: #ffffff;
+  color: #000000;
+  display: flex;
+
+  &[data-invalid='true'] {
+    border: 1px solid #eb5757;
+  }
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-wrapperLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .DBui-placeholder {
+    color: #c3c3c3;
+  }
+
+  .DBui-wrapperLabelInputSelect {
+    display: flex;
+    gap: 0.3em;
+    align-items: center;
+    width: 100%;
+
+    .DBui-clearIconInputSelect {
+      width: 20px;
+
+      &[data-hidden='true'] {
+        display: none !important;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .DBui-arrowIconInputSelect {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: transform 0.2s;
+
+    &[data-checked='false'] {
+      transform: rotate(180deg) translateY(50%);
+    }
+  }
+}
+
+.DBui-menuItemInputSelect {
+  background-color: #ffffff;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+
+  &[data-checked='true'] {
+    background-color: #0045a5;
+    color: #ffffff;
+  }
+}

package/dist/components/input/input-switch/index.scss

@@ -0,0 +1,84 @@
+.DBui-switch {
+    position: relative;
+    display: inline-block;
+    width: 51px;
+    height: 28px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .DBui-minus {
+        position: absolute;
+        height: 9px;
+        width: 1px;
+        left: 18px;
+        bottom: 9px;
+        background-color: #1C1C1E;
+        z-index: 1;
+        border-radius: 999px;
+    }
+
+    .DBui-miniCircle {
+        position: absolute;
+        border-radius: 100%;
+        height: 7px;
+        width: 7px;
+        right: 11px;
+        bottom: 10px;
+        box-shadow: 0 0 0px 1px #000000;
+        z-index: 1;
+    }
+
+    .DBui-slider {
+        border-radius: 34px;
+
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #AAAAAA;
+        -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+
+        &:before {
+            border-radius: 50%;
+            z-index: 2;
+
+            position: absolute;
+            content: '';
+            height: 20px;
+            width: 20px;
+            left: 4px;
+            bottom: 4px;
+            background-color: #1C1C1E;
+            box-shadow: 0px 0.31px 10px 0px #00000004;
+            -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+            transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        }
+    }
+
+    input:checked+.DBui-slider {
+        background-color: #477cee;
+    }
+
+    input:checked+.DBui-slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+    }
+
+    .DBui-wrapInputList {
+        display: flex;
+        flex-direction: row;
+
+        &[data-disabled='true'] {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+}

package/dist/components/input/input-textarea/index.scss

@@ -0,0 +1,10 @@
+@import '../extend.scss';
+
+.DBui-inputTextarea {
+    @extend .DBui-input;
+    resize: none;
+
+    &:disabled {
+        @extend .DBui-disabled;
+    }
+}

package/dist/components/menu/index.scss

@@ -0,0 +1,30 @@
+.DBui-wrapperMenu {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.DBui-wrapperMenuItem {
+  position: fixed;
+  background: #fff;
+  color: #000;
+  border-radius: 0.3em;
+  min-width: 140px;
+  max-width: 320px;
+  max-height: 45%;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: opacity 0.1s ease;
+  z-index: var(--z-index-menu);
+
+  &[data-hidden='true'] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &[data-is-in-modal='true'] {
+    z-index: var(--z-index-menu-in-modal);
+  }
+}

package/dist/components/modal/index.scss

@@ -0,0 +1,33 @@
+.DBui-modalContent {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  border-radius: 1em;
+  background-color: #FFFFFF;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
+  min-width: 320px;
+  min-height: 150px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .DBui-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    z-index: var(--z-index-normale);
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}

package/dist/index.css

@@ -0,0 +1 @@
+.DBui-button{transition:opacity .3s;display:flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;padding:.4em 1em;border-radius:.3em;border:1px solid #03287E;background-color:#03287e;color:#fff}.DBui-button:hover{opacity:.8}.DBui-button:disabled{cursor:not-allowed;opacity:.5}.DBui-button .DBui-loaderSpinButton{width:30px;height:30px;border:3px solid #aaaaae;border-bottom-color:#fff;border-radius:50%;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.DBui-blackdrop{opacity:1;transition:opacity 225ms cubic-bezier(.4,0,.2,1) 0ms;position:fixed;z-index:var(--z-index-backdrop);left:0;top:0;width:100%;height:100%;background-color:#0006}.DBui-blackdrop[data-hidden=true]{opacity:0;visibility:hidden}.DBui-chip{display:flex;align-items:center;width:fit-content;padding:.4em .5em;border-radius:.3em;border:1px solid #03287E;background-color:#618aea;gap:.5em}.DBui-chip[data-checked=true]{cursor:pointer}.DBui-chip[data-checked=true]:hover{opacity:.5}.DBui-chip .DBui-chipIcon{width:20px;height:20px}.DBui-chip .DBui-chipIcon[data-checked=true]{cursor:pointer}.DBui-chip .DBui-chipIcon[data-checked=true]:hover{opacity:.5}.DBui-divider{border:1px solid #9E9E9E;width:100%}.DBui-wrapperMenu{display:inline-flex;align-items:center;cursor:pointer}.DBui-wrapperMenuItem{position:fixed;background:#fff;color:#000;border-radius:.3em;min-width:140px;max-width:320px;max-height:45%;box-shadow:#00000026 0 4px 12px;overflow-y:auto;overflow-x:hidden;transition:opacity .1s ease;z-index:var(--z-index-menu)}.DBui-wrapperMenuItem[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}.DBui-wrapperMenuItem[data-is-in-modal=true]{z-index:var(--z-index-menu-in-modal)}.DBui-modalContent{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;border-radius:1em;background-color:#fff;box-shadow:#0003 0 11px 15px -7px,#00000024 0 24px 38px 3px,#0000001f 0 9px 46px 8px;min-width:320px;min-height:150px;overflow-x:hidden;overflow-y:scroll;display:flex;flex-direction:column}.DBui-modalContent::-webkit-scrollbar{display:none}.DBui-modalContent .DBui-close{position:absolute;top:10px;right:10px;width:30px;height:30px;z-index:var(--z-index-normale);cursor:pointer}.DBui-modalContent .DBui-close:hover{opacity:.5}.DBui-disabled,.DBui-inputBasic:disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputBasic{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputBasic{border:1px solid #EB5757}.DBui-inputBase{display:flex;flex-direction:column}.DBui-inputBase[data-invalid=true] .DBui-inputLabel,.DBui-inputBase .DBui-dataInvalid{color:#eb5757}.DBui-disabled,.DBui-inputNumber:disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputNumber{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputNumber{border:1px solid #EB5757}.DBui-disabled,.DBui-inputDate[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputDate{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputDate{border:1px solid #EB5757}.DBui-inputDate{height:35px;display:flex;align-items:center;cursor:pointer}.DBui-inputDate .DBui-clearIconInputDate{width:20px}.DBui-inputDate .DBui-clearIconInputDate[data-hidden=true]{display:none!important}.DBui-inputDate .DBui-clearIconInputDate:hover{opacity:.8}.DBui-inputDateWrapperCalendar{display:flex;flex-direction:column;gap:.3em;padding:2em 0;justify-content:center;align-items:center}.DBui-inputDateWrapperCalendar .DBui-inputDateRowMonthYear,.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay,.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay{display:flex;flex-direction:row;gap:.8em}.DBui-inputDateWrapperCalendar .DBui-inputDateRowMonthYear{gap:.5em;margin-left:.5em;align-items:center}.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateHeader,.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateDay,.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateHeader,.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateDay{width:30px;height:30px;text-align:center;display:flex;align-items:center;justify-content:center}.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateDay,.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateDay{cursor:not-allowed}.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateDay[data-hidden-hover=false],.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateDay[data-hidden-hover=false]{cursor:pointer}.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateDay[data-hidden-hover=false]:hover,.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateDay[data-hidden-hover=false]:hover{background-color:#03287e;border-radius:100%;color:#fff}.DBui-inputDateWrapperCalendar .DBui-inputDateRowHeaderDay .DBui-inputDateDay[data-checked=true],.DBui-inputDateWrapperCalendar .DBui-inputDateRowDay .DBui-inputDateDay[data-checked=true]{background-color:#03287e;color:#fff;border-radius:100%}.DBui-inputDateRowMonthYearSelected{cursor:pointer;text-align:center}.DBui-inputDateRowMonthYearOption{cursor:pointer;padding:.5em 1em}.DBui-inputDateRowMonthYearOption:hover,.DBui-inputDateRowMonthYearOption[data-checked=true]{background-color:#03287e;color:#fff}.DBui-disabled,.DBui-inputDateRange[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputDateRange{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputDateRange{border:1px solid #EB5757}.DBui-inputDateRange{height:35px;display:flex;align-items:center;cursor:pointer}.DBui-inputDateRange .DBui-clearIconInputDateRange{width:20px}.DBui-inputDateRange .DBui-clearIconInputDateRange[data-hidden=true]{display:none!important}.DBui-inputDateRange .DBui-clearIconInputDateRange:hover{opacity:.8}.DBui-inputDateRangeWrapperCalendar{display:flex;flex-direction:column;gap:.3em;padding:2em 0;justify-content:center;align-items:center}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowMonthYear,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay{display:flex;flex-direction:row;gap:.8em}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowMonthYear{gap:.5em;margin-left:.5em;align-items:center}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay{cursor:pointer}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay .DBui-inputDateRangeHeader,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay .DBui-inputDateRangeDay,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay .DBui-inputDateRangeHeader,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay .DBui-inputDateRangeDay{width:30px;height:30px;text-align:center;display:flex;align-items:center;justify-content:center}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay .DBui-inputDateRangeDay[data-hidden-hover=false]:hover,.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay .DBui-inputDateRangeDay[data-hidden-hover=false]:hover{background-color:#03287e;border-radius:100%;color:#fff}.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowHeaderDay .DBui-inputDateRangeDay[data-checked=true],.DBui-inputDateRangeWrapperCalendar .DBui-inputDateRangeRowDay .DBui-inputDateRangeDay[data-checked=true]{background-color:#03287e;color:#fff;border-radius:100%}.DBui-inputDateRangeRowMonthYearSelected{cursor:pointer;text-align:center}.DBui-inputDateRangeRowMonthYearOption{cursor:pointer;padding:.5em 1em}.DBui-inputDateRangeRowMonthYearOption:hover,.DBui-inputDateRangeRowMonthYearOption[data-checked=true]{background-color:#03287e;color:#fff}.DBui-disabled,.DBui-inputDateTime[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputDateTime{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputDateTime{border:1px solid #EB5757}.DBui-inputDateTime{height:35px;display:flex;align-items:center;cursor:pointer}.DBui-inputDateTime .DBui-clearIconInputDateTime{width:20px}.DBui-inputDateTime .DBui-clearIconInputDateTime[data-hidden=true]{display:none!important}.DBui-inputDateTime .DBui-clearIconInputDateTime:hover{opacity:.8}.DBui-inputDateTimeWrapperCalendar{display:flex;flex-direction:column;padding:3em 1em;gap:.8em}@media(max-width:425px){.DBui-inputDateTimeWrapperCalendar{padding:2.5em 0;width:99vw}}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime{display:flex;flex-direction:row;gap:.3em;justify-content:center;align-items:center}@media(max-width:425px){.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime{gap:.2em}}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay{display:flex;flex-direction:column;gap:.3em;justify-content:center;align-items:center;border-right:1px solid gray;padding-right:.5em}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowMonthYear,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay{display:flex;flex-direction:row;gap:.8em}@media(max-width:425px){.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowMonthYear,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay{gap:.2em}}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowMonthYear{gap:.5em;margin-left:.5em;align-items:center}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeHeader,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeDay,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeHeader,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeDay{width:30px;height:30px;text-align:center;display:flex;align-items:center;justify-content:center}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeDay,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeDay{cursor:not-allowed}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeDay[data-hidden-hover=false],.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeDay[data-hidden-hover=false]{cursor:pointer}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeDay[data-hidden-hover=false]:hover,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeDay[data-hidden-hover=false]:hover{background-color:#03287e;border-radius:100%;color:#fff}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowHeaderDay .DBui-inputDateTimeDay[data-checked=true],.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperYearMonthDay .DBui-inputDateTimeRowDay .DBui-inputDateTimeDay[data-checked=true]{background-color:#03287e;color:#fff;border-radius:100%}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin{padding:0 .3em;align-self:flex-end;flex-direction:column;display:flex}@media(max-width:425px){.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin{padding:0 .2em}}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin .DBui-inputDateTimeWrapperHourMinOptions{max-height:200px;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin .DBui-inputDateTimeWrapperHourMinOptions::-webkit-scrollbar{display:none}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin .DBui-inputDateTimeWrapperHourMinOptions p{padding:.5em;cursor:pointer}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin .DBui-inputDateTimeWrapperHourMinOptions p:hover,.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperYearMonthDayTime .DBui-inputDateTimeWrapperHourMin .DBui-inputDateTimeWrapperHourMinOptions p[data-checked=true]{background-color:#03287e;color:#fff}.DBui-inputDateTimeWrapperCalendar .DBui-inputDateTimeWrapperButton{display:flex;gap:.5em;justify-content:flex-end}.DBui-inputDateTimeRowMonthYearSelected{cursor:pointer;text-align:center}.DBui-inputDateTimeRowMonthYearOption{cursor:pointer;padding:.5em 1em}.DBui-inputDateTimeRowMonthYearOption:hover,.DBui-inputDateTimeRowMonthYearOption[data-checked=true]{background-color:#03287e;color:#fff}.DBui-disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-wrapInputPassword .DBui-inputPassword{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],.DBui-wrapInputPassword [data-invalid=true].DBui-inputPassword{border:1px solid #EB5757}.DBui-wrapInputPassword{width:100%;position:relative}.DBui-wrapInputPassword .DBui-inputPassword{padding-right:1em}.DBui-wrapInputPassword .DBui-inputPasswordIcon{position:absolute;right:5px;top:50%;transform:translateY(-50%);cursor:pointer;width:1.5em;height:1.5em}.DBui-disabled,.DBui-wrapInputRadioList .DBui-wrapInputRadio .DBui-inputRadio:disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-wrapInputRadioList{display:flex;width:100%;gap:1em}.DBui-wrapInputRadioList[data-vertical=true]{flex-direction:column;gap:.5em}.DBui-wrapInputRadioList .DBui-wrapInputRadio{display:flex;align-items:center;gap:.3em}.DBui-wrapInputRadioList .DBui-wrapInputRadio .DBui-labelRadio[data-invalid=true]{color:#eb5757}.DBui-wrapInputRadioList .DBui-wrapInputRadio .DBui-inputRadio{border-radius:.3em;width:20px;height:20px;cursor:pointer}.DBui-disabled,.DBui-wrapInputCheckboxList .DBui-wrapInputCheckbox .DBui-inputCheckbox:disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-wrapInputCheckboxList{display:flex;width:100%;gap:1em}.DBui-wrapInputCheckboxList .DBui-wrapInputCheckbox{display:flex;align-items:center;gap:.3em}.DBui-wrapInputCheckboxList .DBui-wrapInputCheckbox .DBui-labelCheckbox[data-invalid=true]{color:#eb5757}.DBui-wrapInputCheckboxList .DBui-wrapInputCheckbox .DBui-inputCheckbox{width:100%;border-radius:.3em;width:18px;height:18px}.DBui-disabled,.DBui-inputTextarea:disabled{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-inputTextarea{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-inputTextarea{border:1px solid #EB5757}.DBui-inputTextarea{resize:none}.DBui-disabled,.DBui-wrapperInputSelect[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-wrapperInputSelect{cursor:pointer;position:relative;height:35px;width:100%;padding:.3em 35px .3em .5em;border-radius:8px;border:1px solid #e3e3e8;background-color:#fff;color:#000;display:flex}.DBui-wrapperInputSelect[data-invalid=true]{border:1px solid #eb5757}.DBui-wrapperInputSelect .DBui-wrapperLabel{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.DBui-wrapperInputSelect .DBui-placeholder{color:#c3c3c3}.DBui-wrapperInputSelect .DBui-wrapperLabelInputSelect{display:flex;gap:.3em;align-items:center;width:100%}.DBui-wrapperInputSelect .DBui-wrapperLabelInputSelect .DBui-clearIconInputSelect{width:20px}.DBui-wrapperInputSelect .DBui-wrapperLabelInputSelect .DBui-clearIconInputSelect[data-hidden=true]{display:none!important}.DBui-wrapperInputSelect .DBui-wrapperLabelInputSelect .DBui-clearIconInputSelect:hover{opacity:.8}.DBui-wrapperInputSelect .DBui-arrowIconInputSelect{position:absolute;right:5px;top:50%;transform:translateY(-50%);transition:transform .2s}.DBui-wrapperInputSelect .DBui-arrowIconInputSelect[data-checked=false]{transform:rotate(180deg) translateY(50%)}.DBui-menuItemInputSelect{background-color:#fff;color:#000;padding:.3em .5em;cursor:pointer}.DBui-menuItemInputSelect:hover{background-color:#fafafa}.DBui-menuItemInputSelect[data-checked=true]{background-color:#0045a5;color:#fff}.DBui-disabled,.DBui-wrapInputAutoComplete .DBui-inputAutoComplete:disabled,.DBui-wrapInputAutoComplete[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-wrapInputAutoComplete{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-wrapInputAutoComplete{border:1px solid #EB5757}.DBui-wrapInputAutoComplete{padding:.4em .5em;display:flex;align-items:center;gap:.3em;height:36px}.DBui-wrapInputAutoComplete .DBui-wrapSelectValueInputAutoComplete{display:flex;align-items:center}.DBui-wrapInputAutoComplete .DBui-wrapSelectValueInputAutoComplete .DBui-iconInputAutoComplete{width:20px;color:#e3e3e8;cursor:pointer}.DBui-wrapInputAutoComplete .DBui-inputAutoComplete{border:none;background-color:#fff;align-items:center;width:100%}.DBui-menuItemInputAutoComplete{background-color:#fff;color:#000;padding:.3em .5em;cursor:pointer}.DBui-menuItemInputAutoComplete:hover{background-color:#fafafa}.DBui-menuItemInputAutoComplete[data-checked=true]{background-color:#0045a5;color:#fff}.DBui-switch{position:relative;display:inline-block;width:51px;height:28px}.DBui-switch input{opacity:0;width:0;height:0}.DBui-switch .DBui-minus{position:absolute;height:9px;width:1px;left:18px;bottom:9px;background-color:#1c1c1e;z-index:1;border-radius:999px}.DBui-switch .DBui-miniCircle{position:absolute;border-radius:100%;height:7px;width:7px;right:11px;bottom:10px;box-shadow:0 0 0 1px #000;z-index:1}.DBui-switch .DBui-slider{border-radius:34px;position:absolute;cursor:pointer;inset:0;background-color:#aaa;-webkit-transition:.3s cubic-bezier(.61,-.01,.2,1.37);transition:.3s cubic-bezier(.61,-.01,.2,1.37)}.DBui-switch .DBui-slider:before{border-radius:50%;z-index:2;position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#1c1c1e;box-shadow:0 .31px 10px #00000004;-webkit-transition:.3s cubic-bezier(.61,-.01,.2,1.37);transition:.3s cubic-bezier(.61,-.01,.2,1.37)}.DBui-switch input:checked+.DBui-slider{background-color:#477cee}.DBui-switch input:checked+.DBui-slider:before{-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translate(22px)}.DBui-switch .DBui-wrapInputList{display:flex;flex-direction:row}.DBui-switch .DBui-wrapInputList[data-disabled=true]{opacity:.6;pointer-events:none}.DBui-disabled,.DBui-wrapperInputAsyncSelect[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true]{border:1px solid #EB5757}.DBui-wrapperInputAsyncSelect{cursor:pointer;position:relative;height:35px;width:100%;padding:.3em 35px .3em .5em;border-radius:8px;border:1px solid #e3e3e8;background-color:#fff;color:#000;display:flex}.DBui-wrapperInputAsyncSelect[data-invalid=true]{border:1px solid #eb5757}.DBui-wrapperInputAsyncSelect .DBui-wrapperLabel{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.DBui-wrapperInputAsyncSelect .DBui-placeholder{color:#c3c3c3}.DBui-wrapperInputAsyncSelect .DBui-wrapperLabelInputAsyncSelect{display:flex;gap:.3em;align-items:center;width:100%}.DBui-wrapperInputAsyncSelect .DBui-wrapperLabelInputAsyncSelect .DBui-clearIconInputAsyncSelect{width:20px}.DBui-wrapperInputAsyncSelect .DBui-wrapperLabelInputAsyncSelect .DBui-clearIconInputAsyncSelect[data-hidden=true]{display:none!important}.DBui-wrapperInputAsyncSelect .DBui-wrapperLabelInputAsyncSelect .DBui-clearIconInputAsyncSelect:hover{opacity:.8}.DBui-wrapperInputAsyncSelect .DBui-arrowIconInputAsyncSelect{position:absolute;right:5px;top:50%;transform:translateY(-50%);transition:transform .2s}.DBui-wrapperInputAsyncSelect .DBui-arrowIconInputAsyncSelect[data-checked=false]{transform:rotate(180deg) translateY(50%)}.DBui-wrapperMenuItemInputAsyncSelect{max-height:45vh;overflow-y:auto}.DBui-wrapperMenuItemInputAsyncSelect .DBui-menuItemInputAsyncSelect{background-color:#fff;color:#000;padding:.3em .5em;cursor:pointer}.DBui-wrapperMenuItemInputAsyncSelect .DBui-menuItemInputAsyncSelect:hover{background-color:#fafafa}.DBui-wrapperMenuItemInputAsyncSelect .DBui-menuItemInputAsyncSelect[data-checked=true]{background-color:#0045a5;color:#fff}.DBui-wrapperMenuItemInputAsyncSelect .DBui-menuItemInputAsyncSelect .DBui-menuLoading,.DBui-wrapperMenuItemInputAsyncSelect .DBui-menuItemInputAsyncSelect .DBui-menuEnd{padding:8px;text-align:center;font-size:12px;opacity:.6}.DBui-disabled,.DBui-wrapInputAsyncAutoComplete .DBui-inputAsyncAutoComplete:disabled,.DBui-wrapInputAsyncAutoComplete[data-disabled=true]{cursor:not-allowed;background-color:#fafafa;color:#000}.DBui-input,.DBui-wrapInputAsyncAutoComplete{width:100%;padding:.3em .5em;border-radius:.3em;border:1px solid #E3E3E8;background-color:#fff;color:#000}.DBui-input[data-invalid=true],[data-invalid=true].DBui-wrapInputAsyncAutoComplete{border:1px solid #EB5757}.DBui-wrapInputAsyncAutoComplete{padding:.4em .5em;display:flex;align-items:center;gap:.3em;height:36px}.DBui-wrapInputAsyncAutoComplete .DBui-wrapSelectValueInputAsyncAutoComplete{display:flex;align-items:center}.DBui-wrapInputAsyncAutoComplete .DBui-wrapSelectValueInputAsyncAutoComplete .DBui-iconInputAsyncAutoComplete{width:20px;color:#e3e3e8;cursor:pointer}.DBui-wrapInputAsyncAutoComplete .DBui-inputAsyncAutoComplete{border:none;background-color:#fff;align-items:center;width:100%}.DBui-wrapperMenuItemInputAsyncAutoComplete{max-height:45vh;overflow-y:auto}.DBui-wrapperMenuItemInputAsyncAutoComplete .DBui-menuItemInputAsyncAutoComplete{background-color:#fff;color:#000;padding:.3em .5em;cursor:pointer}.DBui-wrapperMenuItemInputAsyncAutoComplete .DBui-menuItemInputAsyncAutoComplete:hover{background-color:#fafafa}.DBui-wrapperMenuItemInputAsyncAutoComplete .DBui-menuItemInputAsyncAutoComplete[data-checked=true]{background-color:#0045a5;color:#fff}.DBui-wrapperMenuItemInputAsyncAutoComplete .DBui-menuItemInputAsyncAutoComplete .DBui-menuLoading,.DBui-wrapperMenuItemInputAsyncAutoComplete .DBui-menuItemInputAsyncAutoComplete .DBui-menuEnd{padding:8px;text-align:center;font-size:12px;opacity:.6}