smart-webcomponents-angular/source/styles/smart.fluent.css

[](https://jqwidgets.com/license/)

@charset "UTF-8";
/* Theme font-size */
@import url("https://fonts.cdnfonts.com/css/segoe-ui-4");
:root {
  --fluent-black: #000;
  --fluent-white: #fff;
  --fluent-surface: #fff;
  --fluent-surface-color: #000;
  --fluent-background: #fff;
  --fluent-background-color: #000;
  --fluent-type-primary: #201F1E;
  --fluent-type-secondary: #323130;
  --fluent-type-disabled: #323130;
  --fluent-body-divider: #EDEBE9;
  --fluent-input-background: #fff;
  --fluent-input-disabled-background: #EDEBE9;
  --fluent-input-border: #8A8886;
  --fluent-input-border-hover: #323130;
  --fluent-alert-color: #201F1E;
  --fluent-theme-primary: #0078D4;
  --fluent-theme-lighter-alt: #EFF6FC;
  --fluent-theme-lighter: #DEECF9;
  --fluent-theme-light: #C7E0F4;
  --fluent-theme-tertiary: #2B88D8;
  --fluent-theme-dark-alt: #106EBE;
  --fluent-theme-dark: #005A9E;
  --fluent-theme-darker: #004578;
  --fluent-btn-primary-color: #fff;
  --fluent-btn-primary-bg: #0078D4;
  --fluent-btn-primary-bg-hover: #106EBE;
  --fluent-btn-primary-bg-active: #005A9E;
  --fluent-btn-secondary-color: #201F1E;
  --fluent-btn-secondary-bg: #fff;
  --fluent-btn-secondary-bg-hover: #F3F2F1;
  --fluent-btn-secondary-bg-active: #EDEBE9;
  --fluent-btn-text-color: #201F1E;
  --fluent-btn-text-bg: #fff;
  --fluent-btn-text-color-hover: #201F1E;
  --fluent-btn-text-bg-hover: #F3F2F1;
  --fluent-btn-text-color-active: #201F1E;
  --fluent-btn-text-bg-active: #EDEBE9;
  --fluent-window-bg: #fff;
  --fluent-tabs-item-bg-hover: #F3F2F1;
  --fluent-list-items-group-bg: #EDEBE9;
  --fluent-tooltip-bg: #fff;
  --fluent-tooltip-color: #201F1E;
  --fluent-tag-bg: #F3F2F1;
  --fluent-tag-color: #201F1E;
  --fluent-breadcrumb-color: #605E5C;
  --fluent-breadcrumb-bg: transparent;
  --fluent-breadcrumb-color-hover: #201F1E;
  --fluent-breadcrumb-bg-hover: #F3F2F1;
  --fluent-accordion-header-color: #201F1E;
  --fluent-accordion-header-bg: #EDEBE9;
  --fluent-pager-color: #0078D4;
  --fluent-pager-bg: #fff;
  --fluent-pager-border: #C8C6C4;
  --fluent-sortable-border: #EDEBE9;
  --fluent-error-bg: #FDE7E9;
  --fluent-error-color: #A80000;
  --fluent-success-bg: #DFF6DD;
  --fluent-success-color: #107C10;
  --fluent-severe-warning-bg: #FED9CC;
  --fluent-severe-warning-color: #D83B01;
  --fluent-warning-bg: #FFF4CE;
  --fluent-warning-color: #797775;
  --fluent-greys-white: #fff;
  --fluent-greys-grey10: #FAF9F8;
  --fluent-greys-grey20: #F3F2F1;
  --fluent-greys-grey30: #EDEBE9;
  --fluent-greys-grey40: #E1DFDD;
  --fluent-greys-grey50: #D2D0CE;
  --fluent-greys-grey60: #C8C6C4;
  --fluent-greys-grey90: #A19F9D;
  --fluent-greys-grey110: #8A8886;
  --fluent-greys-grey130: #605E5C;
  --fluent-greys-grey150: #3B3A39;
  --fluent-greys-grey160: #323130;
  --fluent-greys-grey190: #201F1E;
  --fluent-overlay-light: rgba(red("#fff"), green("#fff"), blue("#fff"), 0.4);
  --fluent-overlay-dark: rgba(red("#000"), green("#000"), blue("#000"), 0.4);
  --fluent-box-shadow-4: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  --fluent-box-shadow-8: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
  --fluent-box-shadow-16: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
  --fluent-box-shadow-64: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
  --smart-primary: var(--fluent-theme-primary);
}

body[theme=dark] {
  --fluent-surface: #282727;
  --fluent-surface-color: #fff;
  --fluent-background: #282727;
  --fluent-background-color: #fff;
  --fluent-input-background: #282727;
  --fluent-input-disabled-background: #605E5C;
  --fluent-greys-grey190: #fff;
  --fluent-type-primary: #EDEBE9;
  --fluent-input-border: #6c6c6c;
  --fluent-input-border-hover: #EDEBE9;
  --fluent-btn-secondary-color: #EDEBE9;
  --fluent-btn-secondary-bg: #8A8886;
  --fluent-btn-secondary-bg-hover: #605E5C;
  --fluent-btn-secondary-bg-active: #3B3A39;
  --fluent-btn-text-color: #201F1E;
  --fluent-btn-text-bg: #fff;
  --fluent-btn-text-color-hover: #fff;
  --fluent-btn-text-bg-hover: #605E5C;
  --fluent-btn-text-color-active: #fff;
  --fluent-btn-text-bg-active: #3B3A39;
  --fluent-window-bg: #282727;
  --fluent-tabs-item-bg-hover: #605E5C;
  --fluent-list-items-group-bg: #605E5C;
  --fluent-tooltip-bg: #201F1E;
  --fluent-tooltip-color: #fff;
  --fluent-tag-bg: #605E5C;
  --fluent-tag-color: #F3F2F1;
  --fluent-breadcrumb-color: #C8C6C4;
  --fluent-breadcrumb-bg: transparent;
  --fluent-breadcrumb-color-hover: #C8C6C4;
  --fluent-breadcrumb-bg-hover: #3B3A39;
  --fluent-accordion-header-color: #EDEBE9;
  --fluent-accordion-header-bg: #201F1E;
  --fluent-pager-color: #C8C6C4;
  --fluent-pager-bg: #201F1E;
  --fluent-pager-border: #3B3A39;
  --fluent-sortable-border: #3B3A39;
}

:root,
body[theme=dark] {
  --smart-primary: var(--fluent-theme-primary);
  --smart-primary-color: var(--fluent-theme-lighter-alt);
  --smart-secondary: var(--fluent-greys-white);
  --smart-secondary-color: var(--fluent-greys-grey190);
  --smart-error: var(--fluent-error-bg);
  --smart-error-color: var(--fluent-error-color);
  --smart-success: var(--fluent-success-bg);
  --smart-success-color: var(--fluent-success-color);
  --smart-info: var(--fluent-info-bg);
  --smart-info-color: var(--fluent-info-color);
  --smart-warning: var(--fluent-warning-bg);
  --smart-warning-color: var(--fluent-warning-color);
  --smart-light-rgb: hexToRGB(#EFF6FC);
  /* The r, g, and b components of the theme light color */
  --smart-light: #EFF6FC;
  /* The theme light color */
  --smart-light-color: #201F1E;
  /* Text color on top of a light background */
  --smart-dark-rgb: hexToRGB(#201F1E);
  /* The r, g, and b components of the theme dark color */
  --smart-dark: #201F1E;
  /* The theme dark color */
  --smart-dark-color: #EFF6FC;
  /* Text color on top of a dark background */
  --smart-white-rgb: hexToRGB(#ffffff);
  /* The r, g, and b components of the theme white color */
  --smart-white: #ffffff;
  /* The theme white color */
  --smart-white-color: #000000;
  /* Text color on top of a white background */
  --smart-black-rgb: hexToRGB(#000000);
  /* The r, g, and b components of the theme black color */
  --smart-black: #000000;
  /* The theme black color */
  --smart-black-color: #000000;
  /* Text color on top of a black background */
  --smart-font-size: 14px;
  /* Theme font-size */
  --smart-font-weight: 400;
  /* Theme font-weight */
  --smart-font-family: Segoe UI Variable, Segoe UI, sans-serif;
  /* Theme font-family */
  --smart-border-width: 1px;
  /* Theme border-width */
  --smart-border-radius: 2px;
  /* Theme border-radius */
  --smart-editor-height: 38px;
  /* Default height for editors */
  --smart-editor-label-padding: 10px;
  /* Default padding for inputs */
  /* Button - Default */
  --smart-button-text-transform: inherit;
  /* Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize. */
  /* Sets button's paddings. */
  /* Sets large button's paddings. */
  /* Sets large button's font size. */
  /* Sets small button's paddings. */
  /* Sets small button's font size. */
  --smart-button-very-small-padding: 1px 5px;
  /* Sets very small button's paddings. */
  --smart-button-very-small-font-size: 12px;
  /* Sets very small button's font size. */
  --smart-button-group-default-height: var(--smart-editor-height);
  --smart-check-box-default-size: 16px;
  /* Default size for the check box used in smartCheckBox and smartListItem. */
  --smart-color-panel-grid-mode-item-size: 20px;
  /* smartColorPanel item size */
  --smart-progress-bar-default-height: 7px;
  /* smartProgressBar default height */
  --smart-circular-progress-bar-fill-size: 20%;
  --smart-radio-button-default-size: 16px;
  /* Default size for the radio button. */
  --smart-slider-thumb-border-top-left-radimobile-menu-activatedus: 15px;
  /* Top-left border radius of smartSlider thumb */
  --smart-toast-info-background: #5bc0de;
  /* Background color for type info */
  --smart-toast-info-color: #fff;
  /* Text color for type info */
  --smart-toast-warning-background: #FFA800;
  /* Background color for type warning */
  --smart-toast-warning-color: #fff;
  /* Text color for type warning */
  --smart-scheduler-context-menu-max-height: calc(3 * var(--smart-scheduler-event-item-size));
  /* Context menu max-height */
  --smart-grid-cell-background-update: rgba(var(--smart-success-rgb), .3);
  --smart-scroll-bar-thumb-padding: 0px;
  --smart-pager-page-size-selector-width: 65px;
  --smart-accordion-item-expanded-offset: 0px;
  --smart-background: var(--fluent-background);
  /* The theme background color. The background color appears behind scrollable content.*/
  --smart-background-color: var(--fluent-background-color);
  /* Text color on top of a background background */
  --smart-scroll-button-size: 12px;
  --smart-scroll-bar-size: 15px;
  --smart-scroll-bar-thumb-border-top-right-radius: 6px;
  --smart-scroll-bar-thumb-border-top-left-radius: 6px;
  --smart-scroll-bar-thumb-border-bottom-left-radius: 6px;
  --smart-scroll-bar-thumb-border-bottom-right-radius: 6px;
  --smart-scroll-bar-thumb-size: 100%;
  --smart-scroll-bar-thumb-padding: 3px;
  --smart-scroll-bar-default-width: var(--smart-editor-width);
  --smart-scroll-bar-default-height: var(--smart-scroll-bar-size);
  --smart-scroll-bar-background: #fafafa;
  --smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
  --smart-scroll-bar-border: #F1F1F1;
  --smart-scroll-bar-thumb-background: #C1C1C1;
  --smart-scroll-bar-thumb-border: transparent;
}
:root smart-scroll-bar[aria-orientation=horizontal],
body[theme=dark] smart-scroll-bar[aria-orientation=horizontal] {
  --smart-scroll-button-size: 12px;
}

body:not([theme=dark]) {
  --smart-alternation-index0-color: #333;
  /* Alternation color for index0 */
  --smart-alternation-index0-border: #DEE2E6;
  /* Alternation border color for index0 */
  --smart-alternation-index0-background: var(--fluent-greys-grey20);
  /* Alternation background color for index0 */
  --smart-surface: var(--fluent-surface);
  --smart-surface-color: var(--fluent-surface-color);
  --smart-scheduler-event-color: var(--fluent-surface-color);
}

body[theme=dark] {
  --smart-alternation-index0-color: #fff;
  /* Alternation color for index0 */
  --smart-alternation-index0-border: #1E1E1E;
  /* Alternation border color for index0 */
  --smart-alternation-index0-background: #3E3E42;
  /* Alternation background color for index0 */
  --smart-surface: var(--fluent-surface);
  --smart-surface-color: var(--fluent-surface-color);
  --smart-scheduler-event-color: var(--fluent-surface-color);
  --smart-secondary-color: #201F1E;
}

html {
  font-size: 14px;
}

body {
  font-family: "Segoe UI", sans-serif;
}

.smart-animate.smart-ripple {
  animation: none;
}

.smart-toggle-box .smart-overlay {
  left: 0;
}

/* BUTTON */
.smart-grid-command-item,
smart-button,
smart-toggle-button,
smart-repeat-button {
  --smart-button-small-padding: 1px 14px;
  --smart-button-padding: 2px 15.5px;
  --smart-button-large-padding: 4px 16px;
  --smart-button-opacity-hover: unset !important;
  --smart-button-opacity-focus: unset !important;
  --smart-button-opacity-active: unset !important;
  --smart-border-radius: 2px !important;
  --smart-inner-border-color: transparent;
  padding: 2px !important;
  border-radius: var(--smart-border-radius);
}
.smart-grid-command-item button.smart-button,
.smart-grid-command-item a.smart-button,
smart-button button.smart-button,
smart-button a.smart-button,
smart-toggle-button button.smart-button,
smart-toggle-button a.smart-button,
smart-repeat-button button.smart-button,
smart-repeat-button a.smart-button {
  color: inherit !important;
  background-color: inherit !important;
  line-height: 1.5;
  letter-spacing: 0;
  border: 1px solid var(--smart-inner-border-color) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.smart-grid-command-item button.smart-button i,
.smart-grid-command-item a.smart-button i,
smart-button button.smart-button i,
smart-button a.smart-button i,
smart-toggle-button button.smart-button i,
smart-toggle-button a.smart-button i,
smart-repeat-button button.smart-button i,
smart-repeat-button a.smart-button i {
  font-size: 16px;
  line-height: 1;
}
.smart-grid-command-item.icon,
smart-button.icon,
smart-toggle-button.icon,
smart-repeat-button.icon {
  --smart-button-padding: 2px 5.5px !important;
}
.smart-grid-command-item.primary,
smart-button.primary,
smart-toggle-button.primary,
smart-repeat-button.primary {
  --smart-background: var(--fluent-btn-primary-bg);
  --smart-border: var(--fluent-btn-primary-bg);
  --smart-background-color: var(--fluent-btn-primary-color);
  --smart-ui-state-hover: var(--fluent-btn-primary-bg-hover);
  --smart-ui-state-border-hover: var(--fluent-btn-primary-bg-hover);
  --smart-ui-state-color-hover: var(--fluent-btn-primary-color);
  --smart-ui-state-active: var(--fluent-btn-primary-bg-active);
  --smart-ui-state-border-active: var(--fluent-btn-primary-bg-active);
  --smart-ui-state-color-active: var(--fluent-btn-primary-color);
  --smart-ui-state-focus: var(--fluent-btn-primary-bg);
  --smart-ui-state-border-focus: var(--fluent-btn-primary-bg);
  --smart-ui-state-color-focus: var(--fluent-btn-primary-color);
}
.smart-grid-command-item.primary[focus], .smart-grid-command-item.primary:focus,
smart-button.primary[focus],
smart-button.primary:focus,
smart-toggle-button.primary[focus],
smart-toggle-button.primary:focus,
smart-repeat-button.primary[focus],
smart-repeat-button.primary:focus {
  --smart-inner-border-color: var(--fluent-btn-primary-color);
}
.smart-grid-command-item.primary[disabled],
smart-button.primary[disabled],
smart-toggle-button.primary[disabled],
smart-repeat-button.primary[disabled] {
  background: var(--fluent-greys-grey20);
  border-color: var(--fluent-greys-grey20);
  color: var(--fluent-greys-grey90);
}
.smart-grid-command-item:not(.primary):not(.secondary):not(.text):not(.link), .smart-grid-command-item.secondary,
smart-button:not(.primary):not(.secondary):not(.text):not(.link),
smart-button.secondary,
smart-toggle-button:not(.primary):not(.secondary):not(.text):not(.link),
smart-toggle-button.secondary,
smart-repeat-button:not(.primary):not(.secondary):not(.text):not(.link),
smart-repeat-button.secondary {
  --smart-background: var(--fluent-btn-secondary-bg);
  --smart-border: var(--fluent-input-border);
  --smart-ui-state-hover: var(--fluent-btn-secondary-bg-hover);
  --smart-ui-state-border-hover: var(--fluent-input-border);
  --smart-ui-state-color-hover: var(--fluent-btn-secondary-color);
  --smart-ui-state-active: var(--fluent-btn-secondary-bg-active);
  --smart-ui-state-border-active: var(--fluent-input-border);
  --smart-ui-state-color-active: var(--fluent-btn-secondary-color);
  --smart-ui-state-focus: var(--fluent-btn-secondary-bg);
  --smart-ui-state-border-focus: var(--fluent-input-border);
  --smart-ui-state-color-focus: var(--fluent-btn-secondary-color);
}
.smart-grid-command-item:not(.primary):not(.secondary):not(.text):not(.link)[focus], .smart-grid-command-item:not(.primary):not(.secondary):not(.text):not(.link):focus, .smart-grid-command-item.secondary[focus], .smart-grid-command-item.secondary:focus,
smart-button:not(.primary):not(.secondary):not(.text):not(.link)[focus],
smart-button:not(.primary):not(.secondary):not(.text):not(.link):focus,
smart-button.secondary[focus],
smart-button.secondary:focus,
smart-toggle-button:not(.primary):not(.secondary):not(.text):not(.link)[focus],
smart-toggle-button:not(.primary):not(.secondary):not(.text):not(.link):focus,
smart-toggle-button.secondary[focus],
smart-toggle-button.secondary:focus,
smart-repeat-button:not(.primary):not(.secondary):not(.text):not(.link)[focus],
smart-repeat-button:not(.primary):not(.secondary):not(.text):not(.link):focus,
smart-repeat-button.secondary[focus],
smart-repeat-button.secondary:focus {
  --smart-inner-border-color: var(--fluent-btn-secondary-color);
}
.smart-grid-command-item:not(.primary):not(.secondary):not(.text):not(.link)[disabled], .smart-grid-command-item.secondary[disabled],
smart-button:not(.primary):not(.secondary):not(.text):not(.link)[disabled],
smart-button.secondary[disabled],
smart-toggle-button:not(.primary):not(.secondary):not(.text):not(.link)[disabled],
smart-toggle-button.secondary[disabled],
smart-repeat-button:not(.primary):not(.secondary):not(.text):not(.link)[disabled],
smart-repeat-button.secondary[disabled] {
  background: var(--fluent-greys-grey20);
  border-color: var(--fluent-greys-grey20);
  color: var(--fluent-greys-grey90);
}
.smart-grid-command-item.text,
smart-button.text,
smart-toggle-button.text,
smart-repeat-button.text {
  --smart-background: transparent;
  --smart-border: transparent;
  --smart-ui-state-hover: var(--fluent-btn-text-bg-hover);
  --smart-ui-state-border-hover: var(--fluent-btn-text-bg-hover);
  --smart-ui-state-color-hover: var(--fluent-btn-text-color-hover);
  --smart-ui-state-active: var(--fluent-btn-text-bg-active);
  --smart-ui-state-border-active: var(--fluent-btn-text-bg-active);
  --smart-ui-state-color-active: var(--fluent-btn-text-color-active);
  --smart-ui-state-focus: transparent;
  --smart-ui-state-border-focus: var(--fluent-input-border-hover);
  --smart-ui-state-color-focus: var(--fluent-btn-text-color);
}
.smart-grid-command-item.text[focus], .smart-grid-command-item.text:focus,
smart-button.text[focus],
smart-button.text:focus,
smart-toggle-button.text[focus],
smart-toggle-button.text:focus,
smart-repeat-button.text[focus],
smart-repeat-button.text:focus {
  border-color: var(--smart-ui-state-color-focus);
  --smart-inner-border-color: transparent;
}
.smart-grid-command-item.text[disabled],
smart-button.text[disabled],
smart-toggle-button.text[disabled],
smart-repeat-button.text[disabled] {
  background: var(--smart-background);
  border-color: var(--smart-background);
  color: var(--fluent-greys-grey90);
}
.smart-grid-command-item.text.icon:not([disabled]) i,
smart-button.text.icon:not([disabled]) i,
smart-toggle-button.text.icon:not([disabled]) i,
smart-repeat-button.text.icon:not([disabled]) i {
  color: var(--fluent-theme-primary);
}
.smart-grid-command-item.link,
smart-button.link,
smart-toggle-button.link,
smart-repeat-button.link {
  --smart-button-padding: 0 !important;
  padding: 1px !important;
  --smart-background: transparent;
  --smart-border: transparent;
  --smart-background-color: var(--fluent-theme-primary);
  --smart-ui-state-hover: transparent;
  --smart-ui-state-border-hover: transparent;
  --smart-ui-state-color-hover: var(--fluent-theme-dark);
  --smart-ui-state-active: transparent;
  --smart-ui-state-border-active: var(--fluent-input-border-hover);
  --smart-ui-state-color-active: var(--fluent-theme-primary);
  --smart-ui-state-focus: transparent;
  --smart-ui-state-border-focus: var(--fluent-input-border-hover);
  --smart-ui-state-color-focus: var(--fluent-theme-primary);
}
.smart-grid-command-item.link[hover] a, .smart-grid-command-item.link[hover] button, .smart-grid-command-item.link:hover a, .smart-grid-command-item.link:hover button,
smart-button.link[hover] a,
smart-button.link[hover] button,
smart-button.link:hover a,
smart-button.link:hover button,
smart-toggle-button.link[hover] a,
smart-toggle-button.link[hover] button,
smart-toggle-button.link:hover a,
smart-toggle-button.link:hover button,
smart-repeat-button.link[hover] a,
smart-repeat-button.link[hover] button,
smart-repeat-button.link:hover a,
smart-repeat-button.link:hover button {
  padding: 0;
  line-height: 1;
  text-decoration: underline;
}
.smart-grid-command-item.link[active], .smart-grid-command-item.link:active, .smart-grid-command-item.link[focus], .smart-grid-command-item.link:focus,
smart-button.link[active],
smart-button.link:active,
smart-button.link[focus],
smart-button.link:focus,
smart-toggle-button.link[active],
smart-toggle-button.link:active,
smart-toggle-button.link[focus],
smart-toggle-button.link:focus,
smart-repeat-button.link[active],
smart-repeat-button.link:active,
smart-repeat-button.link[focus],
smart-repeat-button.link:focus {
  border-color: var(--smart-ui-state-border-focus);
  --smart-inner-border-color: transparent;
}
.smart-grid-command-item.link[active] a, .smart-grid-command-item.link[active] button, .smart-grid-command-item.link:active a, .smart-grid-command-item.link:active button, .smart-grid-command-item.link[focus] a, .smart-grid-command-item.link[focus] button, .smart-grid-command-item.link:focus a, .smart-grid-command-item.link:focus button,
smart-button.link[active] a,
smart-button.link[active] button,
smart-button.link:active a,
smart-button.link:active button,
smart-button.link[focus] a,
smart-button.link[focus] button,
smart-button.link:focus a,
smart-button.link:focus button,
smart-toggle-button.link[active] a,
smart-toggle-button.link[active] button,
smart-toggle-button.link:active a,
smart-toggle-button.link:active button,
smart-toggle-button.link[focus] a,
smart-toggle-button.link[focus] button,
smart-toggle-button.link:focus a,
smart-toggle-button.link:focus button,
smart-repeat-button.link[active] a,
smart-repeat-button.link[active] button,
smart-repeat-button.link:active a,
smart-repeat-button.link:active button,
smart-repeat-button.link[focus] a,
smart-repeat-button.link[focus] button,
smart-repeat-button.link:focus a,
smart-repeat-button.link:focus button {
  padding: 0;
  line-height: 1;
  text-decoration: underline;
}
.smart-grid-command-item.link[disabled],
smart-button.link[disabled],
smart-toggle-button.link[disabled],
smart-repeat-button.link[disabled] {
  background: transparent;
  border-color: transparent;
  color: var(--fluent-greys-grey90);
}
.smart-grid-command-item.link.icon:not([disabled]) i,
smart-button.link.icon:not([disabled]) i,
smart-toggle-button.link.icon:not([disabled]) i,
smart-repeat-button.link.icon:not([disabled]) i {
  color: var(--fluent-theme-primary);
}
.smart-grid-command-item[disabled],
smart-button[disabled],
smart-toggle-button[disabled],
smart-repeat-button[disabled] {
  opacity: 1;
}

/* BUTTON GROUP */
.smart-button-group {
  --smart-button-small-padding: 5px 14px;
  --smart-button-padding: 6px 15.5px;
  --smart-button-large-padding: 8px 16px;
  --smart-button-opacity-hover: unset !important;
  --smart-button-opacity-focus: unset !important;
  --smart-button-opacity-active: unset !important;
  --smart-border-radius: 2px !important;
  --smart-inner-border-color: transparent;
  background: transparent;
  display: inline-flex;
  vertical-align: middle;
  --smart-button-group-default-height: auto;
  border: 0;
  border-radius: var(--smart-border-radius);
}
.smart-button-group .smart-button-group-items .smart-button-group-item {
  letter-spacing: 0;
  line-height: 1.5;
}
.smart-button-group .smart-button-group-items .smart-button-group-item:first-of-type {
  border-bottom-left-radius: var(--smart-border-top-left-radius);
  border-top-left-radius: var(--smart-border-top-left-radius);
}
.smart-button-group .smart-button-group-items .smart-button-group-item:last-of-type {
  border-bottom-right-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-left-radius);
}
.smart-button-group.primary {
  --smart-background: var(--fluent-theme-primary);
  --smart-border: var(--fluent-theme-primary);
  --smart-background-color: var(--fluent-greys-white);
  --smart-ui-state-hover: var(--fluent-theme-dark-alt);
  --smart-ui-state-border-hover: var(--fluent-theme-dark-alt);
  --smart-ui-state-color-hover: var(--fluent-greys-white);
  --smart-ui-state-active: var(--fluent-theme-dark);
  --smart-ui-state-border-active: var(--fluent-theme-dark);
  --smart-ui-state-color-active: var(--fluent-greys-white);
  --smart-ui-state-focus: var(--fluent-theme-primary);
  --smart-ui-state-border-focus: var(--fluent-theme-primary);
  --smart-ui-state-color-focus: var(--fluent-greys-white);
}
.smart-button-group.primary .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.primary .smart-button-group-items .smart-button-group-item:hover {
  background-color: var(--smart-ui-state-hover);
}
.smart-button-group.primary .smart-button-group-items .smart-button-group-item[focus] {
  background-color: var(--smart-ui-state-focus);
  color: var(--smart-ui-state-color-focus);
}
.smart-button-group.primary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.primary .smart-button-group-items .smart-button-group-item[active] {
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
.smart-button-group.secondary {
  --smart-background: var(--fluent-greys-white);
  --smart-border: var(--fluent-input-border);
  --smart-background-color: var(--fluent-greys-grey190);
  --smart-ui-state-hover: var(--fluent-greys-grey20);
  --smart-ui-state-border-hover: var(--fluent-input-border);
  --smart-ui-state-color-hover: var(--fluent-greys-grey190);
  --smart-ui-state-active: var(--fluent-greys-grey30);
  --smart-ui-state-border-active: var(--fluent-input-border);
  --smart-ui-state-color-active: var(--fluent-greys-grey190);
  --smart-ui-state-focus: var(--fluent-greys-white);
  --smart-ui-state-border-focus: var(--fluent-input-border);
  --smart-ui-state-color-focus: var(--fluent-greys-grey190);
}
.smart-button-group.secondary .smart-button-group-items .smart-button-group-item[hover], .smart-button-group.secondary .smart-button-group-items .smart-button-group-item:hover {
  background-color: var(--smart-ui-state-hover);
}
.smart-button-group.secondary .smart-button-group-items .smart-button-group-item[focus] {
  background-color: var(--smart-ui-state-focus);
  color: var(--smart-ui-state-color-focus);
}
.smart-button-group.secondary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.secondary .smart-button-group-items .smart-button-group-item[active] {
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
.smart-button-group.small {
  font-size: var(--smart-button-small-font-size);
  height: calc(var(--smart-button-group-default-height) + 3px);
}
.smart-button-group.small .smart-button-group-items .smart-button-group-item {
  padding: var(--smart-button-small-padding);
}
.smart-button-group.large {
  font-size: var(--smart-button-large-font-size);
  height: calc(var(--smart-button-group-default-height) + 20px);
}
.smart-button-group.large .smart-button-group-items .smart-button-group-item {
  padding: var(--smart-button-large-padding);
}

/* BADGE */
.smart-badge {
  padding: 5px 10px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  border-radius: 2px;
}

/* INPUT FIELDS */
.field-holder {
  margin-bottom: 1rem;
}
.field-holder .smart-check-box {
  margin-left: -8px;
}
.field-holder .smart-label,
.field-holder label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.field-holder smart-multiline-text-box .smart-label {
  margin: unset;
  display: none;
}
.field-holder smart-radio-button .smart-label,
.field-holder smart-radio-button label,
.field-holder smart-check-box .smart-label,
.field-holder smart-check-box label {
  margin-bottom: 0;
}
.field-holder > .smart-element {
  display: block;
  width: 100%;
}

smart-number-input:not([disabled]) .nav.smart-drop-down-button:hover,
smart-number-input:not([disabled]) .nav.smart-drop-down-button:active {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
}

smart-numeric-text-box.smart-numeric-text-box {
  border-radius: var(--smart-border-radius);
}

input.smart-input.smart-filter-panel-input:focus,
.input-group input:focus,
.input-group textarea:focus {
  border-color: var(--fluent-theme-primary);
}

smart-date-input.smart-date-input,
smart-text-area.smart-text-area,
smart-check-input.smart-check-input,
smart-multi-input.smart-multi-input,
smart-multi-combo-input.smart-multi-combo-input,
smart-time-input.smart-time-input,
smart-color-input.smart-color-input,
smart-date-range-input.smart-date-range-input,
smart-masked-text-box.smart-masked-text-box,
smart-numeric-text-box.smart-numeric-text-box,
smart-number-input.smart-number-input,
smart-password-input.smart-password-input,
smart-password-text-box.smart-password-text-box,
smart-date-time-picker.smart-date-time-picker,
smart-multiline-text-box.smart-multiline-text-box,
smart-input.smart-input {
  --smart-border-radius: 2px;
  --smart-background: var(--fluent-input-background);
  --smart-background-color: var(--fluent-type-primary);
  --smart-border: var(--fluent-input-border);
  --smart-outline: transparent;
  --smart-text-box-default-height: 34px;
  --smart-primary: var(--fluent-theme-primary);
  --smart-surface: var(--fluent-input-background);
  --smart-surface-color: var(--fluent-type-primary);
  border-color: var(--smart-border);
  border-radius: var(--smart-border-radius);
  outline: 1px solid var(--smart-outline);
}
smart-date-input.smart-date-input .smart-input-prefix,
smart-text-area.smart-text-area .smart-input-prefix,
smart-check-input.smart-check-input .smart-input-prefix,
smart-multi-input.smart-multi-input .smart-input-prefix,
smart-multi-combo-input.smart-multi-combo-input .smart-input-prefix,
smart-time-input.smart-time-input .smart-input-prefix,
smart-color-input.smart-color-input .smart-input-prefix,
smart-date-range-input.smart-date-range-input .smart-input-prefix,
smart-masked-text-box.smart-masked-text-box .smart-input-prefix,
smart-numeric-text-box.smart-numeric-text-box .smart-input-prefix,
smart-number-input.smart-number-input .smart-input-prefix,
smart-password-input.smart-password-input .smart-input-prefix,
smart-password-text-box.smart-password-text-box .smart-input-prefix,
smart-date-time-picker.smart-date-time-picker .smart-input-prefix,
smart-multiline-text-box.smart-multiline-text-box .smart-input-prefix,
smart-input.smart-input .smart-input-prefix {
  margin-right: -5px;
  margin-left: 5px;
}
smart-date-input.smart-date-input .smart-input-prefix i,
smart-text-area.smart-text-area .smart-input-prefix i,
smart-check-input.smart-check-input .smart-input-prefix i,
smart-multi-input.smart-multi-input .smart-input-prefix i,
smart-multi-combo-input.smart-multi-combo-input .smart-input-prefix i,
smart-time-input.smart-time-input .smart-input-prefix i,
smart-color-input.smart-color-input .smart-input-prefix i,
smart-date-range-input.smart-date-range-input .smart-input-prefix i,
smart-masked-text-box.smart-masked-text-box .smart-input-prefix i,
smart-numeric-text-box.smart-numeric-text-box .smart-input-prefix i,
smart-number-input.smart-number-input .smart-input-prefix i,
smart-password-input.smart-password-input .smart-input-prefix i,
smart-password-text-box.smart-password-text-box .smart-input-prefix i,
smart-date-time-picker.smart-date-time-picker .smart-input-prefix i,
smart-multiline-text-box.smart-multiline-text-box .smart-input-prefix i,
smart-input.smart-input .smart-input-prefix i {
  color: var(--fluent-theme-primary);
}
smart-date-input.smart-date-input .smart-input-suffix i,
smart-text-area.smart-text-area .smart-input-suffix i,
smart-check-input.smart-check-input .smart-input-suffix i,
smart-multi-input.smart-multi-input .smart-input-suffix i,
smart-multi-combo-input.smart-multi-combo-input .smart-input-suffix i,
smart-time-input.smart-time-input .smart-input-suffix i,
smart-color-input.smart-color-input .smart-input-suffix i,
smart-date-range-input.smart-date-range-input .smart-input-suffix i,
smart-masked-text-box.smart-masked-text-box .smart-input-suffix i,
smart-numeric-text-box.smart-numeric-text-box .smart-input-suffix i,
smart-number-input.smart-number-input .smart-input-suffix i,
smart-password-input.smart-password-input .smart-input-suffix i,
smart-password-text-box.smart-password-text-box .smart-input-suffix i,
smart-date-time-picker.smart-date-time-picker .smart-input-suffix i,
smart-multiline-text-box.smart-multiline-text-box .smart-input-suffix i,
smart-input.smart-input .smart-input-suffix i {
  color: var(--fluent-greys-grey130);
}
smart-date-input.smart-date-input .smart-input-prefix,
smart-date-input.smart-date-input .smart-input-suffix,
smart-text-area.smart-text-area .smart-input-prefix,
smart-text-area.smart-text-area .smart-input-suffix,
smart-check-input.smart-check-input .smart-input-prefix,
smart-check-input.smart-check-input .smart-input-suffix,
smart-multi-input.smart-multi-input .smart-input-prefix,
smart-multi-input.smart-multi-input .smart-input-suffix,
smart-multi-combo-input.smart-multi-combo-input .smart-input-prefix,
smart-multi-combo-input.smart-multi-combo-input .smart-input-suffix,
smart-time-input.smart-time-input .smart-input-prefix,
smart-time-input.smart-time-input .smart-input-suffix,
smart-color-input.smart-color-input .smart-input-prefix,
smart-color-input.smart-color-input .smart-input-suffix,
smart-date-range-input.smart-date-range-input .smart-input-prefix,
smart-date-range-input.smart-date-range-input .smart-input-suffix,
smart-masked-text-box.smart-masked-text-box .smart-input-prefix,
smart-masked-text-box.smart-masked-text-box .smart-input-suffix,
smart-numeric-text-box.smart-numeric-text-box .smart-input-prefix,
smart-numeric-text-box.smart-numeric-text-box .smart-input-suffix,
smart-number-input.smart-number-input .smart-input-prefix,
smart-number-input.smart-number-input .smart-input-suffix,
smart-password-input.smart-password-input .smart-input-prefix,
smart-password-input.smart-password-input .smart-input-suffix,
smart-password-text-box.smart-password-text-box .smart-input-prefix,
smart-password-text-box.smart-password-text-box .smart-input-suffix,
smart-date-time-picker.smart-date-time-picker .smart-input-prefix,
smart-date-time-picker.smart-date-time-picker .smart-input-suffix,
smart-multiline-text-box.smart-multiline-text-box .smart-input-prefix,
smart-multiline-text-box.smart-multiline-text-box .smart-input-suffix,
smart-input.smart-input .smart-input-prefix,
smart-input.smart-input .smart-input-suffix {
  display: flex;
  align-items: center;
  justify-content: center;
}
smart-date-input.smart-date-input .smart-input-prefix i,
smart-date-input.smart-date-input .smart-input-suffix i,
smart-text-area.smart-text-area .smart-input-prefix i,
smart-text-area.smart-text-area .smart-input-suffix i,
smart-check-input.smart-check-input .smart-input-prefix i,
smart-check-input.smart-check-input .smart-input-suffix i,
smart-multi-input.smart-multi-input .smart-input-prefix i,
smart-multi-input.smart-multi-input .smart-input-suffix i,
smart-multi-combo-input.smart-multi-combo-input .smart-input-prefix i,
smart-multi-combo-input.smart-multi-combo-input .smart-input-suffix i,
smart-time-input.smart-time-input .smart-input-prefix i,
smart-time-input.smart-time-input .smart-input-suffix i,
smart-color-input.smart-color-input .smart-input-prefix i,
smart-color-input.smart-color-input .smart-input-suffix i,
smart-date-range-input.smart-date-range-input .smart-input-prefix i,
smart-date-range-input.smart-date-range-input .smart-input-suffix i,
smart-masked-text-box.smart-masked-text-box .smart-input-prefix i,
smart-masked-text-box.smart-masked-text-box .smart-input-suffix i,
smart-numeric-text-box.smart-numeric-text-box .smart-input-prefix i,
smart-numeric-text-box.smart-numeric-text-box .smart-input-suffix i,
smart-number-input.smart-number-input .smart-input-prefix i,
smart-number-input.smart-number-input .smart-input-suffix i,
smart-password-input.smart-password-input .smart-input-prefix i,
smart-password-input.smart-password-input .smart-input-suffix i,
smart-password-text-box.smart-password-text-box .smart-input-prefix i,
smart-password-text-box.smart-password-text-box .smart-input-suffix i,
smart-date-time-picker.smart-date-time-picker .smart-input-prefix i,
smart-date-time-picker.smart-date-time-picker .smart-input-suffix i,
smart-multiline-text-box.smart-multiline-text-box .smart-input-prefix i,
smart-multiline-text-box.smart-multiline-text-box .smart-input-suffix i,
smart-input.smart-input .smart-input-prefix i,
smart-input.smart-input .smart-input-suffix i {
  font-size: 24px;
}
smart-date-input.smart-date-input:hover, smart-date-input.smart-date-input[hover],
smart-text-area.smart-text-area:hover,
smart-text-area.smart-text-area[hover],
smart-check-input.smart-check-input:hover,
smart-check-input.smart-check-input[hover],
smart-multi-input.smart-multi-input:hover,
smart-multi-input.smart-multi-input[hover],
smart-multi-combo-input.smart-multi-combo-input:hover,
smart-multi-combo-input.smart-multi-combo-input[hover],
smart-time-input.smart-time-input:hover,
smart-time-input.smart-time-input[hover],
smart-color-input.smart-color-input:hover,
smart-color-input.smart-color-input[hover],
smart-date-range-input.smart-date-range-input:hover,
smart-date-range-input.smart-date-range-input[hover],
smart-masked-text-box.smart-masked-text-box:hover,
smart-masked-text-box.smart-masked-text-box[hover],
smart-numeric-text-box.smart-numeric-text-box:hover,
smart-numeric-text-box.smart-numeric-text-box[hover],
smart-number-input.smart-number-input:hover,
smart-number-input.smart-number-input[hover],
smart-password-input.smart-password-input:hover,
smart-password-input.smart-password-input[hover],
smart-password-text-box.smart-password-text-box:hover,
smart-password-text-box.smart-password-text-box[hover],
smart-date-time-picker.smart-date-time-picker:hover,
smart-date-time-picker.smart-date-time-picker[hover],
smart-multiline-text-box.smart-multiline-text-box:hover,
smart-multiline-text-box.smart-multiline-text-box[hover],
smart-input.smart-input:hover,
smart-input.smart-input[hover] {
  --smart-border: var(--fluent-input-border-hover);
}
smart-date-input.smart-date-input[focus],
smart-text-area.smart-text-area[focus],
smart-check-input.smart-check-input[focus],
smart-multi-input.smart-multi-input[focus],
smart-multi-combo-input.smart-multi-combo-input[focus],
smart-time-input.smart-time-input[focus],
smart-color-input.smart-color-input[focus],
smart-date-range-input.smart-date-range-input[focus],
smart-masked-text-box.smart-masked-text-box[focus],
smart-numeric-text-box.smart-numeric-text-box[focus],
smart-number-input.smart-number-input[focus],
smart-password-input.smart-password-input[focus],
smart-password-text-box.smart-password-text-box[focus],
smart-date-time-picker.smart-date-time-picker[focus],
smart-multiline-text-box.smart-multiline-text-box[focus],
smart-input.smart-input[focus] {
  --smart-border: var(--fluent-theme-primary);
  --smart-outline: var(--fluent-theme-primary);
}
smart-date-input.smart-date-input[disabled],
smart-text-area.smart-text-area[disabled],
smart-check-input.smart-check-input[disabled],
smart-multi-input.smart-multi-input[disabled],
smart-multi-combo-input.smart-multi-combo-input[disabled],
smart-time-input.smart-time-input[disabled],
smart-color-input.smart-color-input[disabled],
smart-date-range-input.smart-date-range-input[disabled],
smart-masked-text-box.smart-masked-text-box[disabled],
smart-numeric-text-box.smart-numeric-text-box[disabled],
smart-number-input.smart-number-input[disabled],
smart-password-input.smart-password-input[disabled],
smart-password-text-box.smart-password-text-box[disabled],
smart-date-time-picker.smart-date-time-picker[disabled],
smart-multiline-text-box.smart-multiline-text-box[disabled],
smart-input.smart-input[disabled] {
  --smart-background: var(--fluent-input-disabled-background);
  --smart-background-color: var(--fluent-greys-grey90);
  --smart-border: var(--fluent-input-disabled-background);
  opacity: 1;
}
smart-date-input.smart-date-input[disabled] .smart-input-prefix i,
smart-date-input.smart-date-input[disabled] .smart-input-suffix i,
smart-text-area.smart-text-area[disabled] .smart-input-prefix i,
smart-text-area.smart-text-area[disabled] .smart-input-suffix i,
smart-check-input.smart-check-input[disabled] .smart-input-prefix i,
smart-check-input.smart-check-input[disabled] .smart-input-suffix i,
smart-multi-input.smart-multi-input[disabled] .smart-input-prefix i,
smart-multi-input.smart-multi-input[disabled] .smart-input-suffix i,
smart-multi-combo-input.smart-multi-combo-input[disabled] .smart-input-prefix i,
smart-multi-combo-input.smart-multi-combo-input[disabled] .smart-input-suffix i,
smart-time-input.smart-time-input[disabled] .smart-input-prefix i,
smart-time-input.smart-time-input[disabled] .smart-input-suffix i,
smart-color-input.smart-color-input[disabled] .smart-input-prefix i,
smart-color-input.smart-color-input[disabled] .smart-input-suffix i,
smart-date-range-input.smart-date-range-input[disabled] .smart-input-prefix i,
smart-date-range-input.smart-date-range-input[disabled] .smart-input-suffix i,
smart-masked-text-box.smart-masked-text-box[disabled] .smart-input-prefix i,
smart-masked-text-box.smart-masked-text-box[disabled] .smart-input-suffix i,
smart-numeric-text-box.smart-numeric-text-box[disabled] .smart-input-prefix i,
smart-numeric-text-box.smart-numeric-text-box[disabled] .smart-input-suffix i,
smart-number-input.smart-number-input[disabled] .smart-input-prefix i,
smart-number-input.smart-number-input[disabled] .smart-input-suffix i,
smart-password-input.smart-password-input[disabled] .smart-input-prefix i,
smart-password-input.smart-password-input[disabled] .smart-input-suffix i,
smart-password-text-box.smart-password-text-box[disabled] .smart-input-prefix i,
smart-password-text-box.smart-password-text-box[disabled] .smart-input-suffix i,
smart-date-time-picker.smart-date-time-picker[disabled] .smart-input-prefix i,
smart-date-time-picker.smart-date-time-picker[disabled] .smart-input-suffix i,
smart-multiline-text-box.smart-multiline-text-box[disabled] .smart-input-prefix i,
smart-multiline-text-box.smart-multiline-text-box[disabled] .smart-input-suffix i,
smart-input.smart-input[disabled] .smart-input-prefix i,
smart-input.smart-input[disabled] .smart-input-suffix i {
  color: var(--smart-background-color);
}
smart-date-input.smart-date-input.smart-validation-error,
smart-text-area.smart-text-area.smart-validation-error,
smart-check-input.smart-check-input.smart-validation-error,
smart-multi-input.smart-multi-input.smart-validation-error,
smart-multi-combo-input.smart-multi-combo-input.smart-validation-error,
smart-time-input.smart-time-input.smart-validation-error,
smart-color-input.smart-color-input.smart-validation-error,
smart-date-range-input.smart-date-range-input.smart-validation-error,
smart-masked-text-box.smart-masked-text-box.smart-validation-error,
smart-numeric-text-box.smart-numeric-text-box.smart-validation-error,
smart-number-input.smart-number-input.smart-validation-error,
smart-password-input.smart-password-input.smart-validation-error,
smart-password-text-box.smart-password-text-box.smart-validation-error,
smart-date-time-picker.smart-date-time-picker.smart-validation-error,
smart-multiline-text-box.smart-multiline-text-box.smart-validation-error,
smart-input.smart-input.smart-validation-error {
  margin-bottom: 0.75rem;
}
smart-date-input.smart-date-input.smart-validation-success:not(smart-check-box) > div.smart-container:after, smart-date-input.smart-date-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-text-area.smart-text-area.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-text-area.smart-text-area.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-check-input.smart-check-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-check-input.smart-check-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-multi-input.smart-multi-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-multi-input.smart-multi-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-multi-combo-input.smart-multi-combo-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-multi-combo-input.smart-multi-combo-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-time-input.smart-time-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-time-input.smart-time-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-color-input.smart-color-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-color-input.smart-color-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-date-range-input.smart-date-range-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-date-range-input.smart-date-range-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-masked-text-box.smart-masked-text-box.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-masked-text-box.smart-masked-text-box.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-numeric-text-box.smart-numeric-text-box.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-numeric-text-box.smart-numeric-text-box.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-number-input.smart-number-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-number-input.smart-number-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-password-input.smart-password-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-password-input.smart-password-input.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-password-text-box.smart-password-text-box.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-password-text-box.smart-password-text-box.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-date-time-picker.smart-date-time-picker.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-date-time-picker.smart-date-time-picker.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-multiline-text-box.smart-multiline-text-box.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-multiline-text-box.smart-multiline-text-box.smart-validation-error:not(smart-check-box) > div.smart-container:after,
smart-input.smart-input.smart-validation-success:not(smart-check-box) > div.smart-container:after,
smart-input.smart-input.smart-validation-error:not(smart-check-box) > div.smart-container:after {
  display: none;
}
smart-date-input.smart-date-input.smart-validation-success .smart-input, smart-date-input.smart-date-input.smart-validation-error .smart-input,
smart-text-area.smart-text-area.smart-validation-success .smart-input,
smart-text-area.smart-text-area.smart-validation-error .smart-input,
smart-check-input.smart-check-input.smart-validation-success .smart-input,
smart-check-input.smart-check-input.smart-validation-error .smart-input,
smart-multi-input.smart-multi-input.smart-validation-success .smart-input,
smart-multi-input.smart-multi-input.smart-validation-error .smart-input,
smart-multi-combo-input.smart-multi-combo-input.smart-validation-success .smart-input,
smart-multi-combo-input.smart-multi-combo-input.smart-validation-error .smart-input,
smart-time-input.smart-time-input.smart-validation-success .smart-input,
smart-time-input.smart-time-input.smart-validation-error .smart-input,
smart-color-input.smart-color-input.smart-validation-success .smart-input,
smart-color-input.smart-color-input.smart-validation-error .smart-input,
smart-date-range-input.smart-date-range-input.smart-validation-success .smart-input,
smart-date-range-input.smart-date-range-input.smart-validation-error .smart-input,
smart-masked-text-box.smart-masked-text-box.smart-validation-success .smart-input,
smart-masked-text-box.smart-masked-text-box.smart-validation-error .smart-input,
smart-numeric-text-box.smart-numeric-text-box.smart-validation-success .smart-input,
smart-numeric-text-box.smart-numeric-text-box.smart-validation-error .smart-input,
smart-number-input.smart-number-input.smart-validation-success .smart-input,
smart-number-input.smart-number-input.smart-validation-error .smart-input,
smart-password-input.smart-password-input.smart-validation-success .smart-input,
smart-password-input.smart-password-input.smart-validation-error .smart-input,
smart-password-text-box.smart-password-text-box.smart-validation-success .smart-input,
smart-password-text-box.smart-password-text-box.smart-validation-error .smart-input,
smart-date-time-picker.smart-date-time-picker.smart-validation-success .smart-input,
smart-date-time-picker.smart-date-time-picker.smart-validation-error .smart-input,
smart-multiline-text-box.smart-multiline-text-box.smart-validation-success .smart-input,
smart-multiline-text-box.smart-multiline-text-box.smart-validation-error .smart-input,
smart-input.smart-input.smart-validation-success .smart-input,
smart-input.smart-input.smart-validation-error .smart-input {
  padding-right: calc(1.5em + 0.75rem);
}
smart-date-input.smart-date-input.smart-validation-success.underlined[focus], smart-date-input.smart-date-input.smart-validation-success.outlined[focus], smart-date-input.smart-date-input.smart-validation-error.underlined[focus], smart-date-input.smart-date-input.smart-validation-error.outlined[focus],
smart-text-area.smart-text-area.smart-validation-success.underlined[focus],
smart-text-area.smart-text-area.smart-validation-success.outlined[focus],
smart-text-area.smart-text-area.smart-validation-error.underlined[focus],
smart-text-area.smart-text-area.smart-validation-error.outlined[focus],
smart-check-input.smart-check-input.smart-validation-success.underlined[focus],
smart-check-input.smart-check-input.smart-validation-success.outlined[focus],
smart-check-