bromcom-ui 2.9.0-rc.8 → 2.9.0

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -0,0 +1,1009 @@
+@charset "UTF-8";
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+.size-1 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.size-2 {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.size-3 {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.size-4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+.size-5 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.size-6 {
+  font-size: 30px;
+  line-height: 38px;
+}
+
+.size-7 {
+  font-size: 38px;
+  line-height: 46px;
+}
+
+.size-8 {
+  font-size: 46px;
+  line-height: 54px;
+}
+
+.size-9 {
+  font-size: 56px;
+  line-height: 64px;
+}
+
+.weight-regular {
+  font-weight: 400;
+}
+
+.weight-semibold {
+  font-weight: 500;
+}
+
+/**
+ * Generator
+ */
+.input-size-large {
+  height: 40px;
+}
+
+.input-size-medium {
+  height: 32px;
+}
+
+.input-size-small {
+  height: 24px;
+}
+
+.resize-none textarea {
+  resize: none;
+}
+
+.resize-vertical textarea {
+  resize: vertical;
+}
+
+.resize-auto textarea {
+  height: auto;
+  resize: none;
+}
+
+.textarea-size-large {
+  padding: 4px 0 0 4px;
+  min-height: 40px;
+}
+.textarea-size-large .bcm-input-element {
+  min-height: calc((40px - 8px) + 2px);
+}
+.textarea-size-large .input-clear-button {
+  height: calc( 40px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-medium {
+  padding: 4px 0 0 4px;
+  min-height: 32px;
+}
+.textarea-size-medium .bcm-input-element {
+  min-height: calc((32px - 8px) + 2px);
+}
+.textarea-size-medium .input-clear-button {
+  height: calc( 32px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-small {
+  padding: 0px 0 0 4px;
+  min-height: 24px;
+}
+.textarea-size-small .bcm-input-element {
+  min-height: calc((24px - 8px) + 2px);
+}
+.textarea-size-small .input-clear-button {
+  height: calc( 24px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.rc-picker-rtl {
+  direction: rtl;
+}
+
+.rc-picker-panel-focused {
+  border-color: #4293cf;
+}
+
+.rc-picker-panel-rtl {
+  direction: rtl;
+}
+
+.rc-picker-decade-panel,
+.rc-picker-year-panel,
+.rc-picker-month-panel,
+.rc-picker-week-panel,
+.rc-picker-date-panel,
+.rc-picker-time-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.rc-picker-decade-panel table,
+.rc-picker-year-panel table,
+.rc-picker-month-panel table,
+.rc-picker-week-panel table,
+.rc-picker-date-panel table,
+.rc-picker-time-panel table {
+  text-align: center;
+  border-collapse: collapse;
+}
+
+.rc-picker-cell {
+  color: #aaa;
+}
+
+.rc-picker-cell-disabled {
+  opacity: 0.2;
+}
+
+.rc-picker-cell-inner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 20px;
+  background: transparent;
+  border: 0;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: background 0.3s, border 0.3s;
+}
+
+.rc-picker-cell-inner:hover {
+  background: rgba(0, 0, 255, 0.3);
+}
+
+.rc-picker-cell-in-view {
+  color: #333;
+}
+
+.rc-picker-cell-in-range > .rc-picker-cell-inner {
+  background: rgba(0, 0, 255, 0.05);
+}
+
+.rc-picker-cell-range-hover-start,
+.rc-picker-cell-range-hover-end,
+.rc-picker-cell-range-hover {
+  position: relative;
+}
+
+.rc-picker-cell-range-hover-start::after,
+.rc-picker-cell-range-hover-end::after,
+.rc-picker-cell-range-hover::after {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: 1px solid green;
+  border-right: 0;
+  border-left: 0;
+  content: "";
+  pointer-events: none;
+}
+
+.rc-picker-cell-range-hover-start::after {
+  border-left: 1px solid green !important;
+}
+
+.rc-picker-cell-range-hover-end::after {
+  border-right: 1px solid green !important;
+}
+
+.rc-picker-cell-today > .rc-picker-cell-inner {
+  border: 1px solid blue;
+}
+
+.rc-picker-cell-range-start > .rc-picker-cell-inner,
+.rc-picker-cell-range-end > .rc-picker-cell-inner,
+.rc-picker-cell-selected > .rc-picker-cell-inner {
+  background: rgba(0, 0, 255, 0.2);
+}
+
+.rc-picker-presets {
+  background: #ccccff;
+}
+
+.rc-picker-presets ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rc-picker-footer,
+.rc-picker-picker-footer {
+  background: green;
+}
+
+.rc-picker-ranges {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  list-style: none;
+}
+
+.rc-picker-ranges > li {
+  display: inline-block;
+}
+
+.rc-picker-ok {
+  float: right;
+}
+
+.rc-picker-year-panel .rc-picker-cell-inner,
+.rc-picker-month-panel .rc-picker-cell-inner {
+  width: 80px;
+}
+
+.rc-picker-week-panel-row:hover .rc-picker-cell {
+  background: red;
+}
+
+.rc-picker-week-panel-row-selected .rc-picker-cell {
+  background: rgba(0, 0, 255, 0.3);
+}
+
+.rc-picker-week-panel-row-range-hover .rc-picker-cell {
+  background: rgba(0, 255, 0, 0.1);
+}
+
+.rc-picker-week-panel-row-range-start .rc-picker-cell,
+.rc-picker-week-panel-row-range-end .rc-picker-cell {
+  background: rgba(0, 255, 0, 0.3);
+}
+
+.rc-picker-week-panel .rc-picker-cell,
+.rc-picker-week-panel .rc-picker-cell-inner {
+  width: 20px;
+}
+
+.rc-picker-week-panel .rc-picker-cell-week {
+  color: #999;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.rc-picker-week-panel .rc-picker-cell:hover > .rc-picker-cell-inner,
+.rc-picker-week-panel .rc-picker-cell-selected > .rc-picker-cell-inner {
+  background: transparent;
+}
+
+.rc-picker-date-panel .rc-picker-cell-inner {
+  width: 20px;
+}
+
+.rc-picker-time-panel {
+  width: auto;
+}
+
+.rc-picker-time-panel .rc-picker-content {
+  display: flex;
+  max-height: 200px;
+}
+
+.rc-picker-time-panel-column {
+  flex: none;
+  width: 50px;
+  margin: 0;
+  padding: 0 0 180px 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  font-size: 12px;
+  text-align: left;
+  list-style: none;
+  transition: background 0.3s;
+}
+
+.rc-picker-time-panel-column-active {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.rc-picker-time-panel-column:hover {
+  overflow-y: auto;
+}
+
+.rc-picker-time-panel-column > li {
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled {
+  opacity: 0.5;
+}
+
+.rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
+  display: block;
+  width: 100%;
+  height: 20px;
+  margin: 0;
+  padding: 0 0 0 12px;
+  color: #333;
+  line-height: 20px;
+  text-align: left;
+}
+
+.rc-picker-panel-rtl .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
+  padding: 0 12px 0 0;
+  text-align: right;
+}
+
+.rc-picker-datetime-panel {
+  display: flex;
+}
+
+.rc-picker-datetime-panel .rc-picker-time-panel {
+  border-left: 1px solid #999;
+}
+
+.rc-picker-datetime-panel .rc-picker-date-panel,
+.rc-picker-datetime-panel .rc-picker-time-panel {
+  transition: opacity 0.3s;
+}
+
+.rc-picker-datetime-panel-active .rc-picker-date-panel,
+.rc-picker-datetime-panel-active .rc-picker-time-panel {
+  opacity: 0.3;
+}
+
+.rc-picker-datetime-panel-active .rc-picker-date-panel-active,
+.rc-picker-datetime-panel-active .rc-picker-time-panel-active {
+  opacity: 1;
+}
+
+.rc-picker-rtl .rc-picker-input {
+  text-align: right;
+}
+
+.rc-picker-rtl .rc-picker-clear {
+  right: auto;
+  left: 4px;
+}
+
+.rc-picker-dropdown {
+  position: absolute;
+  box-shadow: 0 0 1px red;
+}
+
+.rc-picker-dropdown-range {
+  padding: 10px 0;
+}
+
+.rc-picker-dropdown-hidden {
+  display: none;
+}
+
+.rc-picker-dropdown-placement-topLeft .rc-picker-range-arrow,
+.rc-picker-dropdown-placement-topRight .rc-picker-range-arrow {
+  bottom: 6px;
+  transform: rotate(135deg);
+}
+
+.rc-picker-dropdown-placement-bottomLeft .rc-picker-range-arrow,
+.rc-picker-dropdown-placement-bottomright .rc-picker-range-arrow {
+  top: 6px;
+  transform: rotate(-45deg);
+}
+
+.rc-picker-dropdown .rc-picker-range-arrow {
+  position: absolute;
+  left: 10px;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  margin-left: 10px;
+  transition: all 0.3s;
+}
+
+.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow {
+  right: 10px;
+  left: auto;
+  margin-right: 10px;
+  margin-left: 0;
+}
+
+.rc-picker-dropdown .rc-picker-range-arrow::before,
+.rc-picker-dropdown .rc-picker-range-arrow::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+
+.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::before,
+.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::after {
+  right: 50%;
+  left: auto;
+  transform: translate(50%, -50%);
+}
+
+.rc-picker-dropdown .rc-picker-range-arrow::before {
+  width: 10px;
+  height: 10px;
+  border: 5px solid blue;
+  border-color: blue blue transparent transparent;
+}
+
+.rc-picker-dropdown .rc-picker-range-arrow::after {
+  width: 8px;
+  height: 8px;
+  border: 4px solid blue;
+  border-color: #fff0ff #fff0ff transparent transparent;
+}
+
+.rc-picker-range {
+  position: relative;
+  display: inline-flex;
+}
+
+.rc-picker-range-wrapper {
+  display: flex;
+}
+
+.rc-picker-range .rc-picker-active-bar {
+  bottom: 0;
+  height: 3px;
+  background: green;
+  opacity: 0;
+  transition: all 0.3s;
+  pointer-events: none;
+}
+
+.rc-picker-range.rc-picker-focused .rc-picker-active-bar {
+  opacity: 1;
+}
+
+.rc-picker-panel-container {
+  display: inline-block;
+  vertical-align: top;
+  transition: margin 0.3s;
+}
+
+.rc-picker-panel-layout {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+}
+
+/* custom */
+.bcm-date {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  background-color: #fff;
+  border: 1px solid #cbd5e1;
+  color: #334155;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: text;
+  padding: 0 0 0 4px;
+  position: relative;
+  width: 100%;
+  /* ===== Dropdown ===== */
+}
+.bcm-date--large {
+  height: 40px;
+  font-size: 16px;
+}
+.bcm-date--medium {
+  height: 32px;
+  font-size: 14px;
+}
+.bcm-date--small {
+  height: 24px;
+  font-size: 12px;
+}
+.bcm-date:hover {
+  /* bcm */
+  border: 1px solid #4293cf;
+  /* bcm */
+}
+.bcm-date-focused {
+  background-color: #f8fafc;
+}
+.bcm-date-suffix {
+  color: #334155;
+}
+.bcm-date-suffix:not(:empty) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  order: 2;
+}
+.bcm-date-suffix::before {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+  font-family: "Font Awesome 6 Pro";
+  font-weight: 400;
+  line-height: 1;
+  box-sizing: border-box;
+  padding: 0 4px;
+  cursor: pointer;
+}
+.bcm-date--datetime .bcm-date-suffix::before {
+  content: "\e0d2";
+}
+.bcm-date--date .bcm-date-suffix::before {
+  content: "\f133";
+}
+.bcm-date--time .bcm-date-suffix::before {
+  content: "\f017";
+}
+.bcm-date-input {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  padding: 0 4px;
+  color: #334155;
+}
+.bcm-date-input-placeholder {
+  color: #94a3b8;
+}
+.bcm-date-input > input {
+  color: inherit;
+  width: 100%;
+  flex: 1;
+  border: none;
+  background: transparent;
+  box-shadow: unset;
+  line-height: 22px;
+  font-family: "Inter", sans-serif;
+  cursor: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+.bcm-date-input > input::placeholder {
+  font-family: "Inter", sans-serif;
+  color: #cbd5e1;
+  user-select: none;
+}
+.bcm-date-input > input::-webkit-search-decoration, .bcm-date-input > input::-webkit-search-cancel-button, .bcm-date-input > input::-webkit-search-results-button, .bcm-date-input > input::-webkit-search-results-decoration, .bcm-date-input > input::-webkit-calendar-picker-indicator, .bcm-date-input > input::-webkit-inner-spin-button, .bcm-date-input > input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+.bcm-date-input > input::-moz-placeholder {
+  opacity: 1;
+}
+.bcm-date-input > input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+.bcm-date-clear {
+  color: #334155;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  font-size: 20px;
+  padding-bottom: 3px;
+  line-height: 1;
+  order: 1;
+  cursor: pointer;
+  font-weight: 400;
+}
+.bcm-date-clear-btn::after {
+  content: "×";
+}
+.bcm-date-disabled {
+  background-color: #f8fafc;
+  color: #a0aec0;
+  cursor: not-allowed;
+}
+.bcm-date-disabled input {
+  color: #a0aec0;
+}
+.bcm-date-disabled:hover {
+  border: 1px solid #cbd5e1;
+}
+.bcm-date-disabled .bcm-date-input {
+  cursor: not-allowed;
+}
+.bcm-date-disabled .bcm-date-suffix:before {
+  cursor: not-allowed;
+}
+.bcm-date-disabled .bcm-date-clear {
+  cursor: not-allowed;
+}
+.bcm-date--error {
+  border: 1px solid #e53e3e;
+}
+.bcm-date--error:hover {
+  border: 1px solid #e53e3e;
+}
+.bcm-date-dropdown {
+  position: absolute;
+  box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  top: -9999;
+  left: -9999;
+  border-radius: 4px;
+}
+.bcm-date-dropdown-placement-bottomLeft, .bcm-date-dropdown-placement-bottomRight {
+  top: 0;
+  display: block;
+}
+.bcm-date-dropdown-placement-topLeft, .bcm-date-dropdown-placement-topRight {
+  bottom: 0;
+  display: block;
+}
+.bcm-date-dropdown-hidden {
+  display: none;
+}
+.bcm-date-dropdown .bcm-date-panel-container {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+.bcm-date-dropdown .bcm-date-panels {
+  display: inline-flex;
+}
+.bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel, .bcm-date-dropdown .bcm-date-time-panel {
+  width: 256px;
+}
+.bcm-date-dropdown .bcm-date-time-panel {
+  width: auto;
+  padding-top: 4px;
+}
+.bcm-date-dropdown .bcm-date-time-panel .bcm-date-content {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  text-align: center;
+  display: flex;
+  flex: auto;
+  height: 224px;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column {
+  flex: 1 0 auto;
+  width: 56px;
+  margin: 4px 0;
+  padding: 0;
+  overflow-y: hidden;
+  text-align: start;
+  list-style: none;
+  transition: background 0.2s;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.45) transparent;
+  position: relative;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column:not(:first-child) {
+  border-inline-start: 1px solid rgba(5, 5, 5, 0.06);
+}
+.bcm-date-dropdown .bcm-date-time-panel-column-active {
+  background: rgba(0, 0, 255, 0.1);
+}
+.bcm-date-dropdown .bcm-date-time-panel-column:hover {
+  overflow-y: auto;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li {
+  margin: 0;
+  padding: 0;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.disabled {
+  opacity: 0.5;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell {
+  margin-inline: 4px;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner {
+  display: block;
+  width: 48px;
+  height: 28px;
+  margin: 0;
+  padding-block: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner {
+  background: #e6f4ff;
+}
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.25);
+}
+.bcm-date-dropdown .bcm-date-datetime-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel {
+  padding-top: 8px;
+}
+.bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header {
+  display: none;
+}
+.bcm-date-dropdown .bcm-date-header {
+  padding: 0 8px;
+  color: rgba(0, 0, 0, 0.88);
+  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+}
+.bcm-date-dropdown .bcm-date-header > * {
+  flex: none;
+}
+.bcm-date-dropdown .bcm-date-header > button {
+  min-width: 20px;
+}
+.bcm-date-dropdown .bcm-date-header button {
+  padding: 0;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 40px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-size: inherit;
+}
+.bcm-date-dropdown .bcm-date-header button:hover {
+  color: #3b82f6;
+}
+.bcm-date-dropdown .bcm-date-header-view {
+  flex: auto;
+  text-align: center;
+  font-weight: 600;
+  line-height: 40px;
+  gap: 8px;
+  font-size: 14px;
+}
+.bcm-date-dropdown .bcm-date-header-view button {
+  color: inherit;
+  font-weight: inherit;
+  vertical-align: top;
+  padding: 0 4px;
+}
+.bcm-date-dropdown .bcm-date-body {
+  padding: 8px 18px;
+}
+.bcm-date-dropdown .bcm-date-content {
+  text-align: center;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.bcm-date-dropdown .bcm-date-content thead tr th {
+  color: #334155;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 8px 0;
+  text-align: center;
+  text-transform: uppercase;
+}
+.bcm-date-dropdown .bcm-date-cell {
+  position: relative;
+}
+.bcm-date-dropdown .bcm-date-cell::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  height: 24px;
+  transform: translateY(-50%);
+  transition: all 0.3s;
+  content: "";
+}
+.bcm-date-dropdown .bcm-date-cell-inner {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  transition: background 0.2s, border 0.2s;
+  cursor: pointer;
+  color: #94a3b8;
+}
+.bcm-date-dropdown .bcm-date-cell-inner:hover {
+  background: #e2e8f0;
+  color: #64748b;
+}
+.bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner {
+  color: #334155;
+}
+.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner {
+  border: 1px solid #3b82f6;
+  color: #3b82f6;
+}
+.bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover {
+  background: #e2e8f0;
+  color: #64748b;
+}
+.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner {
+  color: #fff;
+  background: #3b82f6;
+}
+.bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover {
+  background: #2563eb;
+  color: #fff;
+}
+.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner {
+  background: #bfdbfe;
+}
+.bcm-date-dropdown .bcm-date-cell-in-range::before {
+  background: #bfdbfe;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner {
+  background: #93c5fd;
+  color: #334155;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover::before {
+  background: #93c5fd;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner {
+  background-color: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover {
+  background: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start::before {
+  background: #bfdbfe;
+  inset-inline-start: 50%;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner {
+  background-color: #3b82f6;
+  color: #fff;
+  border-radius: 0 4px 4px 0;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover {
+  background: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end::before {
+  background: #bfdbfe;
+  inset-inline-end: 50%;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner {
+  background-color: #93c5fd;
+  color: #334155;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover {
+  background: #93c5fd;
+  color: #334155;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover {
+  background: #93c5fd;
+  color: #334155;
+  border-radius: 0 4px 4px 0;
+}
+.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.25);
+}
+.bcm-date-dropdown .bcm-date-cell-disabled::before {
+  background: rgba(0, 0, 0, 0.04);
+}
+.bcm-date-dropdown .bcm-date-footer {
+  border-top: 1px solid rgba(5, 5, 5, 0.06);
+  width: min-content;
+  min-width: 100%;
+  line-height: 38px;
+  text-align: center;
+}
+.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn {
+  color: #3b82f6;
+  cursor: pointer;
+  padding: 0 8px;
+}
+.bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover {
+  color: #2563eb;
+}
+.bcm-date-dropdown .bcm-date-ranges {
+  margin: 0;
+  margin-bottom: 0;
+  padding: 4px 12px;
+  overflow: hidden;
+  line-height: 34px;
+  text-align: start;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+}
+.bcm-date-dropdown .bcm-date-ranges > li {
+  display: inline-block;
+}
+.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok {
+  margin-inline-start: auto;
+}
+.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok > button {
+  font-size: 14px;
+  color: #fff;
+  background-color: #3b82f6;
+  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
+  height: 24px;
+  padding: 0 7px;
+  border-radius: 4px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.bcm-date-dropdown .bcm-date-ranges .bcm-date-ok > button:hover {
+  background-color: #2563eb;
+}
+.bcm-date-dropdown .bcm-date-now {
+  text-align: right;
+}
+.bcm-date-dropdown .bcm-date-now-btn {
+  color: #3b82f6;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+.bcm-date-dropdown .bcm-date-now-btn:hover {
+  color: #2563eb;
+}
+.bcm-date-dropdown .bcm-date-range-wrapper {
+  display: flex;
+  position: relative;
+}