/* smart-text-box */
input.smart-input {
  border-width: var(--smart-border-width);
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  background: var(--smart-background);
  border-style: solid;
  border-color: var(--smart-border);
  color: var(--smart-background-color);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  padding-left: var(--smart-editor-label-padding);
  padding-right: var(--smart-editor-label-padding);
  padding-top: 0px;
  padding-bottom: 0px;
  height: var(--smart-editor-height);
  outline: none;
  text-align: var(--smart-text-box-text-align);
  box-sizing: border-box;
}
input.smart-input:focus {
  border-color: var(--smart-outline);
}
input.smart-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
input.smart-input:disabled {
  border-color: var(--smart-disabled);
  outline: none;
}
input.smart-input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}

textarea.smart-input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}

.smart-input-drop-down-menu {
  display: block;
  transform: scaleY(0);
  transform-origin: top left;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--smart-editor-drop-down-z-index);
  float: left;
  padding: 2px;
  margin: var(--smart-list-item-vertical-offset) var(--smart-list-item-horizontal-offset);
  color: var(--smart-background-color);
  background-color: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  box-shadow: var(--smart-elevation-8);
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family);
  overflow: hidden;
  width: auto;
  height: auto;
  --smart-input-drop-down-menu-width: auto;
  --smart-input-drop-down-menu-height: 200px;
  /*min-width: 150px;*/
  min-height: 0;
}
.smart-input-drop-down-menu[top] {
  transform-origin: bottom;
}
.smart-input-drop-down-menu:not([animation="none"]) {
  transition: opacity 0.2s, transform 0.2s ease-out;
}
.smart-input-drop-down-menu.smart-container {
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.smart-input-drop-down-menu .smart-scroll-viewer-content-container,
.smart-input-drop-down-menu .smart-scroll-viewer-container,
.smart-input-drop-down-menu > .smart-container {
  /*min-width: 150px;*/
  width: var(--smart-input-drop-down-menu-width);
  max-height: calc(var(--smart-input-drop-down-menu-height) - 6px);
}
.smart-input-drop-down-menu .smart-scroll-viewer-content-container {
  padding: 0px;
  max-height: initial;
}
.smart-input-drop-down-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
}
.smart-input-drop-down-menu ul.scroll {
  width: calc(100% - var(--smart-scroll-bar-size) - 2px);
}
.smart-input-drop-down-menu ul li {
  padding-bottom: 1px;
}
.smart-input-drop-down-menu ul li:last-child {
  padding-bottom: 0;
}
.smart-input-drop-down-menu ul li a {
  display: block;
  padding: 8px 12px;
  border-top-left-radius: var(--smart-item-border-top-left-radius);
  border-top-right-radius: var(--smart-item-border-top-right-radius);
  border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
  clear: both;
  font-weight: normal;
  white-space: nowrap;
  color: var(--smart-background-color);
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.smart-input-drop-down-menu ul li a:hover {
  color: var(--smart-ui-state-color-hover);
  background: var(--smart-ui-state-hover);
}
.smart-input-drop-down-menu ul li a.icon {
  position: relative;
  padding-left: var(--smart-column-icon-size);
}
.smart-input-drop-down-menu ul li a.icon:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--smart-column-icon-size);
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.smart-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a {
  color: var(--smart-ui-state-color-focus);
  background: var(--smart-ui-state-focus);
  text-decoration: none;
  outline: 0;
}
.smart-input-drop-down-menu[open] {
  transform: scale(1);
  opacity: 1;
}

.smart-multi-combo-input-scroll-viewer .smart-scroll-viewer-content-container {
  width: var(--smart-input-drop-down-menu-width);
  max-height: initial;
}
.smart-multi-combo-input-scroll-viewer .smart-scroll-viewer-container,
.smart-multi-combo-input-scroll-viewer > .smart-container {
  /*min-width: 150px;*/
  width: var(--smart-input-drop-down-menu-width);
  max-height: calc(var(--smart-input-drop-down-menu-height) - 6px);
}

.smart-drop-down smart-list-item[focus] .smart-overlay {
  background-color: var(--smart-ui-state-focus);
}
.smart-drop-down smart-list-item[focus] .smart-content {
  color: var(--smart-ui-state-color-focus);
  border-color: var(--smart-ui-state-border-focus);
}
.smart-drop-down smart-list-item[focus][selected] .smart-overlay {
  background-color: var(--smart-ui-state-selected);
}
.smart-drop-down smart-list-item[focus][selected] .smart-content {
  color: var(--smart-ui-state-color-selected);
  border-color: var(--smart-ui-state-border-selected);
}

smart-text-box {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  border: none;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
}
smart-text-box input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-text-box.smart-element {
  background: var(--smart-background);
}
smart-text-box[disabled] {
  border-color: var(--smart-disabled);
  outline: none;
}
smart-text-box[hover] input, smart-text-box:focus input.hovered {
  border-color: var(--smart-ui-state-border-hover);
}
smart-text-box input:focus {
  border-color: var(--smart-outline);
}
smart-text-box input:hover {
  border-color: var(--smart-ui-state-border-hover);
}

.smart-text-box input, .smart-text-box.smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-text-box .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-text-box > .smart-container > .smart-content {
  height: 100%;
}
.smart-text-box > .smart-container > .smart-content > div {
  width: 100%;
  height: 100%;
  outline: none;
  border-width: var(--smart-border-width);
  border-style: solid;
  border-color: var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  padding: var(--smart-editor-label-padding);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  font-weight: inherit;
  font-style: inherit;
  overflow: hidden;
}
.smart-text-box > .smart-container > .smart-content > div > label {
  color: transparent;
}
.smart-text-box > .smart-container > .smart-content > div:first-of-type {
  position: absolute;
  display: flex;
  width: initial;
  height: initial;
  user-select: none;
  pointer-events: none;
  min-height: initial;
  max-height: initial;
  align-items: center;
  padding-top: 1px;
  padding-bottom: 1px;
  opacity: 0.5;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: var(--smart-border-width);
  border-style: solid;
  border-color: transparent;
}
.smart-text-box[disabled] input, .smart-text-box[readonly] input {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}
.smart-text-box .smart-label,
.smart-text-box .smart-hint {
  display: none;
  position: absolute;
}
.smart-text-box[label] .smart-label {
  position: absolute;
  left: 0;
  bottom: 100%;
  font-size: 12px;
  width: 100%;
  display: block;
  padding: var(--smart-editor-label-padding);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  text-align: initial;
  line-height: initial;
  vertical-align: initial;
}
.smart-text-box[hint] .smart-hint {
  position: absolute;
  left: 0;
  bottom: 100%;
  font-size: 12px;
  width: 100%;
  display: block;
  padding: var(--smart-editor-label-padding);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  text-align: initial;
  line-height: initial;
  vertical-align: initial;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
  top: 100%;
  bottom: initial;
}
.smart-text-box[hint][focus] .smart-hint {
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.smart-text-box .smart-drop-down {
  font-family: inherit;
}
.smart-text-box:focus.hovered input {
  border-color: var(--smart-ui-state-border-hover);
}
.smart-text-box[right-to-left] > .smart-container > .smart-content {
  direction: rtl;
}
.smart-text-box[right-to-left] .smart-label,
.smart-text-box[right-to-left] .smart-hint {
  direction: rtl;
}

smart-text-area {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  height: calc(1.5 * var(--smart-text-box-default-height));
}
smart-text-area textarea {
  margin: 0;
  resize: none;
}
smart-text-area textarea.smart-input {
  border: none;
  text-overflow: ellipsis;
}

.smart-text-area .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-text-area textarea.smart-input {
  border-width: var(--smart-border-width);
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  background: var(--smart-background);
  border-color: var(--smart-border);
  color: var(--smart-background-color);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  padding-left: var(--smart-editor-label-padding);
  padding-right: var(--smart-editor-label-padding);
  padding-top: 0px;
  padding-bottom: 0px;
  padding: var(--smart-editor-label-padding);
  outline: none;
  text-align: var(--smart-text-box-text-align);
  box-sizing: border-box;
  border: none;
  height: 100%;
  width: 100%;
}

smart-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-input > option {
  display: none;
}
smart-input > .smart-container {
  display: flex;
}
smart-input.smart-element {
  background: var(--smart-background);
}
smart-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-input:focus {
  border-color: var(--smart-outline);
}
smart-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
smart-input[disabled] {
  border-color: var(--smart-disabled);
  outline: none;
}
smart-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

.smart-input.smart-container {
  display: flex;
}
.smart-input.smart-container,
.smart-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-input .smart-drop-down-button {
  display: none;
  width: var(--smart-editor-addon-width);
  height: 100%;
  flex-direction: column;
  color: var(--smart-surface-color);
  border-left: 1px solid var(--smart-border);
  background: var(--smart-surface);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  outline: none;
}
.smart-input .smart-drop-down-button .arrow {
  display: flex;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--smart-font-family-icon);
  justify-content: center;
  align-items: center;
  font-size: var(--smart-arrow-size);
  outline: none;
}
.smart-input .smart-drop-down-button .arrow:after {
  content: var(--smart-icon-arrow-down);
  transition: opacity 0.2s, transform 0.2s ease-out;
}
.smart-input .smart-drop-down-button[open] .arrow:after {
  transform: rotate(-180deg);
}
.smart-input .smart-input {
  border: none;
  padding: var(--smart-editor-label-padding);
  height: 100%;
  width: 100%;
}
.smart-input[drop-down-button-position="left"] .smart-drop-down-button, .smart-input[drop-down-button-position="right"] .smart-drop-down-button {
  display: flex;
}
.smart-input[drop-down-button-position="left"] .smart-input, .smart-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}
.smart-input[drop-down-button-position="left"][disabled] .smart-drop-down-button, .smart-input[drop-down-button-position="right"][disabled] .smart-drop-down-button {
  opacity: 0.5;
}
.smart-input[drop-down-button-position="left"] .smart-drop-down-button {
  order: -1;
  border-right: 1px solid var(--smart-border);
  border-left: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
}
.smart-input[drop-down-button-position="left"] .smart-input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.smart-input[drop-down-button-position="left"][readonly] .smart-drop-down-button {
  border-right: none;
}
.smart-input[drop-down-button-position="right"] .smart-input {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.smart-input[focus] {
  border-color: var(--smart-outline);
}
.smart-input[focus]:not([disabled]) .smart-drop-down-button {
  border-color: var(--smart-outline);
}
.smart-input[readonly] .smart-drop-down-button {
  border-left: none;
}
.smart-input[readonly]:not(.underlined):not(.outlined) input.smart-input,
.smart-input[readonly]:not(.underlined):not(.outlined) textarea.smart-input {
  padding: 0;
  cursor: pointer;
  padding-left: var(--smart-editor-label-padding);
  outline: none;
}
.smart-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) input.smart-input,
.smart-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) textarea.smart-input {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}
.smart-input:not([disabled])[readonly]:hover .smart-input,
.smart-input:not([disabled])[readonly]:hover .smart-drop-down-button {
  background: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-input:not([disabled]) .smart-drop-down-button:hover {
  background: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-input:not([disabled]) .smart-drop-down-button[open],
.smart-input:not([disabled]) .smart-drop-down-button:active {
  background: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
.smart-input:not([disabled])[readonly][open] .smart-input,
.smart-input:not([disabled])[readonly][open] .smart-drop-down-button, .smart-input:not([disabled])[readonly]:active .smart-input,
.smart-input:not([disabled])[readonly]:active .smart-drop-down-button {
  background: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
.smart-input:not([disabled])[readonly][open] .smart-input::-webkit-input-placeholder, .smart-input:not([disabled])[readonly]:active .smart-input::-webkit-input-placeholder {
  color: var(--smart-ui-state-color-active);
}
.smart-input:not([disabled])[readonly][open] .smart-input::-moz-placeholder, .smart-input:not([disabled])[readonly]:active .smart-input::-moz-placeholder {
  color: var(--smart-ui-state-color-active);
}
.smart-input[disabled] .smart-drop-down-button .arrow {
  cursor: initial;
}
.smart-input[right-to-left] .smart-input {
  direction: rtl;
}
.smart-input[right-to-left][readonly] .smart-drop-down-button {
  border-right: none;
}
.smart-input[right-to-left][readonly] .smart-input, .smart-input[right-to-left][readonly]:not(.underlined):not(.outlined) .smart-input {
  padding-left: initial;
  padding-right: var(--smart-editor-label-padding);
}
.smart-input[right-to-left][readonly] .smart-drop-down-button {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.smart-input[right-to-left][drop-down-button-position="right"] .smart-input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.smart-input-drop-down-menu[right-to-left] ul.scroll {
  width: 100%;
}
.smart-input-drop-down-menu[right-to-left] li a.icon {
  padding-left: initial;
  padding-right: var(--smart-column-icon-size);
}
.smart-input-drop-down-menu[right-to-left] li a.icon:after {
  left: initial;
  right: 0;
}

smart-number-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  text-align: right;
}
smart-number-input > .smart-container {
  display: flex;
}
smart-number-input.smart-element {
  background: var(--smart-background);
}
smart-number-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-number-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

.smart-number-input .nav {
  display: flex;
  width: var(--smart-editor-addon-width);
  height: 100%;
  flex-direction: column;
  color: var(--smart-surface-color);
  border-left: 1px solid var(--smart-border);
  background: var(--smart-surface);
}
.smart-number-input .nav:hover, .smart-number-input .nav:active {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}
.smart-number-input .nav.smart-drop-down-button:hover, .smart-number-input .nav.smart-drop-down-button:active {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}
.smart-number-input .nav .up,
.smart-number-input .nav .down {
  display: flex;
  height: 50%;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--smart-font-family-icon);
  justify-content: center;
  align-items: center;
  outline: none;
}
.smart-number-input .nav .up:hover,
.smart-number-input .nav .down:hover {
  background: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-number-input .nav .up:active, .smart-number-input .nav .up[active],
.smart-number-input .nav .down:active,
.smart-number-input .nav .down[active] {
  background: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
.smart-number-input .nav .up {
  border-bottom: var(--smart-border-width) solid var(--smart-border);
}
.smart-number-input .nav .up:after {
  content: var(--smart-icon-arrow-up);
}
.smart-number-input .nav .down:after {
  content: var(--smart-icon-arrow-down);
}
.smart-number-input[disabled] .nav .up,
.smart-number-input[disabled] .nav .down {
  pointer-events: none;
}
.smart-number-input[right-to-left] > .smart-container {
  direction: rtl;
}
.smart-number-input[right-to-left] .nav {
  border-left: initial;
  border-right: var(--smart-border-width) solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-right-radius);
  border-top-right-radius: initial;
  border-bottom-right-radius: initial;
  order: initial;
}
.smart-number-input[right-to-left] .smart-input {
  border-top-left-radius: initial;
  border-bottom-left-radius: initial;
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
.smart-number-input[right-to-left][focus] .nav {
  border-color: var(--smart-outline);
}

smart-password-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-password-input > .smart-container {
  display: flex;
}
smart-password-input.smart-element {
  background: var(--smart-background);
}
smart-password-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}

.smart-password-input input::-ms-reveal,
.smart-password-input input::-ms-clear {
  display: none;
}
.smart-password-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-password-input .smart-drop-down-button {
  background: transparent;
  border-color: transparent;
  display: block;
  border-left: none;
}
.smart-password-input .smart-drop-down-button:hover, .smart-password-input .smart-drop-down-button:active, .smart-password-input .smart-drop-down-button[active] {
  color: var(--smart-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.smart-password-input .smart-drop-down-button .arrow:after {
  color: var(--smart-background-color);
  content: var(--smart-icon-visibility);
}
.smart-password-input .smart-drop-down-button .arrow.off:after {
  color: var(--smart-background-color);
  content: var(--smart-icon-visibility-off);
}

smart-multi-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-multi-input > option {
  display: none;
}
smart-multi-input > .smart-container {
  display: flex;
}
smart-multi-input.smart-element {
  background: var(--smart-background);
}
smart-multi-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-multi-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-multi-input[focus], smart-multi-input:focus {
  border-color: var(--smart-outline);
}
smart-multi-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
smart-multi-input[disabled] {
  border-color: var(--smart-disabled);
  outline: none;
}
smart-multi-input[drop-down-button-position="left"] .smart-input, smart-multi-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

.smart-multi-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}

.smart-multi-input-drop-down-menu li a {
  border-left: var(--smart-border-width) solid transparent;
}
.smart-multi-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a {
  border-left: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--smart-ui-state-color-selected);
  background: var(--smart-ui-state-selected);
}
.smart-multi-input-drop-down-menu[right-to-left] li a {
  border-left: none;
  border-right: var(--smart-border-width) solid transparent;
}
.smart-multi-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a {
  border-left: var(--smart-border-width) solid transparent;
  border-right: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

smart-multi-combo-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-multi-combo-input > option {
  display: none;
}
smart-multi-combo-input > .smart-container {
  display: flex;
}
smart-multi-combo-input.smart-element {
  background: var(--smart-background);
}
smart-multi-combo-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-multi-combo-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-multi-combo-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
smart-multi-combo-input[focus] {
  border-color: var(--smart-outline);
}

.smart-multi-combo-input {
  height: var(--smart-editor-height);
  min-height: var(--smart-editor-height);
}
.smart-multi-combo-input:not([input-tags-mode="one"]):not(.smart-grid-cell-editor) {
  height: auto !important;
}
.smart-multi-combo-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}
.smart-multi-combo-input > .smart-container {
  min-height: var(--smart-editor-height);
}
.smart-multi-combo-input .smart-drop-down-button {
  min-height: var(--smart-editor-height);
}
.smart-multi-combo-input .smart-drop-down-button .arrow {
  min-height: var(--smart-editor-height);
}
.smart-multi-combo-input .smart-token {
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  padding: 1px 6px 1px 6px;
  border-radius: 20px;
  background-color: var(--smart-primary);
  color: var(--smart-primary-color);
  margin: var(--smart-editor-label-padding) 0 0 var(--smart-editor-label-padding);
  height: 22px;
}
.smart-multi-combo-input .smart-token .smart-drop-down-list-selection-label {
  text-overflow: ellipsis;
  overflow: hidden;
}
.smart-multi-combo-input .smart-token .smart-drop-down-list-selection-image {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 4px;
}
.smart-multi-combo-input .smart-action-button {
  display: flex;
  outline: 1px solid transparent;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  user-select: none;
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  min-height: var(--smart-editor-height);
  align-items: center;
}
.smart-multi-combo-input .smart-drop-down-list-unselect-button {
  position: relative;
  margin-left: 2px;
  margin-right: -2px;
}
.smart-multi-combo-input .smart-drop-down-list-unselect-button:after {
  content: var(--smart-icon-close);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  font-family: var(--smart-font-family-icon);
  background: rgba(var(--smart-primary-rgb), 0.2);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.smart-multi-combo-input.smart-input .smart-input {
  flex-grow: 1;
  align-self: center;
  width: var(--smart-editor-addon-width);
  min-width: var(--smart-editor-addon-width);
  min-height: 100%;
  max-height: 1rem;
  vertical-align: middle;
  margin: 0;
}
.smart-multi-combo-input.smart-input .smart-drop-down-button {
  height: initial;
}
.smart-multi-combo-input[drop-down-button-position="left"] .smart-action-button, .smart-multi-combo-input[drop-down-button-position="right"] .smart-action-button {
  width: calc(100% - var(--smart-editor-addon-width));
}
.smart-multi-combo-input[input-tags-mode="one"] .smart-action-button {
  align-items: center;
}
.smart-multi-combo-input[readonly] .smart-input {
  visibility: hidden;
}
.smart-multi-combo-input[readonly] .smart-action-button {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}
.smart-multi-combo-input[readonly][open] .smart-action-button,
.smart-multi-combo-input[readonly][open] .smart-drop-down-button {
  background: var(--smart-ui-state-hover) !important;
  color: var(--smart-ui-state-color-hover) !important;
}
.smart-multi-combo-input[readonly]:hover .smart-action-button {
  background: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-multi-combo-input[hide-input-tags-close-button] .smart-drop-down-list-unselect-button:after {
  display: none;
}
.smart-multi-combo-input[right-to-left] .smart-token {
  margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0 0;
  padding: 1px 6px 1px 2px;
}
.smart-multi-combo-input[right-to-left] .smart-token:last-of-type {
  margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0;
}
.smart-multi-combo-input[right-to-left] .smart-action-button {
  direction: rtl;
}
.smart-multi-combo-input[right-to-left] .smart-drop-down-list-unselect-button {
  margin: 0 5px 0 0;
}

.smart-multi-combo-input-drop-down-menu .smart-scroll-viewer {
  width: inherit;
  height: inherit;
  padding: initial;
  min-height: inherit;
  border: initial;
}
.smart-multi-combo-input-drop-down-menu .close-button:after {
  font-family: var(--smart-font-family-icon);
  content: var(--smart-icon-close);
  margin-left: 5px;
}
.smart-multi-combo-input-drop-down-menu .add-new-item {
  display: grid;
  grid-template-columns: 1fr var(--smart-text-box-default-height);
  grid-column-gap: 5px;
  margin-left: 7px;
  margin-right: 7px;
  height: 36px;
}
.smart-multi-combo-input-drop-down-menu .add-new-item input {
  height: 30px;
}
.smart-multi-combo-input-drop-down-menu .add-new-item smart-button {
  justify-content: center;
  align-content: center;
  height: 30px;
}
.smart-multi-combo-input-drop-down-menu .add-new-item button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smart-multi-combo-input-drop-down-menu .add-new-item button:after {
  font-family: var(--smart-font-family-icon);
  content: var(--smart-icon-plus);
}
.smart-multi-combo-input-drop-down-menu .smart-select-all {
  height: auto;
  border-bottom: var(--smart-border-width) solid var(--smart-border);
}
.smart-multi-combo-input-drop-down-menu[right-to-left] > ul {
  direction: rtl;
}
.smart-multi-combo-input-drop-down-menu ul li a {
  display: flex;
  align-items: center;
}
.smart-multi-combo-input-drop-down-menu ul li a .smart-drop-down-list-selection-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 4px;
  border-radius: 50%;
  border: 1px solid var(--smart-border);
}
.smart-multi-combo-input-drop-down-menu[single-select] ul li {
  height: 36px;
  margin-top: 1px;
  cursor: pointer;
}
.smart-multi-combo-input-drop-down-menu[single-select] ul li a {
  padding: 0px;
  padding-left: 6px;
  height: 100%;
}
.smart-multi-combo-input-drop-down-menu[single-select] ul li::after {
  display: none;
}
.smart-multi-combo-input-drop-down-menu[single-select] ul li:hover, .smart-multi-combo-input-drop-down-menu[single-select] ul li.selected {
  background: var(--smart-ui-state-hover);
  border-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-multi-combo-input-drop-down-menu[single-select] ul li:hover:after, .smart-multi-combo-input-drop-down-menu[single-select] ul li.selected:after {
  display: none;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li {
  height: 30px;
  margin-top: 1px;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li:before {
  display: none;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li:after {
  display: none;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li a {
  padding: 2px 10px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  border-radius: 15px !important;
  margin-top: 5px;
  margin-left: 5px;
  height: auto;
  background: var(--smart-primary);
  border-color: var(--smart-primary);
  color: var(--smart-primary-color);
}
.smart-multi-combo-input-drop-down-menu[pills] ul li a .smart-drop-down-list-selection-image {
  height: 20px;
  width: 20px;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li.focused a {
  background: var(--smart-primary) !important;
  border-color: var(--smart-primary) !important;
  color: var(--smart-primary-color) !important;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li.focused, .smart-multi-combo-input-drop-down-menu[pills] ul li:hover, .smart-multi-combo-input-drop-down-menu[pills] ul li.selected {
  background: var(--smart-ui-state-hover);
  border-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
.smart-multi-combo-input-drop-down-menu[pills] ul li.focused:after, .smart-multi-combo-input-drop-down-menu[pills] ul li:hover:after, .smart-multi-combo-input-drop-down-menu[pills] ul li.selected:after {
  display: none;
}
.smart-multi-combo-input-drop-down-menu[pills] ul li.active.selected:before {
  display: none;
}

smart-check-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-check-input > option {
  display: none;
}
smart-check-input > .smart-container {
  display: flex;
}
smart-check-input.smart-element {
  background: var(--smart-background);
}
smart-check-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-check-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-check-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
smart-check-input[disabled] {
  border-color: var(--smart-disabled);
  outline: none;
}
smart-check-input[focus], smart-check-input:focus {
  border-color: var(--smart-outline);
}
smart-check-input[drop-down-button-position="left"] .smart-input, smart-check-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

.smart-check-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}

.smart-check-input-drop-down-menu ul li {
  position: relative;
}
.smart-check-input-drop-down-menu ul li:before {
  content: '';
  transform: scale(0);
  background-color: white;
}
.smart-check-input-drop-down-menu ul li:after {
  content: '';
  position: absolute;
  border: var(--smart-border-width) solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  width: var(--smart-check-box-default-size);
  height: var(--smart-check-box-default-size);
  padding: 1px;
  margin-left: 10px;
  font-family: var(--smart-font-family-icon);
  justify-content: center;
  align-items: center;
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: content-box;
}
.smart-check-input-drop-down-menu ul li a {
  padding-left: calc(var(--smart-tree-indent) + 25px);
}
.smart-check-input-drop-down-menu ul li.selected:after {
  content: var(--smart-icon-check);
  background: var(--smart-primary);
  border-color: var(--smart-primary);
  color: var(--smart-primary-color);
}
.smart-check-input-drop-down-menu ul li.selected.color:after {
  content: '';
}
.smart-check-input-drop-down-menu ul li.active.selected:before {
  position: absolute;
  content: '';
  border-radius: 50%;
  width: calc(var(--smart-check-box-default-size) + 16px);
  height: calc(var(--smart-check-box-default-size) + 16px);
  background: var(--smart-primary);
  opacity: 0.3;
  margin-left: 4px;
  top: 50%;
  transform: scale(1) translateY(-50%);
  transform-origin: top;
}
.smart-check-input-drop-down-menu ul li.active.focused a {
  border-left: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--smart-ui-state-color-selected);
  background: var(--smart-ui-state-selected);
}
.smart-check-input-drop-down-menu ul li[indeterminate]:after {
  background-color: var(--smart-ui-state-selected);
  padding: 2px;
  background-clip: content-box;
}
.smart-check-input-drop-down-menu[inverted] ul li:after {
  margin-left: initial;
  margin-right: 10px;
  right: 0;
}
.smart-check-input-drop-down-menu[inverted] ul li.selected:before {
  right: 0;
}
.smart-check-input-drop-down-menu[inverted] ul li a {
  padding-left: 10px;
  padding-right: calc(var(--smart-tree-indent) + 25px);
}
.smart-check-input-drop-down-menu[inverted] ul li.active.selected:before {
  margin-left: initial;
  margin-right: 4px;
}
.smart-check-input-drop-down-menu:not([animation="none"]) ul li:before {
  transition: transform 0.25s ease-in-out;
}
.smart-check-input-drop-down-menu[right-to-left] ul li:after {
  margin-left: initial;
  margin-right: 10px;
}
.smart-check-input-drop-down-menu[right-to-left] ul li a {
  padding-left: 10px;
  padding-right: calc(var(--smart-tree-indent) + 25px);
}
.smart-check-input-drop-down-menu[right-to-left] ul li.active.focused a {
  border-left: var(--smart-border-width) solid transparent;
  border-right: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.smart-check-input-drop-down-menu[right-to-left] ul li.active.selected:before {
  margin-left: initial;
  margin-right: 4px;
}
.smart-check-input-drop-down-menu[right-to-left][pills] ul li a {
  padding-right: initial;
}

smart-color-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  border: none;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
}
smart-color-input[value-display-mode="colorBox"] .smart-action-button {
  cursor: pointer;
}

smart-time-input,
smart-date-input,
smart-date-range-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  overflow: hidden;
}
smart-time-input > .smart-container,
smart-date-input > .smart-container,
smart-date-range-input > .smart-container {
  display: flex;
}
smart-time-input.smart-element,
smart-date-input.smart-element,
smart-date-range-input.smart-element {
  background: var(--smart-background);
}
smart-time-input[drop-down-button-position="left"] .smart-input, smart-time-input[drop-down-button-position="right"] .smart-input,
smart-date-input[drop-down-button-position="left"] .smart-input,
smart-date-input[drop-down-button-position="right"] .smart-input,
smart-date-range-input[drop-down-button-position="left"] .smart-input,
smart-date-range-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

smart-date-range-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-date-range-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-date-range-input[focus], smart-date-range-input:focus {
  border-color: var(--smart-outline);
}

.smart-time-box {
  display: block;
  height: auto;
  width: 300px;
  overflow: hidden;
}
.smart-time-box .smart-timepicker {
  display: grid;
  grid-template-columns: 60% 35%;
  grid-column-gap: 5%;
  background: var(--smart-background);
  padding: 10px;
  border-color: var(--smart-border);
}
.smart-time-box[right-to-left] .smart-timepicker {
  direction: rtl;
}

.smart-time-input.smart-input .smart-drop-down-button .arrow:after,
.smart-time-input.smart-input .smart-drop-down-button[open] .arrow:after {
  content: var(--smart-icon-clock);
  transform: rotate(0deg);
}

.smart-timepicker .minute-selection,
.smart-timepicker .hour-selection {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(6, auto);
  justify-content: center;
  align-items: center;
  justify-items: center;
  position: relative;
  cursor: default;
}
.smart-timepicker .minute-selection .smart-calendar-cell,
.smart-timepicker .hour-selection .smart-calendar-cell {
  margin: initial;
  line-height: var(--smart-calendar-cell-size);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 100%;
}
.smart-timepicker .minute-selection .header,
.smart-timepicker .hour-selection .header {
  content: attr(header-label);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 1 / 3;
  grid-column: 1 / 6;
  font-weight: 600;
  height: var(--smart-calendar-cell-size);
  line-height: calc(var(--smart-calendar-cell-size) - 2px);
}
.smart-timepicker .minute-selection {
  border-left: initial;
  border-right: var(--smart-border-width) solid var(--smart-border);
  grid-template-columns: repeat(2, 50%);
  border-left: var(--smart-border-width) solid var(--smart-border);
}
.smart-timepicker .minute-selection .header {
  grid-column: span 2;
}
.smart-timepicker .hour-selection:before, .smart-timepicker .hour-selection:after {
  content: attr(am-label);
  width: 100%;
  display: flex;
  justify-content: center;
  grid-column: 1;
  font-weight: 600;
  height: var(--smart-calendar-cell-size);
  line-height: calc(var(--smart-calendar-cell-size) - 2px);
}
.smart-timepicker .hour-selection:after {
  content: attr(pm-label);
  grid-row: 4/9;
}

.smart-date-input.smart-input .smart-drop-down-button .arrow:after,
.smart-date-input.smart-input .smart-drop-down-button[open] .arrow:after {
  content: var(--smart-icon-calendar);
  transform: rotate(0deg);
}

.smart-date-range-input.smart-input .smart-drop-down-button .arrow:after,
.smart-date-range-input.smart-input .smart-drop-down-button[open] .arrow:after {
  content: var(--smart-icon-calendar);
  transform: rotate(0deg);
}
.smart-date-range-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
}

.smart-date-range-input-drop-down-menu smart-button:first-of-type {
  margin-left: 5px;
}
.smart-date-range-input-drop-down-menu smart-button:last-of-type {
  margin-right: 5px;
}
.smart-date-range-input-drop-down-menu .smart-calendar {
  height: 100%;
  min-width: 100%;
  --smart-calendar-default-height: auto;
  --smart-calendar-footer-height: 0px;
}
.smart-date-range-input-drop-down-menu .smart-done-button,
.smart-date-range-input-drop-down-menu .smart-today-button,
.smart-date-range-input-drop-down-menu .smart-clear-button {
  height: auto;
  --smart-button-padding: 5px;
}
.smart-date-range-input-drop-down-menu .smart-done-button,
.smart-date-range-input-drop-down-menu .smart-today-button {
  margin-right: 5px;
}
.smart-date-range-input-drop-down-menu .smart-calendar-footer {
  flex-direction: column;
}
.smart-date-range-input-drop-down-menu .smart-timepicker-buttons,
.smart-date-range-input-drop-down-menu .smart-button-controls {
  display: none;
}
.smart-date-range-input-drop-down-menu .smart-date-range-input-footer-controls {
  width: 100%;
  height: 100%;
}
.smart-date-range-input-drop-down-menu .smart-timepicker-button {
  position: relative;
  white-space: nowrap;
}
.smart-date-range-input-drop-down-menu .smart-timepicker-button:empty {
  display: none;
}
.smart-date-range-input-drop-down-menu .smart-timepicker-button:before {
  content: var(--smart-icon-clock);
  height: 100%;
  font-family: var(--smart-font-family-icon);
  font-weight: var(--smart-font-weight);
  font-size: var(--smart-arrow-size);
  margin: 0 var(--smart-editor-label-padding) 0 var(--smart-editor-label-padding);
}
.smart-date-range-input-drop-down-menu .smart-timepicker-button:hover {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-hover);
  background-color: var(--smart-ui-state-hover);
  transition: background-color 100ms linear, color 100ms ease-in-out;
  opacity: var(--smart-button-opacity-hover);
  cursor: pointer;
}
.smart-date-range-input-drop-down-menu .smart-timepicker-button[selected] {
  color: var(--smart-ui-state-color-selected);
}
.smart-date-range-input-drop-down-menu .smart-icon-today:before {
  content: var(--smart-icon-calendar);
}
.smart-date-range-input-drop-down-menu .smart-icon-clear:before {
  content: var(--smart-icon-cancel);
}
.smart-date-range-input-drop-down-menu .smart-timepicker {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: 60% 35%;
  height: calc(100% - var(--smart-calendar-footer-height));
  width: 100%;
  grid-column-gap: 5%;
  background: var(--smart-background);
  box-sizing: border-box;
  padding: 10px;
  border-color: var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  border-width: var(--smart-border-width);
  border-style: solid;
  border-bottom: none;
}
.smart-date-range-input-drop-down-menu[icons] smart-calendar, .smart-date-range-input-drop-down-menu[timepicker] smart-calendar {
  --smart-calendar-footer-height: 30px;
}
.smart-date-range-input-drop-down-menu[icons] .smart-timepicker-buttons, .smart-date-range-input-drop-down-menu[timepicker] .smart-timepicker-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  align-items: center;
}
.smart-date-range-input-drop-down-menu[timepicker][icons] .smart-date-range-input-footer-controls {
  display: grid;
  grid-template-columns: 60% 38%;
  grid-column-gap: 2%;
  justify-items: center;
}
.smart-date-range-input-drop-down-menu.smart-input-drop-down-menu {
  height: auto;
  width: var(--smart-input-drop-down-menu-width);
}
.smart-date-range-input-drop-down-menu.smart-input-drop-down-menu.smart-date-input-drop-down-menu {
  height: 250px;
}
.smart-date-range-input-drop-down-menu:not([timepicker]) .smart-timepicker-buttons {
  display: none;
}
.smart-date-range-input-drop-down-menu:not([animation='none']) .smart-timepicker {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}
.smart-date-range-input-drop-down-menu:not([animation='none']) .smart-timepicker.smart-visibility-hidden {
  transition: visibility 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s cubic-bezier(0.4, 0, 0.6, 1);
  transform: scale(0);
}
.smart-date-range-input-drop-down-menu[right-to-left] .smart-timepicker {
  direction: rtl;
}

smart-phone-input,
smart-country-input {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  height: var(--smart-text-box-default-height);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
}
smart-phone-input > .smart-container,
smart-country-input > .smart-container {
  display: flex;
}
smart-phone-input.smart-element,
smart-country-input.smart-element {
  background: var(--smart-background);
}
smart-phone-input input::selection,
smart-country-input input::selection {
  background: var(--smart-editor-selection);
  color: var(--smart-editor-selection-color);
}
smart-phone-input input.smart-input,
smart-country-input input.smart-input {
  border: none;
  text-overflow: ellipsis;
}
smart-phone-input[focus], smart-phone-input:focus,
smart-country-input[focus],
smart-country-input:focus {
  border-color: var(--smart-outline);
}
smart-phone-input:hover,
smart-country-input:hover {
  border-color: var(--smart-ui-state-border-hover);
}
smart-phone-input[disabled],
smart-country-input[disabled] {
  border-color: var(--smart-disabled);
  outline: none;
}
smart-phone-input[drop-down-button-position="left"] .smart-input, smart-phone-input[drop-down-button-position="right"] .smart-input,
smart-country-input[drop-down-button-position="left"] .smart-input,
smart-country-input[drop-down-button-position="right"] .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
}

.smart-country-input .smart-container,
.smart-phone-input .smart-container {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: visible;
  align-items: center;
}

.smart-phone-input {
  --smart-editor-addon-width: 45px;
}
.smart-phone-input.invalid-number .smart-container::after {
  color: var(--smart-error);
}
.smart-phone-input .smart-container::after {
  font-family: var(--smart-font-family-icon);
  content: var(--smart-icon-phone);
  color: var(--smart-success);
  padding-right: 5px;
}
.smart-phone-input .smart-drop-down-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: transparent;
  border-right: none;
  padding-left: 2px;
}
.smart-phone-input .smart-drop-down-button::after {
  font-family: var(--smart-font-family-icon);
  content: var(--smart-icon-arrow-down);
}

.smart-flag-box {
  margin-right: 6px;
}
.smart-flag-box .flag {
  width: 20px;
}
.smart-flag-box .flag.be {
  width: 18px;
}
.smart-flag-box .flag.ch {
  width: 15px;
}
.smart-flag-box .flag.mc {
  width: 19px;
}
.smart-flag-box .flag.ne {
  width: 18px;
}
.smart-flag-box .flag.np {
  width: 13px;
}
.smart-flag-box .flag.va {
  width: 15px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .smart-flag-box .flag {
    background-size: 5652px 15px;
  }
}
.smart-flag-box .flag.ac {
  height: 10px;
  background-position: 0px 0px;
}
.smart-flag-box .flag.ad {
  height: 14px;
  background-position: -22px 0px;
}
.smart-flag-box .flag.ae {
  height: 10px;
  background-position: -44px 0px;
}
.smart-flag-box .flag.af {
  height: 14px;
  background-position: -66px 0px;
}
.smart-flag-box .flag.ag {
  height: 14px;
  background-position: -88px 0px;
}
.smart-flag-box .flag.ai {
  height: 10px;
  background-position: -110px 0px;
}
.smart-flag-box .flag.al {
  height: 15px;
  background-position: -132px 0px;
}
.smart-flag-box .flag.am {
  height: 10px;
  background-position: -154px 0px;
}
.smart-flag-box .flag.ao {
  height: 14px;
  background-position: -176px 0px;
}
.smart-flag-box .flag.aq {
  height: 14px;
  background-position: -198px 0px;
}
.smart-flag-box .flag.ar {
  height: 13px;
  background-position: -220px 0px;
}
.smart-flag-box .flag.as {
  height: 10px;
  background-position: -242px 0px;
}
.smart-flag-box .flag.at {
  height: 14px;
  background-position: -264px 0px;
}
.smart-flag-box .flag.au {
  height: 10px;
  background-position: -286px 0px;
}
.smart-flag-box .flag.aw {
  height: 14px;
  background-position: -308px 0px;
}
.smart-flag-box .flag.ax {
  height: 13px;
  background-position: -330px 0px;
}
.smart-flag-box .flag.az {
  height: 10px;
  background-position: -352px 0px;
}
.smart-flag-box .flag.ba {
  height: 10px;
  background-position: -374px 0px;
}
.smart-flag-box .flag.bb {
  height: 14px;
  background-position: -396px 0px;
}
.smart-flag-box .flag.bd {
  height: 12px;
  background-position: -418px 0px;
}
.smart-flag-box .flag.be {
  height: 15px;
  background-position: -440px 0px;
}
.smart-flag-box .flag.bf {
  height: 14px;
  background-position: -460px 0px;
}
.smart-flag-box .flag.bg {
  height: 12px;
  background-position: -482px 0px;
}
.smart-flag-box .flag.bh {
  height: 12px;
  background-position: -504px 0px;
}
.smart-flag-box .flag.bi {
  height: 12px;
  background-position: -526px 0px;
}
.smart-flag-box .flag.bj {
  height: 14px;
  background-position: -548px 0px;
}
.smart-flag-box .flag.bl {
  height: 14px;
  background-position: -570px 0px;
}
.smart-flag-box .flag.bm {
  height: 10px;
  background-position: -592px 0px;
}
.smart-flag-box .flag.bn {
  height: 10px;
  background-position: -614px 0px;
}
.smart-flag-box .flag.bo {
  height: 14px;
  background-position: -636px 0px;
}
.smart-flag-box .flag.bq {
  height: 14px;
  background-position: -658px 0px;
}
.smart-flag-box .flag.br {
  height: 14px;
  background-position: -680px 0px;
}
.smart-flag-box .flag.bs {
  height: 10px;
  background-position: -702px 0px;
}
.smart-flag-box .flag.bt {
  height: 14px;
  background-position: -724px 0px;
}
.smart-flag-box .flag.bv {
  height: 15px;
  background-position: -746px 0px;
}
.smart-flag-box .flag.bw {
  height: 14px;
  background-position: -768px 0px;
}
.smart-flag-box .flag.by {
  height: 10px;
  background-position: -790px 0px;
}
.smart-flag-box .flag.bz {
  height: 14px;
  background-position: -812px 0px;
}
.smart-flag-box .flag.ca {
  height: 10px;
  background-position: -834px 0px;
}
.smart-flag-box .flag.cc {
  height: 10px;
  background-position: -856px 0px;
}
.smart-flag-box .flag.cd {
  height: 15px;
  background-position: -878px 0px;
}
.smart-flag-box .flag.cf {
  height: 14px;
  background-position: -900px 0px;
}
.smart-flag-box .flag.cg {
  height: 14px;
  background-position: -922px 0px;
}
.smart-flag-box .flag.ch {
  height: 15px;
  background-position: -944px 0px;
}
.smart-flag-box .flag.ci {
  height: 14px;
  background-position: -961px 0px;
}
.smart-flag-box .flag.ck {
  height: 10px;
  background-position: -983px 0px;
}
.smart-flag-box .flag.cl {
  height: 14px;
  background-position: -1005px 0px;
}
.smart-flag-box .flag.cm {
  height: 14px;
  background-position: -1027px 0px;
}
.smart-flag-box .flag.cn {
  height: 14px;
  background-position: -1049px 0px;
}
.smart-flag-box .flag.co {
  height: 14px;
  background-position: -1071px 0px;
}
.smart-flag-box .flag.cp {
  height: 14px;
  background-position: -1093px 0px;
}
.smart-flag-box .flag.cr {
  height: 12px;
  background-position: -1115px 0px;
}
.smart-flag-box .flag.cu {
  height: 10px;
  background-position: -1137px 0px;
}
.smart-flag-box .flag.cv {
  height: 12px;
  background-position: -1159px 0px;
}
.smart-flag-box .flag.cw {
  height: 14px;
  background-position: -1181px 0px;
}
.smart-flag-box .flag.cx {
  height: 10px;
  background-position: -1203px 0px;
}
.smart-flag-box .flag.cy {
  height: 14px;
  background-position: -1225px 0px;
}
.smart-flag-box .flag.cz {
  height: 14px;
  background-position: -1247px 0px;
}
.smart-flag-box .flag.de {
  height: 12px;
  background-position: -1269px 0px;
}
.smart-flag-box .flag.dg {
  height: 10px;
  background-position: -1291px 0px;
}
.smart-flag-box .flag.dj {
  height: 14px;
  background-position: -1313px 0px;
}
.smart-flag-box .flag.dk {
  height: 15px;
  background-position: -1335px 0px;
}
.smart-flag-box .flag.dm {
  height: 10px;
  background-position: -1357px 0px;
}
.smart-flag-box .flag.do {
  height: 14px;
  background-position: -1379px 0px;
}
.smart-flag-box .flag.dz {
  height: 14px;
  background-position: -1401px 0px;
}
.smart-flag-box .flag.ea {
  height: 14px;
  background-position: -1423px 0px;
}
.smart-flag-box .flag.ec {
  height: 14px;
  background-position: -1445px 0px;
}
.smart-flag-box .flag.ee {
  height: 13px;
  background-position: -1467px 0px;
}
.smart-flag-box .flag.eg {
  height: 14px;
  background-position: -1489px 0px;
}
.smart-flag-box .flag.eh {
  height: 10px;
  background-position: -1511px 0px;
}
.smart-flag-box .flag.er {
  height: 10px;
  background-position: -1533px 0px;
}
.smart-flag-box .flag.es {
  height: 14px;
  background-position: -1555px 0px;
}
.smart-flag-box .flag.et {
  height: 10px;
  background-position: -1577px 0px;
}
.smart-flag-box .flag.eu {
  height: 14px;
  background-position: -1599px 0px;
}
.smart-flag-box .flag.fi {
  height: 12px;
  background-position: -1621px 0px;
}
.smart-flag-box .flag.fj {
  height: 10px;
  background-position: -1643px 0px;
}
.smart-flag-box .flag.fk {
  height: 10px;
  background-position: -1665px 0px;
}
.smart-flag-box .flag.fm {
  height: 11px;
  background-position: -1687px 0px;
}
.smart-flag-box .flag.fo {
  height: 15px;
  background-position: -1709px 0px;
}
.smart-flag-box .flag.fr {
  height: 14px;
  background-position: -1731px 0px;
}
.smart-flag-box .flag.ga {
  height: 15px;
  background-position: -1753px 0px;
}
.smart-flag-box .flag.gb {
  height: 10px;
  background-position: -1775px 0px;
}
.smart-flag-box .flag.gd {
  height: 12px;
  background-position: -1797px 0px;
}
.smart-flag-box .flag.ge {
  height: 14px;
  background-position: -1819px 0px;
}
.smart-flag-box .flag.gf {
  height: 14px;
  background-position: -1841px 0px;
}
.smart-flag-box .flag.gg {
  height: 14px;
  background-position: -1863px 0px;
}
.smart-flag-box .flag.gh {
  height: 14px;
  background-position: -1885px 0px;
}
.smart-flag-box .flag.gi {
  height: 10px;
  background-position: -1907px 0px;
}
.smart-flag-box .flag.gl {
  height: 14px;
  background-position: -1929px 0px;
}
.smart-flag-box .flag.gm {
  height: 14px;
  background-position: -1951px 0px;
}
.smart-flag-box .flag.gn {
  height: 14px;
  background-position: -1973px 0px;
}
.smart-flag-box .flag.gp {
  height: 14px;
  background-position: -1995px 0px;
}
.smart-flag-box .flag.gq {
  height: 14px;
  background-position: -2017px 0px;
}
.smart-flag-box .flag.gr {
  height: 14px;
  background-position: -2039px 0px;
}
.smart-flag-box .flag.gs {
  height: 10px;
  background-position: -2061px 0px;
}
.smart-flag-box .flag.gt {
  height: 13px;
  background-position: -2083px 0px;
}
.smart-flag-box .flag.gu {
  height: 11px;
  background-position: -2105px 0px;
}
.smart-flag-box .flag.gw {
  height: 10px;
  background-position: -2127px 0px;
}
.smart-flag-box .flag.gy {
  height: 12px;
  background-position: -2149px 0px;
}
.smart-flag-box .flag.hk {
  height: 14px;
  background-position: -2171px 0px;
}
.smart-flag-box .flag.hm {
  height: 10px;
  background-position: -2193px 0px;
}
.smart-flag-box .flag.hn {
  height: 10px;
  background-position: -2215px 0px;
}
.smart-flag-box .flag.hr {
  height: 10px;
  background-position: -2237px 0px;
}
.smart-flag-box .flag.ht {
  height: 12px;
  background-position: -2259px 0px;
}
.smart-flag-box .flag.hu {
  height: 10px;
  background-position: -2281px 0px;
}
.smart-flag-box .flag.ic {
  height: 14px;
  background-position: -2303px 0px;
}
.smart-flag-box .flag.id {
  height: 14px;
  background-position: -2325px 0px;
}
.smart-flag-box .flag.ie {
  height: 10px;
  background-position: -2347px 0px;
}
.smart-flag-box .flag.il {
  height: 15px;
  background-position: -2369px 0px;
}
.smart-flag-box .flag.im {
  height: 10px;
  background-position: -2391px 0px;
}
.smart-flag-box .flag.in {
  height: 14px;
  background-position: -2413px 0px;
}
.smart-flag-box .flag.io {
  height: 10px;
  background-position: -2435px 0px;
}
.smart-flag-box .flag.iq {
  height: 14px;
  background-position: -2457px 0px;
}
.smart-flag-box .flag.ir {
  height: 12px;
  background-position: -2479px 0px;
}
.smart-flag-box .flag.is {
  height: 15px;
  background-position: -2501px 0px;
}
.smart-flag-box .flag.it {
  height: 14px;
  background-position: -2523px 0px;
}
.smart-flag-box .flag.je {
  height: 12px;
  background-position: -2545px 0px;
}
.smart-flag-box .flag.jm {
  height: 10px;
  background-position: -2567px 0px;
}
.smart-flag-box .flag.jo {
  height: 10px;
  background-position: -2589px 0px;
}
.smart-flag-box .flag.jp {
  height: 14px;
  background-position: -2611px 0px;
}
.smart-flag-box .flag.ke {
  height: 14px;
  background-position: -2633px 0px;
}
.smart-flag-box .flag.kg {
  height: 12px;
  background-position: -2655px 0px;
}
.smart-flag-box .flag.kh {
  height: 13px;
  background-position: -2677px 0px;
}
.smart-flag-box .flag.ki {
  height: 10px;
  background-position: -2699px 0px;
}
.smart-flag-box .flag.km {
  height: 12px;
  background-position: -2721px 0px;
}
.smart-flag-box .flag.kn {
  height: 14px;
  background-position: -2743px 0px;
}
.smart-flag-box .flag.kp {
  height: 10px;
  background-position: -2765px 0px;
}
.smart-flag-box .flag.kr {
  height: 14px;
  background-position: -2787px 0px;
}
.smart-flag-box .flag.kw {
  height: 10px;
  background-position: -2809px 0px;
}
.smart-flag-box .flag.ky {
  height: 10px;
  background-position: -2831px 0px;
}
.smart-flag-box .flag.kz {
  height: 10px;
  background-position: -2853px 0px;
}
.smart-flag-box .flag.la {
  height: 14px;
  background-position: -2875px 0px;
}
.smart-flag-box .flag.lb {
  height: 14px;
  background-position: -2897px 0px;
}
.smart-flag-box .flag.lc {
  height: 10px;
  background-position: -2919px 0px;
}
.smart-flag-box .flag.li {
  height: 12px;
  background-position: -2941px 0px;
}
.smart-flag-box .flag.lk {
  height: 10px;
  background-position: -2963px 0px;
}
.smart-flag-box .flag.lr {
  height: 11px;
  background-position: -2985px 0px;
}
.smart-flag-box .flag.ls {
  height: 14px;
  background-position: -3007px 0px;
}
.smart-flag-box .flag.lt {
  height: 12px;
  background-position: -3029px 0px;
}
.smart-flag-box .flag.lu {
  height: 12px;
  background-position: -3051px 0px;
}
.smart-flag-box .flag.lv {
  height: 10px;
  background-position: -3073px 0px;
}
.smart-flag-box .flag.ly {
  height: 10px;
  background-position: -3095px 0px;
}
.smart-flag-box .flag.ma {
  height: 14px;
  background-position: -3117px 0px;
}
.smart-flag-box .flag.mc {
  height: 15px;
  background-position: -3139px 0px;
}
.smart-flag-box .flag.md {
  height: 10px;
  background-position: -3160px 0px;
}
.smart-flag-box .flag.me {
  height: 10px;
  background-position: -3182px 0px;
}
.smart-flag-box .flag.mf {
  height: 14px;
  background-position: -3204px 0px;
}
.smart-flag-box .flag.mg {
  height: 14px;
  background-position: -3226px 0px;
}
.smart-flag-box .flag.mh {
  height: 11px;
  background-position: -3248px 0px;
}
.smart-flag-box .flag.mk {
  height: 10px;
  background-position: -3270px 0px;
}
.smart-flag-box .flag.ml {
  height: 14px;
  background-position: -3292px 0px;
}
.smart-flag-box .flag.mm {
  height: 14px;
  background-position: -3314px 0px;
}
.smart-flag-box .flag.mn {
  height: 10px;
  background-position: -3336px 0px;
}
.smart-flag-box .flag.mo {
  height: 14px;
  background-position: -3358px 0px;
}
.smart-flag-box .flag.mp {
  height: 10px;
  background-position: -3380px 0px;
}
.smart-flag-box .flag.mq {
  height: 14px;
  background-position: -3402px 0px;
}
.smart-flag-box .flag.mr {
  height: 14px;
  background-position: -3424px 0px;
}
.smart-flag-box .flag.ms {
  height: 10px;
  background-position: -3446px 0px;
}
.smart-flag-box .flag.mt {
  height: 14px;
  background-position: -3468px 0px;
}
.smart-flag-box .flag.mu {
  height: 14px;
  background-position: -3490px 0px;
}
.smart-flag-box .flag.mv {
  height: 14px;
  background-position: -3512px 0px;
}
.smart-flag-box .flag.mw {
  height: 14px;
  background-position: -3534px 0px;
}
.smart-flag-box .flag.mx {
  height: 12px;
  background-position: -3556px 0px;
}
.smart-flag-box .flag.my {
  height: 10px;
  background-position: -3578px 0px;
}
.smart-flag-box .flag.mz {
  height: 14px;
  background-position: -3600px 0px;
}
.smart-flag-box .flag.na {
  height: 14px;
  background-position: -3622px 0px;
}
.smart-flag-box .flag.nc {
  height: 10px;
  background-position: -3644px 0px;
}
.smart-flag-box .flag.ne {
  height: 15px;
  background-position: -3666px 0px;
}
.smart-flag-box .flag.nf {
  height: 10px;
  background-position: -3686px 0px;
}
.smart-flag-box .flag.ng {
  height: 10px;
  background-position: -3708px 0px;
}
.smart-flag-box .flag.ni {
  height: 12px;
  background-position: -3730px 0px;
}
.smart-flag-box .flag.nl {
  height: 14px;
  background-position: -3752px 0px;
}
.smart-flag-box .flag.no {
  height: 15px;
  background-position: -3774px 0px;
}
.smart-flag-box .flag.np {
  height: 15px;
  background-position: -3796px 0px;
}
.smart-flag-box .flag.nr {
  height: 10px;
  background-position: -3811px 0px;
}
.smart-flag-box .flag.nu {
  height: 10px;
  background-position: -3833px 0px;
}
.smart-flag-box .flag.nz {
  height: 10px;
  background-position: -3855px 0px;
}
.smart-flag-box .flag.om {
  height: 10px;
  background-position: -3877px 0px;
}
.smart-flag-box .flag.pa {
  height: 14px;
  background-position: -3899px 0px;
}
.smart-flag-box .flag.pe {
  height: 14px;
  background-position: -3921px 0px;
}
.smart-flag-box .flag.pf {
  height: 14px;
  background-position: -3943px 0px;
}
.smart-flag-box .flag.pg {
  height: 15px;
  background-position: -3965px 0px;
}
.smart-flag-box .flag.ph {
  height: 10px;
  background-position: -3987px 0px;
}
.smart-flag-box .flag.pk {
  height: 14px;
  background-position: -4009px 0px;
}
.smart-flag-box .flag.pl {
  height: 13px;
  background-position: -4031px 0px;
}
.smart-flag-box .flag.pm {
  height: 14px;
  background-position: -4053px 0px;
}
.smart-flag-box .flag.pn {
  height: 10px;
  background-position: -4075px 0px;
}
.smart-flag-box .flag.pr {
  height: 14px;
  background-position: -4097px 0px;
}
.smart-flag-box .flag.ps {
  height: 10px;
  background-position: -4119px 0px;
}
.smart-flag-box .flag.pt {
  height: 14px;
  background-position: -4141px 0px;
}
.smart-flag-box .flag.pw {
  height: 13px;
  background-position: -4163px 0px;
}
.smart-flag-box .flag.py {
  height: 11px;
  background-position: -4185px 0px;
}
.smart-flag-box .flag.qa {
  height: 8px;
  background-position: -4207px 0px;
}
.smart-flag-box .flag.re {
  height: 14px;
  background-position: -4229px 0px;
}
.smart-flag-box .flag.ro {
  height: 14px;
  background-position: -4251px 0px;
}
.smart-flag-box .flag.rs {
  height: 14px;
  background-position: -4273px 0px;
}
.smart-flag-box .flag.ru {
  height: 14px;
  background-position: -4295px 0px;
}
.smart-flag-box .flag.rw {
  height: 14px;
  background-position: -4317px 0px;
}
.smart-flag-box .flag.sa {
  height: 14px;
  background-position: -4339px 0px;
}
.smart-flag-box .flag.sb {
  height: 10px;
  background-position: -4361px 0px;
}
.smart-flag-box .flag.sc {
  height: 10px;
  background-position: -4383px 0px;
}
.smart-flag-box .flag.sd {
  height: 10px;
  background-position: -4405px 0px;
}
.smart-flag-box .flag.se {
  height: 13px;
  background-position: -4427px 0px;
}
.smart-flag-box .flag.sg {
  height: 14px;
  background-position: -4449px 0px;
}
.smart-flag-box .flag.sh {
  height: 10px;
  background-position: -4471px 0px;
}
.smart-flag-box .flag.si {
  height: 10px;
  background-position: -4493px 0px;
}
.smart-flag-box .flag.sj {
  height: 15px;
  background-position: -4515px 0px;
}
.smart-flag-box .flag.sk {
  height: 14px;
  background-position: -4537px 0px;
}
.smart-flag-box .flag.sl {
  height: 14px;
  background-position: -4559px 0px;
}
.smart-flag-box .flag.sm {
  height: 15px;
  background-position: -4581px 0px;
}
.smart-flag-box .flag.sn {
  height: 14px;
  background-position: -4603px 0px;
}
.smart-flag-box .flag.so {
  height: 14px;
  background-position: -4625px 0px;
}
.smart-flag-box .flag.sr {
  height: 14px;
  background-position: -4647px 0px;
}
.smart-flag-box .flag.ss {
  height: 10px;
  background-position: -4669px 0px;
}
.smart-flag-box .flag.st {
  height: 10px;
  background-position: -4691px 0px;
}
.smart-flag-box .flag.sv {
  height: 12px;
  background-position: -4713px 0px;
}
.smart-flag-box .flag.sx {
  height: 14px;
  background-position: -4735px 0px;
}
.smart-flag-box .flag.sy {
  height: 14px;
  background-position: -4757px 0px;
}
.smart-flag-box .flag.sz {
  height: 14px;
  background-position: -4779px 0px;
}
.smart-flag-box .flag.ta {
  height: 10px;
  background-position: -4801px 0px;
}
.smart-flag-box .flag.tc {
  height: 10px;
  background-position: -4823px 0px;
}
.smart-flag-box .flag.td {
  height: 14px;
  background-position: -4845px 0px;
}
.smart-flag-box .flag.tf {
  height: 14px;
  background-position: -4867px 0px;
}
.smart-flag-box .flag.tg {
  height: 13px;
  background-position: -4889px 0px;
}
.smart-flag-box .flag.th {
  height: 14px;
  background-position: -4911px 0px;
}
.smart-flag-box .flag.tj {
  height: 10px;
  background-position: -4933px 0px;
}
.smart-flag-box .flag.tk {
  height: 10px;
  background-position: -4955px 0px;
}
.smart-flag-box .flag.tl {
  height: 10px;
  background-position: -4977px 0px;
}
.smart-flag-box .flag.tm {
  height: 14px;
  background-position: -4999px 0px;
}
.smart-flag-box .flag.tn {
  height: 14px;
  background-position: -5021px 0px;
}
.smart-flag-box .flag.to {
  height: 10px;
  background-position: -5043px 0px;
}
.smart-flag-box .flag.tr {
  height: 14px;
  background-position: -5065px 0px;
}
.smart-flag-box .flag.tt {
  height: 12px;
  background-position: -5087px 0px;
}
.smart-flag-box .flag.tv {
  height: 10px;
  background-position: -5109px 0px;
}
.smart-flag-box .flag.tw {
  height: 14px;
  background-position: -5131px 0px;
}
.smart-flag-box .flag.tz {
  height: 14px;
  background-position: -5153px 0px;
}
.smart-flag-box .flag.ua {
  height: 14px;
  background-position: -5175px 0px;
}
.smart-flag-box .flag.ug {
  height: 14px;
  background-position: -5197px 0px;
}
.smart-flag-box .flag.um {
  height: 11px;
  background-position: -5219px 0px;
}
.smart-flag-box .flag.un {
  height: 14px;
  background-position: -5241px 0px;
}
.smart-flag-box .flag.us {
  height: 11px;
  background-position: -5263px 0px;
}
.smart-flag-box .flag.uy {
  height: 14px;
  background-position: -5285px 0px;
}
.smart-flag-box .flag.uz {
  height: 10px;
  background-position: -5307px 0px;
}
.smart-flag-box .flag.va {
  height: 15px;
  background-position: -5329px 0px;
}
.smart-flag-box .flag.vc {
  height: 14px;
  background-position: -5346px 0px;
}
.smart-flag-box .flag.ve {
  height: 14px;
  background-position: -5368px 0px;
}
.smart-flag-box .flag.vg {
  height: 10px;
  background-position: -5390px 0px;
}
.smart-flag-box .flag.vi {
  height: 14px;
  background-position: -5412px 0px;
}
.smart-flag-box .flag.vn {
  height: 14px;
  background-position: -5434px 0px;
}
.smart-flag-box .flag.vu {
  height: 12px;
  background-position: -5456px 0px;
}
.smart-flag-box .flag.wf {
  height: 14px;
  background-position: -5478px 0px;
}
.smart-flag-box .flag.ws {
  height: 10px;
  background-position: -5500px 0px;
}
.smart-flag-box .flag.xk {
  height: 15px;
  background-position: -5522px 0px;
}
.smart-flag-box .flag.ye {
  height: 14px;
  background-position: -5544px 0px;
}
.smart-flag-box .flag.yt {
  height: 14px;
  background-position: -5566px 0px;
}
.smart-flag-box .flag.za {
  height: 14px;
  background-position: -5588px 0px;
}
.smart-flag-box .flag.zm {
  height: 14px;
  background-position: -5610px 0px;
}
.smart-flag-box .flag.zw {
  height: 10px;
  background-position: -5632px 0px;
}
.smart-flag-box .flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("../images/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}
.smart-flag-box .flag.np {
  background-color: transparent;
}

.smart-country-input-drop-down-menu ul li a,
.smart-phone-input-drop-down-menu ul li a {
  border-left: var(--smart-border-width) solid transparent;
  display: flex;
  align-items: center;
}
.smart-country-input-drop-down-menu ul li .dial-code,
.smart-phone-input-drop-down-menu ul li .dial-code {
  margin-left: 6px;
  opacity: 0.5;
}
.smart-country-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a,
.smart-phone-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a {
  border-left: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--smart-ui-state-color-selected);
  background: var(--smart-ui-state-selected);
}
.smart-country-input-drop-down-menu[right-to-left] li a,
.smart-phone-input-drop-down-menu[right-to-left] li a {
  border-left: none;
  border-right: var(--smart-border-width) solid transparent;
}
.smart-country-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a,
.smart-phone-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a {
  border-left: var(--smart-border-width) solid transparent;
  border-right: var(--smart-border-width) solid var(--smart-primary);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

smart-date-range-input.underlined,
smart-date-input.underlined,
smart-time-input.underlined {
  overflow: visible;
}

.underlined.smart-input {
  transition: border-bottom 0.2s, background-color 0.2s;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top: none;
  border-left: none;
  border-right: none;
}
.underlined.smart-input .smart-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block !important;
  box-sizing: border-box;
  padding: var(--smart-editor-label-padding);
  color: var(--smart-background-color);
  pointer-events: none;
  font-size: 75%;
  opacity: 0;
  transition: color 0.2s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, opacity 0.3s, top 0.2s;
  margin-top: calc(0px - var(--smart-font-size));
}
.underlined.smart-input .smart-hint:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--smart-primary);
  transform-origin: bottom center;
  transform: scaleX(0);
  transition: transform 0.2s;
}
.underlined.smart-input[drop-down-button-position="left"] .smart-drop-down-button {
  border-bottom-left-radius: initial;
}
.underlined.smart-input[drop-down-button-position="right"] .smart-drop-down-button {
  border-bottom-right-radius: initial;
}
.underlined.smart-input .smart-drop-down-button {
  border-top: none;
  border-left: none;
  border-right: none;
}
.underlined.smart-input[hover] {
  border-bottom-color: var(--smart-background-color);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.underlined.smart-input[focus] .smart-hint {
  color: var(--smart-primary);
  opacity: 1;
}
.underlined.smart-input[focus] .smart-hint:before {
  opacity: 0.12;
}
.underlined.smart-input[focus] .smart-hint:after {
  transform: scale(1);
}
.underlined.smart-input .smart-input:not(:focus):placeholder-shown + .smart-hint {
  font-size: inherit;
  margin-top: 0px;
}
.underlined.smart-input:not([readonly]) .smart-drop-down-button {
  border-bottom-left-radius: initial;
  border-bottom-right-radius: initial;
}
.underlined.smart-input:not([opened]) .smart-drop-down-button {
  background-color: transparent;
}
.underlined.smart-input.smart-multi-combo-input:not([focus]) .smart-hint {
  margin-top: 0px;
}
.underlined.smart-input.smart-date-range-input[opened][drop-down-button-position="right"]:not([readonly]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.underlined.smart-input[readonly] .smart-input {
  cursor: pointer;
  background: var(--smart-background) !important;
  color: var(--smart-background-color) !important;
  opacity: 0.75;
}
.underlined.smart-input[drop-down-button-position="left"] .smart-drop-down-button {
  background: inherit;
  color: inherit;
  border-bottom-left-radius: initial;
}
.underlined.smart-input[drop-down-button-position="left"] .smart-hint {
  margin-left: var(--smart-editor-addon-width);
}
.underlined.smart-input[drop-down-button-position="left"][focus] .smart-hint:after {
  margin-left: calc(0px - var(--smart-editor-addon-width));
  width: calc(100% + var(--smart-editor-addon-width));
}
.underlined.smart-input[drop-down-button-position="left"][opened]:not([readonly]), .underlined.smart-input[drop-down-button-position="left"][opened]:not([readonly]) input {
  border-bottom-right-radius: 0;
}
.underlined.smart-input[drop-down-button-position="right"] .smart-drop-down-button {
  background: var(--smart-background);
  color: var(--smart-background-color);
  border-bottom-right-radius: initial;
}
.underlined.smart-input[drop-down-button-position="right"][opened]:not([readonly]), .underlined.smart-input[drop-down-button-position="right"][opened]:not([readonly]) input {
  border-bottom-left-radius: 0;
}
.underlined.smart-input.smart-invalid {
  border-bottom-color: rgba(var(--smart-error-rgb), 0.5);
}
.underlined.smart-input.smart-invalid .smart-hint:after {
  background-color: var(--smart-error);
}
.underlined.smart-text-box input.smart-input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: initial;
}
.underlined.smart-number-input .nav {
  background: var(--smart-background);
  color: var(--smart-background-color);
}
.underlined.smart-number-input .nav .up {
  border-bottom: none;
}
.underlined.smart-element.smart-material {
  --smart-border-top-left-radius: 0;
  --smart-border-top-right-radius: 0;
  --smart-border-bottom-left-radius: 0;
  --smart-border-bottom-right-radius: 0;
}
.underlined.smart-element.smart-material.smart-valid {
  --smart-border: #28a745;
}
.underlined.smart-element.smart-material.smart-invalid {
  --smart-border: #dc3545;
}
.underlined.smart-element.smart-material .smart-hint {
  opacity: 1;
  transition: color .2s, opacity .1s, font-size .2s, line-height .2s, margin-top .2s, top .2s !important;
  margin-top: 0;
  font-size: 100%;
}
.underlined.smart-element.smart-material[focus][hover] .smart-hint, .underlined.smart-element.smart-material[focus] .smart-hint, .underlined.smart-element.smart-material[value]:not([value=""]) .smart-hint, .underlined.smart-element.smart-material.has-value .smart-hint {
  margin-top: -20px;
  font-size: 80% !important;
}

smart-text-box.outlined,
smart-input.outlined,
smart-password-input.outlined,
smart-date-range-input.outlined,
smart-multi-input.outlined,
smart-multi-combo-input.outlined,
smart-check-input.outlined,
smart-masked-text-box.outlined,
smart-password-text-box.outlined {
  background-color: transparent;
}

smart-date-range-input.outlined,
smart-date-input.outlined,
smart-time-input.outlined {
  overflow: visible;
}

.outlined.smart-input {
  position: relative;
  display: inline-block;
  font-family: var(--smart-font-family);
  font-size: var(--smart-font-size);
  line-height: 1.5;
  height: 50px;
  margin: 0px;
  border: none;
  border-radius: 0px;
  padding-top: 6px;
  overflow: hidden;
}
.outlined.smart-input .smart-input {
  padding: 12px 13px 12px;
  z-index: 5;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  transition: border-color 0.2s;
}
.outlined.smart-input.smart-valid[focus] .smart-input,
.outlined.smart-input.smart-valid[focus] .smart-drop-down-button {
  border-color: var(--smart-primary);
}
.outlined.smart-input.smart-valid[focus] .smart-drop-down-button {
  color: var(--smart-primary);
}
.outlined.smart-input.smart-invalid .smart-input,
.outlined.smart-input.smart-invalid .smart-drop-down-button {
  border-color: rgba(var(--smart-error-rgb), 0.5);
}
.outlined.smart-input.smart-invalid[focus] .smart-input,
.outlined.smart-input.smart-invalid[focus] .smart-drop-down-button {
  border-color: var(--smart-error);
}
.outlined.smart-input.smart-invalid[focus] .smart-drop-down-button {
  color: var(--smart-error);
}
.outlined.smart-input.smart-multi-combo-input .smart-input {
  padding: 0;
  border: none !important;
  z-index: initial;
}
.outlined.smart-input.smart-multi-combo-input .smart-drop-down-button {
  padding: 0 !important;
}
.outlined.smart-input.smart-multi-combo-input .smart-action-button {
  border-right: none;
  border-top: 1px solid var(--smart-border);
  padding: 12px 13px 12px;
  z-index: 5;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  transition: border-color 0.2s;
}
.outlined.smart-input.smart-multi-combo-input[hint] .smart-action-button {
  border-top: 1px solid var(--smart-background);
}
.outlined.smart-input.smart-multi-combo-input[focus] .smart-action-button {
  border-color: var(--smart-primary);
  color: var(--smart-primary);
}
.outlined.smart-input.smart-multi-combo-input[focus][hint] .smart-action-button {
  border-top-color: var(--smart-background);
}
.outlined.smart-input.smart-multi-combo-input.smart-valid[focus] .smart-action-button {
  border-color: var(--smart-primary);
}
.outlined.smart-input.smart-multi-combo-input.smart-valid[focus] .smart-action-button.smart-valid {
  color: var(--smart-primary);
}
.outlined.smart-input.smart-multi-combo-input.smart-invalid[focus] .smart-action-button.smart-invalid {
  color: var(--smart-error);
}
.outlined.smart-input[drop-down-button-position="right"] input {
  border-right: none;
}
.outlined.smart-input[drop-down-button-position="right"] .smart-drop-down-button {
  padding: 10px 0px 9px 0px;
  border-left: none;
  border-bottom: 1px solid var(--smart-border);
  border-right: 1px solid var(--smart-border);
  border-top: 1px solid var(--smart-border);
  background: inherit;
  color: inherit;
  z-index: 6;
  cursor: pointer;
}
.outlined.smart-input[drop-down-button-position="left"] input {
  border-left: none;
}
.outlined.smart-input[drop-down-button-position="left"] .smart-drop-down-button {
  padding: 10px 0px;
  border-right: none;
  border-bottom: 1px solid var(--smart-border);
  border-left: 1px solid var(--smart-border);
  background: inherit;
  color: inherit;
  z-index: 6;
  cursor: pointer;
}
.outlined.smart-input[hint] .smart-hint {
  position: absolute;
  top: 0;
  left: 0;
  display: flex !important;
  border-color: var(--smart-border) !important;
  width: 100%;
  max-height: 100%;
  color: var(--smart-background-color);
  font-size: 75%;
  line-height: 15px;
  cursor: text;
  margin-top: -6px;
  z-index: 7;
  white-space: nowrap;
  transition: color 0.2s, z-index 0.2s, font-size 0.2s, opacity 0.3s, font-size 0.2s, line-height 0.2s;
}
.outlined.smart-input[hint] .smart-hint:before, .outlined.smart-input[hint] .smart-hint:after {
  content: "";
  display: block;
  box-sizing: border-box;
  margin-top: 6px;
  border-top: solid 1px;
  border-top-color: var(--smart-border) !important;
  min-width: 10px;
  height: 8px;
  pointer-events: none;
  box-shadow: inset 0 1px transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
  z-index: 7;
}
.outlined.smart-input[hint] .smart-hint:before {
  margin-right: 4px;
  border-left: solid 1px transparent;
  border-radius: 4px 0;
}
.outlined.smart-input[hint] .smart-hint:after {
  flex-grow: 1;
  margin-left: 4px;
  border-right: solid 1px transparent;
  border-radius: 0 4px;
}
.outlined.smart-input[hint][drop-down-button-position="left"] .smart-hint:before {
  width: var(--smart-editor-addon-width);
  margin-right: 13px;
}
.outlined.smart-input[focus] {
  border-color: var(--smart-primary);
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 var(--smart-material-safari-helper1), inset -1px 0 var(--smart-material-safari-helper1), inset 0 -1px var(--smart-material-safari-helper1);
  outline: none;
}
.outlined.smart-input[focus] .smart-input {
  border-color: var(--smart-primary);
}
.outlined.smart-input[focus] .smart-drop-down-button {
  color: var(--smart-primary);
  border-color: var(--smart-primary);
}
.outlined.smart-input[focus][hint] .smart-input {
  border-top-color: var(--smart-background);
}
.outlined.smart-input[focus][hint] .smart-hint {
  color: var(--smart-primary);
  opacity: 1;
}
.outlined.smart-input[focus][hint] .smart-hint:before, .outlined.smart-input[focus][hint] .smart-hint:after {
  border-top-color: var(--smart-primary) !important;
  box-shadow: none !important;
}
.outlined.smart-input[hover] {
  border-color: var(--smart-border);
  border-top-color: transparent;
}
.outlined.smart-input[hover][hint] .smart-hint:before {
  border-top-color: var(--smart-border);
}
.outlined.smart-input[hover][hint] > input:not(:focus):placeholder-shown,
.outlined.smart-input[hover][hint] > textarea:not(:focus):placeholder-shown {
  border-color: var(--smart-border);
}
.outlined.smart-input[readonly] .smart-input {
  background: var(--smart-background) !important;
  color: var(--smart-background-color) !important;
  opacity: 0.75;
}
.outlined.smart-input:not([focus]) .smart-input:not(:focus):placeholder-shown,
.outlined.smart-input:not([focus]) .smart-input {
  border-top: 1px solid var(--smart-border);
  z-index: 5;
}
.outlined.smart-input:not([focus]).smart-invalid .smart-input:not(:focus):placeholder-shown,
.outlined.smart-input:not([focus]).smart-invalid .smart-input {
  border-top: 1px solid rgba(var(--smart-error-rgb), 0.5);
  z-index: 5;
}
.outlined.smart-input:not([focus]):not([value]).smart-multi-combo-input[hint] .smart-hint, .outlined.smart-input[hint] .smart-input:not(:focus):placeholder-shown + .smart-hint, .outlined.smart-input[hint]:not([focus]) .smart-hint {
  font-size: var(--smart-font-size);
  line-height: 60px;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}
.outlined.smart-input.smart-invalid[focus] {
  border-color: var(--smart-error);
}
.outlined.smart-input.smart-invalid[focus][hint] .smart-hint {
  color: var(--smart-error);
}
.outlined.smart-input.smart-invalid[focus][hint] .smart-hint:before, .outlined.smart-input.smart-invalid[focus][hint] .smart-hint:after {
  border-top-color: var(--smart-error) !important;
}
.outlined.smart-input.smart-valid[focus] {
  border-color: var(--smart-primary);
}
.outlined.smart-input.smart-valid[focus][hint] .smart-hint {
  color: var(--smart-primary);
}
.outlined.smart-input.smart-valid[focus][hint] .smart-hint:before, .outlined.smart-input.smart-valid[focus][hint] .smart-hint:after {
  border-top-color: var(--smart-primary) !important;
}
.outlined.smart-text-area[hint] .smart-input:not(:focus):placeholder-shown + .smart-hint, .outlined.smart-text-area[hint]:not([focus]) .smart-hint {
  font-size: var(--smart-font-size);
  line-height: var(--smart-editor-height);
  opacity: 0;
  z-index: 2;
}
.outlined.smart-text-box input {
  border: none;
  padding: 7px;
}
.outlined.smart-number-input .nav {
  background: var(--smart-background);
  color: var(--smart-background-color);
}
.outlined.smart-number-input .nav .up {
  border-bottom: none;
}
.outlined.smart-number-input[drop-down-button-position="right"] .smart-drop-down-button, .outlined.smart-number-input[drop-down-button-position="left"] .smart-drop-down-button {
  padding: 0;
}
.outlined.smart-element.smart-material.smart-valid {
  --smart-border: #28a745;
}
.outlined.smart-element.smart-material.smart-invalid {
  --smart-border: #dc3545;
}
.outlined.smart-element.smart-material .smart-hint {
  opacity: 1 !important;
  transition: color .2s, opacity .1s, font-size .2s, line-height .2s, margin-top .2s, top .2s !important;
  z-index: 7 !important;
}
.outlined.smart-element.smart-material[focus][hover], .outlined.smart-element.smart-material[focus], .outlined.smart-element.smart-material[value]:not([value=""]), .outlined.smart-element.smart-material.has-value {
  border-color: var(--smart-primary);
  border-top-color: transparent !important;
  outline: none;
}
.outlined.smart-element.smart-material[focus][hover] .smart-input, .outlined.smart-element.smart-material[focus] .smart-input, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-input, .outlined.smart-element.smart-material.has-value .smart-input {
  border-top-color: var(--smart-background) !important;
}
.outlined.smart-element.smart-material[focus][hover] .smart-hint, .outlined.smart-element.smart-material[focus] .smart-hint, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-hint, .outlined.smart-element.smart-material.has-value .smart-hint {
  color: var(--smart-primary) !important;
  opacity: 1 !important;
  font-size: 75% !important;
  line-height: 15px;
  z-index: 7;
  transition: color 0.2s, z-index 0.2s, font-size 0.2s, opacity 0.3s, font-size 0.2s, line-height 0.2s;
}
.outlined.smart-element.smart-material[focus][hover] .smart-container .smart-content, .outlined.smart-element.smart-material[focus] .smart-container .smart-content, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-container .smart-content, .outlined.smart-element.smart-material.has-value .smart-container .smart-content {
  border-top-color: transparent !important;
}
.outlined.smart-drop-down-box > .smart-container > .smart-content {
  z-index: 7 !important;
}

.smart-invalid .outlined.smart-input.smart-multi-combo-input .smart-action-button {
  border-color: rgba(var(--smart-error-rgb), 0.5);
}
.smart-invalid .outlined.smart-input.smart-multi-combo-input[focus] .smart-action-button {
  border-color: var(--smart-error);
}

/* Faster transition in Safari for less noticable fractional font-size issue */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .smart-input .smart-input,
    .smart-input .smart-hint,
    .smart-input .smart-hint::after {
      transition-duration: 0.1s;
    }
  }
}

/*# sourceMappingURL=smart.textbox.css.map */