/* styles to rewrite devExpress themes */

/* base  button red */
.dxbl-btn-standalone.dxbl-btn-primary {
  display: flex;
  cursor: pointer;
  border: none;
  border-radius: var(--space-xl);
  transition: all 200ms;
  width: fit-content;
  border-radius: var(--space-xl);
  background: var(--color-red-100);
  font: var(--font-heading-s);
  color: var(--color-white-100);
  padding: var(--space-s-extra) var(--space-l);
  height: 56px;
}
.dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
  background: var(--color-red-50);
}

.devDropDownItemListBox.dxbl-list-box-multi-select .dxbl-text-edit {
  display: none;
}

/* base button green */
.dxbl-btn-standalone.dxbl-btn-primary.green {
  border: none;
  background: var(--color-bright-green-100);
}

.dxbl-btn:not(.dxbl-disabled):not(:disabled).green:hover {
  background: var(--color-bright-green-70);
}

/* base button white outline */
.dxbl-btn-standalone.dxbl-btn-primary.whiteOutline {
  color: white;
  border: 1px solid white;
  background: transparent;
}

.dxbl-btn:not(.dxbl-disabled):not(:disabled).whiteOutline:hover {
  color: var(--color-bright-green-30);
  border-color: white;
  background: transparent;
}
/* ------------ base input text field -----------------------*/
.input {
  display: flex;
  width: 100%;
  border-radius: var(--space-xl);
  border: var(--space-0, 1px) solid var(--color-green-30);
  background: var(--color-white-10);
  padding: var(--space-s-extra, 15px) var(--space-m);
  margin-block-start: var(--space-s-extra);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.input-row {
  display: flex;
  flex-direction: column;
  margin-block-end: var(--space-s-extra);
}
.input-row > .input {
  margin-block-end: 0;
}
.input-row > .label {
  color: var(--color-green-100);
  font: 600 var(--font-m);
}
.input:focus-within {
  border-color: var(--color-green-30);
  outline: none;
  box-shadow: var(--color-green-30);
}
.input.invalid {
  border-color: var(--color-red-100);
}
.text-error {
  color: var(--color-red-100);
  font: 600 var(--font-xs);
  margin-block-start: var(--space-xxs);
  margin-block-end: var(--space-s-extra);
}

/* ---------------- transparent dropdown with green border  -----------------*/
.devDropDownTransparent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--space-xxs) * 28);
  min-width: 3.5rem;
  border-radius: var(--space-xl, 40px);
  border: var(--space-xxs) solid transparent;
  white-space: nowrap;
  font: var(--font-heading-s);
  padding: var(--space-s);
  border: 1px solid rgba(128, 175, 175, 0.3);
  background: transparent;
  box-shadow: none;
}

.dxbl-text-edit > .dxbl-text-edit-input {
  font: 600 var(--font-s);
  color: var(--color-green-100);
}
.dxbl-list-box-render-container:not(.dxbl-disabled):not(:disabled):not(
    .dxbl-readonly
  ):not(.dxbl-list-box-multi-select)[data-dx-focus-hidden]
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > :not(.dxbl-list-box-empty-data-container)
  > li:not(.dxbl-list-box-group-item):not(
    [dxbl-top-virtual-spacer-element]
  ):not([dxbl-bottom-virtual-spacer-element]).dxbl-list-box-item-selected:hover,
.dxbl-list-box:not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly):not(
    .dxbl-list-box-multi-select
  )[data-dx-focus-hidden]
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > :not(.dxbl-list-box-empty-data-container)
  > li:not(.dxbl-list-box-group-item):not(
    [dxbl-top-virtual-spacer-element]
  ):not(
    [dxbl-bottom-virtual-spacer-element]
  ).dxbl-list-box-item-selected:hover {
  background-color: var(--color-bright-green-100);
}
.dxbl-list-box-render-container
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > ul
  > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before,
.dxbl-list-box
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > ul
  > li.dxbl-list-box-item-selected:not(.dxbl-list-box-item-disabled)::before {
  background-color: var(--color-green-50);
}
.dxbl-scroll-viewer-content li {
  font: var(--font-s);
}
.dxbl-text-edit
  > .dxbl-btn-group-vertical
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before,
.dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before,
.dxbl-text-edit
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before {
  background-color: transparent;
}
.dxbl-text-edit
  > .dxbl-btn-group-vertical
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before,
.dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before,
.dxbl-text-edit
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover::before {
  background-color: transparent;
}
.devDropDown:hover,
.devDropDown:hover * {
  cursor: pointer;
}

.dxbl-text-edit > .dxbl-btn-group,
.dxbl-text-edit > .dxbl-btn-group-vertical {
  background: transparent;
  border: none;
}

.dxbl-btn-group {
  background: transparent;
  border: none;
}

.dxbl-text-edit > .dxbl-text-edit-input {
  font: 600 var(--font-s);
  color: var(--color-green-100);
}

input::placeholder {
  font: 600 var(--font-s);
  color: white;
  opacity: 1; /* Firefox */
}

input::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: red;
}

/* ---------------- basic radio  ------------------- */
.dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-checked
  > .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
}
.dxbl-checkbox.dxbl-checkbox-radio .dxbl-checkbox-check-element::before {
  border: 2px solid var(--color-green-100);
  opacity: 1;
}
.dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-checked
  > .dxbl-checkbox-check-element::after {
  background-color: var(--color-green-100);
}
.dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(.dxbl-disabled):not(
    :disabled
  ):hover.dxbl-checkbox-checked
  .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
  opacity: 1;
}
.dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(.dxbl-disabled):not(
    :disabled
  ):hover.dxbl-checkbox-checked
  .dxbl-checkbox-check-element::after {
  background-color: var(--color-green-100);
}
.dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(.dxbl-disabled):not(
    :disabled
  ):hover.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
  opacity: 1;
}
.dxbl-checkbox > .dxbl-text {
  color: var(--color-green-100);
}
.dev-radio .dxbl-checkbox-unchecked .dxbl-text {
  font: var(--font-s);
}
.dev-radio .dxbl-checkbox-checked .dxbl-text {
  font: 600 var(--font-s);
}
/* ---------------- basic checkbox ------------------------ */
.checkbox
  .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked
  .dxbl-checkbox-check-element {
  background-color: var(--color-green-100);
}
checkbox
  .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-black-100);
}

.checkbox-card
  .dxbl-checkbox:not(.dxbl-checkbox-switch):not(
    .dxbl-checkbox-radio
  ).dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element::before {
  border: 1px solid var(--color-green-100);
  opacity: 1;
}
.checkbox
  .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-black-100);
}
/* ---------------- radio group switcher ------------------- */
.switch-group
  .dxbl-checkbox:not(.dxbl-checkbox-switch)
  .dxbl-checkbox-check-element {
  display: none;
}
.switch-group .dxbl-radio-group.dxbl-radio-group-vertical {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-wrap: nowrap;
}
.switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio {
  display: flex;
  justify-content: center;
}
.dev-switch-group .dxbl-radio-group.dxbl-radio-group-vertical {
  display: flex;
  flex-direction: column;
}
.dev-switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio {
  width: max-content;
}

.switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio
  ~ .dxbl-checkbox-radio {
  padding: 0;
}

.dev-switch-group .dxbl-checkbox-checked {
  background-color: var(--color-green-100);
}
.dev-switch-group .dxbl-checkbox-checked .dxbl-text {
  color: var(--color-white-100);
}

.dev-switch-group .dxbl-checkbox-unchecked {
  border: 1px solid var(--color-green-100);
}
[b-ozezzzuyhs]
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio
  + .dxbl-checkbox-radio {
  border: 1px solid var(--color-bright-green-100);
}

.dev-switch-group .dx-demo-radio-group-label {
  font: 600 var(--font-xs);
  color: var(--color-bright-green-100);
  padding-block-end: var(--space-s);
}
.dev-switch-group
  .dxbl-checkbox.valid.dxbl-checkbox-radio.dxbl-checkbox-checked {
  background-color: var(--color-bright-green-100);
}

.dev-switch-group .dxbl-text {
  padding: var(--space-s) var(--space-s-extra);
}

.dev-switch-group .dxbl-checkbox label {
  font: 600 var(--font-xs);
  color: var(--color-green-100);
  cursor: pointer;
}
.dev-switch-group .dxbl-checkbox > .dxbl-text:last-child {
  padding-inline-start: var(--space-s-extra);
}
.dev-switch-group .dxbl-checkbox-check-element {
  display: none;
}
.dev-switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio
  ~ .dxbl-checkbox-radio {
  padding: 0;
}
.switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio:first-of-type {
  border-radius: var(--space-m, 20px) 0px 0px var(--space-m, 20px);
}
.switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio:last-of-type {
  border-radius: 0px var(--space-m, 20px) var(--space-m, 20px) 0px;
}
.switch-group
  .dxbl-radio-group.dxbl-radio-group-vertical
  > .dxbl-checkbox-radio:not(:first-of-type):not(:last-of-type) {
  border: 1px solid var(--color-bright-green-100);
  border-left: 0;
  border-right: 0;
}

/* -------------------- calendar input -----------------------*/

.input-group .input.dxbl-text-edit:focus-within {
  border-color: var(--color-bright-green-70, #4d8f90);
  outline: none;
  box-shadow: none;
}

.input-group
  .dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon) {
  border-color: var(--color--green-30);
}
.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  border-radius: var(--space-xl, 40px);
  padding: var(--space-s-extra, 15px) var(--space-m);
  margin-block-start: var(--space-s-extra);
}
[b-jey33bne27]
  .dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon):not(
    .dxbl-disabled
  ):not(:disabled):hover {
  background: var(--color--green-30);
}

.dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon) {
  border: none;
}
.dxbl-text-edit.dxbl-focused,
.input-group .dxbl-text-edit.dxbl-focused,
.dxbl-text-edit:focus-within {
  border-color: var(--color-green-50);
  outline: none;
  box-shadow: var(--color-bright-green-30);
  -webkit-box-shadow: var(--color-bright-green-30);
}
.dxbl-text-edit.dxbl-focused > .dxbl-btn,
.dxbl-text-edit.dxbl-focused > .dxbl-btn-group-vertical > .dxbl-btn,
.dxbl-text-edit.dxbl-focused > .dxbl-btn-group > .dxbl-btn,
.dxbl-text-edit:focus-within > .dxbl-btn,
.dxbl-text-edit:focus-within > .dxbl-btn-group-vertical > .dxbl-btn,
.dxbl-text-edit:focus-within > .dxbl-btn-group > .dxbl-btn {
  border: none;
}

.dxbl-text-edit
  > .dxbl-btn-group-vertical
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon),
.dxbl-text-edit
  > .dxbl-btn-group
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon),
.dxbl-text-edit
  > .dxbl-btn:not(.dxbl-btn.dxbl-edit-btn-clear, .dxbl-btn.dxbl-btn-icon) {
  border: none;
}

.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-day.dxbl-calendar-today {
  border-color: var(--color-bright-green-100);
  background-color: var(--color-bright-green-30);
}

.dxbl-calendar .dxbl-calendar-content .dxbl-calendar-selected-item::before {
  background-color: var(--color-bright-green-30);
}
.dxbl-calendar:not(.dxbl-disabled):not(:disabled)
  .dxbl-calendar-content
  > table
  > tbody
  > tr:not(.dxbl-calendar-days-of-week)
  td:not(.dxbl-calendar-disabled-item):not(
    .dxbl-calendar-week-number
  ).dxbl-calendar-selected-item:not(.dxbl-disabled):not(
    :disabled
  ):hover::before {
  background-color: var(--color-bright-green-30);
}
.dxbl-tabs
  > .dxbl-tabs-tablist
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(
    :disabled
  ).dxbl-active::after,
.dxbl-tabs
  > .dxbl-tabs-tablist
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(
    :disabled
  ).dxbl-active::after {
  background-color: var(--color-bright-green-100);
}
.dxbl-tabs
  > .dxbl-tabs-tablist
  > .dxbl-scroll-viewer
  > .dxbl-scroll-viewer-content
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(
    :disabled
  ).dxbl-active,
.dxbl-tabs
  > .dxbl-tabs-tablist
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(
    :disabled
  ).dxbl-active {
  color: black;
}
.dxbl-btn.dxbl-btn-text-secondary.dxbl-btn-tool:hover {
  background-color: var(--color-bright-green-30);
}
.dxbl-dropdown
  > .dxbl-dropdown-dialog.dxbl-edit-dropdown
  .dxbl-edit-dropdown-header::before {
  background-color: var(--color-bright-green-30);
}
.dxbl-calendar div.dxbl-calendar-footer::before {
  background-color: var(--color-bright-green-30);
}
.dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-clear:hover,
.dxbl-calendar-footer .dxbl-btn.dxbl-btn-secondary:hover,
.dxbl-rollers-footer .dxbl-btn.dxbl-btn-secondary:hover {
  background-color: var(--color-bright-green-30);
}

.dxbl-calendar:not(.dxbl-disabled):not(:disabled)
  .dxbl-calendar-content
  > table
  > tbody
  > tr:not(.dxbl-calendar-days-of-week)
  td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number):not(
    .dxbl-calendar-selected-range
  ):not(.dxbl-disabled):not(:disabled):hover::before {
  background-color: var(--color-bright-green-30);
}
.dxbl-calendar:not(.dxbl-disabled):not(:disabled)
  .dxbl-calendar-content
  > table
  > tbody
  > tr:not(.dxbl-calendar-days-of-week)
  td:not(.dxbl-calendar-disabled-item):not(.dxbl-calendar-week-number):not(
    .dxbl-calendar-selected-range
  ):not(.dxbl-disabled):not(:disabled):hover::before {
  opacity: 1;
}
.dxbl-tabs
  > .dxbl-tabs-tablist
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-disabled):not(:disabled):hover::before {
  opacity: 1;
}
.dxbl-tabs
  > .dxbl-tabs-tablist
  > ul
  > li
  > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-active):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-disabled):not(:disabled):hover::before {
  background-color: var(--color-bright-green-30);
}

/* ------------------- radio select row ------------------------ */
.dev-radio-select-row.dxbl-radio-group.dxbl-radio-group-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-block-end: var(--space-m);
}
.dev-radio-select-row > .dxbl-checkbox.dxbl-checkbox-radio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m-extra);
  align-items: center;
  padding: var(--space-m);
  border: 1px solid var(--color-bright-green-30);
  border-radius: var(--space-m);
  color: var(--color-green-100);
  font: var(--font-m);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms;
  width: 100%;
}

.dev-radio-select-row
  > .dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-unchecked {
  background-color: var(--color-white-100);
  padding: var(--space-m);
}

.dev-radio-select-row
  > .dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-checked {
  background-color: var(--color-bright-green-30);
  padding: var(--space-m);
}
.dev-radio-select-row input {
  cursor: pointer;
}

.dev-radio-select-row
  > .dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-checked
  > .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
}
.dev-radio-select-row
  .dxbl-checkbox.dxbl-checkbox-radio.dxbl-checkbox-checked
  > .dxbl-checkbox-check-element::after {
  background-color: var(--color-green-100);
}

.dev-radio-select-row
  .dxbl-checkbox.dxbl-checkbox-radio
  .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
  opacity: 100%;
}
.dev-radio-select-row
  .dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(
    .dxbl-disabled
  ):not(:disabled):hover.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
  opacity: 100%;
}
.dev-radio-select-row
  .dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(
    .dxbl-disabled
  ):not(:disabled):hover.dxbl-checkbox-checked
  .dxbl-checkbox-check-element::before {
  border-color: var(--color-green-100);
}
.dev-radio-select-row
  .dxbl-checkbox.dxbl-checkbox-radio:not(.dxbl-readonly):not(
    .dxbl-disabled
  ):not(:disabled):hover.dxbl-checkbox-checked
  .dxbl-checkbox-check-element::after {
  background-color: var(--color-green-100);
}
.dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element:focus-within,
.dxbl-checkbox.dxbl-checkbox-indeterminate
  .dxbl-checkbox-check-element:focus-within {
  box-shadow: none;
}
.dxbl-checkbox.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element:focus-within {
  box-shadow: none;
}

/* ------------------- input checkbox/switch ------------------------ */
.dxbl-checkbox-check-element input:hover {
  cursor: pointer;
}
/* checked */
.dxbl-checkbox.dxbl-checkbox-align-right {
  display: flex;
  align-items: center;
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-checked
  .dxbl-checkbox-check-element {
  background-color: var(--color-white-100);
  outline: 1px solid var(--color-green-100);
}

.dxbl-checkbox.dxbl-checkbox-switch .dxbl-checkbox-check-element::before {
  background-color: var(--color-green-100);
}

.dxbl-checkbox.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element:focus-within {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(
    .dxbl-readonly
  ).dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-white-100);
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element {
  background-color: var(--color-white-100);
  outline: 1px solid var(--color-green-100);
}

/*  unchecked  */

.dxbl-checkbox.valid.modified:not(
    [type="checkbox"]
  ).dxbl-checkbox-switch.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element {
  background-color: var(--color-white-100);
  outline: 1px solid var(--color-bright-green-100);
  background-color: var(--color-white-100);
}

.dxbl-checkbox.valid.modified:not([type="checkbox"]).dxbl-checkbox-switch:not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-white-100);
}

.dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-disabled):not(:disabled):not(
    .dxbl-readonly
  ).dxbl-checkbox-checked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-white-100);
}

.dxbl-checkbox.valid.modified:not(
    [type="checkbox"]
  ).dxbl-checkbox-switch.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element {
  background-color: var(--color-white-100);
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element::before {
  background-color: var(--color-green-50);
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-unchecked
  .dxbl-checkbox-check-element {
  background-color: var(--color-white-100);
  outline: 1px solid var(--color-green-100);
  opacity: 1;
}

.dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element:focus-within {
  box-shadow: none;
  -webkit-box-shadow: none;
}
/* ------------ double row green dropdown ---------------- */
.devDropDownMulti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--space-xxs) * 28);
  /* min-width: 3.5rem; */
  border-radius: var(--space-xl, 40px);
  border: none;
  white-space: nowrap;
  font: var(--font-heading-s);
  padding: var(--space-s);
  background: var(--color-bright-green-100);
  box-shadow: none;
}
.dxbl-btn-dropdown
  .dxbl-btn.dxbl-btn-standalone.dxbl-btn-primary.devDropDownSelect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--space-xxs) * 28);
  border-radius: var(--space-xl, 40px);
  border: none;
  white-space: nowrap;
  font: var(--font-s);
  padding: var(--space-m);
  background: var(--color-bright-green-100);
  box-shadow: none;
}
.dropdown .devDropDownMulti .dxbl-image {
  background-image: url(images/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  object-fit: cover;
  margin-inline-start: var(--space-s);
}
.devDropDownMulti .dxbl-text-edit-input {
  position: relative;
  top: 10px;
  left: 3px;
  color: white;
}
.devDropDownMulti .dxbl-icon-set-default {
  display: none;
}
.devDropDownMulti .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown {
  background-color: var(--color-bright-green-100);
}
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked
  .dxbl-checkbox-check-element,
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate
  .dxbl-checkbox-check-element {
  background-color: var(--color-bright-green-100);
}
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(
    .dxbl-disabled
  ):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate
  .dxbl-checkbox-check-element:not(.dxbl-disabled):not(:disabled):hover {
  background-color: var(--color-bright-green-100);
}

.dxbl-btn-dropdown .dxbl-btn:not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-btn-dropdown .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
  background: var(--color-black-100);
  border-color: var(--color-black-100);
}
.devDropDownSelect .dxbl-image:not(.dxbl-image-fill) {
  fill: none;
}
.devDropDownSelect .dxbl-btn-caption {
  font-weight: 600;
}

.dxbl-btn.dxbl-btn-standalone.dxbl-btn-primary.devDropDownSelect
  .dxbl-btn-caption {
  position: relative;
  top: 6px;
}
.dxbl-dropdown-body,
.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog {
  border-radius: var(--space-s);
}

/* ------------------------------------------- */
.devDropDown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--space-xxs) * 28);
  min-width: 3.5rem;
  border-radius: var(--space-xl, 40px);
  border: 1px solid var(--color-bright-green-50);
  white-space: nowrap;
  font: var(--font-heading-s);
  padding: var(--space-s);
  background: var(--color-bright-green-100);
  box-shadow: none;
}

.devDropDown:focus-within {
  outline: none;
  box-shadow: none;
}

.devDropDown:hover,
.devDropDown:hover * {
  cursor: pointer;
}

.dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body > *,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body > * {
  border-radius: var(--space-s-extra);
  border: none;
}
.dxbl-dropdown > .dxbl-dropdown-dialog.dxbl-edit-dropdown {
  border-radius: var(--space-s-extra);
  border: none;
}
/* ------------- red arrow dropdown --------------- */
.devDropDownRed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--space-xxs) * 28);
  min-width: 3.5rem;
  border-radius: var(--space-xl, 40px);
  border: var(--space-xxs) solid transparent;
  white-space: nowrap;
  font: var(--font-heading-s);
  padding: var(--space-s);
  border: 1px solid var(--color-bright-green-50);
  box-shadow: none;
  width: 100%;
}

.devDropDownRed:focus-within {
  border-color: var(--color-bright-green-50) !important;
  outline: none;
  box-shadow: none;
}

.devDropDownRed:hover,
.devDropDownRed:hover * {
  cursor: pointer;
}

.devDropDownRed input::placeholder {
  font: 600 var(--font-s);
  color: var(--color-green-100);
  &:hover {
    cursor: pointer;
  }
}

.devDropDownRed > .dxbl-btn-group,
.devDropDownRed > .dxbl-btn-group-vertical {
  background: transparent !important;
  border: none;
}

.devDropDownRed button {
  background: transparent !important;
  border: none;
}

.devDropDownRed button:hover::before {
  background: transparent;
}

.devDropDownRed use {
  display: none;
}

.devDropDownRed .dxbl-image {
  background-image: url(images/RedCircleArrow2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 25px;
  width: 25px;
  opacity: 1 !important;
}

/* --------------  eye icon input ------------*/

.icon-input .input-group .input {
  position: relative;
  width: 100%;
  padding-right: var(--space-m);
}
.icon-input .input-group .btn {
  position: absolute;
  top: calc(var(--space-xxs) * 9);
  right: calc(var(--space-xxs) * 9);
  background-image: url("/images/Eye.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: var(--space-m);
  height: var(--space-m);
  background-color: inherit;
  border: transparent !important;
  padding: 0 !important;
}
.icon-input
  .input-group:not(.has-validation)
  > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation)
  > .form-floating:not(:last-child)
  > .form-control,
.input-group:not(.has-validation)
  > .form-floating:not(:last-child)
  > .form-select,
.input-group:not(.has-validation)
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
    .form-floating
  ) {
  border-radius: var(--space-m-extra);
}